Перейти к содержимому

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

Code With Clinton

0:00 / 0:00

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

83 286 просмотров · 2 года назад
Code With Clinton
10,9 тыс. подписчиков
83 286 просмотров · 2 года назад
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. Get source code here 👉: https://selar.co/027smn E-commerce live URL: https://newshop-ohta.onrender.com 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