Back to Senior Level

Django, React & GraphQL

Prerequisite

  • Use Django Channels on the backend
  • Use a PostgreSQL database
  • Use React & GraphQL for the frontend
  • Docker Compose

Requirements

You are tasked to create a minimal order tracking dashboard that enables listing orders as they are placed and supports marking them as “shipped” to remove them from the list. This should be a full-stack application that auto-generates order data and stores it in a PostgreSQL database. The backend will be a Django server that exposes a websocket to export new orders as they are added to the database. The frontend will be a React app that uses GraphQL subscriptions to pull order data and populate a table that updates in real time.

  • Backend
    • Order model
      • Orders should be tracked through a Django model.
      • It should contain these fields at a minimum: id, total_cost, items_purchased, purchased_on, shipping_address, is_shipped
    • Data Generation
      • The Order data should be automatically generated by a long-running or scheduled process (think Celery or Django-RQ) and use the Django ORM to create records.
      • The data generated should be sufficiently random but the is_shipped value should always start as False.
    • Orders Websocket
      • Requirement: Using Django Channels expose a websocket that provides JSON order information.
      • Output: Websocket response that sends JSON output for each order as it is added to the system
    • Shipping completed endpoint
      • Input: Order Id
      • Function: Mark is_shipped as True on an Order
      • Output: HTTP 200 response that sends JSON output of updated order.
  • Frontend
    • React App
      • Create a React frontend that makes use of the above endpoints. The UI can be sparse but should still look compelling.
    • GraphQL
      • Use a GraphQL subscription to retrieve data from the websocket endpoint and use GraphQL to call the API to mark orders as shipped.
    • Order list
      • The order list should show a row for each order that is not yet shipped and update as new orders are added.
      • Each order should have a checkbox that can be toggled to mark the order as shipped, after which it will be filtered out from the list.
      • Bonus Add a toggle that flips the order list to show only shipped orders.
    • CORS
      • There should be no CORS issues between frontend and backend. There should be no JS errors in the console on the frontend.

Deliverable

  • A docker-compose.yml file that defines all containers needed to run this locally
  • Unit/integration tests
  • A great README with instructions on how to run everything locally using Docker
  • A GitHub repo with read permissions given to GitHub users rafty8s,bsneider, omnipresent07, and barakstout (how to invite collaborators)