StringClass

React + Django: Build a Full-Stack Job Tracker

24 lessons. Connect React and a Django JSON API, protect account-owned data, test and prepare the application for deployment, then tackle 12 developer tickets.

Learners ready to connect a React interface to a Django backend.

Before you start: Basic React components, state and forms, plus Django models, views and migrations. Review the React and Django courses if needed.

Prerequisite refreshers: Build and Deploy an Interactive App with React · Build and Deploy a Real Web App with Django. Both are included with Course access and the Complete Bundle.

Try a free lesson

24 lessons · Local project tasks and downloadable checkpoints. 2 free lessons. No account needed for free previews.

What you will learn

  • Build a job tracker with accounts, a Django JSON API and server-owned records.
  • Handle validation, failed requests, stale responses and conflicting edits.
  • Test and prepare the application for deployment, then complete 12 local developer tickets.

Build the project on your computer

Get every lesson, local project task, and project download with Course access or the Complete Bundle. The first two lessons and starter are free. This course uses your local Python and Node.js installation.

Project downloads

← All courses and learning paths

Keep building: 12 developer tickets

Work through realistic bug reports and feature requests in independent local project copies. Each includes acceptance checks, hints, a worked solution, and saved progress. All tickets are included with Course access and the Complete Bundle.

Explore developer tickets

Course lessons

01Connect the browser, API, and databaseTrace one application record through React, HTTP, Django, and persistent storage.Free preview02Run the two local processes and verify the first requestStart the supplied health-only starter with the locked Python and Node dependencies.Free preview03Define a JSON contract before building screensSpecify record fields, response status codes, and the error envelope without accepting an owner from the client.Course04Model accounts and application recordsCreate the ownership relationship and migrate an application table without sharing another account's data.Course05Validate incoming data at the server boundaryReject malformed, incomplete, incorrectly typed, and invalid application requests with useful field errors.Course06Use sessions and CSRF through one browser originAcquire a masked CSRF token and protect every session-authenticated mutation.Course07Register, sign in, and sign out deliberatelyCreate independent tracker accounts using Django's password validation and session rotation.Course08Read only the current account's applicationsBuild a scoped list and detail endpoint with combined search, status filtering, and stable pagination.Course09Create a record and confirm the saved resultPersist a validated application with a server-assigned owner and a 201 response.Course10Update and remove records without overwriting newer workUse an integer version and a database transaction to detect conflicting writes.Course11Test the backend's important rejection pathsWrite tests proving rejected requests neither expose records nor mutate data.Course12Build a small, explicit React API clientCentralize JSON parsing, masked-token updates, cancellation, and useful HTTP failures.Course13Render the account boundary in ReactSeparate connecting, signed-out, and signed-in screens without flashing another account's list.Course14Display server-side search and paginationKeep the list's search, status, page, loading and error states consistent with the API response.Course15Build a controlled create form with field feedbackValidate a draft for immediate feedback while letting the server make the final decision.Course16Edit and remove with explicit confirmationLoad an existing record, retain its original version, and confirm destructive removal.Course17Ignore stale requests and clean up EffectsEnsure an older list or detail response cannot overwrite a newer screen.Course18Preserve work through failures and navigationKeep unsaved edits visible after network, validation, authentication and conflict failures.Course19Exercise the account and CSRF boundaries end to endCheck direct API requests as well as interface navigation for the two-account scenario.Course20Test React behavior at the user boundaryVerify delayed saves, retained drafts, cancellation and removal using labeled controls.Course21Rehearse the complete two-account browser journeyRun the built frontend against the real API through registration, CRUD, reload, and account isolation.Course22Move to PostgreSQL and rehearse data recoveryApply migrations to a dedicated PostgreSQL database and verify a restore without overwriting active data.Course23Build and prepare a single-origin releasePrepare built assets, secure settings, Gunicorn routing and a migration-aware rollback procedure.Course24Finish the capstone and start developer ticketsDemonstrate the complete contract, then plan an independent repair or enhancement with regression evidence.Course