Let's Build a Full-Stack AMAZON Clone with REACT JS for Beginners (Full E-Comm Store in 8 Hrs) 2021

🎥 In this Exclusive React VIDEO training, we will be covering...
✅ Learn how to build the FULL Amazon website with FULL E-Commerce Functionality 👇
1️⃣ Accounts and Login Page 👨👨👧👦
2️⃣ Products Page 📦
3️⃣ Cart and Checkout Page 🛒
4️⃣ Real Payments 💳
5️⃣ Order History Page 📖
🛠️ And the tools & technologies you need to succeed as a Modern React JS developer
... All of this Using React JS 🔥

📙If you prefer a written guide, Check this out!👇

Time Stamps 👇:
- App Demo - 0:00
- Part 1: Getting Set Up - 4:14
- Part 2: The Home Page - 19:00
- Part 3: The Checkout Page - 1:38:03
- Exercise: Total Price In Cart - 2:24:10
- Part 3.5: More Checkout Page - 2:26:01
- Part 4: The Login Page - 3:23:20
- Part 5: User Authentication - 3:51:16
- Bonus Feature: Username on Checkout Page - 4:30:19
- Part 6: Deploying Our App - 4:33:51
- Exercise: React Flip Move Animation - 4:43:34
- Finishing The App: Our Agenda - 4:50:57
- Student Demos: Animations - 5:00:48
- Bonus Feature: Username/Email in Header - 5:07:16
- Part 7: The Payment Page - 5:13:43
- Part 8: Payment Processing - 5:43:29
- Part 9: The Orders History Page (Real Time Database) - 7:14:01
- The End: Becoming A React JS Developer - 8:40:02
- Thank You Guys - 8:43:15

See you inside,
-Qazi

P.S. - We've literally had over 20,000 people who are aspiring developers go through it and many of them have said things like "this training here alone was worth more than my $10k coding bootcamp" 😱!

[CleverProgrammer]

Time Stamps 👇💯:
- App Demo - 0:00
- Part 1: Getting Set Up - 4:14
- Part 2: The Home Page - 19:00
- Part 3: The Checkout Page - 1:38:03
- Exercise: Total Price In Cart - 2:24:10
- Part 3.5: More Checkout Page - 2:26:01
- Part 4: The Login Page - 3:23:20
- Part 5: User Authentication - 3:51:16
- Bonus Feature: Username on Checkout Page - 4:30:19
- Part 6: Deploying Our App - 4:33:51
- Exercise: React Flip Move Animation - 4:43:34
- Finishing The App: Our Agenda - 4:50:57
- Student Demos: Animations - 5:00:48
- Bonus Feature: Username/Email in Header - 5:07:16
- Part 7: The Payment Page - 5:13:43
- Part 8: Payment Processing - 5:43:29
- Part 9: The Orders History Page (Real Time Database) - 7:14:01
- The End: Becoming A React JS Developer - 8:40:02
- Thank You Guys - 8:43:15

[hamzazaheer]

you guys have no idea how much you two helped me. You are not making tutorials you are changing lives!

[brennankelly]

If anyone else is having a similar problem at 1:37:05 due to the update from react router v5 to v6, I've included the my code down below for App.js. This is the closest code I've seen to the actual tutorial. This is working as of 3/2/2022:

import React from "react";
import "./App.css";
import Header from "./Header";
import Home from "./Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
return (
// BEM
<Router>
<div className="app">
<Routes>
<Route path="/checkout" element={[<Header />, <h1>I am a checkout page</h1>]}/>
<Route path="/" element={[<Header />, <Home />]}/>
</Routes>
</div>
</Router>
);
}

export default App;

[brandonhyson]

It's June 2023 and im working through this and the energy is still next level. Getting hype with chat still two years later. Lets hit these goals!

[fatbatman]

3:52:00 Add these import statements for "module not found error"
import firebase from "firebase/compat/app";
import "firebase/compat/auth"
import "firebase/compat/firestore"

[mawaryagitza]

I'm only 56 minute in but already feel this is one of the greatest tutorial i've ever watch. I hope this momentum continue

[shamsulalam]

I am committed to completing this project today, no matter what it takes. There is one thing I want to point out: you are absolutely amazing. It's not just about teaching; while there are so many tutorials out there, you encourage us and emphasize the purpose behind why we should do it.

[subhodipkundu]

5:16:37
useHistory() is replaced with useNavigate()

