Django with React | An Ecommerce Website
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
All Course Lessons (84)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Complete DApp - Solidity & React - Blockchain Development
Zero to Full Stack Hero
React JS 19 Crash Course | Build an App and Master React in 2 Hours
React and Laravel: Breaking a Monolith to Microservices
