Free Course Image Build a Full-Stack Web App

Free online course Build a Full-Stack Web App

Duration of the online course: 5 hours and 10 minutes

New

Build job-ready full-stack skills with a free course: create a Django REST backend and a React frontend, add CRUD, validation, and a polished UI.

In this free course, learn about

Set up a Django backend project and run initial migrations to create db.sqlite3
Configure CORS so a Vite/React app (localhost:5173) can call a Django API (localhost:8000)
Create a React frontend with Vite and structure it to work with a Django backend
Implement SPA navigation using React Router (routes, router provider, links/nav)
Build a navigation menu using Material UI components
Install and use core Material UI packages (@mui/material, @emotion/react, @emotion/styled)
Design Django models and apply schema changes with makemigrations/migrate
Create REST APIs with DRF using serializers, views/viewsets, and URL routing
Use an Axios instance to centralize baseURL, headers, and interceptors for API requests
Build reusable MUI forms; use option.id as select value for relational integrity in API payloads
Submit React forms with Formik; wire buttons to onSubmit to POST data to the backend
Add form validation with Yup and integrate it with Formik
Display backend data in a Material React Table; add a list endpoint for all records
Perform CRUD updates via HTTP methods: PUT/PATCH for edits and DELETE for removals (backend support required)

About the free online course

Turn a blank folder into a working full-stack web application by connecting a Python Django backend to a modern React frontend. This course is designed for learners who want practical backend development experience without staying stuck in theory. You will see how a real project comes together end to end: configuring the server, preparing the database, exposing clean APIs, and consuming them from a responsive user interface.

On the backend side, you will set up Django the right way, run the initial database setup, design models that represent real data, and apply changes safely through migrations. You will then build API endpoints using Django REST Framework so a separate frontend can fetch and update data reliably. Along the way you will understand what enables cross-origin requests in development so your frontend and backend can communicate smoothly during local testing.

On the frontend side, you will create a React application with Vite for a fast development workflow, then add page navigation with React Router so your app behaves like a multi-page product while staying a single-page application. You will also work with Material UI components to create a clean navigation menu and user-friendly forms, making the interface feel professional instead of purely functional.

Once the foundation is in place, you will wire the two layers together using Axios, including a reusable setup that keeps requests consistent and easy to maintain. You will implement complete CRUD features: creating records from React into Django, validating input with a dedicated schema-based approach, listing records in a rich data table, editing existing entries with the correct HTTP methods, and removing items through an API that supports targeted deletion.

By the end, you will have the confidence to build and iterate on your own full-stack projects, understand the responsibilities of backend APIs versus frontend presentation, and recognize the patterns that make web apps scalable and maintainable.

Course content

Video class: Full-Stack Django React App Tutorial #1: Setting up the Python Django Backend 12m
Exercise: Which step completes the initial Django backend setup by creating the default database tables and the db.sqlite3 file?
Video class: Full-Stack Django React App Tutorial #2: Setting up the React JS Frontend with Vite 11m
Exercise: What configuration step enables a React frontend (e.g., http://localhost:5173) to make requests to a Django backend (e.g., http://localhost:8000)?

Video class: Full-Stack Django React App Tutorial #3: Page Navigation with React Router 15m
Exercise: Which set of steps best describes how page navigation is enabled in a React front end using React Router?
Video class: Full-Stack Django React App Tutorial #4: Creating a Navigation Menu with Material UI Components 44m
Exercise: Which set of packages is installed first to start using Material UI components in the React frontend?

Video class: Full-Stack Django React App Tutorial #5: Create Database Models and Adding Data 18m
Exercise: After defining new Django models, which command applies the model changes to the database tables?
Video class: Full-Stack Django React App Tutorial #6: Create Backend APIs with Django Rest Framework (DRF) 22m
Exercise: In Django REST Framework, what are the three core components needed to create an API endpoint that a React frontend can consume?

Video class: Full-Stack Django React App Tutorial #7: Get Django API Data in our React JS Frontend using Axios 14m
Exercise: What is the main purpose of creating an Axios instance file (e.g., axios.jsx) in a React front end when working with a Django REST API?
Video class: Full-Stack Django React App Tutorial #8: Apply Styling and Adding Material UI forms 41m
Exercise: Why does the reusable SelectForm set each option’s value to option.id instead of option.name?

Video class: Full-Stack Django React App Tutorial #9: Create Records in Django Backend from the React Frontend 31m
Exercise: What change is needed in the React create page so clicking the button triggers Formik’s submission logic and posts data to the backend?
Video class: Full-Stack Django React App Tutorial #10: Form Validation with Yup 28m
Exercise: Which library is installed to add form validation rules to the React forms?

Video class: Full-Stack Django React App Tutorial #11: Show Django Database Data in a Material React Table 23m
Exercise: What change is needed in the backend to let the frontend display a table of all football clubs?

Video class: Full-Stack Django React App Tutorial #12: Edit Records in Django Backend from the React Frontend 24m
Exercise: When submitting edited form data to update an existing record in a Django REST + React app, which HTTP method should be used from the React frontend?
Video class: Full-Stack Django React App Tutorial #13: Delete Records in Django Backend from the React Frontend 19m
Exercise: Which backend change enables deleting a specific record via the API?

Learn aboutPython

Explore free online Python courses and build in-demand programming skills at your own pace. Learn Python basics, data analysis, automation, web development, and more through flexible beginner-friendly lessons. Enroll today, study from anywhere, and earn a free certificate to showcase your Python skills and boost your career.

Learn aboutReact JS

Explore the best free online React JS courses and learn to build fast, interactive web applications with hands-on lessons for beginners and aspiring developers. Study React components, hooks, state, props, routing, and modern front-end development at your own pace. Enroll today for free training and earn a certificate to showcase your React JS skills.

Learn aboutDjango

Explore free online Django courses with certificates and learn to build secure, scalable web applications using Python. Master Django fundamentals, models, views, templates, databases, APIs, authentication, and deployment through flexible lessons designed for beginners and aspiring developers. Start learning Django online for free and earn a certificate.

Free online courses on Full Stack Web Development

Learn aboutFull Stack Web Development

Explore free online Full Stack Web Development courses with certificates and learn to build modern, responsive websites and applications. Develop job-ready skills in HTML, CSS, JavaScript, front-end frameworks, back-end programming, databases, APIs, Git, and deployment through flexible, self-paced training for beginners and aspiring developers.