Django and React Ecommerce Web App - Build and Deploy E-commerce site with Django and React

Learn how to build and deploy a fullstack e-commerce website using Django and React. This 9-hour course covers everything from setting up your backend and frontend to integrating Flutterwave and PayPal for seamless payments. Perfect for developers looking to master e-commerce development and deployment.

Table of Contents:
00:00:00 - Introduction
00:08:16 - How to Get the Source Code
00:09:53 - Backend Setup with Django
00:10:58 - Customizing the User Model
00:14:43 - Building the Products API
00:28:35 - Configuring Django CORS Headers
00:32:11 - Frontend Setup with React JS
00:35:16 - Building the Homepage Components
00:47:17 - Configuring Page Routing in React JS
00:59:18 - Adding the NotFound Page
01:02:01 - Fetching and Rendering Products on the Homepage
01:20:39 - Adding Loading Skeletons on the Homepage for Products
01:29:47 - Adding an Error Component
01:36:25 - Implementing the Product Detail Page (Backend & Frontend)
02:07:00 - Adding Items to Cart (Backend & Frontend)
02:38:10 - Checking if a Product is in the Cart
02:47:02 - Updating the Cart Icon on the NavBar After Adding to Cart
03:03:41 - Building the Cart Page
03:09:14 - Fetching and Rendering Cart Items (Backend & Frontend)
03:35:50 - Updating Cart Items (Backend & Frontend)
04:03:42 - Adding Toastify Alerts
04:08:17 - Deleting Cart Items (Backend & Frontend)
04:24:44 - Adding a Loading Spinner on the Cart Page
04:31:12 - Building the Checkout Page
04:40:21 - Rendering Order Items on the Checkout Page
04:54:25 - JWT Authentication in Django and React
05:06:25 - Intercepting API Requests with JWT Token
05:11:08 - Creating a Protected Route
05:26:09 - Building the Login Page & Logging Users In
05:40:52 - Knowing When a User is Logged In (React Context API)
05:57:54 - Displaying the Logged-In Username
06:07:14 - Building the User Profile Page (Backend & Frontend)
06:23:10 - Creating New Users
06:25:30 - Rendering Logged-In User’s Info
06:31:50 - Initiating Flutterwave’s Payment Gateway (Backend)
06:49:35 - Building the Payment Status Page
06:53:34 - Initiating Flutterwave’s Payment Gateway (Frontend)
07:02:30 - Verifying User Payments with Flutterwave (Backend & Frontend)
07:24:09 - Rendering Purchased Items for a Customer
07:36:48 - Initiating PayPal’s Payment Gateway (Backend)
07:47:12 - Verifying User Payments with PayPal (Backend & Frontend)
08:00:29 - Deploying the Backend
08:17:33 - Deploying the Frontend
08:30:43 - Testing the Deployed Web App in Production
08:35:25 - Handling Redirects on Render
08:38:20 - Conclusion

[HasanRaju-kq]

Just started learning Django and youtube put this video on my Homepage. Good to see youtube is actually recommending good content no matter what the subscriber count is .

[ronaksharma]

I am a Mern stack developer, My Company asked me to learn Django for the new project. And youtube recommded this video like boom i got what i actually needed this time 😄

[enitan]

For anyone who might be experiencing issues adding items to cart, move your add_item to the top of the list in url patterns.

[sherhasan]

Just found what i was looking for thanks keep creating such good and amazing projects

[kawzbit]

Awesome vid bud. I have learnt a lot on this course. May the universe reward you.

[FunRioter]

wow django and react crazy stuff. keep it up.

[codetim]

You are a God sent bro...u teaches well

[javiersistemas]

My young buddy breaking the records 🎉🎉🎉🎉😊😊🙂🙂👏👏🇻🇪🇻🇪🤝🤝👍👍

[cyanokid]

this look interesting, thanks in advance sir. i am so excited to start this journey..

[ayodejiteju-ojo]

Can you create a django multivendor web app with variation, variation combination, vendor dashboard, custom user model for admin, vendor user model, stock and others?

[simosoikonomidis]

Hello great video! At 37:54 where you paste Navbar info some of the info don't show (The 2 Links and a span tag) would love if someone pasted the cryptic info. Eventually they might show up or i might just go with the vibes and fill them up myself. Thank youu!!

[djangoaj]

Nice Video 👋 👋
But the Ecommerce🛒 project is very common,
so can you please make an interesting project💡like Innovation Indicator🧠 using react+django 🚀.
In which all the institute upload🔼 the innovation activity(StartUPs, Patent, Publications, Research papers, etc) done within their college.
Then we will analyze📈 these data and trends using matplotlib & plotly.
Ensure secure role-based access for administrators, college faculty, and students, also a simple feedback mechanisms to encourage innovation.
Also we can perform some simple predictions😀.

[Ayan.sshhkk]

you have done the copy paste on navbar but you could have code it that part. Since i don't know much react i'm the person who learn's while making. But great content keep it up

[phoenixelixir]

Great project thanks clearly explained
It would be nice if you also create an admin side where we can see all the orders

[phoenixelixir]

Hey Clinton, does this video also contain the frontend(which orders are placed(queue)) from admin side(vendor/merchant in this case) or is it only client side?

[maro_xd]

I know javascript, but I never used react. Do you recommend me to start building this app, or should I learn react first?

[NiyubwayoIrakozeElie-lv]

Hy sir, can you list down VS code extensions you use for python and Django project in order to give you those autocomplete suggestions? this can help?

[AbdallaDiaai]

thanks for the great video, I followed the tutorial through to the deployment part. does anyone have the issue that the backend deploys successfully but when visiting live site to products, the list is empty? I have tried everything and googled everywhere but can not find an answer?

[muhammadalikhan]

sir how much time did it take you to develop the whole website? like by yourself, because it it taking me forever for few steps as well, your response will be appreciated.

[adeleye-adeola]

Wop First here. Weldone bro keep pushing