replace
1. const history = useHistory() with
const navigate = useNavigate()

2. history.push('/payment') with
navigate("/payment", { replace: true })

[mrCetus]

Hey, Guys Thank you so much for this wonderful tutorial. This helped me alot.
I found one issue at 1:36:36 due to react router version 5.
If you guys watch this video after releasing v6, you might to use below code because Switch is no longer imported from react-router-dom.

<Router>
<div className="App">
<Routes>

<Route path="/" element={[<Header />, <Home />]} />

<Route path="/checkout" element={<Header />} />

</Routes>
</div>
</Router>


instead of

<Router>
<div className="App">
<Switch>

<Route path="/" />
<Header />
<Home />
</Route>

<Route path="/checkout" />
<Header />
</Route>

</Switch>
</div>
</Router>


One more issue with useHistory at 4:03:12, in newer version import useNavigate from react-router-dom and navigate("/").

[robertobenedit]

I'm following your code step by step, and is gorgeous! The way that you explained it, is marvelous, and also following the text version that is in the description, complete the whole thing. For anyone reading this, dont give up, just keep going!

[inspisiavideos]

So far I have 2 hours and 4 minutes content done. I have been doing this for 3 days to retain the info. 6 more hours to go!

[rohangaonkar]

Qazi is that kid in the group who does not do any project work but does the presentation and gets all the credit

[ares]

Don't know how and don't know why but i completed this project finally. Despite doing it after 2 years after so many updates i was able able to deploy it. It broke so many times but still at the end it's finally done. This project changed my understanding of react. I had already made a project in react but this project took all my fear of react and introduced me to many new concepts. Thanks CP

[matanSH]

How to initialize firestore DB and Auth in firebase 9:

step 1 - inside firebase website, inside your project, go to "Firebase products and features"
step 2 - click on "Authentication"
step 3 - click on "Sign-in method"
step 4 - click on the requested signIn provider of your choosing (we will go with - Email / Passwoword)
step 5 - change the button's status to "Enable"

** step 6 - 8 are relevant only if we didnt copied firebase SDK(software development kit) in the designated firebese's file. make sure you used the "npm install firebase" **

step 6 - go to the "Project settings" page (locate in the cog's icon)
step 7 - scroll the mouth all the way down till you find "SDK setup and configuration"
step 8 - copy the basic configurations, and paste them inside the designated firebese's file.

step 9 - initialize and export firebase - db(firestore based) and Authentication methods.

example(from the designated firebase file -> firebase.js):
import { initializeApp } from "firebase/app";
import {getFirestore} from 'firebase/firestore'
import { getAuth } from "firebase/auth";

const firebaseConfig = { ... };
const app =

export const db = getFirestore()
export const auth = getAuth();
export default app


hope youll find this helpful ^_^ as it was for me

[PolyglotAbroad]

This took my React skills from 0 to 100 really quick ngl. Before starting this my React knowledge summed up to building a todo list app, but now I know so much about dependencies, npm and all the stuff you can do with Firebase and Stripe. I'll definitely redo this building my custom app and adding this to my portfolio which is not live yet.
I will get a job by summer or end of 2023 at worst.
Can't thank you enough guys !!!!

[Daniel-veyr]

So thankful for you guys. You pack more knowledge into one video for free than 4 years of college.

[ositaka]

This is far the best video I’ve ever watched about react and firebase. Yours funny moments also add an extra spice and energy to keep watching it. Have a great 2021

[mr_gryphon]

Series came right as my responsibilities switched to React so I appreciate this channel so much

[Humney]

Everytime i get stuck on building this clone i have to take 10-20 minutes to research how to fix the error and it is also helping me aside from following you all. There's been alot of updates since the release of this video.

A couple is using <Routes> instead of <Switch>
When you get to firebase authentication update firebase to 9.8 and use this syntax to import:
import { initializeApp } from "firebase/app";
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Also useHistory is now useNavigate;
replace history = useHistory() with navigate = useNavigate()
replace history.push('/path') with navigate('/path')

Hope this helps anyone who kept getting stuck like I did at multiple steps. Do not give up, do not erase all your history. If an error occurs, read them, find a solution. If you can not find a solution do not get frustrated get up from the computer and take a break then retry finding a solution! Much love to anyone taking on this challenge or just following along to learn as I am.

[sforeasy]

Great job guys!
For anyone doing this tutorial in 2022, Material UI does not support react 18.0.0, you'll have to downgrade to 17.0.2.