• Tom Dekan
  • Posts
  • 💡Setup typed Django with React (Architecture design)

💡Setup typed Django with React (Architecture design)

Author

Tom Dekan
August 17, 2025

After spending over a year building heavily with TypeScript and Next.js, I believe Django is much faster for building a full-stack app - particularly for a startup.

But type safety, which is central to TypeScript, is really powerful.

Here are my architecture notes for adding type safety to Django with React.

I also want types to automatically propagate from Django to React. I want to define models once in Django, then use the equivalent types immediately in React.

This automatic type propagation between frontend and backend is important so that when I change something in Django, the type-checker will immediately throw an error, showing me where to change the incorrect code in my React app.

Why is type safety useful?

Type safety really increases dev speed if you're doing anything beyond the smallest prototype. I don't see myself deploying anything but a throwaway system to production in the future.

Type safety removes an entire class of bugs. You get compile-time checks, IDE autocomplete, and safer refactors.

Architecture

Here is my rough overview of the architecture:

  1. Define data once in Django (Django models)

  2. Generate OpenAPI with Django Ninja.

  3. Convert the OpenAPI schema to TypeScript types on each change

  4. Use the types across React (TypeScript)

  5. Backend changes trigger type errors in the frontend if any problems

Diagram showing this process:

Example system overview

Here's another diagram showing a sample system:

Conclusion

Define once in Django. Generate the contract. Compile against it. When the backend changes, the frontend shows you what to fix.

Benefits: -> You move faster and ship with fewer bugs.

Plan complete - Next steps

That's the plan. I might create a full tutorial app, and maybe a video, on this shortly.

These are the technologies I'll likely use:

Hope you're having a great week ☀️

Tom.