Full Stack Web Development with React, MUI, Django, and DRF

Build and Deploy a Full Stack Web Application with React, Material UI, Django, and Django Rest Framework

4.50 (6 reviews)
Web Development
6.5 hours
Jul 2022
last update
regular price

What you will learn

Develop REST APIs using Django and Django Rest Framework

Develop Front End Apps using React

Combine Django & Django Rest Framework with React to develop full stack applications

Learn how to use Material UI

Learn how to use React Router

Form Validations

Typical CRUD (Create, Read, Update, Delete) operations in web applications

Filtering and Pagination

Display charts using React

Reset password feature

Deploy applications to the cloud

Integrate with Google reCAPTCHA


Welcome to the course!

This course uses various technologies including React, Material UI, Django, and Django Rest Framework to build a full stack web application.

We will use the technologies mentioned below when building the application

  • Django and Django Rest Framework

  • React (with hooks)

  • Material UI

  • React router

  • Formik

  • Testing APIs with Postman

  • SQLite (during local development)

  • Postgresql (during production)

  • Deployment on Heroku

  • etc.

We will be covering the following topics during development

  • Common operations like create, read, update, and delete

  • Create relationships between Django Models

  • Pagination, Filtering, and Ordering

  • Sign in and Sign up

  • API authentication

  • Custom Permission

  • Reset password via reset password email

  • Data aggregation with custom view sets

  • Visualization of aggregated data using charts

  • Dark Theme

  • Front End Form Validations

  • Usage of Context and hooks on React

  • Usage of Material UI components

  • Google reCAPTCHA integration

  • Environment Variables (for both local development and production)

  • etc.

This course is for you if

  • You have worked with React, Django, and Django Rest Framework before, and wants to learn how to build a full stack web application with these technologies

  • You have used React before and want to learn how to use Material UI

  • You want to have a template for building your own portfolio project

Please check out the free preview videos as well and you can try out the course risk-free as you can refund the course within 30 days, no questions asked.


Full Stack Web Development with React, MUI, Django, and DRF - Screenshot_01Full Stack Web Development with React, MUI, Django, and DRF - Screenshot_02Full Stack Web Development with React, MUI, Django, and DRF - Screenshot_03Full Stack Web Development with React, MUI, Django, and DRF - Screenshot_04



Course Project Demo
Tools Installation
General Guidelines on the Course
Course Resources

Django Project Setup, Base APIs Development

Project Setup
Modeling Overview
Custom User Model
Inspect Database Content
Start Developing APIs
Postman Collection
Testing with Postman
Commands to start the app
Recap (Optional)

Front End Setup, Integrate with Category APIs

Front End App Setup
Front End App Base Configurations
More on CORS
Categories Listing Page
Display Categories with Data from API
More on React hooks
Category Details Page
Create Category
Update Category
Delete Category
Color Box and Color Picker
Message Notification
Update Error Handling
Form Validations
Loading Indicator
More on useMemo and React Context
Fix Warnings
Command to start the app (Front End)
Formik Tutorial (Optional)
Recap (Optional)

Authentication Module

Add Authentication Module to Django
Postman Collection
Test New Endpoints
Update Category APIs
Retest Category APIs
More on Retest Category APIs (Optional)
Update username validation
Recap (Optional)

Integrate with Authentication Module

Sign Up Form
Integrate with register API
Sign In Form
Integrate with login API
Loading Indicator
Update Category APIs Integrations
Route Protection Overview
Auth Context
RequireAuth Route
RequireNotAuth Route
Layout and User Profile
Links Updates
Minor Adjustments / Clean Up
Minor Adjustments on Sign Up Page
More on the storage of authToken (optional)
Recap (Optional)

Tasks Module

Tasks API
Enable Pagination, Filtering, and Ordering
Postman Collection
Test Pagination, Filtering, and Ordering
Creating / Updating a task with a category that belongs to another user
Custom Permission
Front End Setup
Tasks Listing Page
Tasks Listing Page with API Integration
Task Details Page
Create Task
Update Task
Delete Task
Fix Custom Permission
Mark tasks as completed
Add Pagination Integration
Add Filters Integration
Update Cards to Display Priority Color
Update Cards Listing Layout
Ordering Fix
Fix Warnings
Routing Update
Refactor Task Details
Recap (Optional)

Dashboard Module

Postman Collection
Stats API
Chart API
More on aggregation on Django
Add Stat Cards
Add Pie Chart
Add Chart Filters
Recap (Optional)

Reset Password Module

Postman Collection
APIs Configuration
Request Reset Password Page
Reset Password Confirm Page
Sending Actual Emails
Update App to use Environment Variables
Information on next lesson
Using Custom Domain to Send Emails
Google reCAPTCHA Setup
Google reCAPTCHA Integration
React Environment Variables
Official Doc on how to use environment variables on React
Notes on API Keys
Recap (Optional)

Final Touch

Fixing React App Warnings
Bug Fixing on Djoser password reset confirm retype
Register Models to Admin
Dark Theme
Build React App


Deployment Setup
Notes on installation of packages
First Deployment
Deployment Updates
Fixing Admin Bug



Full Stack Web Development with React, MUI, Django, and DRF - Price chart


Full Stack Web Development with React, MUI, Django, and DRF - Ratings chart

Enrollment distribution

Full Stack Web Development with React, MUI, Django, and DRF - Distribution chart
udemy ID
course created date
course indexed date
course submited by