Full Stack Web Development Course with React, Django and PostgreSQL

Explain how the browser, React app, API and database fit together and set up a project like a team would.

• The parts of a full-stack app and how data flows between them
• Planning features as tickets with clear 'done' criteria
• Designing API endpoints before writing code
• Repository layout: one repo or separate front-end and back-end repos
• Git branches, pull requests and code review habits
• Local setup with .env files

GitGitHubGitHub ProjectsVS Code

Design a database schema for a real project and build it with Django models.

• Designing schemas for real projects: users, posts, products, orders
• One-to-many and many-to-many relationships
• Django ORM models and migrations
• Seed data for development
• Indexes and avoiding slow queries
• Relational vs document databases (PostgreSQL vs MongoDB) in brief

PostgreSQLDjango ORMpgAdmin

Practice: Schema and models for a small online store

Build a documented REST API that a front-end can rely on.

• Serializers, ViewSets and routers
• Validation and clear error responses
• Pagination, filtering and search
• File and image uploads
• API documentation with an OpenAPI schema

DjangoDjango REST FrameworkPostman

Practice: Products, cart and orders API

Add secure sign-up and login across the API and the React app.

• Session-based login compared with JWT
• Password hashing and Django's auth system
• Storing tokens: httpOnly cookies compared with localStorage, and the XSS risk
• CSRF protection when using cookies
• Access and refresh tokens
• Protected routes in React and permissions in the API
• Password reset by email

Django authdjangorestframework-simplejwt

Build a React front-end that talks to your Django API reliably.

• An API client with fetch or Axios
• CORS: what it is and how to configure it with django-cors-headers
• Environment variables in Vite for the API URL
• Loading, empty and error states, and showing server validation errors in forms
• Caching server data with TanStack Query

ReactViteReact RouterAxiosTanStack Query

Practice: Storefront and cart connected to your API, with login

Write tests that catch bugs before your users do.

• API tests with Django's test client or pytest
• Component tests with Vitest and React Testing Library
• Linting and formatting with ESLint, Prettier and a Python formatter
• Reviewing pull requests and responding to review comments

pytestVitestReact Testing LibraryESLintPrettier

Ship your app to the internet and re-deploy it safely with every change.

• Deploying React to Vercel or Netlify
• Deploying Django to Render or Railway with a managed PostgreSQL database
• Environment variables and secrets in production
• Production settings, static files and database migrations
• Custom domain and HTTPS
• GitHub Actions: run tests on every pull request
• Docker basics (optional)

VercelNetlifyRenderRailwayGitHub ActionsDocker

Add live updates such as chat or notifications to a full-stack app.

• HTTP requests compared with WebSocket connections
• Django Channels and a Redis channel layer
• Using WebSockets from React
• Socket.IO with Node.js as a common alternative
• Authentication and scaling basics for real-time apps

Django ChannelsRedis

Practice: A chat room or live notifications feed

Deliver a production-style project as part of a team, the way companies work.

• Sprint planning, tickets and daily standups
• Working in an existing codebase
• Pull requests, code review and documentation
• Working from client requirements and reporting progress
• Demo and project walkthrough

Practice: A full-stack team project built over a sprint, with a mentor as tech lead