Connect the browser, API, and database

Before you start

Use the preceding full-stack lesson or its project checkpoint. This integration course assumes basic React components/forms and Django models/views; the separate React and Django courses provide those foundations. Use fictional data.

Explanation

The existing React tracker keeps data in one browser. This course builds a separate version backed by Django: React owns the current screen and unsaved draft; Django owns authentication, validation, record ownership, and durable writes. A successful click is not yet a successful save. Only a successful API response confirms persistence.

The browser talks to relative /api/ routes. During development Vite proxies those requests to Django. In deployment both are served at one HTTPS origin. An origin is a scheme, hostname, and effective port; matching the hostname alone is insufficient. This arrangement lets Django session and CSRF protections work without teaching a second token system. The application is independent of StringClass's own accounts and database.

Worked example

Run in the project backend's Django shell. For database examples, first follow API.md to create a new disposable examples database; the included example_context helper supplies synthetic accounts and rolls its writes back. It never deletes existing data.

from urllib.parse import urlsplit
for address in ['http://127.0.0.1:5173/', 'http://127.0.0.1:8002/api/']:
    url = urlsplit(address)
    print(url.scheme, url.hostname, url.port)

Expected behavior

http 127.0.0.1 5173
http 127.0.0.1 8002

The snippet demonstrates this lesson's rule. The complete implementation and surrounding error handling are in the downloadable project; contextual setup is described in README.md and API.md.

Common mistakes

Treating frontend validation as authorization; mixing StringClass credentials with the teaching application; describing two ports as one origin.

Guided practice

1. Draw a POST request from the form to Django and a database write back to the response.
2. Read the project's README.md and API.md. Identify which process handles /api/session/.
3. Inspect backend/config/urls.py and frontend/vite.config.js; locate the two local ports.

Independent practice

Explain why changing only React state would lose an application after reload, and why localStorage cannot authorize a database record.

Recap

Trace one application record through React, HTTP, Django, and persistent storage. Explain the decision in your own words and retain the regression that would catch its failure.

References

Official documentation for this lesson.