🔴 Let's build a Full Stack E-Commerce App with NEXT.JS 15 (Sanity, Stripe, Clerk, Tailwind, TS)
1️⃣ Get Started with Sanity 👉 https://www.sanity.io/sonny
2️⃣ Get Started with Clerk 👉 https://go.clerk.com/k0ls6Zb
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course
🛠️ Looking for the Code for this build? (Plus over 50+ others!)
https://links.papareact.com/github
Join me as I show you how to Real-Time Full Stack E-Commerce App with the brand new Next.js 15!
You'll learn the following in this build:
👉 How to build a Production React, Real Time Full Stack E-Commerce App
👉 How to integrate Sanity as a powerful CMS to manage & scale the app's content effortlessly.
👉 How to integrate Sanity’s Live Content API to make it easy to customize the app easily and at scale in Real Time!
👉 How to build a complete Stripe Payments Checkout Flow for all the orders in your basket!
👉 Learn my top Debugging and Troubleshooting Tips for a Seamless Developer Experience when coding in Next.js 15!
👉 How to add sleek animations with Framer Motion!
👉 How to implement Clerk Authentication to add User Authentication with ease, including Passkeys!
👉 Create a Beautiful UI & UX for our Frontend using the highly Popular Shadcn & Tailwind CSS
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel
👉 And Much More!
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter
🕐 TIMESTAMPS:
0:00 Introduction
01:07 Build Demo
09:09 Sanity
12:07 Clerk for Authentication
16:11 Level Up Your Coding With Zero to Full Stack Hero
16:56 Build Tech Stack
26:17 Initialising the Build
31:40 Setting Up Sanity Studio
41:34 Setting Up Clerk for Authentication
52:32 Implementing Shadcn/ui
55:58 Building the Header Component
1:11:25 Implementing Clerk Passkey Functionality
1:15:59 Creating the Search Page
1:18:43 Implementing Sanity TypeGen
1:25:58 Building the Product Type Sanity Schema
1:30:20 Building the Category Type Sanity Schema
1:32:17 Building the Order Type Sanity Schema
1:37:23 Building the Sales Type Sanity schema
1:39:21 Populating & Connecting the Sanity Backend
1:45:01 Building the Backend Client
1:48:52 Implementing the Live Feature
1:52:30 Building a Helper Function to Get All Products with GROQ Query
1:58:24 Building the Products View Component
2:01:08 Building a Helper Function to Get All Categories
2:03:17 Building the Product Grid Component
2:05:28 Implementing Framer Motion
2:08:09 Building the Product Thumbnail Component
2:17:51 Live Debugging to Fix the Live Update Feature
2:25:56 Implementing a Sale Banner with Coupon Code Functionality
2:34:59 Building the Search Page
2:42:05 Building the Product Page
2:51:50 Building the Category Selector
3:01:17 Building the Category Page
3:08:45 Implementing Zustand for State Management
3:14:53 Implementing Complete Add to Basket Functionality
3:32:05 Implementing Server Actions
3:34:07 Implementing Stripe for Payment Processing
3:47:27 Building the Success Page
3:57:51 Building a Custom Webhook in Stripe
4:17:53 Building the Orders Page
4:29:06 Implementing Sanity’s Real Time Visual Editor
4:41:37 Implementing the Caching Functionality
4:52:06 Deploying the Build
5:05:31 Build Summary
5:07:40 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with any existing e-commerce website(s) whom may share the names or content used in this video, and/or any of its/their subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.
#nextjs #javascript #react19 #ai #reactjs #typescript #ecommerce #shadcn #openai #react #coding #tutorial #beginner #programming #website #nextjs15