🔴 Let’s build Amazon 2.0 with NEXT.JS! (ReactJS, Webhooks, Stripe Checkout, Firestore, NextAuth)

Sonny Sangha

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero”: https://www.papareact.com/course

📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

❗️Amazon Starter Template: https://github.com/sonnysangha/Amazon-starter-template-nextjs

Join me as I build the AMAZON 2.0 CLONE with NEXT.JS. You’ll learn how to do the following in this build:

👉 How to build a Log In and Log Out Authentication Flow with NextAuth!
👉 How to build an Add to Basket Functionality just like Amazon!
👉 How to build a Basket page where you can add/remove products and change their quantities!
👉 How to build a complete Stripe Payments Checkout Flow for all the orders in your basket!
👉 How to build a Cloud Firestore database to have an order screen with all your orders details!
👉 How to use Tailwind CSS to build a beautiful responsive Amazon Clone!
👉 How to finally deploy the final build on Vercel!

+ SO MUCH MORE!

🔴 LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github

👇🏻FOLLOW ME HERE:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord
Newsletter: https://links.papareact.com/newsletter

💰 WANT TO SUPPORT THE CHANNEL?
Donate here: https://links.papareact.com/donate
Grab some PAPA Merch: https://links.papareact.com/merch

🕐 TIMESTAMPS:
00:00 Introduction
01:26 Build Tech Stack
02:43 Build Showcase
08:16 Amazon Build Starter Template
09:11 Starting the Build
17:07 Enabling Emmet in VS Code
18:02 Creating the Header Component
24:09 Explaining & Implementing Fake Store API
25:26 Building the Top Nav Section of the Header
29:29 Building the Search Bar in the Top Nav Section
30:33 Implementing Heroicons
38:43 Building the Right Side of the Top Nav Section
52:55 Building the Bottom Nav Section
59:04 Building the Banner Component
1:08:26 Building the Product Feed Component (1/2)
1:09:42 Explaining and Implementing SSR with Next.js
1:16:32 Building the Product Component
1:34:56 Building the Product Feed Component (2/2)
1:43:53 Deploying to Vercel (1/3)
1:46:54 Implementing Authentication with NextAuth.js (1/2)
1:53:51 Setting Up & Implementing Firebase
2:02:06 Authorising Redirect URIs
2:05:13 Implementing Authentication with NextAuth.js (2/2)
2:06:40 Implementing the Login / Logout Functionality
2:09:54 Adding Other Authentication Providers
2:11:29 Creating the Checkout Component
2:17:48 Building the Left Side of Checkout Page (1/2)
2:23:50 Implementing Redux for Add to Basket Functionality
2:38:14 Building the Left Side of Checkout Page (2/2)
2:40:31 Creating the Checkout Product Component
2:44:41 Building the Checkout Product Component
2:52:05 Implementing Add & Remove Item Functionality
3:02:39 Building the Right Side of Checkout Page
3:08:54 Implementing the Total Price in Basket Functionality
3:13:18 Deploying to Vercel (2/3)
3:15:17 Fixing the Google Authorisation Error
3:22:00 Explaining & Implementing Stripe Checkout
3:29:12 Setting Up Stripe
3:32:45 Adding Stripe in the Checkout Page
3:36:10 Creating the Checkout Session
4:00:24 Adding a Redirect to Stripe Checkout Page
4:03:40 Stripe Payment Checkout Demo
4:06:36 Explaining Webhooks
4:11:01 Implementing Stripe CLI
4:15:44 Implementing Webhooks
4:48:08 Building the Success Page
4:54:10 Building the Orders Page (1/2)
5:12:06 Building the Order Component
5:22:41 Helpful Trick
5:25:15 Final Build Demo
5:27:10 Deploying to Vercel (3/3)
5:40:57 Final Build Breakdown
5:43:14 Outro

Let’s get it PAPAFAM 🔥.

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Amazon and its 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.

#reactjs #nextjs #amazon