Project structure · Full stack
Django with React project structure
Opens with creditsA Django and Django REST framework backend in backend/ and a Vite React TypeScript app in frontend/, in one repository. The browser always sees one origin: Vite proxies /api in development and Django serves the built React app in production, so login is a normal Django session protected by its CSRF cookie, and TypeScript types are generated from the DRF schema. For students who know a bit of Django and a bit of React and want to see how the two halves fit together, from two scaffolds to one tested, deployable app.
Curated by Tauseef FayyazIntermediate144 files and foldersDjango 6.1, Django REST framework 3.18, drf-spectacular 0.30Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you39 files and folders
- 2GrowingWhat a real app with features and tests adds+63 files and folders
- ProductionWhat running it for real users adds+21 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+21 files and foldersOpens with credits
How it is organised
- Two folders, two toolchains: `backend/` is a normal uv and Django project, `frontend/` a normal Vite project. Each half follows its own conventions and tutorials still apply.
- One origin, always. Vite proxies `/api` to Django in development and Django serves the built React app in production, so the browser never makes a cross-origin call and you never need CORS.
- The session cookie is the login. Django sets an HttpOnly `sessionid`; React reads the `csrftoken` cookie and sends it back as `X-CSRFToken` on every unsafe request. No token is ever stored in JavaScript.
- The schema is the contract. drf-spectacular writes `schema.yml` from the serializers, openapi-typescript turns it into types, and CI fails if either generated file is stale.
- Mirror the features: `backend/orders` and `frontend/src/features/orders` belong together, so one pull request can change both.
- Enforce everything on the server. React hides buttons for convenience; querysets and permissions decide what anyone can actually read or change.
- Ship one image. The Docker build compiles the frontend, `collectstatic` picks up its assets and Gunicorn serves everything, so the UI and the API it expects always deploy together.
- Test each half alone, then together: pytest for the API, Vitest with MSW for components, a few Playwright journeys through the real cookie and proxy, and contract tests on the schema at Expert.
At the top of the project
Open one in the explorer for the full story
- shop/
- .git/Git history for both halves, created with `git init` at the root.
- .gitignoreRoot ignore rules for the backend: .venv, .env, db.sqlite3, staticfiles, caches.
- README.mdHow to run both halves, which port to open, and how to regenerate the API types.
- backend/The Django project: its own pyproject, virtual environment, apps and tests.12 inside
- frontend/The React app created by `npm create vite@latest frontend -- --template react-ts`.14 inside
- Makefile`make -j2 dev` runs Django and Vite together; `make types` regenerates the schema and types.
- compose.yamlPostgreSQL for local development; later the built app image for e2e tests.
- .editorconfigIndentation rules for Python (4 spaces) and TypeScript, JSON and YAML (2 spaces).
- .pre-commit-config.yamlRuns Ruff on backend files and Oxlint on frontend files before each commit.
- shop.code-workspaceA VS Code multi-root workspace with backend and frontend as separate roots.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with Django with React.
- Roadmap· Django and ReactFull stack development roadmapBuild and ship whole web apps
- Roadmap· PythonBackend development roadmapAPIs, databases, auth, deploys
- Roadmap· ReactFrontend development roadmapHTML, CSS, JavaScript and a framework
- Roadmap· PlaywrightQA and test automation roadmapManual testing to automated suites
- Cheat sheetFull stack development cheat sheetBuild and ship whole web apps.
- Cheat sheetBackend development cheat sheetAPIs, databases, auth, deploys.
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- FYP idea· BeginnerRent Ledger and Tenant Portal for Small LandlordsA web app for small landlords and property caretakers with a few houses, flats or shops to track agreements, monthly rent with yearly increments, utility bills, security deposits and repair requests, with a simple tenant portal. A beginner-friendly final year project in real estate and property management.
- FYP idea· IntermediateApproval Workflow Engine with Escalations for Small OfficesAn approval workflow engine for small offices, schools and NGOs that turns purchase requests, leave, reimbursements and document sign-offs into tracked flows with deadlines, escalations and email or WhatsApp-style reminders. A no-code automation final year project with a durable workflow runtime and an audit trail.
See 9 moreShow fewer
- FYP idea· IntermediateWeight-Sensing Stock Bins for Pharmacy and Spare Parts ShelvesA final year project that builds load cell stock bins for pharmacies, spare parts shops and workshop stores: each bin converts weight to item count, flags low stock and logs every pick. A small web app turns the readings into reorder lists, so owners stop running out of fast movers and stop counting shelves by hand.
- QuestionWhat should I learn to become a web developer, and in what order?Learn the web platform first (HTML, CSS, JavaScript, how HTTP works), then one frontend framework, then a backend with a database, and build a real project at each stage. If you already know WordPress, you are not starting over: your HTML, CSS and PHP experience transfers.
- QuestionI understand tutorials but cannot build anything myself. Why does coding feel so different when I am alone?Tutorials train recognition, not production. When you follow along, someone else makes every decision. Building alone requires you to break a problem down and make choices, which is a separate skill. Build it with small projects, planning on paper first, and a rule to struggle before you look anything up.
- QuestionHow do I build a developer portfolio as a beginner with nothing to show?Start with two or three small but complete projects that solve a real problem, each with a clear README, screenshots and a live link or easy run steps. Put them on a simple one-page site or a tidy GitHub profile. Depth and finish matter far more than the number of projects or a fancy design.
- Resource· GuideDjango Tutorial (official)Django's official eight part tutorial, which builds a small polls app while covering projects and apps, models and the ORM, the admin, views and templates, forms and generic views, automated testing, static files and admin customisation. It is accurate, updated with each Django release (the stable docs were for Django 6.1 in September 2026) and teaches the conventions the rest of the docs assume.
- Resource· GuideDjango REST FrameworkThe official documentation for Django REST framework (DRF), the standard toolkit for building web APIs with Django. A quickstart and a multi part tutorial cover serializers, requests and responses, class based views, authentication and permissions, relationships and hyperlinked APIs, viewsets and routers, and the API guide documents pagination, filtering, throttling, versioning and schemas. For Django developers building JSON APIs.
- Resource· GuideReact DocumentationThe official React documentation at react.dev is a full course as well as a reference. Its Learn track moves from a quick start through describing the UI, adding interactivity, managing state and escape hatches, with interactive sandboxes and challenges on nearly every page. It suits anyone learning React and any React developer whose habits come from older class-based tutorials, and it should be read before paying for a React course.
- Resource· GuideVite GuideThe official guide to Vite, the dev server and build tool behind most new React, Vue, Svelte and other frontend projects. It explains scaffolding a project, the fast dev server and hot module replacement, static assets, environment variables and modes, plugins, the dev server proxy, production builds, deployment, server-side rendering and backend integration. It suits frontend developers who want env files, asset handling and builds to stop being a mystery when something breaks.
- Resource· GuideThe TypeScript HandbookThe TypeScript Handbook is the official, free guide to TypeScript's type system from the TypeScript team, written for working programmers and kept current with each release. It covers everyday types, narrowing, functions, object types, generics, type manipulation, classes and modules, and it is designed to be read in a few hours. It suits JavaScript developers adopting TypeScript and anyone who writes types by copying patterns without understanding them.
Checked against 19 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- Django tutorial part 1 (startproject, startapp)
- Django: How to use CSRF protection (AJAX)
- Django settings: CSRF_TRUSTED_ORIGINS
- Django: Customizing authentication (custom user model)
- Django deployment checklist
- Django REST framework: Authentication (SessionAuthentication and CSRF)
- drf-spectacular documentation
- django-cors-headers
- WhiteNoise: Using WhiteNoise with Django
- django-allauth headless
- Vite guide: Scaffolding your first Vite project
- Vite: server.proxy
- Vite: base (public base path)
- openapi-typescript
- openapi-fetch middleware
- TanStack Query: React overview
- Playwright: webServer
- uv: Using uv in Docker
- Dependabot: supported ecosystems (uv, npm)
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
- Next.js App Router Best PracticesNext.js 16 App Router best practices: Server Components, Cache Components and use cache, secure Server Actions, proxy.ts, metadata and images.
- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
- Web Application Security ChecklistA practical web application security checklist built on the OWASP Top 10:2025 and ASVS 5.0, with a severity and a way to verify every check.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com