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
Hello @Clever Programmer! First off all, love your chanell so much and learning a lot, you guys rock!! And second, have a question; do you have a stream where you show how to hide an api key if you want to deploy your app, hide in a way of backend. I am junior in React and programming in general and follow your program, but not sure where this solution could be. Tnx in advance ❤❤
First of all thanks for the awesome video.I got a bug in the cart page..It is like I am adding two items multiple times and when I delete the item from the top it is deleted from the state but appending in the UI .. is anyone faced the same issue and help me out to solve the issue
Is his profit with javascript course for beginners who didn't even know html css? I'm asking this because I saw the syllabus There was something called javascript crash course... I didn't even know html and css...or anything related to web development...should I take the course? What is the main moto of the profit with javascript course? Should I learn html css javascript react node mongo express etc..before taking his course? Please answer!
@@amreezkhan5530 take some time with html css play around with it if you find it comfortable then switch to javascript/jsx or you can make complicated projects and figure everything along the way just start learning there is no certain way of learning things just build and code.
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"
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
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.
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 })
hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
when I try to click on 'add to cart' button the product is not adding to the cart and the page is getting non responsive(stuck) and in the console am getting error as => [Violation] 'click' handler took 150ms
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
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!
I don’t think literally following the text version would get you the exact result. ReactDOM has change a bit , material UI also changes a bit. React-route-dom also changed. And I am stacked at firebase now. So you know what you are saying.
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
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
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
for anyone who uploaded their own photos and one was a landscape photo instead of square or potrait, then had issues with the product title sinking halfway down the component, you can change the justify-content for .product to space-between instead of flex end. You get the same look but now it works for every type of picture.
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
At 4:02:06 - In react-router-dom v6 useHistory() is replaced by useNavigate() Hence the code will be as follows: import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('/');
@@PHENOGAMING i think you are using: import firebase from "firebase" should instead use : import firebase from "firebase/compat/app"; import "firebase/compat/auth"; import "firebase/compat/database"; import "firebase/compat/firestore";
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 !!!!
Hey...... If possible, can you help me......I got stucked at 4:32:00. email IDs are not showing on the checkout page. I think it is not able to access the user. Please help me.
@@tanumaurya3151hi. Try to console log the user and see what you get. Also make sure you’re using the correct methods when trying to access the firebase data cause I remember I had to change some parts of the code to work with the new version of firebase. If you’re still stuck try using chat gpt to find the problem, it helped me a lot when coding this. I hope this helps.
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.
instead of
One more issue with useHistory at 4:03:12, in newer version import useNavigate from react-router-dom and navigate("/").
did you face any issue during user authentication (importing firebase) as im facing issues at that part of the video the error says : path and fs can't resolve
I never liked doing web development, and I had little knowledge of React but after following through this tutorial, I am gaining alot and everything makes sense now. I sucked with CSS but Sonny has been explaining it so well. I am coding along and it has been 3 hrs now. Will complete this project soon. Thanks alot guys.
@@hemangchaudhary4700 unless you went to college or are heck of a talent the information required to understand it is another level. Usually college graduates understand coding and what to do to get a specific results, where as we are just coping information and not really understanding that well what it does. If we where to try an build our own website unique of the Amazon structure then we wouldn’t know what to do to get the results we want. So in this regard a college degree is better. Job wise as well.
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
these two are really amazing, just do whatever these two are saying, I was watching this challenge seven months ago and didn't make sense to me at all, but I didn't give up and kept the commitment to learn, and now after seven months later, everything is supper supper clear and easy to devour the whole content, just keep following these two, they are amazing, I assure you everything make sense later if you are a beginner like me.
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
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 instead of 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.
brother please help in just one error ERROR in ./node_modules/@material-ui/icons/utils/createSvgIcon.js 13:13-41 Module not found: Error: Can't resolve '@material-ui/core' in '/home/ind/E_Commerce_Mern/amazon-clone/node_modules/@material-ui/icons/utils'
@@justinebedi7048 Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'id') did u get the solution . please reply if u get it man plzz in payment.js when i click buy now then it displays this message
I’m committed to building this project today no matter what it takes my goals are very clear but I’m going to keep working on my vision until it’s clear as water and until I get it done, no matter what. Then, I’m going to continue pushing always.
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
For all people who have hopes on me. I will complete this course no matter what it takes. No matter how much time i take, no matter how many breaks i have to take while creating this project. I WILL CCOMPLETE IT
Now I’m 3.5 hours in, and this is going to be my third clone from you guys. I recommend everyone to begin with the youtube clone, then twitter clone and finally this one. And try coding everyday for a few hours. Watch a part, code with them. And then review and recode it yourself and try without watching youtube. Then try to make your own application. That’s my final goal. Goodluck.
@@adrina9798 hi , there’s a new version of react router dom, which is a bit different. Check out some youtube videos of react router dom new version. I’m not home right now and I can’t show you the proper code. It has something to do with the switch tag which is replaced by routes or route
@@universe_decoded797 Okay could you please send me your amazon clone code once you get home or whenever you can access it. I'm working on a project and it would really help if I'm able to fix that issue. Thanks
I did something like this, found some old screenshots i made. As you can see i’ve used the {} after the element to import multiple components! import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
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📌
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
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 provider" FEAR NOT.
can u tell me what technologies this project uses? sanity content manager? what language for backend? does he also make admin role that can add products?
If I get a cool job, I'll surely send you half of my first payment. Thank you, from brazil! You guys are awesome! Don't even know how to express my gratitude. I hope that the skies reward you with great things! And once again: THANK YOU!
even tought this course is outdated because there are a lot of things that have changed in react and also firebase , i managed to make it , let's go guys
Hey there, I'm also making this project. Can you share your code? I'm stuck at the last step with stripe giving me error after clicking Buy Now saying "Error confirming card payment"
Hi!! I reallly need your help with my project. I am not able to configure Stripe and my clientSecret id doesnt show on console and on clicking But now, it just keeps proccessing. Pls pls reply to me. It would really mean a lot to me if u do.
This is a really great course but unfortunately it's not for absolute beginner you should at least have react fundamentals cover up before starting it. I'll recommend watching coding addict or free code camp for learning react fundaments, it will solve all of your problems. keep up the great work guys.
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
Hi Qazi and Sonny, please add testing with Jest and Enzyme to your projects. I think it would be nice to have testing in portfolio. Keep up the good work!
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
Hi guys. I am already a developer and really enjoy your show. I also lerned a few things I didn't know before. Maybe you should do a coding session like this without preperation. As a developer, live normally isn't that easy. CSS is fiddeling arround, many Bugs, errors all the time, APIs change and tutorials don't work anymore, etc. If you doing it, it looks easier than it is.
If anyone is having issues with compiling you have to downgrade your react version In the terminal type: npm uninstall react-dom after that type npm install react-dom@17.0.2 should now work!
@@manishaghi2966 deployed v1 yesterday onto eemanstores-16cab.firebaseapp.com. added stripe payment today to localhost. Hope to have it completed and move to next clone airbnb or spotify
im gonna build this amazon clone no matter what. Will update this comment when I complete it Update: Basic model complete need to add animations and admin page
In case anyone is curious, for the header I edited it a bit to just show the part of the email before @. Makes it shorter and looks a little cleaner so it doesn't space things out so much up top. You can throw this in and it'll work ```Hello, {user ? user?.email.split("@")[0] : "Guest"}```
Thanks for watching and commenting don't forget to hit the subscribe button.➕. ①. ③. ②. ③. ⑦. ④.-④. ⑧. ⑥. ④. ③. ☎️. For more info and support at anytime text w h a t s a p above….
For those unable to install Material UI or showing errors at 40:43 , Use this command instead: npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps npm install @mui/icons-material --legacy-peer-deps
Absolutely a piece of art! I love this tutorial, The fact that is both of you some how takes the sleepiness away heheh so entertaining. As other users wrote this is like watching a movie Thank you hips guys
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
wow, react is simple and somehow easy, i watched this tut back in 2021 , infact i wanted to grab something but i couldn't understand anything dude was doing. So i forget and went back to learn my JavaScript basics very well and today i came back to watch it again, every things looks super easy... lol. How he explained the the react routes and made an example is awesome . I guess as u said sometimes watching and following , not even practicing or tryna code along is sufficient for u to learn it. Thank you Clever Programmers...
Hello I have an issue about stripe and ı have the secret key showing on console when i click buy now normally it puts the money on stripe dashborad and redirects you to orders page or home page for me this part doesnt work any help please I beg my insta is @msy.cf thank you in advance
@@BlackMSY Hey my advice is to look on github, cp linked that amazon-clone, you can simply check if u have same code, if yes, then propably u forget to install some tools
Thanks for the way you keep improving and updating your tutorial. Some people are saying how many time will you do this tutorial, they do not understand what version control is. We are still expecting more update on this course if need arises. Thanks for this free great stuff.
TRY THIS --1:38:03 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"; import Checkout from "./Checkout"; function App() { return ( // BEM
You guys are amazing! Im currently in a bootcamp, and we just wrapped up learning react but I'm lost. This tutorial helped my understand it. Will definitely follow you guys and watch all of your videos. Thank you.
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket Don’t know If I explain it well 😂 but that is situation right now
Hey Yash! Are you a self-taught programmer and build projects to learn? If yes, please reach out to me so that we can discuss some interesting software development roles in latest technologies!
not sure if there still are people doing this project. if you do not find the clientSeceret special keycode @7:09:00, it could be the cross-origin issue. Try add -------response.setHeader('Access-Control-Allow-Origin', ' *') in the Post method, i.e. in app.post('/payments/create'); hope this helps. good luck.
Payment.js:53 Uncaught (in promise) TypeError: Cannot read property 'amount' of undefined at Payment.js:53... I am getting this error bro please help me out. I am badly stuck as this point
Would be awesome if the video transcripts and Captions were on. It's hard to follow along at times and would make it way easier for me to follow along and grasp more of what is happening in the lesson; which also helps me with overcoming my learning disability. Hopefully, next videos will have those options.
hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
This is awesome. This is like the craziest and mind-blowing tutorial ever. After this, I'm a master already. Thank you Clever Programmers. You guys are great.
can u tell me what technologies this project uses? sanity content manager? what language for backend? does he also make admin role that can add products?
@@ts8960 It's only frontend. It uses Firebase for storage and authentication. And React context API for state management. The products are static or preloaded. Users can only add to cart and checkout using PayPal if I remember correctly.
Y'all helped me curb my fear of react starting with making webpages in html.. still not as expertised in it as I am HTML but no longer nearly as fearful of js and react js after only being an hour and a half into this video. Very concise very easy to understand. This should be a khan academy course or something because the relative ease of learning felt like the natural grasp of learning like watching one of those videos. Still have alot more to finish on my site, going for using this amazon clone in my own style to create an NFT marketplace. Is there still a link to upload our demos to?
can u tell me what technologies this project uses? sanity content manager? what language for backend? does he also make admin role that can add products?
thank you very much for this video,I almost complete more than 6 hours and 30 minutes. I get great experience how websites work and this was good beginning for my journey
I'm getting the same error message with the firebase installation. Its saying that there are conflicting dependencies even when I use --force and wont install.@@ruthjemeli8950
This was awesome. Thank you. I would have loved it even more without random interruptions at the most awkward times... but that's just me. None the less, huge thanks!
if u r facing error in 4:00:00 use these imports:- import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'
Guys you both are awesome, and you are also helping fellow programmers like us, I am not really that good at designing and stuff, but I still want to learn and I am learning
for using firebae auth , we need to do a couple of more imports now at 3:49:50 somewhere import firebase from 'firebase/compat/app'; import 'firebase/compat/firestore'; import 'firebase/compat/auth'; rather than just import firebase from 'firebase
Hello @Clever Programmer Thank you for the amazing content. I have a question on 01:36:00 since the Header component will stay on all pages, why do we have to render each route? can't we do this?
{/*HEADER*/}
so the header component will stay every time doesn't matter which page.
7:41:09 Unhandled Rejection (FirebaseError): Function DocumentReference.set() called with invalid data. Unsupported field value For anyone stuck with this error, remove these lines of code one by one and proceed with your payment. basket: basket, amount: paymentIntent.amount, created: paymentIntent.created Yes there is an error in one of these lines. In my case it was the basket. I forgot to put an id in the basket long way back. ( I got to know this by logging basket at various stages in the app). So I had to go back to home.js and put the id. This was an absolute stupid error from my side, you might have done something similar.
At 4:03:18, useHistory() is replaced with useNavigate() import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('/');_
Thanks for watching and commenting don't forget to hit the subscribe button.➕. ①. ③. ②. ③. ⑦. ④.-④. ⑧. ⑥. ④. ③. ☎️. For more info and support at anytime text w h a t s a p above…
hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
Awesome job! One issue bro, when we render this design in the mobile phone in portrait mode it is not being responsive. Can you please teach how to make a website flexible for mobile as well, side by side from your next tutorials? I understand this might add to your work, wish you guys all the best!!!
@@inzamam1320 hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
@@ningenshikkaku hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
![The Complete Frontend Developer Roadmap [2024]](http://i.ytimg.com/vi/Tef1e9FiSR0/mqdefault.jpg)
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
Hello @Clever Programmer! First off all, love your chanell so much and learning a lot, you guys rock!! And second, have a question; do you have a stream where you show how to hide an api key if you want to deploy your app, hide in a way of backend. I am junior in React and programming in general and follow your program, but not sure where this solution could be. Tnx in advance ❤❤
Thanks for the amazon clone react project);
First of all thanks for the awesome video.I got a bug in the cart page..It is like I am adding two items multiple times and when I delete the item from the top it is deleted from the state but appending in the UI .. is anyone faced the same issue and help me out to solve the issue
sir plz make tutorial on django + react full stack website
@@utpalmaity9688 Share your Code! Otherwise it's impossible to Help
you guys have no idea how much you two helped me. You are not making tutorials you are changing lives!
Is his profit with javascript course for beginners who didn't even know html css?
I'm asking this because I saw the syllabus
There was something called javascript crash course...
I didn't even know html and css...or anything related to web development...should I take the course?
What is the main moto of the profit with javascript course?
Should I learn html css javascript react node mongo express etc..before taking his course?
Please answer!
@@amreezkhan5530 take some time with html css play around with it if you find it comfortable then switch to javascript/jsx or you can make complicated projects and figure everything along the way just start learning there is no certain way of learning things just build and code.
@@abhilashmishra6653 will his course benefit me as a beginner?
@@amreezkhan5530 yes if you dont know anything you will get an overview of how things are
@@abhilashmishra6653 is his course live or recorded...can I attend to my own timings?
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!
Update?
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"
Thanks buddy
nice.... thanks man! how you got this
@@icode4741 I also got that error. Then I did google it and by Stack over flow I got the answer.
I ahve some error user authentication (Firebase: An internal AuthError has occurred. (auth/internal-error).)
could you help me?
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
);
}
export default App;
Thanks for your solution!
Yes I was having the same issue, tysm. :)
thank you for this! i wasn't sure what to do :)
Your method render two components. replace them with
@@nicolaseratyra could you show your whole code? My code was replicating what was shown in the video at that time.
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
@mycode i just use npx create-react-app amazon-clone (without i)
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.
is it working fully?
brother does ur code working correctly...plz give a response
@@bikashadhikari7858, I haven't completed the project yet. Have you finished it?
@@shamsulalam8599 not yet
@@bikashadhikari7858 finally completed it and its working
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 })
hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
@@adrina9798 just add --save --force at the end of the installation of any package. For example:- npm i axios --save --force
Element type is invalid: expected a string )
error at 2:15:30 cant resolve im searching for like 3 days please help
when I try to click on 'add to cart' button the product is not adding to the cart and the page is getting non responsive(stuck) and in the console am getting error as => [Violation] 'click' handler took 150ms
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
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!
can you please tell me the tech stack and backend technologies used in this project?
@@vidhijain1953 He wouldnt know because he is just following along.
I don’t think literally following the text version would get you the exact result. ReactDOM has change a bit , material UI also changes a bit. React-route-dom also changed. And I am stacked at firebase now. So you know what you are saying.
@@cissaltyliu5579 my comment was 5 month ago ...
@@flux2956 exactly!
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
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
can you please tell me the tech stack and backend technologies used in this project?
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
for anyone who uploaded their own photos and one was a landscape photo instead of square or potrait, then had issues with the product title sinking halfway down the component, you can change the justify-content for .product to space-between instead of flex end. You get the same look but now it works for every type of picture.
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
At 4:02:06 - In react-router-dom v6 useHistory() is replaced by useNavigate()
Hence the code will be as follows:
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/');
i am getting problems in firebase. what else we need to do for newer version?
@@PHENOGAMING i think you are using:
import firebase from "firebase"
should instead use :
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/database";
import "firebase/compat/firestore";
@@joywinbarboza983 i fixed it. I jst needed to remove .auth and put it in the braces
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 !!!!
Good luck on your journey
Hey...... If possible, can you help me......I got stucked at 4:32:00. email IDs are not showing on the checkout page. I think it is not able to access the user. Please help me.
@@tanumaurya3151hi. Try to console log the user and see what you get. Also make sure you’re using the correct methods when trying to access the firebase data cause I remember I had to change some parts of the code to work with the new version of firebase.
If you’re still stuck try using chat gpt to find the problem, it helped me a lot when coding this.
I hope this helps.
Ok...thankuu for ur suggestion.....
@lee.veu. Can you pls tell what all technologies are used in this project apart from React and fire base ?? 🙏🏻
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.
instead of
One more issue with useHistory at 4:03:12, in newer version import useNavigate from react-router-dom and navigate("/").
Thanks bro
THANK YOU FOR THIS!!!!! I have beens struggling with this for over a day
Thank you so much!
Did you faced problem in showing the CardElement from stripe
did you face any issue during user authentication (importing firebase) as im facing issues at that part of the video the error says : path and fs can't resolve
I never liked doing web development, and I had little knowledge of React but after following through this tutorial, I am gaining alot and everything makes sense now. I sucked with CSS but Sonny has been explaining it so well. I am coding along and it has been 3 hrs now. Will complete this project soon. Thanks alot guys.
can you please tell me the tech stack and backend technologies used in this project?
@@vidhijain1953 Firebase is used for authentication. ReactJS for frontend . HTML,CSS etc.
Heyy i am stuck at a point if you have completed it can any one please help me
@@prakritysrivastava5893 sure, where are you stuck?
@@lakshyamunjal5608 thanks for quick reply can we use any different platform please
this is project is really important for me
So thankful for you guys. You pack more knowledge into one video for free than 4 years of college.
not true
@@atimy why?
@@hemangchaudhary4700 unless you went to college or are heck of a talent the information required to understand it is another level. Usually college graduates understand coding and what to do to get a specific results, where as we are just coping information and not really understanding that well what it does.
If we where to try an build our own website unique of the Amazon structure then we wouldn’t know what to do to get the results we want. So in this regard a college degree is better. Job wise as well.
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
Series came right as my responsibilities switched to React so I appreciate this channel so much
Did you finish it? And if you did, did you run into any problems? Was it smooth sailing?
these two are really amazing, just do whatever these two are saying, I was watching this challenge seven months ago and didn't make sense to me at all, but I didn't give up and kept the commitment to learn, and now after seven months later, everything is supper supper clear and easy to devour the whole content, just keep following these two, they are amazing, I assure you everything make sense later if you are a beginner like me.
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
please were you able to successfully deploy it to firebase at the end?
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!
THANK YOU FOR THE AWESOME CONTENTS SIR
MANY PEOPLE ASK MONEY FOR BUILDING SUCH TYPE OF PROJECT BUT YOU ARE TEACHING US FOR FREE YOU ARE LEGEND
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 instead of
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.
brother please help in just one error
ERROR in ./node_modules/@material-ui/icons/utils/createSvgIcon.js 13:13-41
Module not found: Error: Can't resolve '@material-ui/core' in '/home/ind/E_Commerce_Mern/amazon-clone/node_modules/@material-ui/icons/utils'
@@anexocelisia9377 react 18 does not support material ui downgrade to react 17
@@justinebedi7048 Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'id')
did u get the solution . please reply if u get it man plzz
in payment.js when i click buy now then it displays this message
my payment.js is saying Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'id')
(anonymous function)
src/Payment.js:54
51 | }).then(({ paymentIntent }) => {
52 | // paymentIntent = payment confirmation
53 |
> 54 | db
| ^ 55 | .collection('users')
56 | .doc(user?.uid)
please can anyone help me out please reply someone !!!
I get black page without any error after importing StateProvider at 2. Please any help
I’m committed to building this project today no matter what it takes my goals are very clear but I’m going to keep working on my vision until it’s clear as water and until I get it done, no matter what. Then, I’m going to continue pushing always.
bro i am stuck at payment process help bro
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
For all people who have hopes on me. I will complete this course no matter what it takes. No matter how much time i take, no matter how many breaks i have to take while creating this project. I WILL CCOMPLETE IT
Yeah you will I believe in you I will keep the same mindset as you and try to start on it a soon as possible
Now I’m 3.5 hours in, and this is going to be my third clone from you guys. I recommend everyone to begin with the youtube clone, then twitter clone and finally this one. And try coding everyday for a few hours. Watch a part, code with them. And then review and recode it yourself and try without watching youtube. Then try to make your own application. That’s my final goal. Goodluck.
Hey I'm stuck at react-router-dom installation after installing that. I'm getting a ton of errors could you please help me out?
@@adrina9798 hi , there’s a new version of react router dom, which is a bit different. Check out some youtube videos of react router dom new version. I’m not home right now and I can’t show you the proper code. It has something to do with the switch tag which is replaced by routes or route
@@universe_decoded797 Okay could you please send me your amazon clone code once you get home or whenever you can access it. I'm working on a project and it would really help if I'm able to fix that issue.
Thanks
I did something like this, found some old screenshots i made. As you can see i’ve used the {} after the element to import multiple components!
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
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.
Thanks mate!!!!
Working now
npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material
@@StuartRidout facing issues with react-router-dom installation could you please help me out?
What if I don't want to downgrade
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📌
can i use this tutorial now .??? please help
@@sanketpatil6084 Yeah, you can use, if you have the basic knowledge of coding.
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
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 provider" FEAR NOT.
These are my targets for per day:
2:35:00 D1
3:20:00 D2
4:05:00 D3
4:50:00 D4
5:35:00 D5
6:20:00 D6
7:05:00 D7
7:50:00 D8
and D9 Project Completed
were you able to complete bro
@@mehmetfrataksoy4009 Ya Bro. I have completed the front end. Also Have made another Application.
@@himanshusharma832 ./src/firebase.js
Module not found: Can't resolve 'firebase' in 'D:\Web Dev Creations\Projects\amazon-clone-2\src'
please help me solve this error!!
@@harsh00721 The import path may be incorrect. MODULE not found is shown there only when the path defined to connect is not correct
Neat stuff mate. Simple, practical, on-point. Kudos to you guys!
can u tell me what technologies this project uses? sanity content manager? what language for backend? does he also make admin role that can add products?
If I get a cool job, I'll surely send you half of my first payment. Thank you, from brazil! You guys are awesome! Don't even know how to express my gratitude. I hope that the skies reward you with great things! And once again: THANK YOU!
I am stuck at payment process can u help me please
@@divya8423 I am stuck at firebase step at 3:57:00 can you please help
@@maazqureshi6115 what exact issue u face
@@divya8423 Module not found : Can't resolve 'firebase'
@@divya8423 error solved , thanks for your reply
So much love so much positive energy for you guys didn't even notice 9 hours going by felt so short and effective
Please can you help me out I’m stuck at 4:03:00
My authentication isn’t working
No words mate!! You guys are just awesome. Cheers!!
Qazi is that kid in the group who does not do any project work but does the presentation and gets all the credit
Hahahahaha
💯
Thank you, guys...Learning React with a project is amazing... really appreciate your work
even tought this course is outdated because there are a lot of things that have changed in react and also firebase , i managed to make it , let's go guys
yeah switch is not working but i've managed to code it with router, route, routes itself
Hey there, I'm also making this project. Can you share your code? I'm stuck at the last step with stripe giving me error after clicking Buy Now saying "Error confirming card payment"
Excellent! I'm not done yet but so far I've learnt a lot. The way you explain things is just great.
How i can add Emogis in product rating stars icon
you guys have such a positive way to teach and i get inspired to continue for more than my limit, and excelent teachers too o/
{'⭐️'.repeat(rating)} this also worked for displaying the rating. Then you space the stars with letter-spacing css
Thank you :) !
I'm committed to building this project today no matter what it takes.
Inspiring...
Share your LinkedIn profile link....
Just completed all pages with fully working deployed website.
Amazing experience CP. 😎😇
If someone want help can told me
It have some updates. That creates error
@@dhananjaydogne3616 hey bro i am gonna start this will u help me when error occurs??
hey im having issues with the payment , also not getting the secret key in the console, can you help?
Hi!! I reallly need your help with my project. I am not able to configure Stripe and my clientSecret id doesnt show on console and on clicking But now, it just keeps proccessing. Pls pls reply to me. It would really mean a lot to me if u do.
This is a really great course but unfortunately it's not for absolute beginner you should at least have react fundamentals cover up before starting it. I'll recommend watching coding addict or free code camp for learning react fundaments, it will solve all of your problems. keep up the great work guys.
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
Hi Qazi and Sonny, please add testing with Jest and Enzyme to your projects. I think it would be nice to have testing in portfolio. Keep up the good work!
DEVELOPERS ALERT HOW MUCH MONEY WILL YOU TAKE FOR MAKING THIS SAME AMAZON WEBSITE FOR ME AND MY BUSINESS.
can you please tell me the tech stack and backend technologies used in this project?
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
Sonny and Qazi, I really appreciate your amazing work guys. Thank you for helping us guys!
I love you ❤❤
@@vindira1927 lmao, bro you down bad
Hi guys. I am already a developer and really enjoy your show. I also lerned a few things I didn't know before. Maybe you should do a coding session like this without preperation. As a developer, live normally isn't that easy. CSS is fiddeling arround, many Bugs, errors all the time, APIs change and tutorials don't work anymore, etc. If you doing it, it looks easier than it is.
hi
If anyone is having issues with compiling you have to downgrade your react version
In the terminal type: npm uninstall react-dom
after that type npm install react-dom@17.0.2
should now work!
Coming back to this when I start this project, thank you.
at 1:37:48
can use this newer code
hope this helps
I wanna give a medal to whoever actually completed this project.
almost done..i cant wait to collect the medal
@SaltedCracker Why do you say that?
@@abideenogunrinu674 are u done with this amazon clone?
@@manishaghi2966 deployed v1 yesterday onto eemanstores-16cab.firebaseapp.com. added stripe payment today to localhost. Hope to have it completed and move to next clone airbnb or spotify
@@abideenogunrinu674 Can you please help me out a bit brother? Provide me something so I can contact you .
im gonna build this amazon clone no matter what. Will update this comment when I complete it
Update: Basic model complete need to add animations and admin page
In case anyone is curious, for the header I edited it a bit to just show the part of the email before @. Makes it shorter and looks a little cleaner so it doesn't space things out so much up top. You can throw this in and it'll work ```Hello, {user ? user?.email.split("@")[0] : "Guest"}```
I used something more complex ( "---" ) , {user ? user.email.slice(0, user.email.indexOf('@')): "Guest"}
thx it looks very nice
I'm committed to build this project today no matter what it takes 🙏
Did you do it?
@@hassansajid5730 Nah he quit later that day.
I've never coded in my life , more than a decade and a half working in tech space , I'm gona try this to build my confidence
Thanks for watching and commenting don't forget to hit the subscribe button.➕. ①. ③. ②. ③. ⑦. ④.-④. ⑧. ⑥. ④. ③. ☎️.
For more info and support at anytime text w h a t s a p above….
For those unable to install Material UI or showing errors at 40:43 , Use this command instead:
npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps
Did you complete this tutorial ?
Thanks bro
Thank you for sharing this, it means a lot to me!
Did you finish it? And if you did, did you run into any problems? Was it smooth sailing?
Absolutely a piece of art! I love this tutorial, The fact that is both of you some how takes the sleepiness away heheh so entertaining. As other users wrote this is like watching a movie
Thank you hips guys
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
if you are facing issue at 1:37:18 do this in the terminal
npm uninstall react-router-dom
npm install react-router-dom@5.2.0
hey...do you got ur ans about the tech stack they are using??
@@saurabhkhule1296 yes express
wow, react is simple and somehow easy, i watched this tut back in 2021 , infact i wanted to grab something but i couldn't understand anything dude was doing. So i forget and went back to learn my JavaScript basics very well and today i came back to watch it again, every things looks super easy... lol. How he explained the the react routes and made an example is awesome . I guess as u said sometimes watching and following , not even practicing or tryna code along is sufficient for u to learn it. Thank you Clever Programmers...
Did you encounter the updates in the react router and others
so confused after this build 'WHICH ONE IS REAL? and WHICH ONE IS CLONE ?" YOU GUY'S ARE LIT!!
Can you show me your code ?
Im going to do push-up every time I will hear "EXACTLY" .. i love it
Hello
I have an issue about stripe and ı have the secret key showing on console when i click buy now
normally it puts the money on stripe dashborad and redirects you to orders page or home page for me this part doesnt work any help please I beg my insta is @msy.cf thank you in advance
@@BlackMSY Hey my advice is to look on github, cp linked that amazon-clone, you can simply check if u have same code, if yes, then propably u forget to install some tools
@@BlackMSY Oh im looking at it now, and its not working for me neither :D but it worked 3 hours ago :) maybe they are fixing something
@@safsafaf2838 please can you send me the github link by my instagram or through here I'm review the video again and again
Please show how to make the slide out category menu like Amazon has. Btw I loveee Clever Programmer thank you so much for the value!
Please do this @CleverProgrammer
@The Windows User Always down for a collaboration. Do you have Instagram or Slack?
Use Swiper Slider ;)
@@DTtutors U the man! Thank u :)
Thanks for the way you keep improving and updating your tutorial. Some people are saying how many time will you do this tutorial, they do not understand what version control is. We are still expecting more update on this course if need arises. Thanks for this free great stuff.
Amazing tutorial guys! You make difficult concepts sooo easy. God bless you clever programmers. Thank you!!
I don't know why cart item become zero after refreshing the page? can you help bro?
now this is what I call quality stuff! dope job guys
TRY THIS --1:38:03
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";
import Checkout from "./Checkout";
function App() {
return (
// BEM
);
}
export default App;
You guys are amazing! Im currently in a bootcamp, and we just wrapped up learning react but I'm lost. This tutorial helped my understand it. Will definitely follow you guys and watch all of your videos. Thank you.
Why you lost?
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
I have a problem please when I add my product to the basket x 5 I will see the same product in the basket time x 5 how can I do to see only one product in the basket if I add a product x 5 in the basket
Don’t know If I explain it well 😂 but that is situation right now
after this course , I got the habit of saying "exactly"
awesome, guys i am watching this video after 3 years still this is the best project on youtube
you both guys are god of developing clones of website!
Hey Yash! Are you a self-taught programmer and build projects to learn? If yes, please reach out to me so that we can discuss some interesting software development roles in latest technologies!
not sure if there still are people doing this project. if you do not find the clientSeceret special keycode @7:09:00, it could be the cross-origin issue. Try add -------response.setHeader('Access-Control-Allow-Origin', ' *') in the Post method, i.e. in app.post('/payments/create'); hope this helps. good luck.
my payment.js is saying Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'id')
(anonymous function)
src/Payment.js:54
51 | }).then(({ paymentIntent }) => {
52 | // paymentIntent = payment confirmation
53 |
> 54 | db
| ^ 55 | .collection('users')
56 | .doc(user?.uid)
please can anyone help me out please reply someone !!!
I have some problem in payment section can you please help me
@@riyakundu4164 me too facing same issue . can you assist me?
@@travel.keshav till now, I am having that issue
I dare you to... follow along and replicate everything for the next 8 hours!!!
I wanted to try but I type slow lol. Did you do it?
@Alek Wolf 45wpm😔
@@amanrana7450 don't worry I am with you😔
That's a big challenge for a bigener as me.
No thank you
I just finished the first project guys. Amazon clone was a success!!!!! Thank you
Payment.js:53 Uncaught (in promise) TypeError: Cannot read property 'amount' of undefined
at Payment.js:53... I am getting this error bro please help me out. I am badly stuck as this point
Bro does this project contains full functionality of Amazon? Or is it just UI part?
Once I click on Buy now 🤯 normally it directly you on /payment/orders but for me it stucked on /payment page help 🆘 me bro
@@manishaghi2966 Does the payment is successful in stripe dashboard??
@@ShahrukhShaikh-uo2pz thanks bro I figured out my mistake
The two most dopest streamers and collaborators ever...too awesome!!! Thank you from #ChildReact
Would be awesome if the video transcripts and Captions were on. It's hard to follow along at times and would make it way easier for me to follow along and grasp more of what is happening in the lesson; which also helps me with overcoming my learning disability. Hopefully, next videos will have those options.
hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
2 years after and I can tell you the comment at 3:14:07 will hold true for years to come. Good stuff guys
Please Make a admin panel with role permission
yeah we need this
what can we do with admin paneli why we need admin panel?
@@alibalbars5177 to add projects, remove stuff
@@roothacks6864 is adding project possible on amazon or do you mean product?
@@alibalbars5177 sorry i mean new products
This is awesome. This is like the craziest and mind-blowing tutorial ever. After this, I'm a master already. Thank you Clever Programmers. You guys are great.
can u tell me what technologies this project uses? sanity content manager? what language for backend? does he also make admin role that can add products?
@@ts8960 It's only frontend. It uses Firebase for storage and authentication. And React context API for state management. The products are static or preloaded. Users can only add to cart and checkout using PayPal if I remember correctly.
@@khomohzie thx
Y'all helped me curb my fear of react starting with making webpages in html.. still not as expertised in it as I am HTML but no longer nearly as fearful of js and react js after only being an hour and a half into this video. Very concise very easy to understand. This should be a khan academy course or something because the relative ease of learning felt like the natural grasp of learning like watching one of those videos. Still have alot more to finish on my site, going for using this amazon clone in my own style to create an NFT marketplace. Is there still a link to upload our demos to?
can u tell me what technologies this project uses? sanity content manager? what language for backend? does he also make admin role that can add products?
thank you very much for this video,I almost complete more than 6 hours and 30 minutes. I get great experience how websites work and this was good beginning for my journey
how did you deal with firebase installantion? mine is giving an error
I'm getting the same error message with the firebase installation. Its saying that there are conflicting dependencies even when I use --force and wont install.@@ruthjemeli8950
Am committed to build this project today ,no matter what it may take me to achieve this desire in me to become the world's greatest developer
this is gonna be epic!
This was awesome. Thank you. I would have loved it even more without random interruptions at the most awkward times... but that's just me. None the less, huge thanks!
Bro, can u tell me just after learning JS & ReactJS can I start with this video? Or I need to learn other things?
if u r facing error in 4:00:00 use these imports:- import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore'
Did you complete this project?
@@inzamam1320 i was halfway through, but their promotion thing was distracting, so left it there.
@@aanchalsahu1414 Have you made any other project of e-commerce website?
@@inzamam1320 nah not ecommerce
@@aanchalsahu1414 then what ?
Guys you both are awesome, and you are also helping fellow programmers like us, I am not really that good at designing and stuff, but I still want to learn and I am learning
Thank You So Much Both Of You . I Learnt so much from this project . God Bless You :)
Hey man I'm a big fan of what you're doing here... Would you please make a video on the clone of blogger? Would be waiting for it for sure!!!
Hello
Can you please tell me which software to use for coding?
@@growthhacking9126 notepad
for using firebae auth , we need to do a couple of more imports now at 3:49:50 somewhere
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';
rather than just import firebase from 'firebase
Please Make a admin panel as well '
Please ..... Otherwise its incomplete !
++ it true we nees admin panel
Yes please build admin panel
Yes
Yes
have you done admin panel plzz give the src code
Wow Awesome.. Learned lots of thing in React... Hats off you guys
I got internship for React Js , Thanx a lot buddies!
So you show them this project and got selected
Hello @Clever Programmer
Thank you for the amazing content. I have a question on 01:36:00 since the Header component will stay on all pages, why do we have to render each route?
can't we do this?
{/*HEADER*/}
so the header component will stay every time doesn't matter which page.
7:41:09
Unhandled Rejection (FirebaseError): Function DocumentReference.set() called with invalid data. Unsupported field value
For anyone stuck with this error, remove these lines of code one by one and proceed with your payment.
basket: basket,
amount: paymentIntent.amount,
created: paymentIntent.created
Yes there is an error in one of these lines. In my case it was the basket. I forgot to put an id in the basket long way back. ( I got to know this by logging basket at various stages in the app). So I had to go back to home.js and put the id. This was an absolute stupid error from my side, you might have done something similar.
Firebase Authentication error:
./src/firebase.js
Module not found: Can't resolve 'firebase' in 'D:\Web Dev Creations\Projects\amazon-clone-2\src'
please help me solve this error!!
Thank you, I still haven't figured out where I went wrong with the basket key but removing the key helped me at least get data into the database.
Okay, I made the same mistake you did. I'm used to having ID fields being made for me in SQL
@@t_ford haha it took me a lot of time to figure out this mistake
hey can you help me out I am not able to resolve this same error
At 4:03:18, useHistory() is replaced with useNavigate()
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/');_
ah okay, thank you!
Thanks for watching and commenting don't forget to hit the subscribe button.➕. ①. ③. ②. ③. ⑦. ④.-④. ⑧. ⑥. ④. ③. ☎️.
For more info and support at anytime text w h a t s a p above…
Thank you
After using the navigate when I click on the create account I can't go to the home page... Can you help me please
Today I am gonna complete this project and learn new things no matter how much time and effort it takes
Am committed to building this project.
Am so excited to have seen this course, thanks guys for this course,i really love it.
hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
Awesome job!
One issue bro, when we render this design in the mobile phone in portrait mode it is not being responsive.
Can you please teach how to make a website flexible for mobile as well, side by side from your next tutorials?
I understand this might add to your work, wish you guys all the best!!!
The one guy : Its too fast I am signing out.
Me who's is watching this in 2x speed cause it felt a little slow:😲 Its fast ??
Legends are here.
I commit to follow and build AMAZON clone from this tutorial till the end of video.
Done the complete course
Thank you guys, I've just finished my own Amazon-Clone!
You guys are so generous. I really appreciate it!
Did you faced any problem in showing CardElement from stripe?
@@inzamam1320 No, I didn't face any problem in showing CardElement from stripe.
Can you please suggest something for severity vulnerabilities while installing anything in cmd
@@inzamam1320 hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue
@@ningenshikkaku hey facing issues with react-currency-format as react 18 is not able to support react-currency-format 1.1.0 . Would like to know how you over came that issue