Build and Deploy Ecommerce App with Django, Next.js and Stripe - #1

Build and Deploy a Fullstack E-commerce Web App with Next.js and Django!
In this comprehensive tutorial, we build a complete e-commerce web application from scratch using Next.js for the frontend and Django for the backend.

You'll learn everything from creating a modern UI with Shadcn UI, setting up dynamic routing, implementing Google OAuth login with NextAuth, connecting to a Django REST API, handling product reviews, cart and wishlist functionality, and integrating Stripe for secure payments.

By the end of this series, you'll have a fully functional, beautifully designed, and production-ready e-commerce application.

🛒 E-commerce Live URL: https://next-shop-self.vercel.app/

🔧 Topics Covered in Part 1:
1. Project setup & folder structure
2. Building reusable UI components (Navbar, Hero section, Footer, Search bar, etc.)
3. Responsive mobile navigation
4. Google OAuth authentication with NextAuth
5. Connecting Next.js to a Django backend
6. Saving user data to the database
💻 Source Code
- Fullstack (Next.js + Django + Stripe Integration): https://selar.com/171g11

- Backend Only (Django): https://github.com/CodeWithClinton/yt_ecommerce_api_2025
- Frontend Only (Next.js): https://github.com/CodeWithClinton/next-shop-frontend
▶️ Watch the Full E-commerce Series
- Part 2: https://youtu.be/pds0iVS25qI
- Part 3: https://youtu.be/q0VWqKalXfc
📚 Related Tutorials
Build the backend API with Django: https://youtu.be/N3G9OjOuUi8
Deploy Django and PostgreSQL on Railway: https://youtu.be/dpniJG_5Dnk
🖼️ Image Assets Used in the Tutorial:
https://drive.google.com/file/d/1Ao2HV1Q_rparmjyjGRmJyZHIfYQlPBRP/view?usp=sharing
⏱️ Timestamps:
00:00:00 – Introduction and Project Overview
00:09:18 – Exploring the Project's Source Code
00:10:23 – Creating a New Next.js Project
00:14:18 – Understanding the Next.js Project Structure
00:17:22 – Setting Up Shadcn UI and UI Design Guidelines
00:23:51 – Initial Project Setup
00:27:44 – Configuring Custom Fonts
00:29:24 – Styling the Layout File
00:31:55 – Progress Recap
00:34:13 – Developing the Navbar Component
00:49:57 – Creating the Search Bar Component
01:01:51 – Enhancing the Navbar
01:16:31 – Building the Mobile Navbar
01:31:41 – Developing the Mobile Search Bar
01:46:57 – Creating the Hero Section
01:56:08 – Designing the Category Section
02:03:59 – Creating the Product Section
02:10:11 – Building the Footer Component
02:17:15 – Developing the Categories Page
02:28:09 – Building the CartItems Page
02:42:34 – Creating the Cart Page
02:45:40 – Setting Up the Product Detail Page
02:49:08 – Developing the Product Info Component
02:55:48 – Creating the Review Statistics Component
03:13:18 – Adding the "Add Review" Modal
03:20:10 – Integrating the Review Form
03:30:16 – Developing the Star Rating Component
03:50:42 – Displaying Review Cards
04:03:36 – Adding the Related Products Component
04:06:55 – Creating the User Profile Page
04:19:09 – Building the Sign-In Page
04:23:26 – Google Authentication with NextAuth
04:58:48 – Implementing Logout with NextAuth
05:04:03 – Connecting Next.js to Django Backend
05:09:24 – Verifying Existing Users in the Database
05:17:36 – Saving Google User Info to the Database
05:35:31 – Displaying Logged-In User Info in Mobile Navbar
05:39:11 – End of Part 1

Видео Build and Deploy Ecommerce App with Django, Next.js and Stripe - #1 канала Code With Clinton