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

Let's Construct a Full-Stack AMAZON Clone with REACT JS for Novices (Full E-Comm Retailer in 8 Hrs) 2021

by



๐Ÿš€ Be a part of FREE React.js Course: https://www.cleverprogrammer.com/free?utm_source=youtube&utm_medium=yt-description&utm_campaign=fem-all-day&utm_content=15-oct-20-amazon-clone

โญ Be a part of the BEST Discord Neighborhood for Builders on the planet ๐Ÿ‘‰ https://www.cleverprogrammer.com/discord

Take a look at the BEST JavaScript Course on The Planet ๐Ÿ‘‡๐ŸŒŽ.
https://cleverprogrammer.com/pwj?utm_source=youtube&utm_medium=yt-description&utm_content=react-amazon-full-stack-clone&utm_campaign=pwj

๐ŸŽฅ On this Unique React VIDEO coaching, we will likely be overlaying…
โœ… Learn to construct the FULL Amazon web site with FULL E-Commerce Performance ๐Ÿ‘‡
1๏ธโƒฃ Accounts and Login Web page ๐Ÿ‘จ๐Ÿ‘จ๐Ÿ‘ง๐Ÿ‘ฆ
2๏ธโƒฃ Merchandise Web page ๐Ÿ“ฆ
3๏ธโƒฃ Cart and Checkout Web page ๐Ÿ›’
4๏ธโƒฃ Actual Funds ๐Ÿ’ณ
5๏ธโƒฃ Order Historical past Web page ๐Ÿ“–
๐Ÿ› ๏ธ And the instruments & applied sciences it is advisable succeed as a Trendy React JS developer
… All of this Utilizing React JS ๐Ÿ”ฅ

๐Ÿ“™Should you favor a written information, Examine this out!๐Ÿ‘‡
https://medium.com/cleverprogrammer/amazon-clone-using-react-the-ultimate-guide-fba2b36f3458?utm_source=youtube&utm_medium=yt-description&utm_content=react-amazon-full-stack-clone&utm_campaign=pwj

Time Stamps ๐Ÿ‘‡:
– App Demo – 0:00
– Half 1: Getting Set Up – 4:14
– Half 2: The House Web page – 19:00
– Half 3: The Checkout Web page – 1:38:03
– Train: Whole Value In Cart – 2:24:10
– Half 3.5: Extra Checkout Web page – 2:26:01
– Half 4: The Login Web page – 3:23:20
– Half 5: Person Authentication – 3:51:16
– Bonus Function: Username on Checkout Web page – 4:30:19
– Half 6: Deploying Our App – 4:33:51
– Train: React Flip Transfer Animation – 4:43:34
– Ending The App: Our Agenda – 4:50:57
– Scholar Demos: Animations – 5:00:48
– Bonus Function: Username/Electronic mail in Header – 5:07:16
– Half 7: The Cost Web page – 5:13:43
– Half 8: Cost Processing – 5:43:29
– Half 9: The Orders Historical past Web page (Actual Time Database) – 7:14:01
– The Finish: Turning into A React JS Developer – 8:40:02
– Thank You Guys – 8:43:15

See you inside,
-Qazi

P.S. – We have actually had over 20,000 people who find themselves aspiring builders undergo it and lots of of them have stated issues like “this coaching right here alone was value greater than my $10k coding bootcamp” ๐Ÿ˜ฑ!

Whether or not you wish to get a full-time job or change into a contract developer. Or whether or not you wish to change into a full-stack or front-end developer… You HAVE to grasp React and Javascript and constructing Actual-World Tasks is the BEST method to do it- – .

source

49 thoughts on “Let's Construct a Full-Stack AMAZON Clone with REACT JS for Novices (Full E-Comm Retailer in 8 Hrs) 2021”

  1. 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

    Reply

  4. 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 = initializeApp(firebaseConfig);

    export const db = getFirestore()

    export const auth = getAuth();

    export default app

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

    Reply

  5. 26.10.2022

    this is a stream from 2021 while firebase version was 8

    step 1 – , go to ""

    step 2 – click on ""

    step 3 – click on ""

    step 4 – click on the requested signIn provider of your choosing (we will go with – Email / Passwoword)

    step 5 –

    step 6 – , go to the "Project settings" page (locate in the cog's icon)

    step 7 – the mouth all the way till you find ""

    step 8 – , and paste them inside the designated firebese's file ( – ).

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

    import { initializeApp } from "firebase/app";

    const firebaseConfig = { … };

    const app = initializeApp(firebaseConfig);

    Reply

  8. Can anyone explain to me again what is that history.replace function doing exactly, I know it is replaced by useNavigate and we are using navigate('/orders', { replace: true }); but what is that replace thing doing?? 25.10.2022

    Reply

  20. Hello I need some help , when i fireup npm run build i got an error:

    Creating an optimized production build…
    Failed to compile.

    static/css/main.8a37deed.css from Css Minimizer plugin
    TypeError: Cannot read properties of undefined (reading 'length')
    at Array.forEach (<anonymous>)

    [BUT IN ENTIRE APP I AM NOT USING forEach method]

    I hope someone would help me to fix this problem.Anyone ?

    Reply

  23. I'm only 5min and 19 seconds in but the quote, "The ones who are gonna drop off today are not gonna become developers in the future" is a bit extreme. I was kind of tempted to drop off the video just to prove him wrong, since I am a fulltime dev lmao.

    Either way the channel seems awesome and I'm semi excited to do this while I'm in between assignments.

    Reply

  29. At around 7:08:42 , I am stuck . It's showing Uncaught(in promise) axios error. And I have no idea how to fix that. Can anyone help me? The error is in Payment.js on getClientSecret().
    useEffect(() => {

    const getClientSecret = async () => {

    const response = await axios({

    method: "post",

    url: `/payments/create?total=${getBasketTotal(basket) * 100}`,

    });

    setClientSecret(response.data.clientSecret);

    };

    getClientSecret(); //THE ERROR SAYS UNCAUGHT PROMISE

    }, [basket]);

    Reply

  31. not sure why the original didnt work for me create-react-app amazon-clone i was missing src folder and public folder, So i ran th following uninstalled create-react-app using npm uninstall -g create-react-app.

    -using sudo npx create-react-app amazon-challange I created a new app and now it's working as expected

    Reply

  34. 5:55:00 If you are stuck here and your screen is white and it says "could not find Elements context; You need to wrap the part of your app that calls use Stripe() in an <Elements> provider" FEAR NOT.

    <Route

    path="/payment"

    element={[

    <Header />,

    <Elements stripe={promise}>

    <Payment />

    </Elements>,

    ]}

    />

    </Routes>

    Reply

  36. it is really really hard to find out what are the updated some installation, the video was old version of installation of material-ui, react router,etc., please add updated things in description. @cleverProgrammer

    Reply

  39. use jsx extension instead of js and your emet will work, also folder structure can be done better than this, keep each section in its own folder, it would be much easier to understand and edit each each section separately and easier to reuse.

    Reply

  41. hi sir. i love your tutorial. im still learn golang. i hope you will teach us for build mobile apps or fullstack web with golang as a backend.

    please help. i wanna make portofolio so i can getting job. im homeless since early pandemic. i want working as programmer and i almost give up learn coding. thanks sir๐Ÿ™๐Ÿ™

    Reply

  45. YOU WILL NOT GET A JOB BECAUSE OF THIS AMAZONE CLONE! WHY?
    Unless and Until you know every line of code that u have written and know the reason behind it, Cause interviewers ask hell lot of questions on what you have build and added to your resume.

    Reply

Leave a Comment