Django with React | An Ecommerce Website

Django with React | An Ecommerce Website

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 16.5 Hours | 8.32 GB


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.

What you’ll learn

  • Build an Ecommerce website using Django with React
  • Full featured shopping cart with PayPal & credit/debit payments
  • Product rating & review system
  • An actual real-world project built in a linear and progressive manner
  • Admin area to manage customers, products & orders
  • Product search, carousel, pagination & more


+ Table of Contents

Introduction
1 Introduction
2 ProShop Demo & Prerequisites
3 Resources & Environment
4 A Message From Brad Traversy

Starting The Front End
5 React Setup
6 Reach-Bootstrap Setup, Header & Footer Components
7 HomeScreen Product Listing
8 Rating Component
9 Implementing React Router
10 Product Details Screen

Serving & Fetching Data From Django
11 FrontendBackend Workflow
12 Building The Backend
13 Fetching Data
14 Database Setup & Admin Panel
15 Modeling Our Data
16 Product Image Field
17 Static Files
18 Serializing Data

Implementing Redux For State Management
19 An Overview of Redux
20 Create Redux Store
21 Product List Reducer & Action
22 Bringing Redux Intro Home Screen
23 Message & Loader Component
24 Product Details Reducer & Action

Adding To Shopping Cart
25 Qty Select & Add To Cart
26 Cart Reducer & Action
27 Add To Cart Functionality
28 Cart Screen
29 Remove Items From Cart

Backend User Authentication
30 JSON Web Tokens Overview
31 Postman Overview
32 JSON Web Token Installation & Setup
33 JWT Customization
34 User Serializer
35 Protected Routes
36 Register User
37 Login With Email
38 URL’s & Views Cleanup

Front End User Authentication
39 User Login Reducer & Action
40 User Login Screen & Functionality
41 User In Navbar & Logout
42 User Register Reducer, Action & Screen
43 Update Profile Endpoint
44 Profile Screen & Get User Details
45 Update User Profile
46 User Details Bug Fix

Checkout Process (Part 1)
47 Shipping Screen & Save Address
48 Checkout Steps Component
49 Payment Screen & Save Payment Method
50 Place Order Screen
51 Order View & URL
52 Create Order

Checkout Process (Part 2)
53 Get Order By Id Endpoint
54 Order Details Reducer & Action
55 Order Screen
56 Update To Paid Endpoint
57 Order Pay Reducer & Action
58 PayPal Payments
59 Orders In Profile Page

Admin Screen (Part 1)
60 User List Reducer, Action & Screen
61 Admin User Delete
62 Get User By ID & Update User Endpoints
63 User Edit Screen & Get User Details
64 Update User Functionality

Admin Screen (Part 2)
65 Admin Product List
66 Delete Products
67 Create & Update Products Endpoints
68 Admin Create Product
69 Product Edit Screen
70 Edit Product Functionality
71 Product Image Upload
72 Admin Order List
73 Mark Order As Delivered

Product Reviews, Search & More
74 Create Review Endpoint
75 Frontend Product Reviews
76 Product Search
77 Pagination
78 Product Carousel

Getting Ready For Deployment, Postgres & Going Live
79 Merging React Files With Django Project
80 Adding HashRouter