🔴 Let's build a Full Stack E-Commerce App with NEXT.JS 15 (Sanity, Stripe, Clerk, Tailwind, TS)

🛠️ Looking for the Code for this build? (Plus over 50+ others!)

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!
👉 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?

🕐 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

[supergamer]

I've completed this project, which I started alongside you during the live stream. Lots of love ❤, brother! I gained so much knowledge from just one video. The tech stack is amazing—exactly what I was looking for. God bless you, brother. Looking forward to more content like this!

[Offiziersmesser]

Papa React. I was just learning about JS in 2021as a freshman in uni when I decided to watch a similar 5hour stream on building an amazon clone using react. I hadn't touched react before then, all I did was follow along and sometimes even challenge myself when you asked us to implement something before you showed us the correct way. I have come a long way since then. Thank you for all the effort you put into helping people learn. You deserve millions of subscribers.

[samhudson]

So much better and easy to follow than other popular full project youtubers. Total legend

[CoderNinja-tt]

Happy Diwali bro
I got a job because of u

[mrdaho]

i love the way you explain everything for anyone to understand and still keep up the speed xD this is a talent!! keep up the fire !

[a.iso.thirdgenerationstudios]

If youre having problems with useRouter make sure its imported from (next/navigation) not (next/router)

[Usama-Nadeem-CodeWards]

For those wondering how to keep up with his speed and follow along with his code, I have a solution: download a Chrome extension that takes screenshots and extracts text from them. This way, you can paste the extracted code and review it at your own pace later. Alternatively, he explains the implementation at the end as well. If you found this helpful, leave a like! 🙃

[reicchi]

I was always looking to learn how to create a proper e-commerce website with the proper stack and this one right here is a killer, love the video and your energy!

[wibbs]

Had to use npx sanity schema generate and npx sanity typegen generate for it to work - if anyone else has an issue.

[hollywoodmedia]

I am a flutter developer but everytime i came to your channel i get blown away by how you make development fun. Awesome stuff @sonny

[a.iso.thirdgenerationstudios]

i feel like handling addresses, is pretty important for this build

[ibrahimblahblahyapyap]

Appreciate you showing how to fix the peer dependency issue 👊

[edgar.robles]

Just what I was looking for! Always dropping heat bro 🔥

[sikkicoding]

Soooo Ammazing. HOT stuff as you said "FIRE". We need this FIRE man. THANKS

[morganTH]

Man, God bless you bro.
I really need this project.
God bless you homie.

[rafaelcisnerosgomez]

Just DOPE DOPE DOPE!! Thanks man for these tutos.

[fulltogaming]

Guys why this videos have less like, it deserves better, 😍🤩👍👍👍👍👍👍👍👍

[Deus-lo-Vuilt]

wow, always surprising me, thanks compa, keep up the good work.

[jankukielski]

Great video with some really useful stuff! I haven't finished all of it but just wondering..when you include all the user and stripe information in the order is it safe to use considering we may be using a public dataset on the free Sanity plan?

[AntNZ]

3:13:49 on line 20 I had an issue with `....<BasketState>create()(` that I fixed by moving the <BasketState> to line 21 `persist<BasketState>(` - not sure if anyone else had this problem but that is how I resolved it :)