Django with React | An Ecommerce Website

18h 6m 7s
English
Paid

Course description

Build an eCommerce platform from the ground up with React, Redux, Django & Postgres. In this course, we will build a completely customized eCommerce / shopping cart application from scratch using Django & REACT with the following functionality...

Read more about the course

  • Full featured shopping cart

  • Product reviews and ratings

  • Top products carousel

  • Product pagination

  • Product search feature

  • User profile with orders

  • Admin product management

  • Admin user management

  • Admin Order details page

  • Mark orders as delivered option

  • Checkout process (shipping, payment method, etc)

  • PayPal / credit card integration

This is not a documentation-type course. This is a jump in and get your hands dirty course where by the end, you have an actual real-world project to use and put on your portfolio. You will learn the following by completing this course..

  • React with Functional Components & Hooks

  • React router

  • React-Bootstrap UI library

  • How to structure components

  • Component level state & props

  • Managing global state with Redux (Actions & Reducers)

  • Using Redux state in components (useDispatch & useSelector)

  • Creating an extensive back end with Express

  • JWT authentication (JSON web tokens)

  • Custom error handler

  • Integrating the PayPal API

  • Project deployment

  • Much more!

This project is a collaboration with Brad Traversy where we will be taking his original MEARN Stack ecommerce course and building it out with a Django backend instead of Node, JS & Express. Brad & I decided it would be fun to remake the exact same project with a Django backend/API and connect it to the same React frontend/design.

My hope is that you learn how not to only build out this application but add on your own features to it. We learn best by building & customizing our own projects.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 84 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction

All Course Lessons (84)

#Lesson TitleDurationAccess
1
Introduction Demo
03:46
2
ProShop Demo & Prerequisites
10:05
3
Resources & Environment
05:24
4
A Message From Brad Traversy
01:33
5
React Setup
07:54
6
Reach-Bootstrap Setup, Header & Footer Components
17:29
7
HomeScreen Product Listing
13:04
8
Rating Component
07:35
9
Implementing React Router
07:07
10
Product Details Screen
13:30
11
Frontend/Backend Workflow
03:39
12
Building The Backend
20:47
13
Fetching Data
12:51
14
Database Setup & Admin Panel
06:33
15
Modeling Our Data
27:03
16
Product Image Field
02:24
17
Static Files
05:41
18
Serializing Data
07:33
19
An Overview of Redux
05:24
20
Create Redux Store
06:51
21
Product List Reducer & Action
13:32
22
Bringing Redux Intro Home Screen
06:50
23
Message & Loader Component
05:41
24
Product Details Reducer & Action
12:00
25
Qty Select & Add To Cart
11:18
26
Cart Reducer & Action
14:31
27
Add To Cart Functionality
09:19
28
Cart Screen
20:54
29
Remove Items From Cart
04:41
30
JSON Web Tokens Overview
05:23
31
Postman Overview
05:38
32
JSON Web Token Installation & Setup
09:51
33
JWT Customization
06:04
34
User Serializer
18:02
35
Protected Routes
07:26
36
Register User
10:50
37
Login With Email
08:35
38
URL's & Views Cleanup
10:27
39
User Login Reducer & Action
13:58
40
User Login Screen & Functionality
20:35
41
User In Navbar & Logout
08:42
42
User Register Reducer, Action & Screen
16:01
43
Update Profile Endpoint
08:19
44
Profile Screen & Get User Details
18:17
45
Update User Profile
13:59
46
User Details Bug Fix
03:24
47
Shipping Screen & Save Address
19:32
48
Checkout Steps Component
05:30
49
Payment Screen & Save Payment Method
13:07
50
Place Order Screen
24:18
51
Order View & URL
20:59
52
Create Order
25:42
53
Get Order By Id Endpoint
08:22
54
Order Details Reducer & Action
06:22
55
Order Screen
17:20
56
Update To Paid Endpoint
02:43
57
Order Pay Reducer & Action
05:02
58
PayPal Payments
20:18
59
Orders In Profile Page
21:24
60
User List Reducer, Action & Screen
28:58
61
Admin User Delete
11:17
62
Get User By ID & Update User Endpoints
06:44
63
User Edit Screen & Get User Details
15:48
64
Update User Functionality
12:14
65
Admin Product List
09:56
66
Delete Products
11:26
67
Create & Update Products Endpoints
12:30
68
Admin Create Product
13:39
69
Product Edit Screen
13:23
70
Edit Product Functionality
13:44
71
Product Image Upload
15:01
72
Admin Order List
16:17
73
Mark Order As Delivered
15:34
74
Create Review Endpoint
18:50
75
Frontend Product Reviews
29:43
76
Product Search
15:02
77
Pagination
26:35
78
Product Carousel
19:00
79
Merging React Files With Django Project
08:15
80
Adding HashRouter
04:22
81
Switching to Postgres Database
30:54
82
Adding Product Images to AWS S3 Bucket
15:24
83
Deploying To Heroku
45:45
84
Connecting A Custom Domain Name
14:37

Unlock unlimited learning

Get instant access to all 83 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Data fetching with React Server Components

Data fetching with React Server Components

Sources: Build UI
Since its release 10 years ago, React's core APIs have remained surprisingly stable. The original component boundary that supports state and lifecycle methods still works to thi...
1 hour 15 minutes 56 seconds
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Sources: udemy
Full Stack introduction to HATEOAS. In this course, you will learn the core concepts of HATEOAS as well as how to leverage this on a ReactJS Application. HATEOAS stands for: Hyp...
5 hours 51 minutes 37 seconds
Redux

Redux

Sources: ui.dev (ex. Tyler McGinnis)
There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme. First, you'll start off by buildin...
7 hours 13 minutes 23 seconds
Build and Deploy a SaaS AI Agent Platform

Build and Deploy a SaaS AI Agent Platform

Sources: Code With Antonio
In this video course, you will create a video call application with AI support from scratch. You will learn how to set up real-time video communication...
13 hours 24 minutes 14 seconds
React Router v4

React Router v4

Sources: ui.dev (ex. Tyler McGinnis)
For good reason, React Router is the most popular 3rd party library in the React ecosystem. If you're using React, odds are you're also using React Router. React Router v4 intro...
6 hours 44 minutes 1 second