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.15 (21 reviews)
Udemy
platform
English
language
Web Development
category
instructor
192
students
6.5 hours
content
Dec 2022
last update
$39.99
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

Description

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 / Railway

  • 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.

Content

Introduction

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
Logout
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

Overview
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

Overview
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

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

Deployment

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

Screenshots

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

Reviews

Dan
October 30, 2022
If you already have a decent (but by no means expert) understanding of React and Django, this is a really excellent course to understand how they link together and how to integrate some very useful libraries that you will likely use across many projects. The pace is very fast and there is only brief explanations, but I'm not sure what people expect in around 7 hours of content. The best way to learn is have the working code (which you will get) and experiment with it yourself.
Alexis
October 3, 2022
Good course and working but 2 things which could really be improved: 1. Voice. It is really like robot feeling with no emotion at all and after hours it can be really boring 2. Explanations. You definitively have knowledge of react before starting this course. May be add some pre-section to explain main concepts.
David
August 26, 2022
This course is helping me understand better how communication is between the front end and the back end.
Anisha
July 26, 2022
While it is nice that the course lecturer is creating a full stack web application from beginning to end, he really doesn't teach you anything. If you are a beginner in React, Django/Python, or both, then this course is not for you. If you already have some previous knowledge, then you might be okay. But don't expect to learn any concepts and how or why everything in this project is built the way that it is. The lecturer talks really fast, almost as if he sped his voice up slightly, and is pretty much typing code without really explaining why, simply just saying, "Then we do this, then this, now we have to make this and do this." Really tough to follow along for learning, but nice if you are looking for a quick, crash course on how to combine Django backend with React frontend. However, I would just recommend Googling and watching YouTube for this as you would actually learn way more.

Charts

Price

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

Rating

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
4495074
udemy ID
1/14/2022
course created date
5/4/2022
course indexed date
Bot
course submited by