CF

Django with React | An Ecommerce Website

18h 6m 7s
English
Paid

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.

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

About the Author: Brad Traversy

Brad Traversy thumbnail

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

Watch Online 84 lessons

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

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
Before starting this course, participants should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with React and Redux is beneficial as the course includes setting up React and implementing Redux for state management. Knowledge of Python and Django will also be helpful as the backend is built using Django.
What will I build by the end of this course?
By the end of the course, you'll have constructed a fully functional eCommerce platform. This includes implementing a shopping cart, user authentication, product management, and payment processing using technologies like React, Redux, Django, and Postgres. You will also learn to integrate PayPal for processing payments.
Who is the target audience for this course?
This course is aimed at developers who are interested in building a full-stack web application using modern technologies. It is ideal for those looking to expand their skills in React, Redux, and Django, especially if they have a specific interest in eCommerce platforms.
How does the depth of this course compare to other similar courses?
This course provides a detailed exploration of building an eCommerce platform from scratch. It covers both frontend and backend development extensively, from setting up React and implementing Redux, to building and securing a Django backend with JWT authentication. The course also includes lessons on integrating payment systems like PayPal, which may not be covered in less comprehensive courses.
What specific tools and platforms are used in this course?
The course utilizes several key tools and platforms, including React for building the frontend of the application, Redux for state management, Django for backend development, and Postgres as the database. Additionally, tools like JSON Web Tokens (JWT) for authentication and PayPal for payment processing are covered.
What topics are not covered in this course?
The course does not cover advanced topics such as search engine optimization (SEO) for eCommerce sites, extensive UI/UX design principles, or scaling applications for high traffic. It focuses primarily on the technical aspects of building and managing an eCommerce platform using the specified technologies.
What is the expected time commitment for completing this course?
The course consists of 84 lessons, and while the total runtime isn't specified, students should expect to dedicate several weeks to complete the material, depending on their prior experience and the pace at which they work through the lessons. Hands-on practice and building the project alongside the lessons will also require additional time beyond simply watching the videos.