Let’s Build a Full-Stack AMAZON Clone with REACT JS for Beginners (Full E-Comm Store in 8 Hrs) 2021
- May 25, 2024
- Posted by: MainInstructor
- Category: Angular BASIC C E-Commerce Go Java JavaScript Node Python React Real Estate SQL Swift VSCode Web Development
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703010049_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Let’s Build a Full-Stack AMAZON Clone with REACT JS for Beginners (Full E-Comm Store in 8 Hrs) 2021
you guys are actually going to build the Amazon clone and this is a app where you’re going to have full e-commerce functionality back and in front this is going to be absolutely insane it up it up I got a bit of the bank to make me a safe house Shake it up Shake it up she got her hands on her knees and she bringing a cake out smoke it up smoke it up I got some gas some packs I’m up in the greenhouse B it up ball it up I’m with the game we taking shots off the rebound I post to say now I’ve been humbl too long tell them stay calm tell them all move on now they lost in sa took a l that’s your lost had to get my point across this is going to be absolutely insane this project on your portfolio with full e-commerce functionality back end and front end so actually it’s going to have more functional than what You’ have seen here even if youve watched this previously on our YouTube channel this alone will have the power to get you many many jobs and uh you’re going to learn a ton of new technology as well you’ll have full user authentication as you can see up at the top you’ll be able to add things to your card so for example if I do add the basket add the basket you see how that number over at the top changes to two now if I go to my basket you can see how both of these orders are right here one the lean started for $196 this for2 39 if you add up the total you get this sub total over here I can also remove from basket and notice how removed without even having to refresh That’s The Power of react this is why so many companies want to use it and want to give jobs to developers uh and hire you you will actually be able to also process a full checkout with this and all of this is instant it has all the Technologies you need to know to become a modern day developer clever programmer’s Mission this year our mission at clever programmer this year is to help 5,000 people get jobs as a developer I think this is going to be the fastest way to be able to do that in 2021 we want to get 10,000 people jobs as developers but for this year help us hit that goal now let me tell you something amazing we have one of our this is just one of our students that has done this right this student built all of our clones his name is Adam Reeves and he built our Instagram clone he built the Amazon App he built all of these apps that we showed you how to build and with the Instagram one and the Amazon clone alone he was actually able to land a job and he just text me yesterday and he got a job offer from Aus IT solutions uh he got that job Jen who’s another one of the students in our course profit with JavaScript she actually built this Co Tracker app and with that alone she actually got a job offer you know of course with her previous experience and this the employer was so impressed that they actually gave her a job offer for $96,000 a year so guys this is as real world as it gets people are getting job offers left and right we had another student Frank he actually got a job with a Consulting gig with Sonos the speaker company for over $100,000 a year I don’t want to say the number but I kind of do it’s it’s it’s almost 17 70k for this project so that is absolutely mind-blowing and he’s also in our program with that said if you’re ready to get your web development career started if you are ready to learn the most popular framework in the world which is reactjs which Facebook uses and all the top companies in the world actually use Instagram and if you want to learn the skills to become a modern react JavaScript developer then register for this free training packed with value and you’re going to have your resume and portfolio completely built again all of it is completely free all you have to do is click the link below register for the training and I’m going to see you [Music] inside we’re going to get started building the Amazon Project I only have one question for you guys are are you ready exactly guys let us know in the comments right now smash that thumbs up let’s get ready for this build guys guys let’s go and now we’re just going to jump into it keep your energy High because this is one problem that happens to developers your shoulders will start to slump you’ll start to get tired but persevering through this is what’s going to get you to the next level remember your why that you told us yesterday some of you are doing this for your family some of of you are doing this so you can become Your Own Boss some of you are doing this so you can support your mom guys that is where the Why shows up the ones who are going to drop off today are the ones who are not going to become developers in the future the ones who drop off today are the ones who are not going to become developers of tomorrow so make sure you’re the one who doesn’t do that right if you have that in you and you can persevere then we can get through this so if you’re committed to doing the challenge today and finishing this entire thing that we’re going to do today and deploy it to Firebase then make sure you drop in the comments below right now that I’m committed to building this project today no matter what it takes that exact thing I want to see it in the comments below with that said let’s get started let’s do it bro so the first thing that we’re going to have to do is let’s hop over to vs code so we asked you guys yesterday if you hadn’t already got vs code make sure you go ahead and get vs code because you’re going to need it to follow along with us me and are actually doing something called vs live share right now so if I type on the screen you can actually see I’m inside of kaz’s programming and just to be very clear because I think one thing we didn’t share is like this is the exact thing you guys are going to be building uh today okay so you know we’re going to have the add to basket functionality it’ll be deployed online so you’ll be able to see it and then you’ll be able to route to different pages and things like that all right I’m going to put this to the side now so so now guys what we’re going to do is we are first going to go ahead and open up um the terminal so let’s go ahead and open up the terminal so command J is the terminal in vs code if you’re on uh Mac M and what you want to do guys is do let me I just think I need read and write permission so I’m going to go ahead and request read right all right here we go there we go and now guys what we want to do is we want to use a tool called uh MPX so we’re going to do MPX uh and we’re going to do create react app so this is a tool by the guys over at Facebook and you want to give it a name so at this point we’re going to go ahead and say Amazon clone like that right so you make sure use dashes and it’s MPX create react app Amazon clone that’s going to go ahead and set up a star a template for you guys when you are coding with react and that’s going to give you everything you need to get started with this build today so just let that go ahead and get installed and while that’s happening kazy let’s go ahead and head over to firebase.com yep so now that’s exactly what we’re going to do I’m going to open up a new tab type in firebase.com boom and Firebase basically what it does guys is it allows you to have a database and allow allows you to host your app online if you’re confused about what a database is it just allows you to save things so they don’t go away the next time you’re there okay simple as that exactly uh oh dude I think a few a few people are saying the music’s a little distracting let me put it down maybe lower yeah drop it a tiny bit all right it’s gone don’t worry guys let’s focus nice so now guys uh yeah as Kazi said all you need to get started with Firebase is a Gmail account so go ahead and go over to the console yeah okay so let’s go ahead and what we’re going to do is I’m just going to change man my computer is really starting to slow down I’m going to try to kill everything I don’t need so give me one second guys nice and guys while he does that I’ll expl what we’re going to be using Firebase for so Firebase is going to be used for the hosting right now today we’re going to be using it for the hosting tomorrow we’re going to go ahead and connect our database over to Firebase so we can pull in some information some products and things like that uh and then we’re going to go ahead and also use Firebase Cloud functions which is interesting we’ve never done that before in these builds we’re going to go ahead and use cloud functions to go ahead and get this thing connected to stripe so that we can process and take payment on this website right so it’s going to be an awesome build yeah and all of those things are pretty much going to be done through Firebase yep exactly exactly okay so my computer is starting to pick up I just really hope it won’t crash if it does crash no problem we’re just going to go live in this Facebook group again so when you guys come back it’ll just be right at the top of the Facebook group if you’re watching it on Youtube it’ll also pop up for you so just be aware of that um little disclaimer so now what I’m going to do is I’m going to H go to console yep on Firebase go and then once this is here you’re going to click on the create project option and all you guys need to do is on that create project is Type in the same thing that we did for create react app so we’re just going to do Amazon dclone and if you’ve already got one in this case we’ve already got one we could rename it to something different so this case it could be Amazon um we’re just going to call it um Amazon challenge yeah nice all right but you’re calling it um it won’t conf yeah this is just simple so you guys can just call it Amazon Challenge and you’ll be fine yeah you can call it Amazon challenge at this point the name doesn’t matter here guys it’s purely sort of aesthetic and then for the Google analytics you can choose to enable it or disable it it’s not going to make a difference y won’t yep now what we are going to do is we are going to wait till that goes ahead and sets itself up up and then we’re going to go ahead and grab the configuration file from Firebase and what that’s going to do it’s just a simple sort of config file so it’s pretty much just a uh an object that we’re going to grab from Firebase and that’s going to allow us to connect our front end react app over to Firebase so that’s like the missing piece of the puzzle right dop um oh man what that so weird I what I’ll do is I’ll just switch to my other email and then try from there yeah let’s do that so we have built so many projects on that one account and so many people are hitting that like it literally is just maxed out so I’m just going to go here but I’m going to do pretty much the same thing so nothing has really changed for you if you just did Amazon challenge that’s totally fine or if you did Amazon clone that’s fine too so I’m just going to hit continue continue Y and uh all right here we go you don’t need to add Google analytics to it unless you want to oh qu a group right group interesting so a lot of people are actually getting that so Google is actually seems to have that issue so guys at this point it’s completely fine we don’t need to set this up right now if everyone’s getting the same error don’t freak out don’t panic we can go ahead and build the rest of the app and we can fix this afterwards so we’re all good we’re all good we’re all good for now we’re going to just go ahead build the app and then we’re going to come to this a little bit later dope exactly so at this point we are coming to an end for the create react app so once that go ahead and gets installed the First Command that we’re going to run is something called mpm stop so it’s just about finished now once it goes ahead and get done you need to make sure you CD into the correct folder right so we’re going to make sure um it’s just taking a little bit of time today but for you guys I mean it’s pretty let us know guys is your m uh create react apps finished and if it does what is what is the message that comes up they should say happy something so if you guys already got to that stage let us know your computer’s going pretty fast right now then um yeah let us know and once this is loaded we can get started and we can get running guys yep it’s almost let’s go ahead and yeah it’s almost done there guys guys let us know in the chat are you guys are you guys from oh nice dude hey happy hacking you see that everyone’s jumping in happying are you serious that’s what I’m talking about yeah damn my computer just my computer is just so slow right now that I’m just like I’m I closed everything that I possibly could so I’m you’re going to be my eyes for all of that stuff D dude that’s crazy yeah like everything’s flying in right now it says it’s going crazy yeah so I think the Google servers might be temporarily down I mean guys there’s too much fire with this challenge right now everyone’s hitting that that fire oh yeah I mean cuz we’re promoting it so much that maybe like fire base is like hey can’t handle it anymore just freaking out dude oh man so everyone’s got to that point so what I want you guys to do if you’re at this point we’ll just talk you through it and then we’ll we’ll actually show you this while it happens so it will say happy hacking and then it will say CD into whatever folder was created so I want you guys to go ahead and do CD Amazon challenge if you named it Amazon challenge and once you’re inside that pH hey it just worked for us wait is this it didn’t say that before right it did it’s always said happy hacking oh really nice okay yeah happy hacking okay so we’re now going to CD into this folder so if I showed you my uh directory wait where did it where did it build it I don’t see that folder uh oh you called it Amazon clone yeah got it okay awesome nice sweet you guys don’t need this file I just sometimes have clever programmer JS for fun but basically it should look like this Amazon clone and that’s all you should have in here for now exactly but once you get to this point guys you just want to CD into the photo like Ki just did and then if you to to make sure you’re in the correct photo in the terminal if you just type in LS it should say things like read me package Json node modules and that sort of stuff so you should get uh you should see that stuff with and now what we’re going to do is hit npm start once you’re in there because what that will do is it will start running the app on your Local Host um so if it runs which you know we’re waiting for it right now but as soon as it runs on the right hand side you will see a spinning react logo and what that basically means is hey our app is running all right and while that happens because my computer is fire I think Firebase is good now dude really yeah so I think five Bas has come back on so we’ve got it’s so cool how everyone informed of firebases status but yeah I think Firebase is back up now so a lot of you guys are actually getting through on Firebase um we can go ahead and give that a second try while our app starts up I love how it goes down while we are live you know this is what they say like what we’re going to code live what can go wrong yeah exactly all right here I was wondering I was like they’ve given us a fair build on five uh oh why is Sun disconnecting uhoh all right Sunny you disconnected for a little bit so now you’re back so that’s really good all right I’m going to try it says you’re one project okay so let’s see where the Amazon challenge that I did so I’m going to click on the Amazon challenge one hopefully allows me to be in yep now I’m in beautiful nice now what you want to do is on the top left you see that little icon there yep you’re want to click that type in Amazon challenge okay Amazon challenge also set up Firebase hosting yeah Register App exactly yep now the next step you don’t actually need to do you click next and then this one is important guys you’re going to need to run this command but you’re probably going to need to write pseudo in front of it so we’ll show you guys how to do this okay so I’m going to just open up another terminal here and I should have it in my so you’re going to do pseudo npm install global Firebase like that and then type in whatever password is for your computer if you’re on Windows you might not need pseudo just try and PM install yep exactly do they do they do pseudo or they still in like yeah you need to do pseudo if you’re installing something globally even on Windows right uh I think maybe if I mean like if you guys use Windows and you know what the alternative is let us know I think it’s still PSE sudo though yeah okay dope and by the way n did we drop it in slack that we’re alive okay beautiful guys I just want to say as well like if Firebase is not working it’s okay at this point so do not worry like do not worry it’s we will also drop a solution to it later too so don’t worry about that yeah but focus on the react stuff the react stuff is the important bit here all right and then we don’t need to worry about this right now either right no not yet all right so we’re just going to hit continue to console then which is hidden behind my and Sunny’s face so it was like literally where our screen was supposed to be was showing up yep all right so now I got that code um or now what what do we do sunny right so now you going to do is go over to the top left inside of the Firebase console uhhuh the burger menu click that yeah click that little project settings icon on the top right yep gear and then click on Project settings and now when we’re in here we’re going to grab that little snippet of code that you’re going to need so let’s go all the way down here and hit config and inside of our config we’re just going to copy this um and then should we just make a new file right here in Source yep let’s go ahead and make a new file let’s call it firebase.com now I think we can actually jump into the coding part of [Music] it so let’s go ahead and see if our app ran up on Local Host 3000 yep so our app is running nicely now what we’re going to do so that’s a little uh let’s just here hit a some air horns right there guys if you got there let us know if you see the little spinning react icon let us know in the comments right now uh because that’s amazing you’ve got to your first working react app so now we actually go ahead and kazy what’s the next step so that’s a thing to celebrate and now this is Sunny’s favorite part so now guys what we’re going to do is make sure that you just go to all your test files cuz we don’t need them and we also don’t need the logo so all we’re going to do here is just clean it up a little bit how I selected all of them is I just held command and I clicked on all three of them so they’re all SE selected now I’m just going to do command delete all right and what that does is delete all those three files on the right hand side what’s going to happen is you’re going to see it complain about hey a logo is not there okay well that makes sense because we just deleted the file that had the logo in it so no worries what we’re going to do is we’re going to go to um app.js and I’m going to hit command B and command J so take away the terminal so you guys can see more of the screen and everything that’s inside of this div I’m going to highlight it like that it’s good that my computer is going slow so everybody can actually keep up even if you’re a little bit behind and instead I’m just going to write here like a H1 tag and I’m going to say hello clever programmers let’s build the Amazon store nice all right and I’m going to put a little rocket emoji I can go ahead and drop one in there if you want uhoh uh it did some it did some weird stuff let me go ahead and drop in I got a rocket there we go boom oh my bad all right sweet yeah my computer is just slowing down a lot so I’m going to hit save and now on the right hand side what you guys are going to see let’s hit refresh here we need to get rid of the logo as well guys on line two so you see this line of code right here let’s go ahead and delete that perfect and so save that file boom there we go and there we go and now if I full screen this over here you guys see how it’s in the middle what we want to do is we want to get rid of some of this styling that’s coming through default so we’re going to get rid of that so now what we’re going to do is we’re going to go into our files and we’re going to go into our uh app.css we’re going to select everything so I’m just going to do command a here save that should get rid and now everything should be left aligned I’m going to put it back to the right hand side we’re going to go now into our index. CSS and get rid of that invisible margin that’s kind of always there because we don’t need it yep so we’re going to pretty much do everything and we’re going to do make hey give us zero margin so let’s hit that save and now you see there’s no margin at the top like before it was giving it margin and react does that sometimes let’s go back to our appjs and here we’re just going to call this app like this because this is following a bem convention which is like a really nice naming convention to use for your styling and um people like really love this when you know how to do this and with that said we’re pretty much now ready to get started exactly so awesome stuff bro like now that’s a a great point where you guys are going to get to because we basically have a clean canvas at this point so we now have the um oh I see yeah I found it again it’s come under a different one but that’s completely fine we can sort this out um it’s come under the WhatsApp clone with manat kazy so just get the guys maybe change that they’re they’re changing it yeah okay top so now what we have guys is we pretty much have this starting ground so we have hello clever programmers let’s build the Amazon store right so once we’re at this point what we want to do is we want to basically just do some markdown so I like to comment things uh and it keeps everything very sort of easy to stand so let’s go ahead and add our first comment in this one what we’re going to do is we are going to go ahead and add the uh the header so we’re going to go ahead and say the header first because what we’re going to do is we’re first going to have a header and then we’re going to have a home component right so the header is essentially what the so the header essentially is the um going to be the top part of the Amazon um app right so the header component on the Amazon App then we have the rest of the body which which we’re basically going to be called we’re going to be calling the home component okay so C what we could do is I’m not sure if it’s going to if it if it may lag too much in showing this what we could do is show them um the Facebook uh not the Amazon uh app if we’ve got it open yeah have we got the deploy y so we actually want to do so the top part right there so where it says Amazon at top that’s going to be the header component and then we have the home component which is going to be underneath everything underneath it is in part of the home component everything above is the um header component got it right so that’s what we’re going to go ahead and do and then what we’re going to go ahead and do guys is we are going to go and create these components so the first thing we’re going to do is create a file called header. JS so KY let’s go ahead and create a header. JS all right um um I’ll open this up right here we’ll go header and this is since this is going to be a component whoops let me go to this screen right here since this is going to be a component guys what we need to do is capitalize that H right there so let’s hit enter and the the code that this file is going to contain hopefully if I can still draw is this header that you guys see over here so I’m going to grab that header right there so that header that you guys see here that’s what’s going to be in that file okay so just very clear with what code goes there exactly so once we’re inside that file we’re going to use something called es7 Snippets so in order to install these you just need to go over to the extensions inside of um react inside of vs code sorry and go ahead type in es7 and these are going to be the Snippets that you see us using throughout the 3 days in the builds this is going to help you be extremely fast with your development uh and it allows you to do a really nice little shortcut that we use in every build which is called RFC and when you type in RFC let’s go ahead and follow yep nice when we type in RFC it actually goes ahead and it renders out a complete functional component with the correct name so that’s really cool and then what we’re going to do is we’re going to give this a class name and we’re going to give this one class name of header because it’s the header component and then we’re going to go go ahead and also give this its own CSS file so we need to go ahead and say inside this folder let’s go ahead and import the header. CSS so before um what we now need to do is create a header. CSS file so inside of our source folder I’m going to create a header. CSS file and you should see us pop into that file right uh any second now so I have now just jumped inside of the header. CSS file and you can see any CSS that we are going going to include inside of our header component we’re pretty much going to write inside of this header CSS file and I can see a lot of people are coming back to this video now which is awesome we have everyone coming back nice awesome guys yeah welcome back it dropped down for a little bit but we are still building the Amazon clone and I just want to say internet is being shaky but we’re here and we’re going to persevere through the challenge so just keep coming back if it dies just join us right back for those of you who care about this I know you guys will show up cuz we will just keep showing up for you okay so I don’t know if it happens again cuz I know whenever you’re trying to actually do something important internet dies and like every problem in the world happens like crazy stuff H started happening in the house too but we’re back and we’re not going anywhere so we’re going to just keep coming back live I don’t care what it takes but let’s keep going guys exactly guys let’s get the energy back up so what we’re going to do inside of the header component is where basically we we have the Amazon logo on the left we have this nice beautiful search in the middle and then we have all of the icons and where it says hello sign in returns and orders your Prime everything like that on the right hand side now so let me just ask you these questions right so on the left hand side we got this logo that you’re talking about the Amazon one yeah exactly that’s one thing that we’re going to be building in this header the second thing we’re going to be building in the header is um this search input field that’s in the in the Middle with the search icon right yeah the third thing we’re going to build are these like nice little four four things on the right hand side which we call children exactly got it beautiful okay exactly that right so inside of the uh code right now what we’re going to do is we’re just going to sort of mask out each of them right so the first thing we’re going to do is we’re going to have an image component so let’s go ahead and add the image component so it’s my emit it’s not working so that’s fine we can do this this going to be image component and the source for this one is just going to be uh a picture of Amazon so I went ahead and grabbed a source of Amazon earlier so I’m going to go ahead and Pop That in right here just like so so there we go and then what I’m going to do is I’m going to give it a class name so a class name of headcore logo as such so what we need to do now is styling is not working one second guys let’s go ahead and make this look nicer yep so then we have the image with the class name uh header logo and the source like so that’s going to be a picture of Amazon the next thing we’re going to do is we’re going to create a div and everything in so that middle search component we’re actually going to have a container so a div so div and we’re going to say div. header undor search like so right and now with this uh my emt’s not working again so I need to basically go ahead and do the following header like so and then do this nice and what we have here guys is the header search so inside of here we’re going to basically have an input field and a search icon so it’s going to basically represent what we have as the finished product so I’m going to go ahead and chck in a input right here so an input fi and that’s going to be the head of search and then we’re also going to have a logo but we’re going to come back to this and this is where we use material UI to go ahead get thato the one that I’m liting that’s going to be the Amazon logo right or no yeah exactly that’s going to be the Amazon logo got it and then this search is going to be that thing right there exactly bro yeah okay that’s going to be the middle bit and the final right hand side is going to be what we call the header nav so let’s go ahead and check that right now so the header nav as such so over here we really need pretty to work super annoying um is not working okay I’ll try hit hitting save I think that should work yeah save um let me go ahead and just double check as let me quickly do one thing it might make it quick format on save oh yeah so guys you can do this as well we have an extension called prettier so this is a good extension for you to get if you don’t have it already and once you install it um we’re okay hold on let me see we you can just hit command and Comma just go to settings top here and then you can basically do if I look for format on save you could do hit check mark on format on Save and then every time you save it will like format your code and make it look pretty exactly exactly guys um you want to go ahead and do that and then that will get it working and now what you want to do is for the header nav kazy maybe let’s do the auto save every 5 Seconds that would be kind of cool oh thought we had it on no no I think we maybe got that off cuz that might be easier way of formatting it okay so where does that show up hold on auto save after delay yeah it’s after delay oh okay so 500 milliseconds after every Okay cool so we’ve got the header nav so now what we’re going to do is inside of the header nav we’re going to have a few different uh options but let’s go ahead and actually fill out things because let’s get the Local Host running so let’s get Local Host 3,000 showing up on the right um we can do that in a sec so for now guys we had the header unor nav and inside of here what we’re going to do is we’re going to have three different options right so it’s we’re going to have a few different divs so I’m going to go ahead and create a div and each one is going to be resemblant of what we have on the right hand side where it says hello signin where it says returns and orders where it says your Prime so I’m going to go ahead and Pop That in as so so we’ve got that here and this is going to say class name name like this and we’re going to say header uncore option and I’m going to go ahead and this will basically be where you have where for example where it says hello sign in so you see on the top left it’ll show something like hello sign in those are the sort of things that we’re going to have inside of these divs right so I’m going to go ahead copy it and that’ll be a second one and that’ll be a third one let’s go ahead and format this in nicely there we go now for this bit guys what we’re going to do is we are going to sort of Span in some stuff here so I’m going to go ahead and create so for the first option we’re going to have when you say options what are you referring to so this one right here on the top on the right hand side so the where it says hello sign in returns and options all of those are considered header options okay so let me just be clear so this o so for example this over here is probably referring to this one thing and that’s like option one right exactly and then this is option two this is option three and then this over here is option four right exactly we don’t know why we call it option but that’s just kind of the naming convention yeah I mean we can call it you can call it whatever you guys want uh we’ve gone with option today because it’s a Navar option so it’s like inside of the Navar it’s an option inside the Navar but you can call it anything you want just make sure that it’s consistent when you go to style it inside of your CSS file got it um so that will get save you a lot right so now inside of header option we’re going to have two span tags right so let’s go ahead and drop the first span tag in right now so I’m going to go ahead and do span the class name for this one is going to be so let’s go ahead and drop a class name it’s going to be header uncore option line one right so this is going to be the first line and in inside of this one what we’re going to have we’re this is going to say this one’s going to say hello sunny right and we’re going to make this sort of but in this case or we could just say hello user or hello guest because we’re not going to be logged in right now we’re going to paste it again so we’re going to copy that line of code paste it we’re going to change the two and the second line in this case was uh let’s go ahead and do sign in so it’s going to be a sign in button now what I want you guys to do is go ahead and copy this these two lines of code paste it here make sure your indentation is clean use PR it will help you out go ahead and do the same same thing here make and for the second one what we’re going to have is we’re going to say returns and down here we’re going to say and orders and for the third one we’re going to say your over here and we’re going to say Prime like so okay so we got hello guest sign in returns orders and your Prime now with that said what we’re going to have is at the end of it so we have all of those options we have those three options so let’s go actually let’s go and load up our Local Host KY right okay so let’s go ahead and go to our Local Host here and we’re going to hit save or hit refresh so there we go that’s our Local Host now the re the reason why it’s not showing up guys is because we have inside of app.js here we actually haven’t rendered the header component so to render it what we need to do is go ahead and do the following we need to say header like so that’s how we use a component but then we’re going to actually to go ahead all we’re doing here guys is the code that we wrote in this file called header JS we didn’t put it into our appjs so that’s exactly what he’s doing he’s going to import it right there and then he’s going to literally use that exact component and right here and that’s why it’s showing up right underneath and now you can see all of these things are showing up right there yep yep exactly yeah so now what we are going to do is we are going to go in her so now it should render you can see all the stuff is popping on the screen now the reason why you can’t see the Amazon text is simply because it is a white piece of text so it’s going to be on a white background so it’s not going to be very clear so let’s go ahead and style some of this stuff so it looks a little bit more clean and visual to see y so what we’re going to do here is let’s go and head over to our header. CSS and the first thing I’m going to do guys is if you notice here we have the header container we’re going to go ahead and style that so I’m going to say for the header let’s go ahead and say give the follow following rules okay so I’m going to give it a height of 60 pixels a display of flex and then we’re going to say display Flex then we’re going to say align item center background color and this is a this is the Amazon background color so you can see it’s giving it a back black background color and then position sticky so it means it’ll stick to the top so as we scroll down it’ll stick there and a z index of 100 so this is a really good comment I just want to highlight this as you guys are watching this um we have Carlos and he just says he’s like hey yo kazy I’m here watching while I had out to show a few homes so that’s epic dude that’s awesome and he goes wish that I could code at the same time but I hope that it gets recorded he’s currently he says watching while driving I don’t recommend it but I’m serious to learn for your information so that is epic uh just be careful please while you’re driving and also this is going to be recorded So if you’re watching this and you’re like hey just like Carlos like I can’t keep up with this right this second don’t worry you can always watch the recordings all right and we have the slack Community everybody to help you out but we’re going to be going through at a pretty fast pace just so we can show and demonstrate everything exactly guys and then that way when you watch it back you can watch it back uh slower you can watch it back keep stopping the video and as you need to um do it you can do it so like that now the next thing we’re going to do is you see that image is is huge right it’s very hard to see what’s going on with that image so what we did is we went ahead and gave our image the header logo class so we’re going to go ahead and Target that header logo and we’re going to make it look a lot cleaner so we’re going to go ahead and Target the header logo like so and here do clean already what was that it’s already starting to look clean like boom that one line exactly yeah so you see that one line so we’ve got this like one little bit of code here got the width of 100 pixels object F contain means that it is essentially going to uh keep its aspect ratio so it looks very clean when we do that margin here is saying zero on the top uh I think it’s top and bottom 20 on left and right and margin top of 18 pixels nice so we have that in place that looks good the next thing we’re going to do is we’re going to go over to the let’s go ahead and actually fix the header search so we need the logo inside of our header search so cu let’s go ahead and open up the firstly let’s go ahead and get rid of where it says hello clever programmers because it looks a little bit confusing so I’m going to go ahead and delete that save now we’ve just got the Amazon bar at the top so that looks clean now what I want to do is show you guys how to install material UI into your project so K let’s head over to material UI yep let’s do it so now we’re going to go I’m going to open a new tab and we’re going to go material UI and this is what we’re using for all the icons so if you guys look over here at the back basket icon that we have at the top right um or we have the search icon all of this is coming from Material UI that’s why we’re here and in order to install it guys make sure you copy this line of code that says npm install material UI core I’m going to hit command J and then I’m going to go to my command line that I’m currently not using I’m just going to CD into my Amazon clone and I’m going to hit command V to paste what I copied and boom now it’s installing this as this installs um what I’m going to do is what is it sun is it fonts yep so I’m going to go here no it’s it’s icons icons there we go so I’m going to go and click on icons all right yeah and then scroll down to where it says search the full list of icons thank you um so click where it says search the full list of icons and before you do that make sure you copy this line that says npm install material U icons that’s another installation you’re going to need I’m going to pop that in here and I’m going to hit paste and hit enter all right and as this I’m going to click where it says search the full list of these icons now it’s going to take me in there boom and now if I type in anything like search or whatever have you it should pop up those icons and even when you need the code for them you just click into it and it’s going to actually give you the code code that you can write to pop that icon into your app so it’s really really epic exactly yeah and we’re going to use that guys if you see us pulling in code to your app or at any point this is how we go ahead and find those icons so let’s go ahead and start using that stuff so inside of our header. JS what we are going to do is go to our header. JS and we are going to go ahead and use an icon called the search icon so in order to pull this into our project we actually went ahead and installed that earlier um I think it’s still installing right KY mhm yeah yeah so we need we’re going to need to wait for that to install um the okay yeah we’re going to have to wait for that one to go ahead and install um let’s just see wait wait for what to install the material you I oh yeah there we go both of it install yeah mine was a bit delayed nice okay so that’s been installed now so that need to do is go to the top and import the search icon so up here need to go ahead and import search icon from Material UI search icons there we go and then what we’re going to do is head over down to the bottom and we are going to go ahead and have inside of the header search div the search icon like so okay now if we go ahead and save this and go back to our Local Host we should be able to see it’s actually going to be very very dark right so it’s actually going to be very dark to see so we gave it aass name but it’s impossible yeah just really dark exactly yeah so it’s very very dark so what we’re going to do is we’re actually going to go ahead and make that very visible at this point so to go ahead and give that some color what we’re going to do is we’re going to go Target it so we’re going to say go to the header search icon and then we are going to go ahead and say give it some padding some height and a background color right so I’m going to go ahead and give it the following styles and then save and you guys can now see it’s got a background color which is the Amazon Orange right and then we have a padding of five pixels and a height of 22 pixels okay now you see the alignment is all messed up right the alignment is always it’s always it’s all messed up so we’re going to go ahead and use f yeah it’s all wonky right now yep to fix that what we do is we say Target the header search are we going to be using Flex box here yeah exactly using flexbox hey I love me some flexbox exactly guys so flexbox is going to really help you get the responsive design it’s going to allow you to restructure things on a web page very easily uh and what we’re going to do is we’re going to include this code right here so we’re going to say display Flex we’re going to say Flex one I’ll explain what this does in a sec align item Center is what was what was responsible for pulling that logo centrally with the input field and and then we’re giving it a border radius of 24 pixels now the interesting part here guys is that you can see header search is actually surrounding the input field and the search icon so that’s why when we did display Flex everything went into a row because when you apply display Flex CSS and here is what we had we had the header search which was the container so this is the container for everything it was display Flex Flex one which Flex one actually went ahead and gave gave us this where it spread out to the rest of the um Flex one basically says that want it to like stretch as big as it can go okay now what we’re going to do is we are going to do the right hand side so right now you can actually see what’s over here but if I go ahead and zoom in you can see it says hello guest sign in all that beautiful stuff I want that to look like this okay so that’s the angle and that’s where we’re at right now so I mean it looks pretty close but we’re going to pretty much get to that finish line and get it looking perfect guys we have 1,400 people back thank you so much guys for giving us that chance to get over this problem and we’re going to keep crushing it for you guys so oh God got some fly okay we’re going to keep on crushing it for you guys so let’s go ahead and we’ve got the div over here and what I’m going to do is I’m going to have the so for each of these header options I’m going to start styling them as such as needed so the first one guys I’m going to go go ahead and say header option so header uncore option like so and what I’m going to do here is I’m going to actually go ahead and find my styles for this uh I’m going to go ahead and give the following to this so I’m going to say display flex and what I’m going to do just to make it extremely easy because right now you can’t actually see that text very easily you see on this one it’s white so let’s go ahead and actually give that white color right now so I’m going to say the color should also be white right so for now just give the color of white we going to say display flex and we are going to say a flex Direction column margin left 10 pixels margin right 10 pixels color white so you see right now it’s squashed right everything is squashed up and the reason why this is is because we need to Target the head and nav and we need to make this responsive so I’m going to go ahead Target the head and nav and let’s go over to head and nav here I’m going to say display flex and justify content space evenly so what this will do is if we save this now you see that it actually went ahead and because we’ve set the rules of this image we’ve set the rules of this container right here so the SE the search container and then the nav container all of them are abiding by Flex uh rules so what that means is guys is that it’s going to equally share that space between what is whatever is inside so now you can see it’s starting to look a little bit more like the finished product right so we almost getting there guys we’re almost getting there the next bit we’re going to do is we are going to Target the option 91 so we had here header option 91 option 92 for option 91 we can go ahead and do the following we can say Target header option 91 and then we can do the following so flies Okay header option line one and here we’ve got a font size of 10 pixels so um here we are going to do a font size of 10 pixels like so and then we’re going to save and then we’re also going to do an option 92 so here Eda says you get them girls guys keep coding you oh man so funny I got that girl I got them girls that girl all right so fun size 13 pixels font weight of 800 kazy are you still there of course bro I’m here in spirit I’m like a I’m just like this floating energy now coming from the dead just so funny someone wrote is spooky when kazy is so quiet and not moving around but we love his smile wait somebody said to love my mouth oh man somebody said Cy breathe man all right I’m here don’t worry guys I am breathing just I got a very high quality Noise Gate on but you know so good guys well good exactly right so we have the Amazon clone we haveon Navar is looking clean it literally looks like the Amazon navbar exactly it’s looking clean guys now I saw somebody say what is the font family we didn’t actually change the font so keep it as it is and everything will work correctly and it will work as you expect so the final thing guys is we want that basket icon so this one on the right that nice little basket icon to go ahead and add that in what we’re going to do is the final uh header option needs to be added so the final header option that we’re in interested in here is this one over here so going to go ahead and add a div so I’m going to say div of header basket option oops like so option basket like that and inside of here what I’m going to do is I’m going to use the shopping basket icon from Material UI so this we actually need to import so what I can do is I can click on the end of the uh name and I can do control space bar and oh my Trick’s not working okay so sometimes it doesn’t work so what you need to do is manually go to the top and go ahead and do your typical import so I’m importing this from Material UI and then we are going to have the next part of this uh so this actually needs to be oh yeah so we’re going to have this and then I’m going to go ahead and add a span and this one guys is going to have the following class name so it’s going to have two class names this one so I’m going to add the following one so it’s going to have a and this will say zero for now and what we’re what we’re basically putting here is this one right here guys so we’re focusing on that zero now this has two class names it has header option 9 two and it has header basket count and this has a space bar between it guys so a space between it so you see there is a space between the two things okay so make sure you do that and this is because we’re applying two different class names to this um element at the top so we need to go ahead and style this stuff right here now what we’re going to do is first go ahead and Target the option basket so I’m going to go ahead and say header option basket go into my CSS and let’s check what needs to change so for the option basket I’m going to say display flex and align item Center do that we can see I’m going actually going to change the color of it right now because we can’t actually see anything with that so color white and now you can see we’ve got this so this is going to be important for later guys because we want this to be dynamic so if we go ahead and check the actual app you guys can actually see if I add to the basket notice how it actually goes ahead and updates over here okay so you can actually see that it updates over in the top corner so if I go ahead and click uh and add some more items to the basket it goes ahead and updates to the basket as such right so that’s going to give us a clean look and feel to the app so with that we’re going to carry on we’ve got the um basket looking a bit cleaner and then what we’re going to do is we’re also going to go ahead and Target this header basket count so let’s go back to our CSS let’s zoom out of this page so we can see actually just keep it zoomed in for now cuz that’s kind of clean um and then we’re going to go ahead and give it a margin left and a margin right of 10 pixels so I’m going to go here I’m going to say Target the basket count which is actually the span here and we’re going to get say give it a margin left of 10 pixels and a margin right of 10 pixels okay now if we refresh we should be able to see everything is looking pretty clean okay so that is a clean finished header bar right so that’s looking really really clean and what we want is right now it says hello guest but the end goal would be when you sign in it will say hello sunny or hello kazy or whatever you’re signed in as okay so it’s going to be really really crucial to have this header looking nice and clean guys I also want to stress that look it’s sticky so as we scroll down it sticks to the top of the web page so it’s a very very clean um very very clean implementation that we done right now so with that said let me know if you’re actually following to this point and if you’re not it’s completely fine so make sure guys remember as we said keep the energy High even sometimes just watching this stuff watching the content and then following it afterwards is more important I would say so make sure you follow this keep keep um optimistic and recognition this is how people get so good at things even if you just watched it and you didn’t code along just a pattern recognition of you learning react hooks this is how this is built this is how this goes into the header if you just panic and spend all your time on panicking I saw somebody earlier in the Stream and he like I’m signing out like this is going too fast for me okay you’re also not going to become a developer that’s just the truth and so this is how people are weeded out but we want you to be that person who can actually stick through this and even if it doesn’t make sense to you it’ll make sense like you’re it’s no joke you’re building an Amazon clone like Amazon it took them decades to get to what they have right now those Engineers are getting paid 300,000 plus 400,000 plus a year we’re doing that live in this challenge so of course some of the stuff isn’t going to make sense but if you just quit out for that reason then you’re also not going to become a developer so you have to your battles and stick through a goddamn thing and commit everybody who’s here is committing so that is very very powerful and stick through it I mean we’re all sticking through it with you exactly guys and guys like KY said if you can’t stick through this those numbers that we said yesterday one the 120k salary those things they require that 110% that we talked about they require that discipline that sort of not quitting when the push gets when the push gets going and when it gets hard okay so just like now it’s completely fine if things don’t make sense do not quit though though right do not quit keep that energy high and let’s carry on so let’s jump back into the code and you can see we’ve done the sticky top nav bar in our build so it looks really really nice really clean and what we’re going to do now is we are actually going to go ahead and build out the body of the app right so the body if we go over to our app.js we called it the home component so let’s go ahead and create that home component so here what I’m going to do is create home and I’m going to go ahead and create that file so I’m going to say home.js and here I’m going to say RFC go ahead create that and you can see it opens up this I’m going to go ahead and give it a class name of home right now here I’m going to go ahead and say import home. CSS like so and I’m going to create the CSS file so I’m going to say home. CSS okay now here we have the the home component loading right so just to prove we can say I am the home component like so we can go ahead and do this right so now what we can see is um if I go back to app I go ahead get rid of our little comment go back here say command space and import with our little nice trick so it’s added this import statement save it now you should see here it says I am the home component okay so everything underneath you see everything here is going to be the home component so let’s go ahead and deck this home component out and let’s make it look good so what that with with that said guys we are going to first have a container inside of our home component right so inside of here I’m going to have a home container so I’m going to say homecore container and I will and this is two underscores in case you’re wondering it’s it’s part of the bem convention um a lot of people always ask what the drawing tool is by the way so this drawing tool that we use is actually called screen brush so if in case you’re wondering there you go um so now what we’re going to do is inside the home container we’re going to have that beautiful banner that you see so this Banner right here you see where it fades into the background right so this lovely little Amazon Prime ban right here we’re going to show you guys how to go ahead and build that so now what I’m going to say is I’m going to do image so image as such and then I’m going to go ahead and add a so I’ve went ahead and found the Amazon one that they use I’m going to go ahead and paste it in here so I’ve already got my quotes save and there you go so this is actually to maram real quick in the Facebook group and she’s like I’m literally sick right now but I’m doubling down on my efforts focusing on this nice I’ve got I’ve got that on the screen that’s awesome so you can’t actually see the name but it says what’s that Miriam yep yeah nice she says I’m literally sick right now I’m focusing and putting double efforts I just love your tutorials guys that’s the kind of energy we need here that’s awesome and with that said we are almost back at 2,000 viewers so you guys are absolutely incredible and with this energy is where is this is the energy that we need to go ahead and hit those goals that we spoke about yesterday so you can see we went ahead and added the image here right here right but you can see it kind of spans across now this doesn’t look right okay so we need to go ahead and fix this so let’s go ahead and add a class name and we’re going to add a class name of Home image so I’m going to go ahead and add a class name of Home image now let’s go ahead and actually fix this right now so go to the home. CSS let’s go ahead and pull that up right now and first thing we’re going to do is the home container itself okay so the home container itself actually actually for the link so that link um you will so here’s the thing some one of you type it actually in and then paste it in the comments so get somebody somebody from this call just please help out with that and also in the slack group I know we have over 9,000 people and they’re actually helping out and dropping links to these things so look in both of those places exactly guys and if you’re part of that slack Community I’ve actually saved you guys a huge deal and I just went ahead and pasted that link inside the slack right now so you guys can go ahead and check inside slack and I’ve dropped that link but guys remember you can just pause the video and copy this out at some point afterwards as well so try not to get caught up on just the picture just remember what we’re trying to learn here so now the first thing we done is we gave it a home image image class and what we’re going to do is we’re going to go ahead and style that so we are going to go ahead and say that this image so this home image should be of width 100% now you see guys look I’m just going to comment that out quickly right so this just these few lines of code and look at the difference that we got right there so if you think this is cool let me know let us know in the comments right now so we’re firstly going to I’m going to slowly uncomment this out so let’s go go ahead and first if we do width of 100% you can see it snaps everything into the viewport and this is responsive by the way so you can see everything is super responsive and then what I’m going to say is give it a undo this and we also want to have a zed index of minus one so we want this to be behind anything else that’s what a z index is I’m going to give it a margin bottom of 150 minus 150 and that means that elements afterwards are actually going to creep into it mask image is what gives it that beautiful sort of fading in effect right so we’re going to say start from the top to the bottom and this is basically just saying go from a um opaque to um go from a completely um like complete color to see-through so also transparent so let’s go ahead and save that and you get that really nice gradient so that’s going to be really really clean and nice and I can see a lot of people actually dropping it in the chat that is really nice and that’s the kind of stuff that we talk about guys that’s what we’re talking about nice right so that’s what mask IM as well so I saw a lot of you guys got excited about that so now with that said we’re going to carry on and inside of Home container uh I think I can hear myself echoing a little bit on your mic Cy uh I’m just going to go ahead and go to home.js so now inside of home.js guys we notice we have these rows right so we have these different rows over here um one minute right so now inside of these so you can see what we have is we have these containers here so here I have a row that’s going to be one row and then I’m going to have a row over here hey Sam angle car jumped in the chat he says stay hydrated guys he is 100% right I actually need a drink right now super thirsty so over here we are also going to have this are you still eching on my mic are you still eing no no that’s all good now that’s all good something yeah something you you changed it but it’s all good now so um now guys what we’re going to have is three of those rows right and these rows are going to the really nice part about these rows are is that they’re going to be fully responsive so you see the top one has two the the middle one has three and the last one has one and the part of the homework is going to to be that I want you guys to just pretty much play around with this and see what you can do with it but what we’re going to do now is we’re going to say div homecore row like this and we’re basically going to go ahead and the goal here is to basically render out a product component so let’s go ahead and say we had like the first one has two components and then we have another row so we have another row and this one is going to have three components so you can see right here so it has two components then it has three components and then the final one so div homecore row this one has uh one component right so you can see exactly a really clear layout of what we’re trying to achieve here okay so with that so you’ve got these three containers and you can see this one right here is reflecting so this one right here is reflecting this row over here and we have the two containers so this is that row over here this one over here is going to reflect these three over here and then we have the final one at the bottom which is pointing towards this one okay now this is going to um be completely responsive so it’s going to calculate on its own based on how many products we put inside as to how to space them out and I want you guys in your homework to make sure that you go ahead and change this out and make it so that the first one might have one product in the second one might have five in the third one might have four in right so make sure you guys vary it up in your homeworks that way we have loads of different projects that we can go ahead and demo and see um in a really nice cool demonstration tomorrow so in the first row we’re going to go ahead and add a product but in order to have a product we need to make this product component so I’m going to go ahead and create that product component so product. JS like this and we’re going to say RFC like so and here I’m going to say class name of product like that okay now here I’m going to go and do our normal stuff I’m going to say product is here so product. CSS save it and we need to create that product. CSS so product. CSS like this right so we have the product over here and then what we’re going to do is um then what we’re going to do is we are going to go ahead and actually start coding out the product itself so the product itself is going to consist of a few things so it’s going to consist of a title a price a star rating an image and then a add to basket button okay so we need to go ahead and draft this out now so the first thing we’re going to do is we’re going to have a sort of an info right so we’re going to basically go ahead and wrap um all of the so everything you see here so let me go ahead and remove this everything we see here is is going to be and I can see a lot of people dropping homework ideas we actually have a really nice juicy homework idea for you so it’s going to be some fun for you guys afterwards um so here is going to be everything that we’re going to basically be calling product info so here I say div product info like so okay and let me go ahead and make this a bit bigger there you go D product info and this is going to have a title in so let’s go ahead and say The Lean Startup nice so this the product info is basically going to be the yep so the product yeah the it just cut out a little bit but the product info is going to be this top part right here so this one for this one you’ve got the Kenwood here the Samsung Etc all of that is the product info uh oh no sorry the product info is everything here sorry it’s the container around all of these elements and then you’ve got in the individual things yeah so here we’ve got the product price now here I’m going to basically be I’m going to give this one a class name name so this one is have a class name and then we’re going to go ahead and say product price like so so product price and here I’m going to go ahead and say a small so I’m going to so inside that tag I’m going to give it a small tag and I’m going to say dollars because we’re going to use dollars here and I’m going to say uh strong so this is a very quick way of making something bold and small here I’m going to say a price of let’s just say the Lean Startup is let’s just say 20 uh9 1999 right now if we go back here what I’m going to do is I’m actually going to render this out as we do it so it should be very clear so I’m going to go ahead and replace this with a product component so this one should be product component now my one actually did a nice little Auto Import so you can see here it says Auto Import uh import product from product so if we go ahead and save we should be able to see now it shows hey it shows down here so you can see says the Lean Startup $1999 and this is coming straight from this product here and if imagine we had two products save you can see two products show up so the end go is we’re going to get this to this so this entire little square block so all of this white stuff is going to be the part of the finished product okay okay so now what we’re going to do is inside of product. Js we are going to go ahead and we’ve got a P tag here and I’m going to say the next bit is the product rating so we’re going to have some kind of star rating here right so we’re going to have a product rating so I’m going to call this one product rating like this and then inside of here guys what we’re going to do is we’re going to essentially have depending on whatever we pass in so if we passed in a prop value of like five or four or three then it will render out that many stars now what I’m going to do here is or we we actually just lost Kazi guys so it will it may just be me until Kazi jumps back on but let me know in the comment section if if you’re still pumped because we this is the kind of stuff that we have to deal with we have to overcome this sort of obstacles and tomorrow or maybe later on or very soon K will be back guys so do not freak out we have a whole week and we are going to fall into these problems but it’s it’s it’s up to us guys to overcome this stuff so let’s carry on strong so here we’ve got a P tag and I’m going to go ahead and do a star like so and you can see like we’ve got the star rendering out now imagine I added in sort of a few different Stars here so I want to add in like a few different Stars so let’s just say three stars okay so you can see like in here for example it says five so I’m going to show you guys how we are going to get to the end result okay so we have that right there and then we’re going to have an image so the image is going to be an image of the product so let’s go ahead and outside of here we’re going to say an image um and this is actually going to be outside the product info now so we’re going to say image and here what I’m going to do is I’m just going to pop it on me for a second um and I’m going to go ahead and find an image of the Lean Startup because sometimes you don’t know what Google is going to throw at you especially on the demo the demo days so let’s go ahead and copy the image address and um yeah go ahead and guys if you haven’t already and you’re enjoying this smash the thumbs up button and try and get this video out to as many people as you can obviously we had a few technical issues earlier but we are over that and we are going strong so let’s go back to our source and then what we’re going to do is we’re going to paste this and what this is is this picture right here so you can see we’ve got the lean St so we’ve got two products being rendered right now because I’m dropping two products here so I’m going to go ahead and clear that up so we have our one product now with this guys what we are going to do is we are going to I’m just going to pause there we go this should be a bit smoother now so so the Stars by the way guys many people are asking about these you can use a normal Emoji you could literally go on Google and put in a star you can put in whatever you want you can do pretty much anything like that and it’s going to it should be completely fine um can you guys I’m sure you guys can see there we go carry on um so we’ve got the so let’s go ahead and just say a one star for now okay so it’s got the one star here for now and what I’m going to do is um we are are going to go ahead and see so a lot of people are saying you can’t see the uh the stars but I think we’re good I think we’re all good guys uh so we got the image back up and then we’re going to go ahead and add a button so here going to go ahead and add a button and that button is going to say add to basket Okay add to basket so let’s go ahead and save and now you can see if we go back to our app we’ve got the add to basket button hey so it’s clean okay very very clean and now what we are going to do is is we’re going to style this because right now this does not look nice it does not look very good so let’s go ahead and use that so let’s go back to our product. CSS and let’s make this thing look beautiful okay so the first thing we’re going to do is we’re going to go to our product and this is a bit I like because this is where as we do it you guys are going to go ahead and see all of the changes visually pop in right so here I’m going to say display Flex display Flex there we go so everything goes into a row and say Flex Direction column so everything goes into a row and that it looks horrible so we’re going to fix that in a second um and before actually let’s go ahead and fix that right now so we’re going to Target the product container but we are going to say Target the image inside the product container give it a Max side of 200 pixels a width of 100% object fit contained and a margin bottom of 15 pixels okay so I’m going to go ahead and do that and then you can see what this will do is it will actually restrain the image so that it doesn’t look crazy big like we saw it before okay now um Muhammad Aran says you good yeah we’re good dude we’re all good so now we’re going to go ahead and add a background color of white so let’s go ahead and add a background color of white um and then we need to do a few things so a z index of one should allow this to pop up over the top but there’s a few things that we need to do in order to get that color to pop and the first things we need to do is actually go ahead and add a few different rules in so we added this these things we had the flex Direction and we’re going to add in the following here so what I just pasted in was this I added align item Center go ahead and save justify content Flex end margin 10 pixels padding 20 pixels width 100% Max height 400 pixels Min width of 100 you guys can go ahead and just copy that and it’s going to be completely fine you can break down those values if if you want to and sort of digest that as you feel free but what this is going to do is actually going to go ahead and um space it out as required um and to do so so now we have that and for the price what I’m going to go ahead and do so we’ve got the product info here so for the product info I’m going to set the height to 100 pixels let’s go over here and jump down height to 100 pixels margin bottom of 50 pixels and then I’m going to go ahead and say the price should have so the price should have a margin top of five pixels you can see starting to come together a little bit okay starting to come somewhat together the button itself I’m going to go ahead and Target so I’m going to go ahead and Target that button and say you see guys that that snippet of code did all the difference there so you see we have a normal button here and then what I’m going to do is I’m going to go ahead and paste in this snippet and this I just want you guys to copy this one cuz it’s completely the styles that you need this is the Amazon color the background color for Amazon now you’ve got the Border one pixel solid right here and that adds a little very very subtle border but it adds a nice little Border in there so over here and then You’ got the margin top so it slightly pushed it um from the top component a little bit we’ve got a margin top of 10 pixels and a border color and we have a nice little gradient border color it’s very subtle but these things make all the difference right and we have some I think it’s just some black text okay so it’s just some very very simple stuff okay so very black uh just black text and then I’m just going to double check cuz I’m a bit paranoid I haven’t actually got the right style here so I’m just going to be sure there we go yep so everything’s good so that is the product okay so we have the product right here and what we’re going to do next is we are going to go ahead and go to the go to home and for each of these products right so we have this product right here but for each of these products let me go ahead and go over to home.js so where am I at home.js and we still have over 15500 people watching so you guys are awesome let’s keep this energy High guys so here now what I’m going to say is I’m going to go ahead and Target the home container okay so let me go back to home. CSS and I’m going to do a few rules here and I just want you guys to follow along and you can break this down as you feel free afterwards so the the first thing is the surrounding container is the home container for this I’m going to say display Flex right so display Flex then I’m going to say justify content Center then I’m going to say margin left margin right of Auto and a Max width of 1500 pixels now the reason why this is important is because what this does is what we just did here is let’s go ahead and make this full screen you see we actually limit so if it ever goes past a certain screen size it’s not going to just keep like stretching everything to stupid ridiculous lens it’s going to actually stop it so now it’s very very fluid right so we actually got lovely donation by Jay Courtney Thomas thank you so much dude we massively appreciate that I’m just going to pull it up on the screen right now he says your work is amazing guys I am a Pega low code developer but this has really got me back into proper coding exactly guys that is some British slang being dropped right there proper coding that’s what we’re talking about this is some stuff guys and we have a whole week of this content so if you’re excited let us know that’s awesome dude thank you so much so yeah we added that little piece of code in which protects us against that Max width issue the next thing we are going to go ahead and do so we’re going to go back to our code is we’re going to go ahead and Target that row okay so here I’m going to say home row so I’m going to Target the so if we go into our home component you can see everything sits inside of a home row let’s go back into home. CSS and we can say display Flex Z index of one margin left 5 pixels margin right five pixels save the file and boom so you see that’s actually a magic piece of code where that kicks in because what that did is that actually allowed us to then go ahead and it will use up the entire space that it needs to use up and it does all of the things it needs to do um but the product itself so the home product we’ve got home let’s go ahead and go inside of here we’ve got the actual let me go ahead and find this one second guys we’ve got the home the product itself product info let’s go ahead and just want to double check this so imagine now what if we what we do is if we had two products so let’s go ahead and go to home let’s render two products inside of here and you can see there we go guys so it’s actually using up the correct amount of space that we expected to be using up right but you can see this text is actually getting pushed around and we don’t actually want that we want it to kind of use up or left align that top um container so that is the product info so that most likely means we need to go ahead and Target the product info uh correctly so I think what we could do here is we could do text line either left we could either do that no that hasn’t done it or we can actually go back to our product and then we just double check I’m probably missing a piece of code right here but what we can do guys I’m going to show you a little debugging trick so if we go ahead right click inspect and what I can do is I can actually go ahead and check on this component so I can see the product info over here and what I can say is I can say a width of 100% let’s go ahead and see what that will do hey there we go so we can see we can give it a width of 100% you can give it a width of whatever you want it to at this point but we’re going to keep it as what it was for now so here we have two product components um uh and they rendering out as required so if I go ahead and add a third look what happens guys it just does it in a very responsive way at a fourth it’s going to figure out it’s going to do that thing it’s going to make it work in the way that we expected to so I’m going to add two in here and then what I’m going to go ahead and do is go ahead and go back to our product. JS and here we go so we’ve got the product info we got the P tag going to go ahead and change the product info here to I feel like I’m missing a style um but we will figure that one out so let’s go back to product okay we’re all good so we have these two products which is awesome um let’s go back to our home and we’ve got this to over here and B I’m just going to populate these as we as we accept as as we saw it previously so we’ve we got the three products down here and for this one we had let’s go ahead and we had one product down here so now you can see it’s somewhat along the lines right so it’s somewhat along the lines of getting there but you see the background color is not exactly white okay so background color is not exactly white and that is going to be a bit of a problem okay so we want to kind of change that right now so what we’re going to do to change that is we’re going to go to our app. CSS or actually I think we done it in index. CSS yeah we done it in index. CSS so let’s go to our index. CSS and inside the body what I’m going to say is I’m going say give it a background color of this right here now this is the Amazon background it’s gray okay so as soon as I do this can you guys see the difference it makes it’s all about these subtle differences when it comes to coding in front end development guys so that just by adding a gray background you can see it actually makes it super super clean and you have this very very nice finish okay so it’s very very nice finish at the end of that when we go ahead and add that slight change now going to close that one and let’s go back so here now obviously the final app doesn’t look like this right so I mean everything looks a bit different but how do we pass in different values to each of these components so in order to do that the way that we’re going to do it is we’re going to go inside of our header so I actually want to fix something quickly because right now the home row itself so let’s go ahead and check we’ve got the home row I just want to check so home row Max width width of 100 the image is taking up 100% yep we’ve done that okay so here we go so for the home product okay guess we’re good so okay so that’s fine so we’ve got this right here we’ve got the home row itself we’ve got the home product and we have the home product P tag we have the home produ image okay I guess we’re good so inside of the product itself then what we’re going to do is we want to basically customize each one of these and have it so that it’s essentially going to be different for each of these props okay so different for each of these right here so that we’re going to use props for that so I saw somebody a different code guys this was actually written by us so this is all our code um going to go over to product and now guys what you can do here is you can accept something called props right now props in es6 what we can do is we can put these curly braces and this means we break apart the object that we pass in and what we’re going to do here is I’m going to pass in something as follows I’m going to say you have a title you have an image you have a price and you have a rating okay so let’s go ahead and save it let’s go back back to home and then what we’re going to say is here we have the title let’s go ahead and say is the lean start so the lean start up the price let’s go ahead and say is 19 let’s go ahead and just exaggerate say $29.99 and then we have the image now the image for the lean stop was the one that we had earlier which was I believe it was this one um so that’s actually rendered really ugly so let’s go ahead and do this we save it so we’ve got the image and then we also had the rating and the rating what I’m going to say is let’s just give it a five star rating now okay so for what we’re going to do is here we are going to say so now we don’t want to use a hardcoded value we actually want to use the one that we passed in so here I’m going to say use the title and what this is doing guys I just want to show you so you guys can see that this is the product where I called it right so this is where I called the product and I passed in a value here now this gets used so you see we destructure it over here okay then we actually go ahead and we use that value right here so in in the title so you can see this is the sort of way that we use props and it actually allows us to make it extremely uh reusable and efficient and this is why I person love react and it’s one of the reasons why react is taken off so well so I’m going to go ahead and create this again so now we have the title pulling in here so you can see now these ones aren’t showing a title because I’ve only passed props to the first one okay which makes sense so the second one we don’t want it to be uh $1 19.99 I want this one to say im uh price so this one is going to say Price save it and then here rather than doing one star I’m going to show you guys a nice little trick okay now the way you do this is here what we’re going to say is oh damn dude we just got a huge donation that’s what I’m talking about guys we got a $20 donation from zero JS background to Amazon clone you guys are amazing much love and respect great job proud of you I know you deserve more but I’m a student Rico from USA guys that’s insane we love you guys and appreciate you guys and I can see it’s it’s early for some of you guys so that’s insane I really think you guys who are here watching this early in the morning you’re spending your time well keep fired up if you need to get up stay hydrated I’m going to have a drink of water quite now cuz it is quite intense doing this but we have over 1,600 people let’s go ahead and keep the energy fired up guys so we have the price which is pulling in so now it says $29.99 over here but what we can do instead is we can go ahead and have these curly brackets and say array we pass in the rating so what he doing is creating an empty array for the rating and we’re going to say fill and we’re going to say map and then here what we do is so ignore pretty much you don’t need to know what this means but you do underscore I right you underscore I and this has to be in a parenthesis and you do an arrow function like so right so an arrow function like so and basically pop in a P tag so this you can go ahead and copy right you go ahead and copy this and now you can see look it rendered out three right so actually rendered out three different things so if I go ahead and do product oops no I go ahead and do product. CSS God damn it all right so product. CSS I’m going to go ahead and Target and style the product rating so here I’m going to say product rating and I’m going to go ahead and do product rating in here I’m just all in order to get those stars in the line I’m going to say display Flex because by default when you do display Flex it drops it into a row so now guys this is really cool now because if we go back to our home and we see if I change the rating to a three you can see look at that it changed to a three now guys if if that’s pretty cool let me know this is a clear demonstration of how props work so you got four and if I do five you got five stars I mean if we do 10 I mean you’re going to going to get 10 Stars so it works pretty nice okay so five there we go now what we’re doing is we’re going back to the product and for example here we don’t want to use the image the hardcoded image instead we want to use the image that we pass in so we can pop it in there and there we go so now you’re seeing only this the ones that we pass in to um only stuff that we pass in is actually where it gets rendered so that’s why you see these empty ones over here now for the final one we have this button over here so it says add button we don’t actually need anything else so that’s pretty good at this point right we also going to accept an ID but we’ll come back to that later right so for now we’re not too fast as to accepting an ID but I’m just going to go ahead and add that in for now okay so with that said now what we’re going to do is I’ve actually got some products here so I’m going to go ahead and copy and paste these products so these are the ones that you guys saw earlier so this is just pretty much a product and I’m just going to assume that some products have a unique ID okay so this is just a random number it’s a random number and you can hear you can see here it’s got another one we got Kenwood uh and we just got some description a price rating and an image so you guys can pause the video watch this and just go ahead and copy this as you need to when you need to I’m going to go ahead and do the same thing for these three products underneath so let’s go ahead and do the same thing for that so again I’m going to go ahead and show you guys a full screen view of this so you you can see it and I’m going to go ahead and hide our faces like that so it makes it easier so you can pause the video copy that and use it as you feel free or as you need to let’s go ahead and save it and I love this dude so I can’t actually see the names on Facebook so I’m really really sorry about that but this is a really nice comment here thank you so much because I think react is super easy to understand especially with Sunny’s explanations thank you dude like thank you honestly that’s uh really really massively appreciate that really really awesome um okay so now what we’re going to do is we’re going to go to home uh let’s go back over here and I’m going to go and head add a final product so this final product at the bottom is going to be this one right here so it says Samsung there we go um okay lost track of my code okay we’re good so now you can see guys we’ve got the Lean Startup we’ve got this right here the kenw we’ve got the three things over here and then we have this as such right now obviously this one right here it actually has some more information so I’m going to go ahead and actually copy the one that I have I have a full product description where as you can see the one that I passed in doesn’t have a full product description so we save it now you can see there we go so if you are following along and you’re actually at this point let me know right now guys because this is really really awesome to be able to show and share this with you guys and I just love the fact that so many of you guys are watching this is Water by the way so Lads of you guys are asking what it is and honestly it’s unreal how many people we have today so and you guys are all sticking with us the retention is high this is awesome guys let’s carry on right so we have the home row um over here now we pretty much just actually went ahead and D at that front page so I’m going to go ahead and just show you guys what we just built fairly quickly guys so we actually have this amazing front page right now right now this is insane like I’m like come on let’s be real guys amongst all of the connection issues that we suffered everything that we faced I mean we actually conquered this and overcame and we went ahead and built this front page pretty quick in my opinion like that was that didn’t take that long right so this is really really awesome really powerful and I think it just shows you how powerful react can truly be okay so now what we’re going to do is we’re going to build the next page now the next page is the basket so we want to build this page right so this page is where all of the exciting interesting stuff happens right so now because we have all of this basket removing functionality it’s very Dynamic it’s very optimized and it can do a lot of stuff okay okay so what we’re going to do now is we are going to in order to have two pages in a website you need something called react router okay now what react rter does is it allows you so notice how on this website when I’m actually see if we notice the top URL when I click the basket it says for/ checkout okay so I’m not sure if you guys can see that but I’m pointing towards this part over here so where it says foress checkout okay now um when I click the back you see when I click the Amazon log it goes to the homepage and when I click this it goes to for/ checkout in order to get that functionality we just need to introduce something called react rter and guys just wanted you guys to know that I see a lot of you guys asking do I need to finish it by a certain time no honestly all of the homework all of this stuff as long as you guys are able to deliver before the end of the challenge that is amazing guys I mean that’s all you need to do to be a part of the prize draw but guys if you go ahead and follow all of this stuff then you’re going to get the serious value in and you’re actually going to be able to learn jobs from this stuff so make sure you go ahead and do that stuff so let’s go ahead and jump back into the code so here what we’re going do is app.js and let’s go ahead and do the following so now we are going to go ahead and introduce react rter so in order to introduce react rter we need to go ahead and install react rout Dom so let’s pull up our terminal with command J I’m going to go ahead and add another terminal so we have this right here make sure you cded into the correct directory and I want to do mpmi for install so mpm install react R Dom so you guys just want to do the same command and that will go ahead and get you to the correct uh and that will go ahead and install react rout Dom for yourself right now I just saw somebody says why is he repeating the same project this is not the same project we have full payment processing in this project on days 2 and three so stay tuned guys um okay so in order to implement this what we do now is we pretty much wrap our app so we need to import a bunch of things at the top so you guys can go ahead and do the same thing you can import this from the top and then what we are going to do is we going to go over to the return and we’re going to wrap everything inside of a router okay so I’m going to go ahead and wrap the literally wrap the entire W inside of something called a router like so there we go okay now what you need to do is once that’s up and done then what we are going to do is now right now we just render the header and the home regardless right we want to render it based on the root that we’re in okay so what we’re going to do is we’re going to say switch right now switch and programming is usually when you have different cases or sort of statements right so what I’m going to do is I’m pop everything inside of here and then what I’m going to say is you define specific Roots so the first roote I’m going to Define is when we’re at the home page so this is how you do it you say let’s go ahead and get rid of this say when I’m at this route render the header and the home component okay so if I do that now so you see I’m at the forward SL rout and by default it pulls back to this if I go to ABC this will always get hit if it doesn’t match anything so this is always your default route so this is what we call the homepage R so right now you can see at the homepage route it’s very very clear and very very good okay and it works as we need it but what if we want the checkout page rout how do we Implement that so I’m going to go ahead and copy the same snippet but I’m going to say checkout now just to exaggerate this what I’m going to do is on the checkout page we’re not going to have a home component we’re going to say instead a huge H1 which is I am a check out smash the like button save and let’s see if this works and if it does work I mean listen to the code right so let’s go ahead and go to the forward slash check out and boom I am a check out smash that like button if you’re enjoying this content I thought that was smooth AF if kazy was here right now dude I think he’ll be proud of that one that was a um yeah I mean it’s just a bit of fun guys yeah but you guys can see that that is essentially how we use react R okay so you can see at the top we pretty much have it says 4/ checkout okay so let’s go ahead and get rid of that and it goes to the homepage you see that right so that’s going to be super super easy okay so like to implement you see that’s how we did it and now you can add as many roots as you want but make sure you’re fa route is at the bottom otherwise it never gets listened to it never gets picked up okay and that’s going to be a problem so with that said now what we’re going to do is we’re going to create the checkout [Music] component so instead of this I am a check out smash the like button now what we’re going to do is we are going to do somebody said shoot that horn you know what let’s shoot that damn horn damn dude that was that was louder than I thought from my head right so now what we is we’re going to create the checkout component okay so here we’re going to go ahead and create the checkout component now it’s going to freak out it’s going to freak out because we haven’t built that component so as soon as I click save be whoa whoa whoa you don’t have a checkout component so let’s go ahead and do check out your JS also I just saw something interesting from someone I will we’ll bring this up in a sec but we’re going to create checkout and do RFC and then here we’re going to do our standard bem setup so we’re going to say class name check out and say import import check out. CSS save the file and there we go okay there we go um save oh God what’s happening here dude okay save and then if I do H1 smash the like button right so now it doesn’t work oh it’s working there we go right so now if I go back to home uh no sorry not home if I go back to app.js so let’s go back to oh I actually need to create that checkout. CSS so checkout. CSS like so there we go okay so if I go ahead and create this and then we have this and let’s go back to app.js and now guys you see where it was freaking out you can go to the end press control space bar and it says Auto Import so that will actually go ahead and drop this in for us save the file and we’re back okay now this is a really good point you see we use header in both of these things so what we can do here if it’s used in both we want to render it regardless of what route we’re in now we can basically go ahead and Chuck this outside of the switch right so we can say render the header regardless and then based on the route render the checkout or the home so if I go ahead and save it you see nothing change but the header always gets rendered I go for/ checkout hey look at that you had the page smash the like button damn it dude that’s number two I think that was pretty smooth right now we have so you see that’s actually a really good point though because somebody went ahead and dropped this in the chat and I think it’s a really really good point to emphasize on if you have the uh header being repeated you can actually go ahead and pop it outside if you need to and that will go ahead and save you a lot of hustle and effort okay so that’s going to save you a bunch of headache so let’s go ahead and create the checkout page okay so the checkout page what we’re going to do now is go and ahead and we have two sections of the checkout page we have the checkout left right so let’s go over here and let’s add something to our basket we have the check out left and we have check out right okay so check out left and check out right so check out left when I say that I’m referring to this and when I’m referring to the right side I’m referring to this okay so that’s exactly what we want to do um so now here I’m going to say div div checkout uncore left like so we still have 16,000 people um no uh 1,600 people sorry this amazing guys you guys are incredible like I can’t believe the energy and commitment from you guys honestly it’s so so powerful and it’s motivating as hell for me so that is it’s amazing to see you guys are still here right let’s go back to the image tag so let’s go ahead and do our image and here I’m going to say that this has a class name of image oh sorry check out ad okay so this is going to be check out ad now for the source what I’m going to do is I’m going to go ahead and drop in the Amazon link okay so inside of here what I’m going to do is drop in the Amazon link so this is a this is actually this Banner right here so this is a banner obviously this is too big right now um so let’s go ahead and make that a bit smaller so what I’m going to do is go to checkout. CSS and go ahead and Target this and say for that ad go ahead and make the width 100% And the margin bottom so underneath it uh a margin of 10 pixels okay so let’s go ahead and do that and that’s going to make that a little bit cleaner and then going back to our code let’s go back to checkout. JS and then we’re going to go ahead and do um so underneath now what we’re going to say is we’re going to have a div and this div is going to have so underneath we’re going to say div and this div is going to have a H2 which is going to have a check it’s going to be h to and it’s going to have checkout title and this is going to say your shopping basket okay your shopping basket save it you can see it says your shopping basket and then we are going to have all of the products that you have inside your basket get rendered out okay so this sort of stuff is going to happen now I’ll explain how we do that in a sec but let’s focus on the right hand side of the screen for now so let’s go ahead and jump on the right hand side the screen um so let’s go ahead and do this right here so dev. checkout uncore right like this okay now in here we’re going to render the sub total okay so this is going to be part of your homework the sub to but we have a lot of stuff to do before then um and thank you dude somebody said never thought re react R is so easy Sunny was amazing explaining that thank you guys uh that is that means a lot when I see stuff like that it’s very motivating and it put you to do more so check out right so you can see this stuff over here on the right we’re going to go ahead and build that on that side of the screen so that’s going to be a subtotal component so right now I’m just going to say I’m just going to put a H2 here saying the oops H2 saying the sub total will go here we’ll go here save that and you can see the sub you see right now it doesn’t look like like how we expect it to be looking so inside of checkout what I’m going to go ahead and do is actually go ahead and say the following I’m going say check out display Flex padding of 20 pixels background color of white and a height of Max content and the reason why this has happened is because remember we had that left and right the right has the um the subtotal where the subtotal will go here and the left had the image and the rest of the stuff so the H2 it says shopping basket and so forth now underneath to check out the goal here is to have all of the baskets uh all of the basket items so here I’m going to have a basket item being rendered out and then so forth loads of them like that and that is basically going to be resembled in the fact of what we see here so just as we see it here is basically how we expect to go ahead and see it in our code okay but we’re a few steps away from getting to that point just yet so um what we’re going to do next is actually go ahead and Target the checkout title okay so the checkout title we are going to go ahead and give that the following code we’re going to say that is a margin right of 10 pixels and that has padding 10 pixels and a border bottom of one pixel solid light gray so let’s go ahead and add that in so you see that actually added in this nice little line so if I go ahead and comment this out for a sec come back bring it back you see Pops in that nice little line okay now I love this comment I’ve seen this a few times it says I’m amaz guys I’m watching this like a movie and do you know what guys I’m actually kind of jealous cuz like I wish I wish I wish I wish when we were learning when I was learning coding that we had this kind of content uh cuz it just it’s just like I find it the best way to learn let me know what you guys think I mean I always find the Practical stuff where you can actually go ahead and get your hands into the Nitty Gritty that is going to allow you to go ahead and absolutely crush it so there we have the shopping basket Okay so so now guys what we want to do is we have this um also I want to be able to be a click this link so you see I want to be able to click this Amazon link and actually take me back to the homepage so what we can do here is we can go to our header component and I’m going to show you guys how easy it is using react rout just to go ahead and do that so this is the image for the logo so this is the header logo and what we need to do here is simply do a link you see it says Auto Import from react rout adom so this is the import statement that you need but all you need to do is do a link and put the image inside of this link okay and I’m going to go ahead and say specify a two property and this is just going to be go back to the homepage okay so now you can see it’s become a clickable link so as soon as I click it boom we go back to the homepage that’s awesome that’s slick and that was easy to implement guys yeah so you see that was super easy to implement and what I’m going to show you is also another very easy thing to do and that lies over here so let’s go ahead and where I want it to happen at the basket as well so when I click this basket takes us to that basket page so as you guys might guess it we go here we type in link like so and we surround everything inside of it so let’s go ahead and dash everything inside of it let’s go ahead and do this link to and let’s do for/ checkout save it and now guys if I click this boom it takes me to the checkout Doom clicks this everything works right now um somebody says the website has no SSL when we deploy to Firebase it will have SSL so yeah you can you can recheck that one dude CU it does it will have SSL um yeah but you can pretty much see now we have the shopping basket and the Amazon and guys the beautiful thing is there’s no ref refresh all right so there’s no refresh it’s super super quick and that’s why we love react rter inside of react okay so carrying on strong still over 1500 people love and appreciate you guys uh this energy is insane right now um let’s keep on going guys so so let’s go ahead and now what we’re going to do is we’re going to go to our shopping basket and now I guess the next step naturally guys is what we’re going to do is I’m first I’m going to create the sub total component okay so the subtotal component let’s firstly go ahead and do that because that will make our life a little bit easier for the homework let’s go to our um checkout component and let’s see here so we have the subtotal will go here so let’s go ahead and make a subtotal component so here what I’m going to do is I’m going to say subtotal like so okay get rid of this save and let’s go back and let’s do subtotal do JS RFC and let’s go ahead and pop that out and then what I’m going to do is for this class I’m going to give it a class name of subtotal save the file go back up here and say import subtotal CSS save the file pull it back and let’s go ahead and code this up so what I’m going to use is actually a really nice um Library called react currency format so in order to install this it’s very simple guys all you need to do is go ahead and go open up your terminal so command J as my little shortcut do mpmi do react currency format this will go ahead and import um let’s go ahead and import the uh module into our platform into our project and it will it will allow us to use it and the reason why I love this guys is because it allows you to really easily actually go ahead and show money okay so it may sound silly but it shows you rendering money is not always the simplest thing okay so this is going to make it super easy to go ahead and do that okay so what we’re going to do now is and if you guys are interesting in getting exciting uh getting excited because we are going to be covering react context API so if you guys have been wanting to know about react or Redux then let me know in the com section right now because Redux is on fire and I’m going to show you guys how to go ahead and learn all of that beautiful stuff with the react context API okay so get excited for that let me know in the comment section and it’s completely fine if you are behind guys you can take your time you can watch this back you can pause the video you can spend 6 7 10 hours 50 hours doesn’t matter just spend your time afterwards and you can go ahead and do this afterwards okay so um let’s go back to subt Okay so now what we’re going to do is we’re going to go ahead and import it at the top of the file so let’s go ahead and import currency format from react currency format like so and now what we’re going to do is here guys I’m going to copy a big snippet and I’m going to explain what we’re doing here okay so I want you guys to do the same thing I want you to copy this snippet and then break it down okay because it can be a lot to digest a lot to swallow so let’s go back over to uh I’m going to say here zer items there we go okay and then here I’m also going to say zero okay now let’s go to our checkout page let’s render our subtotal by doing Auto Import which Imports it at the top of the page save it and what we can see now is it says get okay so let’s go ahead actually fix some of this so this right now let’s say a value of zero and this also is freaking out because it says cannot resolve subtle. CSS so let’s go ahead and make that file subtle. CSS save it I see so many people asking about folder structures guys don’t worry about the folder structures just get the content down and that is going to be much more important than having fancy folders okay so screw all that stuff focus on the actual learning and everything behind it okay so right so you saw that worked and you can see we have this subtotal over here on the right hand side so we want to get that looking like that okay we want it to look like this okay so how do we get it to look like that let’s go and style this thing so let’s go back to our sub total. JS and here let let’s quickly explain a few of these things so we’ll come to render text in a second but here we’re saying decimal scale of two so go to a t two decimal places so like for example here two decimal places the value so this is the current this is the amount getting passed in here so this is going to be part of your homework guys so this is going to be part of the homework right I I want you guys to try and figure this one out see how you guys can Implement that display type is text we can leave that thousand separator so if you’ve got like Β£6,000 or something let’s go ahead and add like a silly number of like expensive products here so let’s go ahead and add like a few iPads and then you can see at the top it says 4,000 because we’ve added this thousand separate true the prefix here is not going to be pounds we’re going to use dollars because you know most of the team uses dollars so let’s go ahead and stick with dollars um and then what we are going to have is the um render text so this is what actually comes out of the text right so this is what actually gets rendered onto the screen so at this point we can ignore the value here but this is the crucial part so it focus on the P tag and the small tag the P tag is essentially where we say subtotal the number of items and the value okay so here this is the value that we actually get pass we pass in here so it’s actually going to be used as a prop here so this is also a part of the homework right so this is part of the homework right so pay attention to the homework guys because it’s going to be juicy okay and I want you guys to do well in this homework and it’s going to be a nice little challenge actually for you guys um and you can see the homework is dynamic so as I remove items from the basket as I remove things it’s it updates number of items and it updates the price okay so it does all of that stuff and it updates everything okay so we have this over here we have the small tag okay now this is just an input type because it says the order contains a check order contains a gift obviously ours doesn’t look like this right now so I’m going to go ahead and style it and then we can move on okay so the first thing I’m going to do right now is go to oops I’m going to go to we’ve got the checkout we’ve got the sub tool and then here so after this we’re going to have a proceed to check out button okay so and this is going to be a react rotter um this is going to have sorry it’s going to be a button which says proceed to check out as so so let’s go ahead and drop this in underneath so here proceed to check out okay now let’s go ahead and make this um let’s go ahead and make this um an absolute beautiful looking sub total form so let’s go to our sub tool and what we’re going to do is we’re going to add in the following rules so I’m going to explain every single one of these in a sec so we’re doing display Flex Flex Direction column yeah justify content space between width of 300 pixels height of 100 pixels padding 20 pixels which can give it a bit more space around it background color of it’s going to be like a white I think it’s like an off gray okay then you’ve got a border with a nice little color behind it and a border radius which is slightly rounded okay so there you go soon as I save that look at the difference it made like just by making that slight little change we get a beautiful looking um we have a beautiful looking UI already right so let’s go ahead and let’s target the gift next so let’s go to sub. JS and here we have the subtotal gift so we had it here so I’m going to go ahead and Target that subtotal gift I’m going to say display FL X and align items in the center cuz you see right now it’s kind of very subtle but it’s actually off so you see right now where I’m pointing it’s actually slightly off okay so we’re going to go ahead and fix that so let’s go back to subt JS and I’m going to go ahead and do back to CSS sorry go ahead and do this okay so this is awesome let’s click save and then you can see it it went and aligned it centrally now I’m going to go ahead and Target the input field I’m going to say give it a margin right five pixels so it slightly pushed it away and then I want to get the Amazon button styling down so it looks like the Amazon button and hey somebody says clean as Sunny’s hairstyle thank you dude um so sub total and we’re going to Target the button inside and we’re going to say background of this beautiful Amazon Orange and we’re going to say back border radius right here and we’re also going to say a width of 100 pixels a height height of 30 pixels and then we are going to say um border margin top border color and remember that’s the slight uh gradient that we shown previously and the color is the black text so as soon as I hit save guys as soon as I hit save if this looks amazing smash that Thumbs Up Button if you already haven’t because guys if we’re all part of this community Let’s Help share this knowledge to as many people as we possibly can save it and look how clean that UI is like I mean it’s I always like even as an experienced developer sometimes like you come back to these moments where you’re like damn like subtle changes make the entire thing look different like it it completely changes your perspective on this stuff so looks really really clean now with that said guys we are going to actually go ahead and I saw a question asking about react rooting in history object yes we will be doing that stay tuned for days two and three and we’re going to cover plenty of that stuff now guys I want to get to the juicy stuff okay so just want to take a second here so I know it’s been quite an intense build so far but this is where it gets a little bit intense and we’re basically going to crush this next bit so if you need to stand up stretch out have some like you know take a few breaths just give yourself a little bit of a break right have some water I’m going to have a quick break and let’s crush the next section which is the react content Tex API okay we’re going to kill this section today because this is going to be the big juicy part of this build and once we get through this part it’s going to allow us to have this amazing functionality to go ahead and add and remove items from our basket okay so you can go ahead and add items to the basket so let’s go ahead and see we can add items to the basket we can remove items and we can do loads of stuff as such okay so this is going to be awesome and this is going to be part of today’s um implementation okay so what I think actually is actually yeah okay let’s go ahead and do it okay so what we have now is the react context API now we have all of our apps right here okay now whenever I add something to the basket I essentially need a data layer to push some to push that item into the basket so let’s pull out the Whiteboard okay so I don’t know if you guys can actually see me I need to go ahead and share my screen let’s go ahead and pull out the Whiteboard okay so let’s imagine we have a few components so let’s go ahead we’ve got the header okay we’ve got the header we’ve got the body okay so this is the header of the app and this is the body and then here are the products right so this is one product this is another product this is another product okay and this is a fourth product we’ve got four products in a row right now each one has an add to basket button okay so this like can add to basket button add to basket button add to basket button and so forth okay then we have our little nice basket icon at the top okay so I don’t know this is like a little basket okay so what I’m saying now is here what we’re going to have is essentially an add to basket button okay so this going to be an add to basket button and basically what we want to do is we want it so when I click this button we’re essentially going to push oops we’re essentially going to push an item into let’s just call it the data layer okay so let’s call this the data layer the data layer and what I’m referring to here is actually the react context API okay or it’s similar to the Redux pattern so many of you may have heard of Redux or wanted to learn Redux so basically anytime I press any of these buttons it’s going to push the item that the button belongs to into the data layer right now why is this so powerful it’s because once it lives in this data layer what we can do is we can essentially go ahead and just pull it into any component that we need we can go ahead and pull it into the basket we can go ahead and pull it into the uh into this component for example we can pull it wherever we need it okay so this is going to be crucial for your homework and this is going to be crucial for example once we push the item into the data then for example when we go into the my basket page or checkout page we can see what items are inside the data layer so this is going to be why we need the react data layer so let’s go ahead and actually go ahead I just want to see I just got a message um on Skype one second maybe Ki is actually rejoining us guys so what we’re going to do now is we’re actually going to go ahead and add the uh prerequisites for the context API so now guys what we’re going to do is we’re going to create the state provider so here are a few steps which I recommend you don’t stress over too much okay just follow my steps follow what we need to do and you will get things working in the way they need to work okay and once we get to that point you can understand how they work afterwards just follow what I’m doing right now and everything will work super smooth okay um so now what we’re going to do is is we are going to go to state provider so let’s go ahead and add State provider so let’s go ahead and do state provider. js. JS and you guys can pretty much copy what I’m about to write here okay so here I’m going to copy out a snippet now this snip it right here pretty much it’s just a few different import statements okay so this is a few different import statements um that we have right here and then we have this is essentially creating the data left this basically prepares let say prepares the data layer okay I’m going make this a little bit bigger prepares the data layer so we’re going to prepare the data lay and here we basically have um one second so here we have the essentially the prep preparation of the data and then here guys we don’t need to essentially know what this does like but what but I’ll explain this in in a different video or maybe in the comments afterwards but all this is essentially doing is basically this will wrap our app okay this will this what we have right here is basically setting everything up and it’s going to wrap our app and provide the data layer to every component inside of our app that’s it okay that’s all it’s doing so we don’t need to know about all this fancy stuff all you can do at this point is just copy this out okay just copy it out that’s all we need to know and this is how we’re actually going to be able to pull information right right so pull information from the data layer now I can see some people asking like should we actually go ahead and copy and past and things like that guys trust me when I say this I’ve taught so many students me and Kazi everyone else has taught students like trust me it’s all about pattern recognition do not be freaked out by this stuff okay I want you guys to copy this out and you can actually go ahead and focus on how we use this and then the sort of implementation this stuff won’t be as important okay so we’re going to click save and now what we’re going to do is we are going to go over to our index.js and here what we’re going to do is we are going to go ahead and wrap our component okay so we’re going to wrap our component in something called the state provider so we’re going to say State provider and we’re basically going to go ahead and close this like so and it’s going to freak out because we don’t have these two things we don’t have the initial State and we don’t have this weird thing called the reducer okay and um this is a really good comment by haira she says so that every comment component can get access to the data layer yes so this is why we actually want the um this is why we want a data layer so that every single component can have access to that data layer which means that if we push information in then we can basically go ahead and pull information out wherever we are inside of our app okay so this is why we actually need to go ahead and use that um so with that said we have that pretty much working um but we need to have these two things the initial state is what does the data look data layer look like in the beginning and the reducer is how we sort of manipulate with the data layer how do we play with the data layer so what we need to do now is create something called a reducer so let’s go ahead and create reducer DJs now don’t worry about what reducer means as such um just think of it as the data layer right so in this case what we need to do is create the initial state right so we’re going to have a user at some point but for now we’re going to leave it blank but initially in the data layer we’re going to start with a empty basket okay so we’re going to have an empty basket to begin with and then what we’re going to do guys is we’re going to create a something called a reducer okay so this initial State remember we saw this earlier we actually used it here so I can go ahead and import this into and we’ve actually go ahead and we’ve fixed the first part so the second part is actually getting this reducer now what is a reducer right so a reducer is essentially when we have this data layer right so when we have this data layer that we spoke about earlier a reducer is essentially how we are able to you see this Arrow right here how are we able to actually dispatch this action into the data layer okay so when I click an add to basket button so when I click a button like this how does it then go and dispatch the action into the data layer and how do I actually go ahead and pull it right so the pulling part is easy but pushing into it is where the reducer plays a very important part okay so here when we click add to basket we essentially all we need to know is what product we’re actually adding to the basket and we’re going to shoot it up into the data lay and it’s pretty much going to sit inside the data there up here okay so let’s go ahead and head back to our code and what we’re going to do now is and I love this Joshua Thomas still says he is still pumped right that’s the energy that we’re talking about guys right so what we’re going to do is we’re going to go back to our reducer and here what we are going to say so uh the context API and Redux are not the same thing but they are the same pattern okay so both use this idea of a store like um basically a global store for your application and then you basic basically have this pattern of dispatching actions into this store and the reducer just listens and says okay you just updated a basket all right I know what to do okay you just removed an item from the basket I know what to do don’t worry like that’s what the reducer is doing okay so at this point in order to write the reducer we need to do the following so we need to say const reducer and it takes two things it takes a state and that’s the state of the application and then it says the action okay now the action is what are you trying to do you trying to add to the basket you’re trying to remove from the basket what are you trying to do here okay so here what I’m going to say is it takes a switch right now the switch is based on the action. type now I will explain this and everything will make sense with practice so do not freak out guys okay so here we’re going to say case and I’m going to say add to basket Okay add to basket like this and then here I’m going to say return right now this basically means whenever we receive an add to basket action so remember we talked about this earlier so um oh damn it I’ve lost that snippet okay never mind remember we spoke about when we sort of would press the add to basket button so every time I would press the add to basket button it would dispatch an action with this type add to basket okay now when we so the reducer imagine the reducer is just something that’s always listening for for a dispatch or something like that it’s always just listening okay um and what we’re going to do here is we’re going to say return and what we’re doing is we’re returning whatever the state originally was but we’re going to change the basket and we’re going to say the basket should now be whatever the basket currently was so whatever it currently was plus whatever we actually decided to add so the action do item that you passed inside of the action okay so this will make a lot of sense shortly okay um um okay so so now what we are going to do is we are going to go ahead and actually export the reducer so we’re going to go ahead and Export the reducer and we also want to have something called a default State okay so default state so here I’m going to go ahead and say default return State now guys again this you don’t need to really know exactly what this does but at this point we need to go ahead and hook it up okay so go up to this reducer go ahead and control space bar Auto Import done okay so guys all you need to do is just copy those steps copy those steps and everything will be okay and you should get to the point where it’s a state provided is not defined so we need to go ahead and import the state provider as such so so save that and guys at this point if I go ahead and do this now we need to connect our add to basket to basically go ahead and push something inside of the data layer okay so let’s go ahead go to our product and now inside of our product when we click this add to basket button we want to dispatch and add to item add to basket uh object okay so let’s go ahead and go to our product so product. JS and what I’m going to say is when I click the button so when I onclick I’m going to say um add to basket and this is going to be a function I’m going to write up here so I’m going to say const add to basket like this okay now this will take no arguments and all it will do is it dispatches an action okay so here we’re going to dispatch some action into the data layer and basically the goal here is saying dispatch the item into the data layer so we have it okay so just copy and paste it if you need to do that okay now what we’re going to do here guys is in order to pull information from the data layer I showed you previously in the when we were setting things up inside of the state provider that this bottom part that I said you don’t have to understand what it does is it’s going to essentially allow you to pull information from the data so here what we’re going to do is we’re going to go ahead and say const basket like this dispatch and we’re going to say use State value so I’m going to explain what this does and basically what we have here is we have the state and we have a dispatch okay now the state we’re not too interested in right now so we can pretty much ignore that this is basically the state of the global store and here we have the dispatch okay so the dispatch is going to be how we manipulate the data so here what I’m going to say is dispatch and then I’m going to say dispatch an item uh dispatch an object into the data layer so this dispatch is like a gun right so it essentially allows you to shoot into the data layer so like shoot an action like we said like that arrow that we showed previously um that’s what we’re going to basically doing here so I’m going to say type and here we’re going to say add to basket okay and then the actual item that we’re going to push into the DAT L is going to be an item with the ID from here it’s going to be the title is going to be the title that we pushed in over at the top the image is going to be the image that we passed in as a prop the price is going to be the price that we passed in as a prop and also the rating is going to be passed in as the rating at the top okay so what this does now guys is we essentially are going to dispatch and add to basket action now the way that we check that this works okay is we open up our inspector we go here if I click on add to basket nothing shows okay okay so let’s go over to our reducer let’s go and make sure that I like to always do a console.log so let’s go ahead and do console.log and I like to always dispatch the action okay so now if I do add to basket whoa we got an add to basket action it dispatched this type of action so add two basket so it picked it up on this case statement and then it said item and you see what we’re doing here is we actually went ahead and said so I’m just going to go ahead and make this a bit bigger for you guys so it says change the basket so that the basket is now whatever the basket currently was plus the action do item and the item is this stuff right here so this will push the basket into this will push the item into our basket so now we should have the um now we should have the actual item inside of our basket so how can we check very simple thing we can do we can pretty much go ahead and this is our state right here we can destructure and we can say hang on get me the basket outside of the state and all you guys got to do is Chuck a console log and say something like this you can say this is the baset and put something like this and now guys look what happens so you see it says this is the basket on many renders and we can go ahead add to basket and whoo we had an item in the basket so now we have this one item in the basket okay okay that’s cool I go ahead and add a second item who okay now we got two items in the basket add a third now we got three items in the basket you see like this is really powerful stuff and like we’re basically what we’re doing is we’re pushing into the data layer all right so um so you can use I saw why is he using the function instead of f Arrow yeah you can use fat arrows you can use functions you can use whatever you want guys um but yeah you can pretty much see at this point you have the three items inside of the basket okay and um we are almost at the Finish Line guys so stay with me okay we are almost at the Finish Line um for today’s session so if you guys are pumped up and you are ready to do that last final push I know it’s been a while I know it’s been a while but come on guys there’s huge prizes here the prize even if you didn’t win is essentially getting that final job that you deserve okay as a developer so stay with me guys let’s bring up the energy and let’s finish strong to that Finish Line okay so the F what I want to do now is essentially you see at the top over here where we have this right oh God oops where we have here right we have the zero now what I want to do is when we add an item to that basket we want that to dynamically update right I want this to dynamically update like this like this is the this is the actual app it dynamically updates right so this is going to be really really cool to actually go ahead and Implement so we need to actually go ahead and implement this um so let’s go ahead and do that so and I love it I can see the energy coming up this is awesome right so let’s go ahead and go to our header component and what we’re going to do inside of our header component is we are going to go inside to the top of the function go to header. JS and as I explained previously guys we can pretty much go ahead and do the following we can use that magic U State value to pull information this will be the state all right so we can go ahead and import this so remember you need to go ahead and import this at the top and then you got the state and you got dispatch okay now we may not use the dispatch in this case so we don’t actually need the dispatch but I’m going to leave it in there to make it simple for you guys now here we have the zero okay so we hardcoded a zero here but this is how easy and insanely powerful the react context API is what we can do is we can get the basket okay get the basket like so grab the basket and what we can do is we can scroll down go here and guys all I need to do at this point is say basket dot length that’s it that’s it guys do that and what I would recommend is that you put a question mark here and this is called optional chaining and what this would mean is that if you for any reason don’t have the correct value or basket becomes undefined due to an error it won’t freak out it just will gracefully DET terminate okay or gracefully handle the error okay so let’s go ahead and add this now guys I think if we go ahead and click add to baset we should see update in the corner but you know things can go wrong things can go insanely crazy everything’s not on our sides I’m going to make this a bit bigger and let’s just go ahead and pump up the crowd and let’s get everyone sort of anticipated because I think if we done this right boom guys there we go can you see that if I go ahead and click this in we’re getting this is the number of items inside that basket guys so that is insane that is awesome it’s working okay like it’s working we go ahead click it in and we have the shopping basket stuff here so this is really really powerful okay this is really really powerful stuff now what say guys do you want to do so I’m going to leave this down to you guys I’m going to ask you guys a question now so today what we can do is I can either set you your homework here and we can build out the remainder of this stuff so we can build out the remainder of this shopping basket list right so we can set the homework and we can build out this list or shall we set the homework for today and should I show you how the solution to the homework and then we carry on with the shopping basket today you guys let me know okay I want to know what you guys think at this point go ahead and let me know in the comments right now what you guys want to do do you want to build this shopping basket today this sort of this checkout page functionality where we have even the removed from basket or should we go ahead and set today’s homework and wrap up there and pretty much we can carry on tomorrow in tomorrow’s day two of the bill okay so we have a lot of people saying set homework some people saying set homework re uh redo so um as in redo and carry on with the shopping basket somebody says let’s finish the game continue yeah BOS get to homework homework homework continue okay so we have a mix here guys Okay so so right so what I will say guys is because it’s been a huge stream okay it’s been a huge dream if you guys are super excited tomorrow I’m going to show you how to build that lovely shopping basket that we saw here okay so that lovely shopping basket that we saw um over here I’m going to show you guys how to go ahead and build that right but today what the homework is right so every today if you guys want to be a part if you want to be in this to win the prize that we’ve set what we ask is that you go ahead and finish the homework and we submitted the homework yesterday which was the portfolio but today what we’re going to be doing the challenge for you guys is quite simple okay so challenge for you guys is pretty simple and what we’re going to be doing is we are going to focus on the following for today’s homework okay so the homework for today is can you guys can you guys build so we pull in we pull in the dynamic information at this point right so I showed you guys how to go in and if you add to the basket it Updates this value over here now can you guys get it to show the number of items over here so inside the subtotal and can you also go and uh actually calculate the price of of the items inside the basket okay so that is your homework okay so I’m going to go ahead and just put a little snippet on the screen right now and I’ll visually show you guys oh I was I wasn’t actually sharing the screen I’m sorry guys let me go ahead and make this a little bit bigger right so let me go ahead and make this a little bit so this is going to be today’s homework so I’m going to go ahead and Visually demonstrate this so you can see here guys I showed you guys how to go ahead and add the Dynamic information over here so when you actually go ahead and add items to the basket it actually dynamically updates at the top right so it dynamically updates at the top and we can pretty much see this happen in front of us okay now what I want you guys to go ahead and do is actually go ahead and um is actually go ahead and um for homework use that solution that I showed you for the header but go ahead and do the same thing for the subtotal items so we can see the number of items that get pulled in from our basket okay and then the juicy part of the homework is can you guys then take those items that we have in the basket and actually calculate the total price okay calculate the total price and the finished result should be a beautiful looking application so we won’t have this for today’s build but that will be part of tomorrow okay but now what I want you guys to do is um what I want you guys to do is actually go ahead and get this working okay so basically once we add a few items to so I’m going to refresh and show you guys so let’s say we added the Kenwood and The Lean Startup go to our basket it should say two items are inside the basket so it should match up to the top right here and then it should also so say the correct total that’s your homework guys for [Music] [Applause] [Music] today yesterday we had left off at where you had put this page together initially and then there was a basket we’re going to pick it up from there so this is what you’re going to be building building today if you are excited drop it in the comments below and let us know exactly guys so you see the main new feature today is going to be that beautiful login and authentication and that’s all going to be provided from Firebase itself on Firebase authentication so we’re going to show you guys how to do that we have a GitHub and this is the URL for it this should be in the description or in the Facebook post it should be there and if if you go here just make sure you star it and Fork it so you have it and this will get you part one of the Amazon build this will get you caught up to exactly here and if you’re a complete beginner it’s as easy as clicking here and just downloading this file as zip then opening it up and literally typing in The Following npm start and you should be good to go you should be caught up with us if you’re more advanced you know that you can like pull it with a GitHub repo it’s as simple as that so the game plan for today guys is we’re going to complete the checkout screen with the react context API so we’re going to have everything completed and built to that homework spec that we set yesterday and then we’re going to go ahead and if you just hit enter Kazi you should pop up we’re going to go ahead and do Implement a full login functionality that means sign up sign in everything implemented with Firebase authentication set so it’s going to be a complete functional app with login log out everything’s going to work and then we’re go ahead and deploy this thing over to Firebase so that will be awesome perfect nice nice let’s go ahead and get started bro okay dope let’s do it so I’m going to hit follow here and let’s go nice so let’s go ahead and go on with the homework portion so yesterday we had set everything up to the point where we wanted to build the sub total component so we left you guys here where we had a fixed subtotal component here and we a fixed subtotal amount here and then an empty sort of currency amount here now we’re going to go ahead and change this okay so let’s go ahead and open up our local host cian and have it running on the right hand side I do okay awesome so that’s our Local Host let’s open up the basket so let hit into the basket nice and what we’re going to do here guys is where we had previously I had shown you we had zero items right now we currently push everything into the store whenever we add an item to the basket so I showed you guys how inside the header we actually can pull the basket contents from the data layer that we set up yesterday so I’m going to go ahead and copy that one one quick shout I just want to do so somebody said I don’t see the Facebook link Facebook group link here’s how it works you actually go to this link over here this page and this is how you actually officially join the challenge and remember you can win up to $6,000 online coding boot camp so make sure you go to this link here and then pop in your name and email address and that will get you in the challenge exactly guys make sure you do that get involved because it’s awesome inside the community right now and everybody is on that and it’s prop people in slack channel right yeah did we actually post this out to the slack channel that we’re live right now I guess yeah they would have seen it nice Nas did we post this on the slack Channel yeah we did nice awesome okay I don’t think oh we just donation as well from twins mother Madam USA thank you starts off nicely hey Sick wow thank you for that actually that’s huge yeah huge donation thank you nice so guys with that said let’s go ahead and start so we have the subtotal component that we were messing around with right so what we’re going to do is we are going to pull the basket contents from the data layer so previously we had this used State value so I need to go ahead and actually import that used State value Hook from that that’s the custom hook we wrote inside of our state provider now anyone who is confused about this stuff just go ahead and build out the first part of the challenge and come back to this video um but right now we have the usate value and we pull our basket so this is going to have whatever we add to our basket and then what we can do guys is we can go here and we can simply do the following we can actually say basket oops we can say basket. length like so and this will should so if we save this um we can actually go ahead and let’s go ahead and refresh the app CI let oh we have to do mpm start I think yep so let’s do that okay nice somebody said Sunny’s voice is not clear okay I think it’s pretty clear now I think it’s pretty clear I mean yeah we’ we fixed that yeah um okay so now what we’re going to do is we have the subtotal um and it we said basket. length so once it loads up just go ahead and click the Amazon logo all right so boom here we go yeah and let’s add some items to the basket all right add to basket add the basket so I added these two yep and then let’s go and click the basket there yep and then what we should see now is in the subtotal it should say uh was it three items I can’t really see that it says two items okay awesome yeah because we added two items so now it’s pulling that information from the basket and it’s actually going ahead and using that right so it’s it’s it’s actually going ahead and updating it so rather than having the two items like we have previously rather than having zero we’re actually pulling from the basket and showing however many items we have in the basket itself next guys we want to go ahead and where it says strong right we want to have the actual value here so previously we have the value set to zero here and I said that this was part of the homework guys right so what we’re going to do is I’m going to show you guys a nice neat little trick so I saw some of the the implementations that you guys had done but I’m going to show you a really really sort of es6 forward way of doing this so let’s go to our reducer DJs so we’re inside of our reducer right here and I’m going to show you guys how to build something called a selector right so we’re going to build something called a selector and this is actually something which is really highly used in um production environments so what we can do now is we write export const and I’m going to write get basket total and this is a really powerful function it’s going to take the basket itself and it’s going to Simply return the following it’s going to say get the basket and we’re going to do optional chaining to prevent everything uh from breaking and we’re going to say reduce now reduce is a function which is extremely powerful okay now what we’re going to do is we actually so the the purpose of reducing sorry is it essentially Maps through the basket next guys we want to go ahead and where it say now reduce is a function um oh yeah there we go nice so what reduce does is it goes ahead it iterates through the basket and then it’s going to tally up the total Okay so we’re going to have an initial amount right and we’re going to iterate for each item and the way we write this guys is we put some code here so here we’re going to say every time lips through I want the item price to add to the total amount and the initial amount is going to be zero okay so I know this may seem like a confusing line of code but have a look at reduced functions and this essentially all this is doing is it essentially tallies up the basket and it goes ahead and it tallies up all of the item prices and it adds it into this final amount and it returns it directly it’s into so is this basically like a fancy way of writing a for Loop and then incrementing everything and tallying it up right yeah and then we return it got then we return it as a value so now if I go ahead go back to our subtotal and we go back to here and instead of writing a set value of zero what we can do here is we can do get basket total and we pass in the basket that we pulled in from our dat over here and obviously we need to go ahead and make sure that we import this basket okay so let go up to top and we’re going to go ahead and say import get basket total from the reducer and now guys what I want you to pay attention to is if we go ahead and add some um items to the basket cazi all right let’s do it so let’s go to the first page yep um I think I’m going to go with a Samsung watch and an Amazon Echo yeah let’s do it all right now it should see okay so it still says zero now this is interesting and I’ll show show you why it still says zero so we set the value here right but in the render text we didn’t actually show the value okay so we need to show the value now I see a lot of people saying cannot read property basket of undefined to fix that guys go back to your reducer make sure you add this optional chaining right here nice okay so this is actual optional chaining and this is going to prevent that from happening okay so make sure you add that in to save yourself that little bit of headache go back to subt and what we’re going to do here is this value that we calculate here gets passed in as something called a render prop so we can actually use it so we can go here and we can just say value value like so boom there we go zero I mean yeah zero for now yep so it’s zero for now and if we go to Amazon add the products boom hey there we go so fast so fast I’m going to add multiple of these damn exactly awesome now I saw some people say can we put the function inside subtotal so guys this is actually a professional practice of having selectors inside of your reducers or I mean you can separate to a separate um separate file but you want to make sure that you have the selector in this case inside the reducer because think about what you’re doing you’re actually taking the basket reducing it down and then you have some kind of cable function so that’s just good practice you can do whatever way works for you but this is my experience from being in a sort of professional environment so I would go ahead and use that and that will make your life a little bit easier so with that said we actually have the subtotal working okay so that’s awesome now we have the header which pulls in the um basket content so at the top of the header on the right you see we’ve got some items and then the subt itself is um is where we have the the price and we also have the number number of items we also got another donation um thank you so much thank you that I appreciate that that is huge let me just play the air horns here a little bit nice and I got a nice little we got a nice comment by um Zachary and he says I’m definitely having to go back and rewatch The videos and find some supplemental stuff online to fully understand the why behind everything but in the meantime it is like learning to swim where they just go throw you off the deep end not the most theoretically sound but it works guys remember remember you’re building the Amazon clone so this is something I mentioned yesterday right it took people 10 decade or more to figure out how to be able to actually build this so it’s not going to be something that is going to be super easy this is definitely going to be tough but if you push through this and add it to your portfolio it’s going to look epic and then our goal is that you’re going to love coding and then you’re going to start learning the why behind everything exactly guys and that’s going to be the main focus here is to go ahead and put push yourself into that uncomfortable position and we’re here to pretty much hold your hand through the entire Journey till you have a lovely looking Amazon clone at the end of it and you guys doing amazing so far so don’t get disheartened and the slack group is also amazing for that support yeah so nice with that said we now have a finished sub total section so that’s really clean what we’re going to do next is focus on the checkout okay so previously in yesterday’s build we reached the checkout stage and we have these basket items right so I masked it out and the purpose I actually masked this out is I was actually subconsciously hoping that some of you went ahead and built that so that was awesome to see that you guys actually picked up on that and um somebody said COD with then said Sun you bought a new headset yep we have a new headset new mic so it’s going to be extra clear for you guys today um but we’re going to go ahead and build this this lovely um basket item implementation here so now what we’re going to do is we are going to go ahead and build out the shopping basket itself so let’s go ahead and check out so here guys we’re going to call it the checkout product okay so because we’re inside the checkout page so let’s go ahead and call it a checkout product so checkout product okay and I check out product and this is going to get rendered out however many times there is an item inside of our basket so with that said what we’re going to do now is create that uh so I’m going to go ahead and create a checkout product creating like hardcoded products right before we make Dynamic products is that what’s happening yeah yeah got it so basically we’ll have something along the lines of like over here how when we add some products let me just zoom out a little bit and we go here and then it shows up like this right so we’re essentially going to just hardcode some of this stuff into our app that we’re building exactly so right now we have got the all of the uh products on the home screen are hardcoded um we are going to show you guys at the end of today’s build how to pull that information from Firebase um but for now what we’re doing is all of those hardcoded products in the front end so when we had the homepage up when you click add to basket we should see that list of shopping basket items in this section right here okay so I’m going to do check outb product. JS so we should snap into that in just a second so let’s wait until that pops in so you guys should see that we are now inside check out product if I do RF C which is our lovely little Snippets and we’re going to go ahead and set this class up or set this um component up so check out product and this is going to the bem convention going to go ahead and do import check out product from oh oops import should be CSS right here import checkout product. CSS like so then we’re going to create that corresponding CSS file so I’m going to do checkout product. CSS like that and let’s go ahead and see and now we’re inside that folder inside that file sorry so we have everything set up that we need okay now what we’re going to do is jump inside of that checkout product and start producing it so this is going to have a few things inside of it so K let’s go ahead and open up the deployed app so the finished one boom yep so the finished one so you can see this finished one has a few things inside of it it has an image and then it has like an info section and Ino section contains the title the price the ratings so the star ratings and then a remove from basket button okay so we’re going to go ahead and show you how to do the removing as well in today’s build so let’s go ahead and fill this out so first thing we’re going to have is an image so I’m going to my Snippets aren’t working so I’m going to say image and this image is going to have a source and the source is actually going to be the image that we passed through as a prop because here this product is actually going to have some props that pass through and in those props we’re going to have an ID an image an image a oops an image a title a price and a rating Okay so we’ve got these props which are basically the same props that we have inside of app.js or inside of the um homepage so source is the image right here and then what we’re going to say is we have a somebody just called you the grand Papa of react it’s upgraded from Papa react to grandpaa from react yeah damn I love D I’m the great grandpa of uh python now moving up in the world exactly it’s a whole family over your class name equals checkout product image let’s go ahead add a class name so that we can easily Target afterwards for styling and then what we’re going to do is we’re going to create a div and this div is going to be responsible for all of that text price rating all of that stuff so we’re going to go ahead create the div here and this div is going to have a class name of checkout product so it’s going to be checkout productor info oops info there we go now this is going to have a P tag so this P tag is going to be here and this P tag will be the title itself okay so this is going to be the title and this title should have a class name so we’re going to use class names for this one I like to mix it up to show you guys the different variations so this one is going to be check out product title and then we’re going to have the price itself so this styling over here this styling for class name oh hold on so this one over here is going to be for that image right there exactly and then this one over here is going to be for the info which means the title the money and the ratings yeah got it exactly exactly that that’s exactly what we’re going to do and and that it will actually include the button as well inside of that yeah oh so info will have the button yep it will have the button as well got it okay so then we we’re also going to have so I’m going to create another P tag another P tag and thank you El Manana for that donation hey damn thank you guys the donations are still coming in that’s awesome thank you how people are donating by the way is on YouTube the ones who are watching on YouTube there’s a Super Chat button underneath the comments they click on that they click donate and then they donate so for everybody who’s here watching it or donating this is for you all right awesome thank you I’m enjoying my DJ superpowers bro it’s so fun dude it’s so fun so we’ve going to have for this P tag now we are going to have a small tag so a small tag better be paying attention I’m watching you you think you think we’re not watching you we’re watching you pay attention learn build projects we want you to get jobs 5,000 people getting jobs that’s our goal okay 110% effort guys let’s go nice so inside the small tag we’re going to have the currency so in this case we’re going to have a dollar sign and then we’re going to have a strong tag so this is just an easy way of boding out some text so I’m going do strong tag and it’s going to pop in like so and here I’m going to have the price okay so and I love this comment by the way I want to just pop this up over here and prra says Cy hear me out I can’t appreciate you anymore man this entire challenge which you guys are providing us with seems to be such a great opportunity in such a crisis oh I’m hiding some of the message can’t appreciate you and the entire CP team anymore you should Pat your back we will for doing so much for people you don’t even know just wanted to say hold on let me hey here we go just wanted to take a moment to appreciate you guys love from India pump from more let’s keep it going damn thank you so much man super humbled really appreciate it guys wow all right let’s get back dope dude I love comments like that yeah makes my day makes our makes our day guys this is why we do this it’s for you guys so we appreciate when the energy is up and for the people who are sometimes negative we will just block you and kick you out because you’re affecting the energy of other people and we can’t have that cuz this community needs to be positive and strong and it goes two ways one you only keep the best and the highest quality people two anybody that doesn’t fall up to that standard they’re out of the group and you get the best community exactly guys and this sort of community only sort of like is fueled off of that optimism so anyone with that negativity get out of there yeah nice so now we’re gonna have the checkout product rating so this is going to be very similar to how we did it yesterday so we’re going to have it a div with that inside of it so there we go and then we are going to have a this the following code so this is actually from yesterday’s build this uh snippet and I’ll explain it quickly so I’m going to paste it in right here and what we’re doing here guys is we have an array uh we have the rating so this is going to be a number between like 1 to five for example and then here what we do is we basically take that number so say it’s five we make an array of five we fill it and then we basically just map through and we so we’re basically mapping through that number so if it’s five it’s going to map through five times it’s a little bit of a trick to doing that and then basically it’s going to render out five stars okay so I saw a lot of people were able to get that working so that’s really cool and I love seeing that so with that said we now have all of this stuff in place we’re going to add one more thing which is a button so I’m going to go ahead and say Sunny question how is it knowing to do five stars I don’t see five anywhere so how does it know to Loop and make five stars and not eight um so good good question and firstly I want to say thank you to rapael Estrada dropped a $5 donation oh damn thank you man appreciate that that’s huge yeah massive dude thank you and to answer your question bro so here we have the we have one star right but we’re doing is for the rating let’s say imagine you passed in like a value of five oh that’s it okay so that’s I yeah so that’s so actually you can actually ignore this part right here yeah you could actually go ahead and maybe get rid of that and it would still work right this was a bit of a hack what we’re doing right now so what we’re saying is oh it creates an array of five yeah and then it Maps through it five times we don’t actually need the index or anything so we just Maps through it five times so array takes an an input and basically it creates an empty array in the start of like five what like five undefined it’s like an array of size five think size five got it okay okay then it fills it with like an empty value for each one so maybe it fills it with a null yeah yeah yeah yeah like a null exactly that makes sense and then you just map it to every single value that’s there and you just put a star there y exactly nice dope okay for anyone that did want the index what I did is I did this so I basically had it previously as underscore the convention here is if you don’t care about what’s in the first parameter you just put an underscore in there and then you put an i right got it okay okay so now the next thing is we’re going to have a button which says remove from basket okay save it and what we’re going to do is inside of checkout here actually going to go ahead and render out a product so here I don’t just want to render some random products okay I actually want to render out the basket itself so what we could do is remember guys to pull a item from the basket you have that beautiful little bit of code which is uses that used State value hook and this pulls the basket remember if we don’t need the dispatch we don’t actually need to include it here but sometimes it’s just it’s it’s that pattern recognition of seeing it which is going to help you guys learn whoa dude Arturo Jose Reyes Marano just dropped a damn thank you so much dude holy crap bro let’s go uro coming in clutch the $25 donation thank you so much yo what is this Leonardo shanan Love the style the energy and the saludos from Costa R we just got 5 million 5,000 holy crap thank you so much Leonardo says love the style the energy and the content saludos guys thank you guys so much for that love and appreciation we’re going to keep going and today we also came up with a dope idea of doing something new which we had never thought about previously which is we want to actually have breakout rooms what is this static I always get whenever I switch to this this when switch to this angle it always gives me whatever I think people will be fine yeah so we we want to do like a breakout room afterwards kind of like how when you go to an actual live conference so sunny and I were like how cool would it be that after the challenge if we literally were like in a zoom call where you and I and sunny and you can speak and we can help you we can talk about freelancing Sunny can talk about react I think that could be really really cool if you actually like that idea do let us know cuz it’s something we haven’t ever done before exactly exactly d uh just uh okay it might have been a phone near the the mic by the way no every time I switch to this angle that noise starts but when I go back to this screen it dies so it’s something weird happening which I don’t know what’s happening but that’s fine okay um but guys yeah let us know what you think about the breakout room session because we were super excited about that idea and I think it could be huge and it basically changes the challenge into a digital conference which is insane yes yes literally it will be like an actual conference almost like real life people are saying a breakout room would be awesome Mike says that Rafel says that could be awesome it’s an awesome idea love it dope aava says I want to talk sometimes though so yes in a breakout room you will be able to talk through a zoom chat so it would be awesome hey and then Gabby actually says she goes thanks a lot Rafa Kazi I’m super motivated to land a developer job and improve my life love your energy your style and passion listen Cy or read I will be one of the 5,000 developers to get that job damn love that energy let’s go okay so here guys we’re gonna say basket. map and then for every single item in the basket we want to return a checkout product okay so we’re going to say checkout product like so and this is going to take a bunch of props like we discussed earlier and those props are going to be simply the item contents okay so I’m just going to pop in a snippet here to save a bit of time here we’re going to go ahead and do the following so here we’re saying the ID is the item ID so it’s this item id title is item title image is item image and so forth and this means that when we add a item to our basket it will map through it and if we’ve done it correctly should show it inside of the checkout page okay in the form of the checkout product so with that said let’s go ahead and check the let’s go ahead and go to the Amazon let’s click Amazon link oh this is the actual one we have do you want me to go to the deployed one uh no the one that we have okay yes so it says use State value needs to be imported yes that’s a good shout so we need to go ahead and do that uh use State value and then we are going to go ahead and also import the checkout product so let’s go ahead and do that so import checkout product save hey I can see my girlfriend’s moderating the chat going crazy dude perfect just keep blocking yeah yeah let’s click on the Amazon logo now so it should get rid of that issue for us and let’s add some items to the basket all right so I’m going to add I don’t know man I’m feeling like uh getting this monitor today I’m going to get two of them should be good for the team yeah oh nice so we can see that the two items have popped up inside the shopping basket okay y now we’re going to do is we’re going to go ahead and style that we’re going to go over to checkout product. CSS and just for a quick comparison here guys in checkout product. JS we gave everything some appropriate class name so that we could come in ah rating are we going to throw it in like a flex box is that what we’re about to do with it we are going to throw in a flex and are we going to do something along the lines of align items ye yeah actually for this one we’re not going to align centrally because I’ll show you why so if we go to the deployed version quickly all right we will but I’m just going to map out what we’re going to do so guys we’re going to take it from this like vertical thing and we’re going to turn it into so it’s just horizontal like this with stars that’s the goal all right let’s go to this deployed one yeah yep and then you can see now so it’s going to be subtle but basically on the second product row can you see how the image is actually sort of um aligned to that text on the top if we did align item Center the image is going to be centered with the with the next container we don’t want oh I see what you’re saying so it’s actually aligned to the top of the text right exactly uh okay but if we did a line to the center instead of this image being here it would be more like starting from here to here or something yeah and it kind of looks strange which is why oh damn Jonathan Nunda says I am I just landed a client for 15 $1,550 and I’m only 13 holy crap where he said that on YouTube or what uh yeah that’s on YouTube damn these are the wins we’re talking about that’s what that’s sick look at that I just landed a client for $1,500 and I’m only 13 guys [Music] that’s that’s massive it’s possible for all of you guys age doesn’t matter a lot of people make that a thing that it’s your age and I’m too old I’m too young none of that guys no excuses you can do this I was about to fix my glasses and I realized that my girlfriend crushed my glasses yesterday and I don’t have any of them on my face oh no are they out now yeah but it’s okay I can still see oh man all right so with that said we’re going to go ahead and style smash the smash the like button from broken glasses guys we miss we missed the smoothest chance that dude just like sad face like guys glasses but okay okay let’s get back before get people so now we’re gonna go to the checkout part CSS yeah and then in here we’re going to basically go ahead and do check out product and then we’re going to say um display flexplay flex and as soon as we save this now oh so KY good point before I hit save on this go to Amazon add some products and then let’s go back to the screen because we want to show some hot reloading so it dynamically updates all right what’s up with these stars all right here we go all right there we go okay so you can see now that it actually isn’t um display Flex so if I go ahead and do save Alo it is display Flex because it all save yeah but I want to do a margin top and margin bottom so margin top and margin bottom of 20 pixels yeah let’s go ahead and Chuck that in right here boom do that and then we should see oh damn it we should see a gap okay so this is going to be an annoying issue now um where it’s going to basically go ahead and what we can do is when you’re doing this kind of stuff guys I’m going to show you a little trick okay so when it does some hot reloading like this and you don’t want to keep on doing the same sort of thing where you want to have to add a product go ahead add a static product okay so here we’re going to add a title to saying this is a test this is a test test and then here for the image we’ll go ahead and find an image real quick after this so I’m just going to use this um I’ll go ahead and find an image in a sec for the price we just go ahead and Chuck in something like $199.99 for the rating let’s go ahead and do five so I’m going to quickly find an image let’s just do the lean start up boom let’s go ahead and find that image go to images grab that and paste this is a little hack for you guys in case you found yourself in this problem so just pop it in like that and that will save you a bit of time now so when it loads up we’ll already have some static data on that screen so K if you just hit Refresh on the um on the right hand side you got it bro nice now we can see that everything pops up there okay um this is a test and let just add in like a bunch of text say long or something and then let’s just copy that a few times so we can actually stress this thing out a little bit let’s go ahead and and space this out okay so save that and now you can see we’ve got some sort of dummy information and then what I like to do is I like to copy this out like twice so then that way when we’re styling it we don’t have to keep going back and forth and just we what we’ll do is we’ll come back and we’ll delete these afterwards and then it will work as expected okay so back to check checkout product now what we can do is we can say Target the checkout product underscore uncore get this underscore the info so that container I want to give this one a padding left of 20 pixels so what we should see here is when I do this 20 pixels are padding left it pushed the info text away a little bit okay the next thing we’re going to do is add some button stying so I’m going to go ahead and Target the info but the button inside of it and then apply the following Styles so this is the snippet that we need to go ahead and apply you can see it has a background of orange a border one pixel solid a margin top of 10 pixels a border color and this is a nice little gradient and black color now when we do that we get this lovely Amazon looking button okay the next thing we’re going to do is Target that image that image is way too big right now so we’re going to make sure that that doesn’t happen so to do that this snipp it right here so we’re going to have the check out asks can we use bem with SAS as well just give a rapid fire answer so we can get back to it um no need to use Ben with SAS the reason being is because we don’t um I mean it’s yeah just keeping it simple no reason to use Ben with SAS either use either use b or stick with SAS some questions I’ll throw in like that just to engage with everybody in chat I’m actually guys I’m looking at the entire chat and I’m like talking to you so everything you’re writing in the Facebook Chat I’m responding to it and uh some of your questions I’ll give it to sunny or I and we’ll just rapid fire it so we can get back to the coding exactly guys exactly and also I just want to say Kumar said um some of the concept is hard to get but I’ll complete this challenge it doesn’t matter how much time it takes after the session I’ll watch some YouTube videos for these Concepts that’s what we’re talking about guys doesn’t matter if you understand it right now just rewatch the video pair it up with some tutorials online and guys just get to like that persistence will take you so far awesome all right so next what we’re going to do is those Stars right now okay those Stars right now now are actually sort of stacked on top of each other we want them to be next to each other so in order to fix that we can do is we can just go ahead and do this go ahead and say check out product rating display flex and that will actually go ahead and it puts everything in a row by default which is makes it super clean because you’ve got the Stars next to each other now next thing we’re going to do is Target the title so let’s go ahead and go here and we’re just going to go ahead and pop in this so we’re going to say check out product um so for some reason op pry isn’t working so let’s go ahead and do this and this and we’re going to do font size of 17 pixels font weight of 800 so that changes the style very nice nicely and we’re also going to Target the button inside of the uh checkout product info and we’re going to change the background color to none so that shouldn’t um at this point uh we don’t actually need that bit that was a mistake get rid of that okay with that said we actually have that completed really nicely so that was actually really slick really smooth so what we can do now is go ahead and go to our checkout and like wait yeah go to our check out and delete this static information because we’re done with the styling so what we’re going to do now is we’re going to test that everything works inside of our basket okay so Kazi what we need what I need you to do now is go ahead and go to the Amazon logo so click the Amazon logo yep boom add some products to the basket boom boom boom okay I got my my Amazon echol Lean Startup and a a Kenwood the thing that my mom has for flower nice I’ve actually got that machine oh yeah you use it that’s it dude make some clean rooky you know exactly yeah my mom set for that yeah so we now you can see the products render out perfectly okay so we’ve got everything as we need it um I saw a really good question here from amog triti he says sunny can we do one project with class based approach react was hard for me to understand but you made it simple and easy um so we do a lot of that kind of stuff where we compare compare class based first functional inside a profit with JavaScript so it’s just something to consider we do all of those questions comparisons all that stuff inside the course no okay um now we have the products rendering out so everything works as we expect now we’re going to go hook up that remove from basket button okay so the remove from basket when we click it we’re going to do an on click so we’re going to do an onclick and we’re going to say remove from basket and this is obviously this is a function which doesn’t exist yet so we need to write this we’re going to say con remove from basket this takes a uh this takes nothing as a Prema and it just opens up here so what we need to do now is go to our checkout product. JS and here what we’re going to do guys is we are going to basically go ahead and remove the item from the basket right now the basket itself is actually so in order to manipulate the basket we need to go ahead and pull in our magic snipper code which is this one this is the one that we use to pull information or change information with the dispatch right then what we need to do is go ahead and import this otherwise our code is going to cry and freak out so now what we need to do is if we ever need to manipulate the basket remember guys we need to dispatch something called an action into the um reducer so into the store and then we need to go ahead and pick it up here so we had the add to basket so what we’re actually going to do is add something called a remove to basket okay and what we’re going to do is here we’re going to go ahead and say dispatch so we’re going to dispatch an action and the type of the action um so team 2kd says why why are we repeating the Amazon con we’re actually not repeating we’re actually building on top of it so yes we’re up this point we’re building but tomorrow we’re actually going to be adding full payment support from strip so that was not done previously yep the payment support and the stripe functionality that’s going to be brand new I’m just fixing the audio on my end now it should be perfect everywhere dope so then what we’re going to do is we are going to go ahead and do type and then we’re going to go ahead and say remove from basket so we’re going to dispatch an action with this type attached to it and we need to pass along the items ID reason why we need the item’s ID is because we’re going to use that to actually go ahead and find the ID in the basket and remove that product once okay so we’re going to go ahead and do that and then we are going to go into our reducer and then in here because we need to actually listen to this action so we need to go ahead and say case remove um this one is going to be remove from basket so it’s going to be remove from basket and then we need to do something here right now what do we do here in order to be able to remove an item from the basket so this is a interesting situation that we find ourselves in and this is uh so flua code actually just dropped another $5 donation shs sorry about my homework working super hard for Tech interview whilst also doing the Amazon build but still wanted to submit something and show progress I think she meant the screenshot that she submitted um what’s up I think she meant the screenshot that she submitted so fluture code actually donated $5 oh sick thank you yes she said sorry about the homework working super hard for a tech interview so she has the tech interview on Friday and she goes whilst also doing the Amazon build I just went to show that I was making some kind of progress so that’s awesome thank you for the donation Elizabeth that’s epic and the code looked clean by the way when I looked at it I was like that’s crisp yeah exactly super super nice now okay this is a good point so somebody actually went ahead and added a snippet of code right and I’m going to show you so somebody did this but I’m going to show you the problem if you do it this way guys okay so somebody went ahead and added this snippet in so they actually wrote return and then they added this in okay now this is an answer which I’m assuming a lot of you would have got to and what we’re saying here is um return whatever the the state whatever the store looked like previously but change the basket let’s go ahead and drop this on the line so we can see this but uh change the basket and then they’re saying filter out the item ID from the action and this is going to be action um ID I guess yes so filter out anything where the item is matching the action ID now this is it seems like it would work right but um so some people said today my voice isn’t that clear sunny it’s actually going to be more clearer I think today but um maybe the gain isn’t correct C just double check that um no you sound really good bro yeah okay awesome so what we’re going to do now is let’s go I’ll show you the problem with this way okay so this does work but I’ll show you this there’s a big downside to this so let’s save it and let’s go to the Amazon build right now now go to Amazon itself so click on the Amazon link now what you want to do is click on for example let’s add like three of the lean startups and one Watch Right add three of the lean startups and one watch now let’s go to the boset don’t press anything just yet inside the in in this next okay so what we’re going to do here is when we click remove from basket what we should see now is it only removes one of those Lean Startup books right but because in the code what we’re saying is filter out all the items where the ID matches the um action ID then what we’re going to do is it’s actually going to go ahead and remove all of them so go ahead and click that so go ahead remove from basket yeah see what it did right that’s wrong guys because it removes everything right removes everything and that’s not what we want to do so but hold on aren’t you looking up the specific Item ID and doesn’t every oh so every single item with that ID of that book it’ll delete it yeah exactly and we don’t want to do that right so you see because you click remove from basket and it kind of went through and it just stripped out all of those books right let me do that again so how do you take care of that right so to fix that we have to break down the problem and in here here is what we do guys so let’s go ahead and actually um should we use the index instead of the ID yeah so we have to firstly find the index of which you’re trying to delete right so this is how we do that right so firstly we say con and here we’re going to say the index and what we do here is we get the state we get the basket and we use this fine index function right now what this is doing is it’s going through all of the basket items and it says says does any of the baset items match the action ID that I passed in right now this only finds it finds the first one and it returns it to you so it will find the first one first match and it will return it to you so it won’t find all of them it’ll find the first one and return to you then what we’re going to do is we are going to copy so we’re going to say um uh let new basket so we’re going to copy the basket going to copy the basket into a temporary variable so we’re going to say copy whatever the state. basket currently had so now we’ve got a copy of it inside of new basket and then what we’re going to say is if so if the index actually is greater than uh zero so if index is greater than or equal to zero then it meant that it actually found an item inside the basket okay so what we’re going to do is we’re going to do something so if it found it then great otherwise what we’re going to say is we’re going to do console. warn so console. I love this Dev Roy says KY sounds like the interviewer I think that’s that’s perfect that can always be the person who like interviewing exactly yeah here we’re going to say console. one can’t remove product and it’s going to have the IDE of the product as it’s not in the basket okay so now what we’re going to do is so some people are saying just use different IDs so in it depends how an e-commerce site is built up so some e-commerce sites every product might have the same ID so you need to know how to just delete one right so here what we’re going to do is we’re going to say new boset new yo I got I got to say that this is probably one of my favorite comments ever to see William goes I assure you history will remember you guys thanks again that’s awesome dude that’s what actually me and Kaz saying we’re gonna we’re building I I remember talking to Sunny and I was like literally it’s more than anything like we just want to go down in the history books like more than anything like it should be like one of those things where our goal is that clever programmer just provided more value to the developer world than anybody ever in the world and if we can achieve that then that’s an amazing goal for us yeah that would be like game changer that’s exactly what we’re fing for that’s why we have that 5,000 go guys and we’re reaching that pretty quick actually like every we see loads of jobs coming in and um if you do get a job definitely let us know Mariam says I love that Kazi ask questions and points at important things is useful for a beginner yeah so I don’t so I am a python Django developer Sunny is an incredible react and JavaScript developer this is a different world for me but I am enjoying JavaScript I’m picking up react and it’s like mindblowing how fast you can do things so when I have questions I will just ask them and I hope that it also brings you value along the way cuz maybe if something isn’t making sense to me or maybe if his explanation to me it makes something click for you then that’s fantastic exactly exactly guys and it actually helps out that Kazi is also learning because he’s able to point out the things which you guys might be get stuck in on as well that I might Overlook so it’s a really good God I love you guys I just want to say I love you guys I’m looking at their messages and that is almost making me emotional like that’s thank you guys that’s huge Jesus Christ like it’s actually insane thank you crazy now guys what we’re going to do is we’re going to say if the index was greater than zero then it found the ID now I know some people are saying if I click the second item with the same thing it’s it’s going to take it off but we’re keeping it beginner friendly guys so that’s why we’re doing this way we’re going to say new basket splice and then what we do is we say pass the index and then splice it by one what this is doing is it’s going to the point at which you the point at which inside the basket that item was it’s basically just cutting it by one right so it’s basically chopping It Off by one inside the array so what this does is it means that the new basket now actually goes ahead and it looks a little bit different okay so what we can do then is we can then say that the and then what we can do is we can go back down here and we can say um y we can say return we say return the current state so I’m going to drop this return the current state and also the basket is going to now be the new basket that we just modified okay so that’s how we do it save this and let’s go ahead and double check this right now uh so because let’s go to the Amazon let’s go to the homepage let’s do it so boom yep and let’s go ahead and add a few of the same products in man I’m going to have to go with a few different products here um I like my iPad Pros Amazon I already have the Lean Startup book you know so I think all right good with this if I remove nice wait did it do it right hold on yeah I don’t believe you sunny let me try it again all right okay okay okay see that guys all right hey Sick okay beautiful nice so this is the sort of beginner way yes there are some caveats even to this approach but we’re keeping it very very user friendly beginner friendly when we’re doing this so hold up hold up let me just let me just clarify this so if I okay so I click here right now let’s just go through this process kind of visually so I don’t like these items I got give me give me I’m just going to pick like some unique items all right so here now if I click this iPad is it in position two in the array yep okay so this is zero okay hold on all right so this is position zero this is one and this is two yeah so when I click remove from basket it index is two y dope all right and then basically where is the line that basically says to go remove it is this the splice line yeah so what we did is we actually copied the current basket contents so we had like a copy of it inside of this variable new basket and then what we said is go to the new basket and splice at point two so basically cut out that element okay so okay hold on so if I got this array right here right yeah and I got this guy there and I got this guy there and I got this guy right here right y so your door line of code what it’s saying is instead of making this entire thing the array make only these two things the array exactly you’re saying go to the cut oh you know like I knew what I understood what slice did yeah like I think this is the first time I’m seeing like okay this is actually exactly what it does that’s sick yeah and even if you chose like a middle point for example if we spliced out the F uh the item at position one where does it goes to that Middle Point cuts out that item and then you’ve only got zero and and the thing that was in two and now in one got it okay nice this is sick so okay this is it gets rid of it so I just want to play out one more so what happens if I remove this so then how does it work so so now it’s going to go to the middle element uhhuh so it’s going to go to this middle element yeah yeah it’s going to go to that one and cut it by one which means that now all we have so imagine like it’s it’s got that element it won’t have the middle element anymore won’t yep and then it will have the next element so now we have two elements in the array and it’s the first and third one and the middle one will be gone okay so the new array is just going to be made up of like say this element here and that element exact Lean Startup is gone okay got it yeah okay beautiful nice now I see a people saying this does not remove this exact item it only removes the first one with the ID yes this solution does says such a simple explanation of something so complex thanks guys ell says amazingly explain um yes I that was like you gave a great explanation for that I found yeah I think the visual breakdown is awesome as well yeah I think that helps a lot of people yeah so yeah guys there this this will only go on find the first one and then delete it so if you were if you had like a few things and you tried to delete the the third one yes will go ahead and change it in slightly in a way that we don’t expect but it’s completely fine for this kind of build guys it’s completely fine right okay let’s keep going yeah this is awesome okay so with that said now we are going to go ahead and we’ve got the remove from basket functionality complete so the next thing guys is we are at this point we essentially recap the homework we buil out the remainder of yesterday’s bill and at this point we are at the point where we can actually go ahead and build the authentication so let’s get excited get pumped up and we are going to go ahead login page right now the authentication normally it’s everybody’s nightmare but with Firebase and the way that Sunny has prepared for you guys it’s actually going to be one of your favorite things so I’m excited let’s do it it’s awesome man with with Firebase it makes it so simple um so the first thing we need to do is actually have a login page right so let’s go back to our app.js and here we had our router so we had re rout rendering things and we’re going to create a route now called the login route okay we’re going to go ahead and create a login route so this one’s going to be login and this is basically just going to say like just to demonstrate this is actually rendering out the login I’m going to go ahead and say um login page and then what we’re going to do is we are going to go to our header and we are going to go to where it said sign in let go to our header where it said sign in we’re actually going to make the sign in button um maybe I should add to the top what we’re working on kind of like we do on when we’re doing the live streams I think it’s help yeah all right so what are we working [Music] on uh now we are working on building the login page okay dope so let’s make sure we show that up here beautiful so now everybody could see that sick all right got it okay awesome and when we say that page let’s also go to that page and show them so when you say the login page it’s when I click sign in and it’s this page specifically exactly we’re going to build all of that and the logic around it sick so this is what we’re about to build you guys get ready exactly get pumped up guys cuz this is going to be a fun part of the build because this is actually mindblowing when you see how it works and how simp are we building the front end right now so maybe right now I shouldn’t talk about user authentication yeah um yeah we’re going to do the we just build the front end first and then we’ll do the authentication portion okay so I’ll call this build the front end yeah the front end for the log P login page yep beautiful okay so now what we’re going to do is where we have the sign in we are going to go ahead and where we have this header option we’re going to surround this inside of a link okay so it’s going to surround it inside of a link and then we’re going to go ahead and cut this and it’s going to be surrounding the actual option so like so y yeah then this link is going to say it’s going to take us to the login page this goes to for login like so okay now what will happen is uh let’s go to to our Local Host okay mhm y uh and now what I want to do is if you click on that sign in hey there we go takes us to our login page yep yeah now what we can see is that the header is included with that right so we don’t actually want to include the header at this point so so like this one we don’t have the header here yeah we don’t have the header so this this is an issue when we actually have the header outside of our rout so what we’re going to need to do to fix this is I’m just going to get rid of the header in the global level and put it in only at these two levels here so only when we have the check out or the uh homepage we can go ahead and get rid of that code save it and then we should be able to see now that it just says login page okay so now let go ahead and build out the login page so the login page is going to have a few things it’s going to have a a it’s going to have an Amazon logo at the top so let’s go ahead and build oh so first we need to actually build the login component so we’re going to replace this with something called login we need to create that fast so we’re going to create a new file called login.js shout out to melind and he goes yo this is the best way to spend a birthday that’s awesome hey that’s insane happy birthday that’s happy birthday dude wow r CE there we go and then here we’re going to do div class name equals and then here I’m going to say login okay so login there we go and here I’m going to go ahead and do import login. CSS and as always guys we’re going to create the login. CSS login. CSS file so we should pop into that in just a sec there we go and now we are going to go ahead and build out page so the first thing is we’re going to have an image okay so we’re going to have an image and like so and this one is going to have a source and this source is going to be the Amazon logo so I’ve gone ahead and grabbed an Amazon logo from Google this one right here we got lovely donation from raml thank you so much dude he says how to add user authentication with Google or or Firebase user collection exactly so here we have the image dropping right here so we have the we’re going to save it and what does it say login is not defined okay so in app.js we need to go ahead and import the login component so I’m going to go ahead and do the following do this login there we go save the file you should see now if we have login.js uh it should be there we go so we get that huge Amazon logo okay so I’m going to go ahead and give that a class name so here inside of image I’m going to go ahead and drop that down give it a class name of login logo okay like this and I’m going to go ahead and just push this little bit forward like so and now we’ve got this lovely image right here what I’m going to do is I’m also going to make this a link so this is actually going to be clickable and it’s going to take you back to the homepage okay so it’s going to be a link and it’s going to take you back to the homepage and then we’re going to go ahead and close up that link right so so what we’re going to do now is we have that link okay so the link we need to go ahead and import from react rodom so I’m going to go ahead and import that we’re going to use this later but I’m going to go ahead and pop that out for now yeah so with that said this is going to be linked to equals there we go so amanat was like Mark Zuckerberg and Jeff bz Bezos are all jealous yeah exactly honestly guys they are dude they saved this and now we click the Amazon picture kazzy it should take us back to the homepage Markus threatened by kazzy all right so okay I’ll click okay so I clicked that button yep nice okay so that takes us back so if we click logo so let’s go back into the signin page hey are we going to throw object fit on this bad boy we are going to throw object fit on that so we’re going to go ahead and quickly fix that because right now it’s very hard to see anything else with that huge logo in there so I’m going to apply the following styles to this so we’re going to Target the login logo and we’re going to say margin top of 20 pixels margin bottom of 20 pixels object fit contain and this keeps the aspect ratio whenever we’re resizing and we’re saying width of 100 pixels and then margin right and margin left of Auto okay so that’s going to be the first one and then what we’re going to do is we’re going to Target the login container so I’m going to go ahead go back and do login so like this login Target it and we’re going to say display Flex so display Flex like so I’m going to do Flex Direction column so Flex Direction column like so and then I’m going to say um align items in the center align items Center save it and this actually pulls everything into the center we going to give the height 100 view height or height 100 view height like so and we’re also going to give it a background color of white and the reason why we’re going to do that is because um actually we can keep that keep that covered for now I’m going to add in anyway it might have been a reason afterwards but we delete afterwards if it doesn’t work okay so now we have the Amazon logo at the top and what we’re going to do next is go ahead and go back over to our login and here now we have after the link going to have a container called the login container so we’re going to create Dev going be div it’s have a class name so div class name of login container so login uncore container like that and then this one is going to contain all of the the user input so the email the password all that stuff that we saw before is going to have a H1 and inside this H1 it’s going to say sign in so oops I was going to say sign in sign in and then we’re also going to have a um a H5 which says email okay so actually know firstly we’re going to have a form so the first thing we’re going to do is we’re going to have a form this is going to be where everything sits inside of so we’re going to have a form and then here we’re going to have a H1 no sorry an H5 and guys for anybody that gets lost or anything like that don’t worry keep coding for now but I just want to let you know that we’re we are going to have this repository so you can actually go and download the code um and be good to go so at the end of day two we’re going to push our code here so have everything updated but you know don’t use that as an excuse to just be lazy and not um actually code exactly guys exactly so make sure you do give it a full attempt at coding it yourself you’ll get the most value but we will be sharing the code for you guys afterwards so here’s going to say email so and then we’re going to have a input so it’s going to have an input here and this input guys is going to have a type of text so by default it’s actually text but we’re going to write anyway so type of text like this then we’re also going to say we’ll set this up afterwards so we’re going to have one which is an email going to copy this I’m going to go ahead and and real quick Sunny I’m going to actually go live on Facebook just for a little bit and let them know that we’re on YouTube okay okay do so here now what we’re going to do is going to go ahead and have the password like so and here we have the type is going to be not text but password now guys want you to pay very close attention to this right here because if we change the type to become password what happens then is that the field as you type in it’s going to basically come up as like that sort of asterisk it’s not going to show your password your characters so very important thing you don’t want your password being text okay really don’t want that for obvious reasons um so we we’re going to make sure that that happens like that then we’re going to have a button so let’s go ahead and have a button like so this button will say sign in okay so we’re going to have a button which says sign in like this right so we have the button and then also just as a nice little Finishing Touch right underneath all of this form we’re going to have a P tag which says says by signing in you agree to Amazon’s conditions of use and sell blah blah and this is what Amazon said um but we’re going to change it so Amazon’s do the Amazon fake clone conditions of use and sale please see our privacy notice our cookies and blah blah blah blah blah right so this is like something that comes from Amazon itself so if we go ahead and save this we should be able to see on the right hand side once it reloads um but Kazi is currently finishing that live so what we can see is it’s going to have a P tag with this finishing stuff right here now there we go um what we’re going to have next is a button underneath and this button is going to be say you didn’t have an account right let’s say you didn’t have an account you want to basically have a button which says not to sign in but to create your Amazon account so create your Amazon account like this okay now what going to do here is create your Amazon account like so create your oops create your Amazon account here as well and then we are going to give the following we’re going need to give a bunch of stuff some class names so that we can come to style it so for this button I’m going to give a class name of login signin button okay so this one’s going to be login signin button and for this one it’s going to be a class name of login register button okay login register button like like this and I can see that number is coming up so that’s awesome guys we almost have 1,100 people on um YouTube which is insane thank you guys for the support um so now we have this right here so we have create your Amazon um account right there so we have the register button we have the signin button we have the login container we have everything that we need at this point okay now what we’re going to do is we’re going to go over to our login. CSS and we’re going to style this to look as we need it the first thing we’re going to do is everything sat inside of a container if you don’t if you didn’t see that so all of this the the sort of form and everything set inside the login container so here I’m actually going to go ahead and do login container so login one container like so and then in here going to apply the following Styles okay so just going to pop this in right here so we have a few styles in we have the width of 300 pixels height to fit content right so it’s only going to fit the content that we actually have inside that container then we’re going to say display Flex Flex Direction column order radius of five pixels so it’s slightly rounded and then we’re going to say order um one pixel solid like gr and a padding of 20 pixels okay now I saw Marius florescue said when we get to see some tutorials on Firebase Cloud functions tomorrow we cover cloudbased fire Cloud function and stripe payments so make sure you stick around till then and we have some interesting really really cool stuff for you guys and that’s going to cover all of the cloud functions Tech and everything like that so now soon as we hit save we should see everything centers it has a nice border okay so that’s really cool now what we’re going to do is we are going to go ahead and Target the H1 which is inside the login container so I like to show you guys a mix of how you can Target elements this case we are simply targeting it like this we’re saying inside L container Target the first Shard which is a H1 change the font weight and the margin bottom done next what we’re going to do is Target inside the login container inside the form the H5 element so this one right here so inside the L container inside the form is H5 how do we do that we go ahead and do this we say inside the Ling container inside the form Target the H5 element and give it a margin bom of 5 pixels which is awesome and then we’re going to go ahead and do the same thing for the input field but we’re going to apply slightly different styles here so you can see here we’ve got the form input field we’re saying a height of 30 pixels a margin bottom of 10 pixels a background color of white and a width of 98% okay next what we’re going to do is we’re going to Target the login container P tags so we’re going to say any P tags which are inside the login container so this one by signing in you agree to blah blah blah here we’re going to go ahead and add that in so we said Target give it a margin top of 15 and then the font size we’re decreasing it to be um a bit smaller so we’re going to go ahead and say um oops what am I done there yeah we’re going to say decrease it to become uh 12 pixels okay going to go ahead and format that and then next what we’re going to do is for the signin button so this is the same styling we’ve been doing for the other buttons I’m going to go ahead and do this so I’m going to go ahead and say login signing button and then this is the same styling we did earlier guys say it’s background of orange border Radius 2 pixels width 100 pixels height of 30 pixels border 1 pixel solid margin top of uh 10 pixels and then the Border color as so okay then that means it’s you see that this is starting to form together really nicely yeah then we got the final crem did the crem to this which is the ram um the register button so here you need to go ahead and do loginor register button and here we have border radius of 2 pixels width of a 100% height of 30 pixels border 1 pixel solid margin top of 10 pixels and a border color of dark gray now guys you can see how insane was that right we just created we added some styles to it and you can see like we get that beautiful Amazon looking login page page now I think that looks really awesome let me know in the comments right now if you got to this point or if you think it looks like Amazon I mean I think it looks like Amazon you guys can let me know I think we done a damn good job of making that look like Amazon um let us know in the comments right now if you’re pumped about that design and um yeah let’s keep that energy High guys um because that is an awesome looking Amazon right now so so we have Jason H says I’m loving it DTR says lit patch more says it’s just like Amazon W says pretty close thank you dude massuda says awesome perfect job Aki says damn vasi says prop leani says it’s so cool patch it’s so beautiful inot says a thousand or a million billion perc nice dude um V says 1K likes oh yeah we just hit 1K likes as well thank you so much guys a yes it looks like Amazon great okay so awesome guys loads of positivity from you guys so what we’re going to go next and do is actually go ahead and code some functionality to this right so now what we’re going to do is go back to the login component so login.js now this is where it gets insane right so first what we need to do is we need to get a some kind of way to track what we have in our input Fields so right now I have no way in the code to track that okay so what we’re going to do now is go back to the top of the file we’re going to use some State here so what I’m going to say is cons email set email so we’re just creating a piece of State here how you write variables and react think of it that way we say use State this is the use State hook and by default the value is empty brackets like this we need to then go ahead and import it as such like that and then I’m going to copy this and I’m going to do the same thing for password so password go here set password like this and there we go so now we have a bunch of stuff which is pretty cool and then what we’re going to do is to connect these to these pieces of State what we need to do now is go to and I love this VI viavi cantry says getting errors solving them and moving forward that’s what we’re talking about guys I love it when we actually get errors on the live stream because it’s really cool to go ahead and show you guys what we how we debug and how we go through that process ourselves right so now we’re going to go ahead and on the input type where we have text this is going to be for the email so we say value equals email now what we just did here is we mapped the value email to this email state right here and that goes ahead and connects the two things but we need to track when the user types in so so every s time the user types in it triggers something called an unchange and what this does is it gives us an event right so an e what we do is we pair this event with an arrow functions we say every time you type in it fires off this event and then we’re going to say set the email to whatever e. target. is now e. target. value is essentially what the user typed in so as the user types in we’re setting the email and then what’s happening is it gets mapped here now this creates like a sort of circle which means that if we type inside of the email it actually goes ahead and we we have access to that now inside of this beautiful email variable okay um so I wouldn’t recommend setting these to no guys because inside of an input you never really have no is essentially what you would use is an empty string so don’t don’t have no have an empty string okay now for the password what we’re going to have is we’ve already done the input type as password I’m going to go ahead and do value equals password like this and then we’re going to say unchange shows the same logic applies but we here we say e every time you type in it fires off that event and we’re going to say set the password to become e. target. value which is basically whatever the users typed in now we have um tracking for the email and for the password and and everything gets updated inside this uh piece of state and this password piece of State okay and we have KY back hey let’s go yeah man I’m back uh just went live told everybody on Facebook to move over the party is taking place on YouTube and then we’re going to be back awesome dude that’s nice and I can see some people are flooding in this is nice yep perfect thank you guys appreciate the love awesome so now you guys can see that we actually have so um we we can track when we type in the email and password but we also want to trigger off two functions now we want to trigger a function when we do sign in and we want to trigger a function when we do create your Amazon account so we’re going to link a function to this first button which says sign in and we’re going to say onclick right on click here I’m going to say on click sign in okay so I need to create that function up here say const sign in and this actually takes an event because it’s inside of a form I’m also going to set the button type here guys to submit button type to submit that means when you’re typing in the input so let’s say you’re typing in email typing in the password if you hit the ENT key now it will actually trigger this signin function which is a natural behavior what we expect but we don’t want it to refresh so this next line is crucial we said uh e. prevent default okay so this will actually go ahead and um prevent the page from refreshing we don’t like refreshing and react we want it to be super clean I can see Leonardo chunan says prevent default so he’s getting he’s already beat me there so that’s awesome yeah so we do that and then what we’re going to say is um some fancy Firebase login she okay some fancy Firebase stuff happens here okay um and then what we’re going to do is underneath here for the uh this button we’re going to say onclick and this one is going to be the register right this one is going to be the register function so on click register register like so okay then here I’m going to go ahead and create a another function and we say const register like this this takes an e I’m going to go ahead and do this say e do prevent default we don’t actually need this here but I want you guys to get into a habit of doing this e do prevent default and then what we’re going to do is we are going to say here do some fancy Firebase register okay so it’s going basically we just need to like fill out these two bits now so how do we do all that Firebase stuff right how do we get all of that Firebase stuff happening and all that sort of I mean we would think it would be tricky right but what we need to do now is we go and hop over to Firebase Cy dope and we actually started some of it yesterday yeah we did definitely did y so just as a reminder for those of you guys even if you were here yesterday what you going to need to do is set up an account go to Firebase log in um to the account that you have go into the project that you set up so um we need to go ahead and find the project that we set up yesterday yep should be in the other one and we basically went ahead and grabbed the um config file yeah how you get it is just go to Project settings go all the way down to where you see config copy that and then bring it over and we put it in our um file called Firebase JS so you guys can also put it there exactly so that’s going to set you up really nice nicely for what we need to do next okay so with that said now let’s go ahead and open up uh Firebase and let’s make Firebase full screen for a second okay now on the left hand side we want to go to the authentication tab so it’s where it’s the one that’s just below authentication click that and here guys we go to signin method so it says that button there which is set up signin method or for that top tab there we go go to email and password hit the little pen icon or click it and click enable right all right so top thing which is enable and then click done so and that’s actually gone ahead and set up the first part so it’s crazy how simple this is going to be now yeah so we need to do is we need to go over back to our code open up the terminal and let’s open up a second terminal all right let’s do it so boom there we go yep so open up a second yep CDN and what we’re going to do here is we are going to do npmi so let me go ahead and get y AIS as well request that um but I mean you can type one so be mpm install Firebase so let’s type out mpm install Firebase and this will pull Firebase into our project because we’re going to need it for a few things right now and they need do the global install as well if they haven’t done that already for the Firebase tools yes yeah so basically what that looks like is this command over here it should look like pseudo npm install Global Firebase tools okay so this is the command you’re going to need if you haven’t done this yet exactly you’re going to need to do that to do all the things like the deployment and all that stuff so that’s going to be crucial for later thanks guys for all the love people are like hey pump to see KY here missed him yesterday thank you guys yeah yesterday the connection was just kept breaking for whatever reason so we had the demo codes on our us yesterday we still kind of do yeah they still do dude yeah crazy right so we just installed Firebase into our project so now what we need to do is go over to firebase.com [Music] and what we’re going to do now is build the login [Music] functionality so user authentication working on user authentication yeah working on user authentication with Firebase all right here we go boom nice um you don’t really need the URL at the top somebody saying that that it doesn’t matter it’s just console it’s like Firebase console you you’re not going to go there by like typing in the actual thing anyway yeah exactly all right sweet we’re going to do is at the top of the config so where we added our config before we’re going to go say import Firebase from Firebase that’s crucial here somebody says help me I’m on Chromebook and can’t do any of this you should not be on Chromebook yeah exactly and guys if you are on something which doesn’t support use something like repple so.it as a website where you can go ahead and actually code on the repple IDE or use like code sandbox but still like it’s going to give you problems you’re going to run into weird ass problems and issues so it’s just so much better if you don’t use a Chromebook and use a Macbook or a Windows computer or like borrow a computer from a friend exactly yeah definitely so now what we’re going to do is we’re going to set two things right we are going to first initial initialize the app so we’re going to say cons Firebase app and this is going to be where we’re going to say Firebase do initialize app so I’m going to go ahead and make sure I SP this right so Firebase do initialize app and all we need to do here guys is pass in this config right so it’s an object we just pass it in that’s it pass that in and this will go ahead and set up everything whoa just got a massive donation from Bradley KN damn hey $15 donation thank you so much dude dude thank you that is incredible and he’s actually in profit with JavaScript and profitable shortcut and Dam that is sick thank you elav OG and he just dropped a $20 donation and he goes sorry for being so negative I’m running out of options and have begun done to get more frustrated with my inability to land a job I’m going to give this my all I’m not interested in the prizes I’m just interested in learning somebody give this man a big big round of applause cuz I think that’s the attitude that you absolutely need to have in order to crush it like 100% 100% yeah thank you guys appreciate it exactly guys bring your aame here guys 110% is what we said from day one and if you put that in guys there’s been already like a lot of people who have landed clients landed jobs with this stuff so make sure you bring that a game and we will promise you we will give your best our best effort in changing your life yep okay so we’re like we’re what I say is we’re like 401K we’ll match you okay you give your 10% we’ll give you 10% you give your 300% we’re going to give you our 300% exactly guys and we are going to be that the entire way to help you get to that point so we just went ahead and initialized the app with the Firebase config so that’s the first part and then we got these the second step is initializing two things so we want to initialize the database we’re going to say con DB equals Firebase app right so Firebase app the one that we just initialized fire store right fire store is the real time database in Firebase and then the second one we’re going to do is const or right right or equals Firebase do or like this now this actually goes ahead and give us gives us a variable that we can use to handle all the signing in and everything like that now we want to be able to use this stuff outside of this file so we need to go ahead and do export and here I’m just going to say DB and or this allows us to export these two things the database and the authentication oops database and the authentication and be able to use this oops that should not be Deb it should be DB and that will actually allow us to go ahead and um use this outside of the file so with that said let’s go back to our login.js over here and now we’ve got the sign in and the register okay now for the login let’s do the the registering first because that will help you actually create an account okay so thank you so much aava leand thank you so much for Don goes Lov your projects man hats off appreciate that dude um so now inside of the register we’re going to go ahead and say or so first you just go ahead and pull this in from our local Firebase so at the top we’re going to say import or from our local Firebase and then here we’re going to do or and then we’re going to say dot then we’re going to say create user with email and password okay now here and this is this is attached to this guys so it does sometimes drop off like that and it’s completely fine to do that we’re going to say create user with email and password and we’re just going to pass in our email and password oops email and password like so now this is the email and password in our state remember the one we connected to those input forms so it’ll work really nice then we’re going to say do then and what this does guys is it literally goes and creates a user with an email and password and then it will come back if everything was good right it will come back with something called an or object okay now if the authentication was good and everything was good and everything went smooth I’m basically going to go ahead and say console.log the authentication object that came back so this would mean that it successfully created a new user with email and password right so that means it did that and then we’re going to say catch so for any reason there was an error we’re going to get the error and we’re going to say alert on the screen the error message okay so as soon as I hit save now this is going to be literally all we need to do to register an app so kazy let’s go ahead and go to the Local Host oh yeah all right here we go boom dude it’s so easy to catch myself if I’m muted I love love this new audio setup like it’s just so good so good so good even yeah we both got new mics and everything and it sounds amazing when you go close like yeah and you can hear yourself in the studio monitors like these headsets that we have we can actually hear our own self and if we don’t hear our own self it means you’re like it’s it’s just so good man makes you so happy but like we were thinking about it and we were like screw it let’s invest into this because it’s going to help so many people just the audio and everything so Sunny just got that equipment yesterday exactly guys it was actually today so we said nice nice sure mics for the win all right so what we’re going to do now KY is in the email and password let’s go ahead and add an email and a password hey Corey says this is sick I’m showing this on screen uh Cory says just signed up for pwj if you haven’t you are missing out and should consider the investment in pwj but most importantly in yourself keep going y’all and looking forward to what’s to come nice dude thank you so much that’s L message all right um awesome so let’s go ahead and um for the registering we’re going to go ahead and say oh yeah so kazy enter your email and password all right here we go what we’re going to do is once we go ahead and do this um somebody goes when kazy says so good you sound like Anastasia from 50 Shades of Gray damn oh so good you know David Blaine his voice I love his voice D he’s always like hey guys you know I didn’t know Magic before but after I learned magic you clicked it right I did I I I hit create your Amazon it says the email is already in use by another account oh no so you actually did it you did it right so when you click create the first time it created the account and in the console we actually logged out what it showed got it okay so let’s open up the inspector um m okay inside of um I was just reading the comments jaabir says I want to get out of this country I can’t use Super Chat damn thank you that is sick love the sentiment all right Super Chat is a donations uh on YouTube there we go and see it says object right where there it goes so object so the first time kazy clicked it guys it came back with this now this means that it successfully logged in now if we click on user you actually see where what user oh right here you see all of the logins of credentials right so these are all the login credentials you’ve got the email you’ve got the image associated with the email you have if the email is verified or not and you’ve got a bunch of stuff uh below it so this is really really okay this is awesome because now what we just showed you guys is it created the user so what we would naturally want to do at this point is push them to the homepage after they log in okay so what I’m going to do is I’m going to go ahead and pull in something called use history now use history is something from react rer so we need to import it do we need this inspect up right now we can close up the inspect yeah awesome so now what we’re going to do is we’re going to go to react we’re going to import use history and I’m going to go ahead and pull it in like this we’re going to go ahead and say const history equals use this tree like this right now what this does is it allows us to programmatically change the url so after they log in what we want to do is we just want to say if the user is authentic oops sorry if the user is authentic oh sorry if the authentication comes back so if the authentication is not empty then we’re going to say inside the history so this is the history of the browser we’re literally saying push this new page so we’re basically going to go ahead and send a redirect we’re forcing you to redirect okay so save this and now Kazi let’s try a different email address and let’s try and log in so you want log in or you mean create your Amazon account create your Amazon account got it so I’m going to do CP YouTube at gmail.com y can’t share the password cuz that’s a secret and then I’m going to do create your Amazon account [Music] hey nice hey we just got another donation thank you so much for that and it is Corey and Corey says the positive impact this has on my life is UN matched I appreciate you so grateful to have CP looking forward to what’s to come nice dude that is insane thank you so much for the donation Corey oh I actually I Coach Corey Dude I actually coach yeah I actually coach Cy damam that’s sick sick no that’s amazing right so now what we’re going to do is we are going to go over to what’s it says history. push okay yeah so you see guys he logged in and it just redirected him to the login uh to the homepage sorry which is perfect right so he went ahead logged in and it actually redirected him so now what we want to do is we want to do the same thing but for the login right so once we’ve created that account so now Kazi has two accounts that he’s created so let’s go ahead and implement the login functionality so let’s go ahead back to our code we’re going to delete this comment here and because we already men some fancy sheet so now we’re going to go back to the sign in and here what we say is or dot so we say. sign in sign in with email and password and literally we do the same thing we say email password this is insanely simple for authentication guys I do not underestimate how powerful this is for authentication we say that will give us back some kind of authentication and then all we’re going to say is if it was successful same thing history. push you to the homepage if it was successful okay otherwise if it wasn’t successful we’re going to catch the error and then we’re going to say get the error and alert with error. message like so okay this will be error. message like this now um we can save and what we’re going to do now is let’s go over to the signin page all right let’s go boom yep now go ahead and try and sign in now so we created an account previously um and what we should see now is when Kazi hits sign in it should show us the homepage if we did everything correctly okay so it says or is not a function okay so let’s go ahead and dive into this a little bit so what is happening here it says or from Firebase damn so George says he goes God bless the hour when the YouTube algorithm put this channel in the recommended ones it has totally changed my life oh damn it’s insane dude that’s epic all right guys so we just ran into a bug yeah so we’re going to go ahead and start debugging this issue right so this is where you need to like break it down don’t freak out if your code doesn’t work okay just take a deep breath and just break it down oh so you can turn that up bro I think that sounds good this is it guys it’s like now what we’re going to do is we are going to go ahead and find this error so it said the authentication was not a function so let’s go ahead and check we import the correct authentication everything’s good let’s go down to the sign in everything looks good here but oh somebody’s like then instead of O so try that um alexandros was the first one who said that so shout out to alexandros but damn you guys are freaking on the ball exactly guys that was it yeah and kazy this is a moment of truth let’s go ahead and give this a try will this work will this work hey we’ll find out so now I’m gonna type in so the same exact email right yeah suspense his building guys oh hey let’s go that worked [Applause] nice I actually played the Applause wait Applause is the right one right yeah oh yeah it was yeah I thought you played the laugh track that was dope well done guys we figured out the issue and we solved it right yeah John Ford is like the background music is making it more dramatic nice background music nice oh man nice guys right so Philipe said Jesus [Laughter] christense got real guys right so we successfully signed in right but how do we then go ahead and find who is signed in guys if you like that debugging that Sunny just did for sunny go ahead and smash that like button guys so we can send this video flying out to everybody else we’re at 12:32 right now once I say that hopefully that number will start going up thank you hey and another beautiful donation from Calvin kabanda thank you oh nice timing on that Sunny that was fantastic thank you for the donation all right let’s keep going thank you so much dude nice right so now what we’re going to do is once we we have the sign in we have the register right but how do we go ahead and actually sort of keep track of who is signed in okay so what we’re going to do is we’re going to go back to app.js and then what we use here guys is like essentially we’re going to create a listener okay so we’re going to create a listener which is always going to keep track of who is signed in okay so in order to do that we’re going to go ahead and create something called a use effect so we need to do inside of the function here so we’re going to say use effect now a use effect if you’ve never seen one before it’s written like this so it simply has an arrow function inside and in this case we’re going to go ahead and make it very simple and we’re going to add these empty brackets here which means that it’s only going to run so this will only run this code will only run once when the app component loads okay only run once when the app component loads it won’t run again now if I put anything inside of it for example if we had like a user in here every time the user changes and or for example every time the basket changes it will refire this code so that’s how a user effect works but if we keep this blank it’s only going to run once when the app component loads so that’s the easy way of thinking about a user effect yeah now go ahead and go back to react and it’s kind of like an if statement guys in react yeah exactly all right it’s like a dynamic if statement yeah so for example like let’s just give them an example on this so let’s give an example of where use effect would be used did you read Marco I did I was laughing my ass off to that actually that’s I was laughing man that’s funny now guys inside the US effect we have this really nice powerful listener from Firebase so we need to import our authentication module and then here what we do is we go ahead and say or do on or state change now what this does is it basically we as soon as the app loads we attach this listener so think of it this way once we attach this listener this thing is always listening if we log in it refires this code if we log out it refires this code it’s just always there it’s like an observer a listener whatever you want to call it that’s what it is and what this does is it gives us people keep going crazy about line 16 and they keep saying line 16 then not off um inside of login is it line 16 yeah yeah this I thought you fixed it already right that fix that one yeah okay yeah thanks guys um so here what we say is whenever the authentication changes it will give us the authenticated user so it might be no if the user is not there um or it will give us the actual user themselves and once it does that we’re going to basically go ahead and first we want to console log the user we’re going to say the user this is just a good debugging step so the user is let’s go ahead and just say or user oops or user like this and then we’re going to go ahead I see some people seeing that um comment earlier so then we’re going to say the user is au user and now what we’re going to do is we’re going to say if there is an au user okay so if there was a user logged in then this means that the user just logged in okay just logged in or the user was logged in right so or the user sorry the user was logged in now this is really awesome because when we do this kind of authentication with Firebase even if you refresh the page it will actually log you back in if you already logged in from before okay yeah so that’s really really cool and then what we’re going to say is um we’re going to say else the user is logged out okay the user is logged out okay now what we want to do is we’re going to actually do this in a very powerful way okay so I actually want to go ahead and store the user inside of our react context API so install inside of our store so let’s go ahead and go to our reducer and I’m going to go ahead and add a user inside of that and initially we’re going to say the user’s no because let’s just assume that when the app loads by default the user is going to be no okay then what we’re going to do is we are going to go ahead and create inside of app.js say when the user logs in we need the dispatch so we need to go ahead and pull that in over here so we’re going to say this is our magic react context API piece of code so we’re going to go ahead and import that here like so so use State value from State provider and then here what we’re going to do is we’re going to say if you’re logged in we’re going to say dispatch right dispatch this is going to be an object I’m going to say type of dispatch it’s just going to be known as set user and this is going to fire off the event and shoot it into the data layer right the information about the user exactly so every time they log in it’ll shoot the user into the data layer and if they log out it will basically eradicate remove the user from the data layer got it okay now um what we are going to do next is we are going to go ahead and we are going to send the user so we’re going to send the user and in this case the user is simply the orth user that comes back from Firebase now if the user is logged out we’re going to do the same thing we’re going to dispatch an object with the same type so it’s going to be type set user set user but we’re going to say that the user this time is no okay now think about what we’re doing here guys so if the user for any reason logs in or if the user was logged in and they refresh the page it’s going to go ahead and set the user to whoever was logged in okay from vabase now if the user is logged out it’s going to go ahead and set the user to no value so that way nobody is logged in now right so if all of this worked correctly what we should be able to do now is actually go ahead and say something like this so we should be able to go ahead and say uh it should say console log the user is we should see the user inside of our um inside of our um inside of our screen okay so let’s go to our login component and here we actually see you see in the login component we we don’t even do anything we just say if um the authenticated user was created or signed in then just push them to the homepage and then this listener inside of app.js does all of the hard work and it just constantly sits there sits there and listens so let’s go ahead and refresh on app.js as somebody just asked if this has anything to do with local storage in browser this is not local storage right this is a different type of thing with the data layer yeah so this is not local storage the reason why it persists is because Firebase has done some clever stuff under the hood so if you log in it will know that you’re logged in because they do some clever stuff with the cookies uh you don’t actually even need to know what happens after so this is so this is actually the data layer component that’s connected with the Firebase yes y got it okay exactly that awesome now what we’re going to do is oh yeah so once we have this um haira actually pointed this yeah they’re getting good yeah this is insane thank you so much for pointing that out yeah so we actually dispatched a set user action also thank you KQ for that donation thank you yep and he says maybe I’m not understanding everything but I certainly know I’m on the right track and then I will understand everything epic that’s it dude keep that up and that is the way to go forward y right so now what we’re going to do is we’re going to go to our reducer JS and we need to go ahead and actually add in in the case to listen to this right so how do we do that go here and we say case so we can drop it on new line we can say case set user which is the type that we dispatched earlier and when we get this type we’re going to say colon return and we’re going to return everything that’s currently inside the state as well as we’re going to update the user and the user is going to be the action user so this is the one that we dispatched oops this should be action. user this is going to be the user that we dispatched here so you see action. user and the type was set user and the action was the user okay so we need to do that save it and now we’re listening inside of our um user reducer so now we should have the app update so kazy let’s go ahead and um open up the inspector and because you just previously signed in y it should actually say that the user is logged in so let’s go ahead and open and also let me know when we move on to the next step and we’re done with the user authentication with Firebase yeah right all right so this is the basket okay R zero where is that uh where is that saying this is the basket um let me go ahead and get rid of that comment because we don’t need that anymore this is the basket um this is basket product okay so where we got that we’ got that in product right now account product and did you find it or you want me to look for it are you inside of your locost yes so I can’t see it just because I’m in the Local H yeah I I you want me to refresh and try it yeah so uh yep I still got that printed out wait hold on yeah it said this is the basket right so I mean I’m not sure where this is the basket is coming from so the baset that’s coming from oh okay it’s coming from product okay so I’m going to goad and remove that one you don’t need that it go ahead save the file and let’s go back to app.js and now we should be able to see guys that when CI refreshes it says the user is so let’s see I’ll refresh right now the user is nice yeah and that’s actually KY when he logged in right so that’s actually his logged in state now it has my email and everything yeah so he’s actually gone ahead and remembered him now what we need to do is need to have some kind of login uh log out functionality okay so K I think our faces are actually I moved it yeah nice I’ll move us to the middle until nice yeah so now what we can do is if we go over to header. JS what we can say is so this was part of the homework so we’re going to change this so it says hello and then whoever signed in email yeah I’m going to leave that up to you guys as a challenge and by the way guys so some people are like some people start with Firebase and then they move to like something real fire Firebase a lot of big companies are using Firebase like twitch uses Firebase and instacart uses Firebase yeah and honestly it’s really a a bad misconception that it’s kind of just caught on the Firebase isn’t powerful enough it’s the reason why you think that is because they make it so damn easy to implement yeah so that’s why you kind of naturally think okay this is not real this is not like powerful Etc but this is exactly this is real guys this is really real stuff people people always think like AWS is the way to go and it’s just such a nightmare to do most things um yeah Firebase makes it really simple but don’t get that twisted and think it’s uh it’s kind of like how people they move over to python sometimes and they’re like oh python is really simple so it must not be that powerful and it’s like no you can actually do whatever you want with python or you can do whatever you want with react just because react is easy doesn’t make it less powerful than angular or view exactly exactly guys so what we’re going to do now is inside of the header we’re going to go ahead and say if you are signed in so now what we can do is we can actually pull the user from the state because the user is also populated now we can say if the user so let’s render this text now so rather than saying sign in we can say if the user exists right then it will will say sign out otherwise it will say sign in and S suit just said I have used AWS during my work experience trust me Firebase is equally powerful exactly honestly it’s so damn powerful guys and it’s so fast like if you actually look under the hood of what they do is it’s insane how efficient they make it for you guys um so now fire is free until you start using things like Cloud functions exactly yeah yep so here guys is what we added we’ve got the user and we say if the user is uh is is present then it will say sign out otherwise it will say sign in okay um so what we’re gonna now do is yeah I see guys he’s trying to figure out Jesus Christ having trouble so now what we’re going to do is we are going to say when you click on the so we’re actually going to make this um div clickable right so we’re going to say on click on click on this div and I’m going to say when you click the div right we want it to basically be um let me just double check something yeah so we basically want this to say like if you are logged in right so so basically I’m going to say handle sign um in handle authentication so handle authentic authentication the reason why I’m going to call it this guys is because we’re going to have it so when you click where it says sign in sign out at the top I just want to have a little function which handles the authentication it doesn’t take anything but it’s basically going to say if there was a user right and you clicked it because the text would be sign out right what we’re going to say is if there was a user we’re going to go ahead and pull the authentication module from Firebase our local one so our local Firebase and then we’re going to say or. sign out and that is all we need to do to actually sign out from Firebase okay so Kazi I want you to show on the screen now that at the top of the screen on the Amazon clone we should see in the header it should say sign out okay so what are you saying in the in the text that we add to the top no so you see in the in the header right now this zoom into the header if you use the trackpad it actually becomes super super simple so use the trackpad and pinch um yeah you can see it says sign out at the top right now with the logic that we done uh we we’ve done it so he said if oh I see what you’re mean like this yeah that’s how I usually sign in yeah yeah zoom in nice okay now it says sign out right so what do now is if we click that because the handle oh snap son hold on Prince just dropped in the comments and he goes I just got my first project today on upwork for $400 just because of the Spotify clone that you guys built thanks so much dude that’s insane spy has got so many jobs now wow Frank Ramos a sixf figure contract for Sonos which is insane that Spotify clone that is insane wow insane all right awesome dude so now when we click on the um sign out button so one thing is going to happen right now so actually we need to fix something so if you click that right now it will sign you up but it will take you to the login page okay and then if we go back now so let’s go back should say sign in right so it hasn’t sign the user now because it did sign out but we need fix something here so what we did is and I saw this in the comments as well so a lot of people saying Sunny this goes back to login page yes the reason why is because what we need to happen here guys is we need to add this little thing in here which we say if there was no user only then do we hold on you’re coding because I don’t see it yet oh yeah sorry yeah so I’ve added it here so if there was no user only then do we push to the login page okay thank you for the donation says you guys are amazing keep the good work thank you hey that’s wicked thank you so much PR love all right yeah so now we’re saying only redirect to the login page if there was no user so got it this now is a pretty nice situation so first you just sign in so we have a user all right you want me to log in right now y dope okay and then at the top where it says sign out so let zoom into that uhhuh yep now if we click sign out it won’t redirect but it will sign the user app so click that nice now if you click sign in now it will throw you to the fancy beautiful that’s really really clean right like a really really nice implementation um it gives us a really nice um sort of dynamic feel because there was no sort of refresh in like an ugly way it just literally said okay sign out you signed out sign in and once you guys finish that homework instead of saying hello guest you’ll say hello like kazy email.com and then it will go ahead and and actually go ahead and say hello guest when you sign out yeah because we should clearing the state so that will be really really clean right that’s true now I’m going to go ahead and show you guys um an example of how we can pull the user from the state okay so let’s go ahead and this will help you with your homework let’s go to checkout. JS um right now and let’s actually go ahead and log in KY and yeah somebody said no regular expression for authentication recognition in the database I don’t think so right they handle most of it um what was that sorry no recognition somebody asks if uh like no regular expression for authentication and recognition in the database question mark um no regular expression for authentication recognition not 100% sure what you mean um I mean I feel like Firebase handles probably a lot of the things that you’re looking to do with regular Expressions right like I imagine if you did put something in that didn’t look like an email probably Firebase won’t allow you to make an account yeah yeah re so yeah yeah it would pop up and it would freak out um also guys I saw some people have already done that homework so that’s awesome oh nice that’s sick that’s awesome right so let’s go ahead and sign up uh sign in okay so let’s do it okay nice and let’s go ahead and go to the bip so uh we don’t need to add anything let’s just go straight on the user authentication step um okay so we just finished the user authentication just now he all right now we’re going to get the name to pop up in the checkout page so I want it to say in the checkout page if the user is there will’ll say hey like kazy um or something like that it’ll say Hey kazy or hey uh whatever your email address is and then it’ll show your basket contents okay all right so working on username on checkout page [Music] yeah okay dope let’s do it so basically if we look at does our version of the app have it um no so I’m going to go ahead and add this in so that will help him with that homework okay good yeah so now what we’re going to do is inside of the checkout page so inside of the checkout page what we’re going to do is here we’re going to pull the user from the um U from the store and we’re going to go ahead and say where it says your shopping basket we’re going to basically add something a bit smaller underne on top of it so we going to say H3 and this one’s going to say yeah it’s going to be I think it’s user. email I think it’s user. email but we can go ahead and check it off so maybe user door email so now if we do this and we go to the basket page yep oh nice it says the email oh nice so it says the email right so now we’ll just say hello and then use your email let’s go ahead and see if that works oh what happened damn um pinet Absolution says guys thank you than you so much for this wonderful content my brother passed away last week and I’m dedicating this tutorial to him keep up I will succeed just to keep his memory in anything damn dude sorry F Los and that’s insane that you are dedicating this to him keep working hard that’s that’s some that’s sad news dude yeah that’s heartbreaking yeah man I’m just glad you’re here with us like you got the community behind you you got us behind you like reach out to us on slack or if you’re in the Facebook group will help you out but God damn dude that that me up a little bit cuz I love my brothers and that would be crazy if something like that happened but yeah man we’re here for you and let’s let’s keep going exactly dude exactly um what does that say it says email on email of no okay yeah so if you get this issue guys you want to do is do optional chaining so you want to do this this use a uh question mark. email okay boom right there and then what that will do is it will have so there’s an a synchronous period where it won’t load the user because it’s actually trying to fetch it from Firebase so by doing that it actually protects it from erroring up and now it says hello with the email address so that’s perfect that looks really really good okay um so now what we’re going to do is oh and Daniel Sal says sunny yeah I was reading that was like damn these guys are on the ball yeah it’s crazy dude now so we have that right so that should help you guys figure out the homework solution where instead of saying hello guest it will say hello with the email address that would be an awesome stop for you guys um and now what we’re going to do is I guess what we’ll do is we’ll quickly show them how to actually go ahead and add um something to your DB and Pull It in from the DB and render out an item y let’s do it yeah so let’s go ahead and do that um actually one second let me think how we’re going to do this um maybe we should do the deployment at this [Music] step not right now what’s that do you want to do the deployment today and then we do the um database stuff tomorrow yeah because I have an idea for tomorrow I think what we should do is we should do the database um do the deployment now and then tomorrow when we actually process a payment we’ll show you how to push data into the database it will feed in much nicer and it will set you guys a nice bit of homework we’ll have time for that right what was that we’ll have time for that tomorrow yeah yeah we’ll have more time for that tomorrow that’ be perfect okay dope so let’s just get this deployed online guys and then you’ll be actually be able to share this app with your friends family and things like that um what we’re going to do next is do the deployment so now we’ve set everything up for the deployment earlier so we actually went ahead and all you need to do is create that account um in in Firebase to get started with that now as kazy mentioned mentioned earlier say open up a terminal Coy what let’s open up a terminal no n it’s not you God Nas talks at the same time as you and I can’t hear you and then I’m like wait Sunny what did you say and Nas just start speaking louder like God he has too much confidence all right all right so what did you say Sunny let’s open up a terminal all right I’ll open up a terminal nice okay now in here guys uh you just need to move a little bit down on ecam so they can see it Cy uhhuh um there we go hold on one second one second I’ll try to figure that out there we go so now guys inside of here you want to make sure you run the command pseudo mpmi mpmi DG Firebase tools so you need to install Firebase Tools in order to do what we’re about to do next okay so you would install this somebody was like damn so you’re telling me my Spotify clone didn’t work cuz of a dang question mark yeah yeah so that’s funny cuz yeah there’s certain stuff that if you just miss that little question mark that can really screw you up that optional chaining really helps out cuz when you load the app in the start sometimes the user might not be loaded so it’ll crash because of that and then once it refreshes the user can then be loaded so just drop that question mark and that optional chaining is like a really clean thing that you can do with react exactly guys exactly um something I want to mention somebody said aava d said dasg for Global guys you only need to do it once do not throw that around guys only use Global installs for tools like Fire based tools don’t use that for all your dependencies it’s not a good practice if you installed it yesterday you’re good yeah you still yesterday you’re good all right so deploy is run Firebase oops Firebase login so we’re not going to do it because we I think we’re already logged in yeah de the optional chaining is kind of like not null but it’s like it’s much easier than doing doing a TR catch Block it’s just super clean exactly yeah it’s going to be super clean um so now it says Firebase uh we need to do Firebase login and what this will do is it will pop up a little window and it’ll just be your browser and you just basically log in just like you do on Google and then it’ll redirect you back once you’ve done that guys you need to do the following you need to do mpm run build okay no no sorry before we do that we’re going to do Firebase init Firebase init okay now Coy do you want to run them through the init yeah so when we go through this guys make sure you go to hosting select this um we should be good to go on that click use an existing project and whatever you called it I called it Amazon challenge you might have called it Amazon clone or something of that nature so pick the right one then when it says what do you want to use is your public directory make sure you do build this is important for react apps click that and yes this is a single page application so don’t just hit enter here cuz you’re going to mess it up hit why and say yes cuz it’s default by no so you want to make sure you do why and hit enter and you should be good to go exactly so once you’ve done that guys we’ve actually prepped Firebase stuff and make sure you’re in the right directory uh before you do that now what you want to do is mpm yeah build okay mpm run build and this will go ahead and actually so what this does is it goes ahead and creates an optimized production build so this goes ahead and strips out all of the things which make the build slow so like the hot reloading all the developer things all of those things okay and it will make the app like a super efficient bundle okay now it’s important to know that once this command finishes if you make any changes on the app you will have to run mpm run build again here’s what your thing should look oh sorry Sunny just finish your thought and then I’ll continue yeah so just just saying like if you make any changes once we finish mpm run build then make sure that you actually go ahead and uh run mpm run build again okay Frank just came in hey nice thank you Frank with a $5 donation that is awesome thank you yeah you such a good build and guys if your uh directories look like this forget about my top directory here but if your looks like something like this oh my God please work screen brush for the love of God all right here we go boom then you are good if it looks like this you are looking fantastic and now at this point guys we are ready to deploy this bad boy exactly and guys you can rinse and repeat this you can constantly make changes do npm run build Firebase which is what we’re about to do somebody says finally Frank is here nice everyone’s getting used to Frank on the streams nice dude okay so now what we’re gonna do is what are we gonna do now we’re going to do uh F we’re going to be we’re about to deploy it so we got to do build first we’ve done that already oh yeah okay okay okay let’s do this Firebase deploy ready you guys ready yo put on some uh put on some uh suspenseful music you know and queue it up do it bro all right hey is this going to work Bo all right this is the Moment of Truth Coy don’t hit that button just yet oh my we’re wait let’s see are you guys ready to see if this worked wow it’s right there if I command click it it should be up right are you guys ready drop it in the comments below and you know what I can’t wait anymore sunny I cannot wait anymore I’m going to click it bro yeah bro I’m going to click it bro oh I’m telling you I’m going to click it dude if it’s broken it’s going to be so embarrassing dude I know right I don’t think we should do it live God damn it oh I’m G to click it I’m G to click it oh let’s go hey dude wow look at that beautiful app look at how beautiful this looks guys Leaf says don’t do it and this is live guys so this is a live link right now you guys go smash that like button if you liked what we did for you here boom exactly boom that was naz’s call that was awesome call NAS going to go here a nice look at that every feature we’re goingon to show I’m gonna play this sound and now check it out when I hit remove basket the sub total is going to change are you guys ready you guys ready you guys ready I’m going to do it I’m going to remove this item and look at the subtotal change and wait there we go nice let’s ahead and check out the sign in all right let’s go check it out and you guys can log into this too hopefully it doesn’t crash but you guys can log into this and use it and an email a password and hit the create your Jason says you guys have me cheesing throughout the whole live stream nice sg77 says Brave man doing it in front of hundreds of programmers lovein thank you dude just dropped a $5 Canadian donation thank you D Canadian donation I love that yeah thank you for the Canadian donation nice dude all right here we go and that is hilarious go your Amazon account wow look at that I’m signed in I’m going to add stuff to basket go to the basket and it even knows who I am hello hello fantastic so now are we done for today sunny we are done for today I’m going to run over the homework one more time guys [Music] exactly now guys something I want to mention for the homework right so it was not only to implement that top part right it was also to add some animations add stuff like animations add change this Amazon build so it looks a bit more custom to yourself okay like and and this is where your creativity comes in kicks in and you can sort of flex those CSS skills um and something I’d recommend is going ahead and trying the following so um CU if you just want to type in on um Google react flip move okay let’s do it okay this is going to be a challenge for you guys I want to see if anyone can go ahead and get this to work okay so it’s called react flip move and uh what you can do is if you guys can go ahead and check out this GitHub if you can Implement react flip move so let’s move down they’ve got a little animation there so if you guys implement this inside of the um inside of the uh basket page so the checkout page how awesome would that look so as you remove something it would reshuffle the list and do everything as needed right so that would be really really clean I think if you guys can go ahead and maybe implement this as a piece of challenge homework okay so whoever can go ahead and get that implemented it’s got some nice documentation underneath that this will be really really cool okay and G just gave a donation of 50 Argent Argentine dollars people are going to kill us pesos and he goes uh and he goes thank nice work guys that is so much fun uh and he goes if kazy can say I don’t know if this is I mean I hope this is probably good words but goes buo hi from Argentina let’s go let’s go guys what does it mean Frankie let’s go drink a f which is a wine of the good ones damn all right nice dude all right so boom right so we have that built right so that is your piece of challenge homework right to get that animated list implemented and you can use react flip move to go ahead and do that now um and just a top tip guys you may need to introduce keys I’m not going to say anything about it but you may need to introduce Keys into the list to get that working correctly and keys you’re not talking about API Keys you’re talking about like index keys and things like that component keys inside of react so that’s going to be a nice little challenge for you guys to go ahead and do and that should help you out a lot now for today I’m going to run over the homework one more time guys so the homework for today’s session is to upgrade that header boss so that it says hello with hold hold on you’re going too fast for me right so theork day three right yeah all right cool so let’s go over what uh each step is so one is what so upgrade the header bar so upgrade header component what’s wrong with me okay a component um uh to include the users emo uhhuh nice and then on part two we are going to um add animation to the build so add animation and guys you can add animation wherever you want hover effects the react flip move that we spoke about any animation that you add just make sure you add it deploy that thing and show up your beautiful work okay now the third final piece of homework is style Amazon okay so obviously we have a typical Amazon looking app right now style it give it your own little sort of twist give it some difference like them some changes and that’s completely up to you guys to do okay so this is your homework and and part four the most important part is deploy that app okay so deploy that app and then link us the app in the submission uh and screenshot it and do all the you guys have been doing so far for the homework we’re going to shoot a video off this and we’ll show you guys a quick run through of the homework and we’ll pop that on the slack and the Facebook Channel and then air table right yeah exactly and that’s only available in the Facebook group and Nas I think is going to be posting the homework up soon in the Facebook group so the homework is going to be available there and I think or do we send out emails with the homework too yes so you guys are going to also get an email if you’re part of the challenge so keep an eye on your email keep an eye on the Facebook group we’re going to send you the homework exactly and check in the slack as well it’s going to be there as well nice dude and the only way to participate in this react challenge is how sunny to be a part of that Facebook group guys you have to be a part of that Facebook group and you have to be interactive submitting all of the homework for each of the days and make sure that you are engaged and with us in this journey and that we have a point system in place and that’s all attributes to those things that we’ve mentioned and then we’ll choose that prize and even if you guys don’t compete you’re not here to compete for the prizes do this do yourself a favor land that dream job that you’ve always wanted and carry on with these builds yep beautiful anything else regarding the homework or anything else we need to say I think we’re good dude I think that was a crazy session I want to say thank you to everyone who was here today I think you guys are awesome amongst any Tech issues that we ever have like you guys crush it and push through with that said I think we’re good bro damn thank you guys so much as always for being there and having that energy and just supporting us even with all the craziness that goes on we love you guys we appreciate every single one of you with that said we will see you guys tomorrow at 11:00 a.m. Pacific make sure to show up there tomorrow they’re going to be doing day four and we’re going to be finishing this project up you guys and now then you’ll have stripe integrated you’ll be able to accept payments and the whole nine and then you can actually put on your portfolio yeah and you can actually say it’s a full e-commerce build right so there Big Stuff happening tomorrow exactly so with that said guys we love your beautiful face and as always we’ll see you tomorrow [Music] [Music] [Applause] [Music] guys welcome back for day four and guys this is going to be us building the Amazon and finally adding in all the payments and everything that we actually didn’t even get to last time so in this one we’re going to be hosting the database as well as starting to add the stripe payment functionality and here is the actual app where we had it left off yeah let me go ahead and drop you a link right now actually kazy we have the stripe payment functionality that we can demo for you guys right now so we’re going to go ahead and show you guys what we’re going to build today okay do you want to go ahead and deploy the app Sunny because already done s you it okay all right so let me just go ahead and copy that link right over here and I will paste it in and then we can show you guys this but how are you guys doing definitely want to know here we go boom here’s the deployed app so check it out guys everything looks similar to what we done yesterday but we added a Hidden Gem niy first if you want to go ahead and sign in all right I will do that sign in I remember my email from yesterday hey a very esoteric email hey okay there we go I’m signed in awesome now if you want to go ahead and add some BOS items to your basket all right I will do that boom okay actually let me go here so I’ll hit add to basket we’ll go with the Lean Startup an iPad Pro and uh maybe an Amazon Echo and a two screens let’s do it all right so I’m going to click the basket see guys in the top it says hello with his email address so that was actually part of your homework so let’s go ahead and we’ll go through that in a sec um but for now if you want to hit that proceed to check out button and I see the total is right over here exactly beautiful receive the checkout okay boom done now we got this beautiful checkout page yo that is clean this page you can actually go ahead and you can remove items still but you can actually go ahead and pop in your card details okay so can I do this card for now yeah so that is the stripe test card okay so I think you need to do two full uh I think it’s only for the card I think it should go through okay um all right so I’m going to hit buy now and then it should go through right and then so don’t click it yet but what’s going to happen guys is as soon as he hits buy now what’s going to happen is it’s going to go ahead push all this information over to stripe stripe’s going to create like a payment for it then it’s going to process the payment and then it’s actually going to push all of this order into the database and it will yeah it’s quite a bit it’ll push it all into the database and it will be attached to this user so let’s go ahead and click buy now and hopefully the demo Gods on our on our side I think you’re going to need to queue up some suspenseful music cuz so much can go wrong here I mean like dude I mean everything’s been breaking lately so let’s hope that everything crashed so many times yesterday fing nervous bro all right fingers crossed hopefully Google doesn’t go down here we go byy now hey oh it worked bro let’s go all worked guys and that was a real payment so you can actually see we’ve got a payment ID on the top right yeah so it’s actually processed through stripe come back to us and everything has ran through a payment system so that is super exciting let us know if you guys are excited about that in the comments below yeah and yeah that’s what we’re going to be building today a complete e-commerce backend and guys for those of you guys who are interested in the technical stuff we’re actually deploying um a an an Express API on a cloud function so on a Firebase Cloud function so a complete backend solution here so if you’re wondering in full if you’re actually excited about full stack development today is the day and it’s going to be exciting for you guys yep thank you for the donation that we just got and let’s just like write out the actual things that they’re going to be building today so we’re obviously working on the Amazon uh clone right now and we’re you know and we’re basically adding in the stripe functionality today so let’s just start going with the few so we have the stripe functionality that is going to be added today what else are be doing yeah so we’re actually going to recap the homework and stuff but we’ll cover that after today we’re going to be building the checkout page so the actual um payment page yep the checkout page which is the payment page and then we actually are going to go ahead and build a cloud function to process the stripe payment okay yep and by the way when you say cloud functions we’re also talking about here a serverless architecture which is like a really hot word that all programmers are like trying to learn about and it’s a really epic way to do development so it’s serverless as well right exactly now guys a lot of you guys are hot on the M Stack right so with this today’s build we actually are doing somewhat of a M Stack but the Firebase um Cloud function is what is basically going to be um running our Express server so we have Firebase Cloud functions and we’re essentially going to be using a man stack build today so get excited for that cuz it is Express it is node we have all of that juicy stuff today we’re using fire store for the realtime database so Firebase is Real Time database is called fir store yep so I’m going to write that down right over here it’s fir store there we go yep and then so a lot of you guys actually successfully deployed your apps yesterday so that is amazing dude speaking of that just give me one second cuz I got something cool here so over here actually patch sent me an Instagram message yesterday y and Patch actually showed us that he got this Amazon thing working okay let me click it real quick um there we go so that’s patches and his Amazon store was up and running and live which was like super cool and I was like damn that’s awesome and then I went down here and look at his message so he goes brother I haven’t stopped working on this since yesterday I stayed up until 2: a.m. after non-stop working since 4: I wasn’t able to do the homework but I am determined to get this up and going I’m learning a shitload with this Challenge and it has pushed me so hard and I love it Big Love to You sunny and the rest of the CP team can’t wait for the day when I can meet you all in person that’s amazing dude that’s the kind of energy we need in this community guys well done patch yo people are saying that’s insane I love it guys if you like what patch did go ahead and smash that like button for patch hey that one was smooth let me play some smooth sounds in the background but guys smash that like button if you’re watching this on YouTube so it goes out for everybody else if you want to participate in this challenge make sure you’re in the Facebook group cuz that’s where you’re going to be learning all this stuff exactly guys you have to be in the Facebook group to be a part of that prize draw at the end right so make sure you submit that homework post them Facebook comments and do all those things that we said and what else are we going to be covering today so then everybody has a nice little road map of like all the functionality they’re going to build should we go to the PowerPoint yeah so let’s jump over to that PowerPoint yeah okay dope just shoot me the link to the PowerPoint on slack and I’ll hop on it in just a second but guys I hope that you are excited about all of the things that we’re going to be building together it’s kind of beautiful and if any of you want to reach out to us and send us a story just like patch did then go ahead and uh look at the tag below so at clever Cy you can reach out or uh the one for sunny is underneath his and thank you for the donations that you guys are sending that is awesome Louise just sent what I used to call1 100 Mexican dollars it because I always see MX but that’s 100 PES thank you so much for that and um he goes please explain something about animations by the way you guys are the Masters I can’t wait to start the profit with JavaScript course and thanks for all the love so Sunny maybe you can talk about that a little bit Yeah amazing stuff guys we will actually go ahead and I can show you how um I talked about something called react flip move yesterday we maybe if we get some time we can go through that and we can definitely show you guys how to implement animations but we have some submissions which are gorgeous and they allow you to actually um and they actually have some nice hover animations and some of the animations we’re talking about so we’ll demo them in just a sec Sean just said this 5-day challenge will definitely get you your first job that’s fantastic now guys here’s today’s agenda so we went over a bunch of this already you’re going to build the my orders page store orders for logged in users and here’s what we’re going to be building today so we demoed it right in the start CU it’s going to be the last functionality that we need to build and you with stripe you’ll now be able to accept payments y so it’s a huge thing here guys like I don’t let’s not underestimate how much we’re going to be doing to like that Pro processing of a payment is absolutely super valuable so that’s going to be a super super valuable skill to have [Music] y ni your Amazon clones oo Bradley Knox coming in first it check it out these have got examples of that animation that I was talking about so the first one let’s go ahead and check out appreciate that Francesco B say hi guys you’re awesome thank you so much I’m learning a lot from these tutorials with a 5 donation thank you dude guys thank you so much I think this is our fastest breaking $100 on donations fastest 14 minutes thank you with none of my donation being in there dude hover over the products in this build that silky smooth Bradley bro you crushed it with this all right let me check let me put it through a little stress test damn oh the sub total is there too remove from basket yo it updated live remove from basket updated live nice do I have a sign in dude nice we got everything yeah awesome stuff Bradley Bradley you’re going to be leading the next challenge um all right let’s check out what this guy got what was his name r pal rtic pal okay so let’s go here rtic nice job on this wait how does everybody how did every dude check out the slider though look at the top he’s actually added a slider oh he has a slider at the top nice the carousel images right yep that’s clean dope and um where where is the animation showing remember you were like is this the react flip move this is not react flip they haven’t used react flip move here um in fact I mean some people have done hover effects so that’s cool if you guys really I think any animation is really cool yeah honestly any animation at this point why did everybody how did like did you say to add the hover effect like how did everybody just get the memo to add hover a challenge I was like guys go ahead and add some uh some animations and effects and if you can do that then oh this guy added both react flip move you see that check that out dude nice in fact if you check out number four he actually made something pretty awesome so Sammy I know man chitan did a good job he had both like Gary check out Sammy right now go ahead and add a product o I like the drop shot on the back I mean it’s a it’s a little a bit intense a bit intense exactly that’s what I was going to say but it’s still good why is this guy selling onear products I don’t trust them anymore go ahead and add a BOS add a product to BOS and check out what happens oh yeah that’s insane right yo Amazon needs that yeah really really nice um so a lot of people are saying I have used uh react spring awesome job if you guys have used react spring I’ve used that I love his yeah flip move here too he’s got I mean this was the greatest one I saw so far I mean it’s intense but like I don’t know to me that was awesome now guys don’t worry if we haven’t shown your one here we are getting round to all of them and we have definitely been checking out all of this stuff like so don’t worry if we haven’t seen it we are going to be checking out all of love the submissions um so stay tuned this one’s awesome he added a footer can you see that he added like an extra footer at the B which it just makes to that extra complete functionality wait what what for this get to know us and stuff yeah so we didn’t actually have that in nice I see or should I say really really nice n let’s go to the next one here and I don’t know but like did he also add this deliver to eth Ethiopia thing cuz that looks really clean yeah like there’s something about his that looks like really like looks like a final product yeah like those small tweaks like he added the top the bottom for looks so so clean yeah it’s like not crazy fancy but like I just I love how it functions and it’s just crisp and let’s put it through the responsive it’s pretty responsive I like it yeah nice work nice work okay great job guys on the submissions we’re going through as many of your submissions as we can uh talk sister says damn all those were outstanding yeah there’s so many that you guys submitted like we couldn’t go through all of them but we did try to go through as many of them as we can um and thanks so much for the love Sedar sent us a message and he’s like wait why can’t I click here and he goes hey CP wanted to thank you guys the whole clever programmer team I never used to stay up until 3:30 a.m. in the morning learning code watching videos on YouTube you is a thing but this challenge where I get to learn collectively has brought in all the motivation and value to what I’m learning I learned helping each other dealing with challenges collectively making work exciting staying clever love you guys I am sure with this knowledge I will be able to give my mom a website for her garment store for her birthday coming up I love that dude that is a solid why that is absolutely beautiful prince Sear says I got my first project today on upwork for $400 just because of the Spotify clone damn that’s awesome dud these are beautiful brandan says great explanation of the Firebase authentication and you can take it over from here Sunny so Corey rith says just signed up for pwj if you haven’t you are missing out and should consider the investment most importantly in yourself keep it going y’all and looking forward to what’s to come thank you so much Corey yep and thank you guys for the super chat if we didn’t get to some of you we apolog olog about that just because there’s so many coming in and we want to keep one by Gora he says he donated 100 rupees I think it says can we submit the project to day five because I have an interview yes dude it does not matter when you submit it just make sure you submit before the closing date yes make sure you guys can still submit it so you haven’t missed out yet yep uh and all of you guys just saying amazing things so thank you thank you so much we really appreciate you wow this is such a powerful community everyone is here to help each other yeah beautiful really awesome with that said guys we’re going to jump into it and start coding let’s do it [Music] bro okay awesome let me go ahead and open up our right so we have our session live right here so you can see me dope yep and do you want to do npm start yeah so I’m going to get some requests to your terminal right now um let’s go ahead and do LS so I requested access to your terminal there we go then we do nice oh my bad all good there we goce yeah Leroy Fernandez you even if you start the challenge a bit late you can submit the work on any day provided you submit it before the closing deadline awesome let’s go ahead and open this up all right there we go R dude so now let’s go ahead and we were previously at the yesterday’s homework I asked you guys to go ahead and add inside the header rather than saying hello guest over here I wanted you to have the email right now remember we were using the react context API which meant that we had the baset and the user in this state okay so inside of the reducer we had the initial State as basket and uh basket being an empty object array sorry user being an empty value so no then we went ahead and used that in a bunch of different components and the homework was simply to make it so that it would say hello guest if you weren’t signed in and if you were signed in it would say the user so in this case the way we do that guys is we have the user will pulled in from the react context API using our special hook that we created yesterday and then we want to go go ahead and say hello and now here what we say is we say if there is no user so this is if there is no user then this is called aary um We’re going to say guest right if there’s no user then we’re going to say guest if there is a user we’re going to go ahead and say user. email right so I believe it’s user. email and let’s save and now we should see on the top right it should say hello um and it’s logged in to your email right kazy yep it is it says hello test1 123123 gmail.com sign out so how many of you guys actually went ahead and found the solution to this maybe you did straight off the bat user. email but maybe you didn’t use a turnery if you if you did use a Turner let me know because it’s awesome if you guys know about that feature in um uh so the reason why I can see some people saying you need to put a optional chain we’re actually already protecting it here because we’re saying if there is a user only then show user. email so you can actually leave the optional chaining and I see a few people have actually done that that’s awesome really really nice stuff there guys now for the animations we spoke about something called react flip move um react flip move is a library which I think at this point guys I saw loads of you guys adding in the animations but if we get some time at the end we can go ahead and introduce that for now let’s actually jump into the build because we have a nice heavy build today so let’s make the most of the time that we have so with that said now what we’re going to do is go ahead and create the next page whereby if we go to the checkout page CI so let’s go ahead and add a few Pro uh products to the basket MH so this is here and we’re going to refresh yep all right add to basket add to basket and then I’ll add the iPad Pro to basket twice and then you want to go to to basket okay so now here guys what we previously had is the sub total the shopping basket and then we had that proceed to checkout button okay now that proceed to checkout button doesn’t actually do anything at this just one sec I just want to emphasize like people are saying I’m going to just show their comments a little bit so we have people saying um uh that they used the op Turner operator bunch of them did and John Pierre has like used It reversed it with user instead of that user um okay nice yeah yeah so people are using that nice nice awesome I also saw somebody actually said that you they use and this is another good one guys um so you can actually have it as this or you could also write I’m going to write in a comment here you could also write um user. email or guest you can actually go ahead and do this go ahead um okay it looks like connection yep was that me or was that you um I’m not sure I think we’re still are we still good on YouTube oh my God it says oh my God this is I’m going to get a heart attack dude this is going to be the last day I just saw it said poor it said poor connection on top of the Skype guys I’m just going to freaking say this this stream YouTube and all these people I think are after us I’m starting to believe it’s a conspiracy theory they don’t want us delivering this valuable information um so I don’t know what is going on but streams keep dying if it dies we will go live again please we beg you join us again if it dies we’re going to go live back on YouTube if it dies and we’re going to go live back on Facebook as well yesterday was heartbreaking that it died so I just saw it said poor connection somewhere and that freaked me out but let’s keep going and guys remember if you’re watching it on Facebook it goes down come over to YouTube and vice versa okay so don’t freak out just make sure you jump back on and we can carry on okay got it awesome dope so with that said let’s go ahead and jump over to the somebody’s like YouTube hates all the value you give us for free but we are positive we keep the energy going let’s go nice he goes you meal says you guys have done a great job um even with all technical heads said we won’t let it die that’s thank you this is [Music] awesome okay so now inside of check out inside of the subtotal component so we’re going to go ahead and go into the subtotal component um Here and Now guys you can see we have the proed to check out buttons so we currently use react rter and react rter has something very nice called use history and what this does is it actually gives us the browser history so we can go ahead and do the following we can say const history equals use history like so and what are we working on Sunny so I can just make that a step at the top we got 749 rubles thank you so much Muhammad and what are we working on right so right now we are currently working on um building the payment page for the stri uh building the payment page y so payment checkout page yeah let’s do that building the payment checkout C okay build payment SL dope okay so now that step at the top is going to be showing boom nice so okay so we have the um yeah con history equals use history now what we’re going to do here is we need to import this from react Odom so we need to go ahead and Chuck this at the top and we don’t need the link we just need the use history like so and this what this will do is guys it will give us the browser history okay so this is really really cool because what we can do now is we can say when I click the button so on click then we can say we want to actually go ahead and the button click fires off an event and what we’re going to say is history so history do push so we’re literally pushing a page into the um browser right so it’s kind of like your you’re redirecting in some way um so now we’re going to push a page into the browser and here we’re going to call it let’s call it the payment page okay this is the payment page and this is where we’re going to collect the card details this is where we’re going to put the um sort of address and sort of that final confirmation before you actually go ahead and click buy so what’s the benefit of using history so history. push is a good way so in some areas you see us using the link to component and that is a really good sort of way of getting a link I guess right but if we want to programmatically at any point push the user somewhere yeah then we can use the history. push to do so and this allows us to keep the styling of the button whilst having that redirect okay got it beautiful yeah now if we don’t actually go ahead and have that it would actually change the styling and it would kind of look like a link which we don’t really want right I see okay yeah so in this case history. push payment now what we can do is if we can go ahead and click on proceed to check out all right to boom done okay so so what just happened there guys is you can see at the top of the screen at the top of the URL it says for payment now right we’ve actually got the title in front of it a little bit kazy um title where yeah there we go yeah we got that just covering a little bit there we go so it says for/ payment at the top guys and in that what we want to do is so now that’s actually that did direct to Ford SL um payments so what we want to do now is the reason why we see the homepage is because if there is no route that matches for/ payment it bu default Falls to this route by default falls to the for slash route okay now we’re going to introduce that route we’re going to introduce the payment route so we’re going to go ahead and say payment and payment at this point we’re just going to go ahead and say H1 I am the payment oops I am the payment route like that save it and now you can see I’m the payment route okay so Kazi let’s hit the Amazon logo let’s go through that flow one more time to make it super clear all right now basket proceed to check out I’m the payment room yep nice okay so now we have some to It also says SL payment yeah it also says SL payment exactly so this is why we render out the header and this at this point okay so now what we want to do is we actually want to go ahead and create that component okay so here what we’re going to do is we’re going to create a payment component so we’re going to call this one the payment and this is essentially the payment page and what’s the payment component so let’s go to this page over here this is the deployed one yep so this is not the page we want if we go back to Amazon so click on yep add a product okay and then click yep and then click proceed so this is the page that we’re building this is the check payment SL checkout we’re going to call ah this is what we’re going to build yeah so we’re referring to this guys as the payment component okay so I’m just going to write that down right here because I think it’s going to be important payment component so that entire thing is payment component right yeah our face is covering a little bit but it says payment okay there we go so yeah dope okay cool got it now um a few people are saying can history be used instead of link you can use either all um is really going to be uh it’s got more use cases um because link it again it translates it to an actual link sometimes we don’t want that sometimes you want to keep a button have the button functionality but only have it redirect so that’s the reason why you might want to do that so yeah we’re going to be building this payment component so let’s go ahead and build that so I’m going to go ahead and add in let’s put our camera back as well kazy so payment. JS and we pop in now we should be inside of payment. JS right now there we go RFC this is our little snippet trick there we go and now we’re going to do class name of payment oops payment here we go and we are going to have at the top import payment. CSS for any styling okay now inside of payment what we’re going to do is we’re going to have quite a lot of stuff that we need to go ahead and build inside of here so a lot is going to happen here um we’re essentially going to have inside of the payment a div okay and this will make sense once we finish it off but we’re going to have a div it’s going to say div class name payment container right and this container is going to contain all of the um checkout information all of the review items and delivery so Kazi just for reference now let’s go ahead and pull up the main app okay dope let’s do that so we’ll go over here to the deployed app yeah so here you can see we’ve got the delivery address we’ve got the uh uh the items um and then we’ve got the um payment method right all right so let’s write that down so we can visually break it down so delivery address is that’s going to be like a separate thing right yep and we’re going to refer to one of one of those things as the payment section okay so that’s going to be a payment section uh so payment section which one is that payment section delivery address got it okay right then we’re going to have another payment section and that’s going to be the uh reviewing the items uh and we’re going to have another payment section and that one’s going to be the actual payment method okay and they’re all going to be styled in their own way that’s why we’re breaking it down like that right yeah we’re actually going to uh have one div called pay section uhhuh and we’re going to reuse it each three times got it yeah dope okay nice uh so what we’re going to do now is we’re going to have a div and it’s going to have a class name of payment section like this um P section and then this should auto complete there we go and then what we’re going to do is I’m going to have three of those so I’m going to have have one two oops one two three there we go okay then here in payment section now what we’re going to have is a uh a div with the payment title okay now the reason why we’re going to have two divs now the payment title and the sort of um the next div is because we want to have one element on the left one element on the right so here I’m going to go ahead and say div and we’re going to say class name equals payment I love that comment by the way just gonna side note and he goes drone goes you guys provide such a huge value not just to developers but to the global economy as well you teach skills to people across the world who use them to make their lives better that’s actually really awesome I never thought of it like that this would actually make an impact on the global economy that’s huge yeah exactly crazy yeah yeah you never really think of it that way yeah yes um awesome so now we are we are going to close this off and we’re going to drop a new line Thank you so much Subzero for that said love this tutorial you guys are great completed the Spotify and Amazon clone nice dude keep going that’s sick awesome so inside of this payment title we’re going to have a H3 tag which is going to be the delivery address okay we hit save on that and what’s it saying payment is not defined okay so app inside of app we need to go ahead and import payment so let’s go ahead and say import payment from payment like so let me save it and then we have what that okay then we need to make the payment. CSS so payment. CSS file and we create that and we should hop into that any second there we go so now in payment uh oh sering Cowen came in again dude you’re always on these streams love that says you guys have revolutionized the whole learning experience to a new level to everyone thank you J Shawn of react and papa python oh damn I don’t even know who J Shawn is but thank you saring that is amazing that’s dope dude thank you so much wow thank you okay so with that we’re going to now we got the delivery address um and then you can see it’s popped in on the screen and then we’re also going to have another div and this is going to be class name and this one is going to say payment address so payment address okay now if you guys are already sort of understanding why we do B let me know in the comments if you enjoy it I think I’m personally a huge fan of bem and I find it like simplifies everything and makes it super easy to understand here we’re going to have a P tag and we’re going to have the users’s email okay so I’m actually going to put the the users’s email here so we need to actually go ahead and pull that from the data layer now the way we do that is we go into the uh line below the function and we’re going to say const like so and we’re going to pull the basket and the user from the data lay um and the you uh we need to then import this special hook that we created before so loads of people saying really enjoyed bam I never did B before I really love it now um oh awesome okay nice really really nice so let’s go ahead um so here we have the P tag and now inside of this P tag guys we’re going to have the users email so here I’m going to say user email and I’m adding the optional chaining to protect it in case the user is undefined okay for any reason Tonio Cortez dude just dropped another donation 999 thank you so much s thank you that is huge thank you so much massive massive thank you well then going to have two more P tags we’re going to have two P tags one saying one 123 react Lane and one which says Los Angeles California now in today’s build we’re not going to actually cover the addresses because this is going to be more of the fun functional side as to how you process a payment that’s much more important at this point than getting the address down so we’re going to skip over that so we have this to begin with okay so you can see on the right hand side now the delivery address the name one 123 react Lane and the uh addresses popped up okay now what we’re going to do is we’re going to have another payment section so this second one and we are going to go ahead and pop this in here and in here guys we’re going to have the payment title again so the same thing we done up here payment title so you see we’re reusing the class name now that’s actually going to help us out quite a lot um later on when it comes to styling because it means we only have to write one thing uh once and it will be reused we going have a H3 here so let’s go ahead and do H3 like so and it says review items and delivery okay so review items and delivery and then we’re going to have another div underneath this so underneath this right here we’re going to say and this is going to be inside sorry we’re going to say div and this class name is going to be the um we’re going to change this one to payment oops class name equals payment address uh payment item sorry going to be the actual items in the order right then we are going to go ahead and do um so this is where all the products are going to show right so all the products that we want to sort of have uh all the products are in your basket now typically some people might actually go ahead and rewrite the code at this point but why do we need to do that when we can just reuse some components this is why we love react and I’m going to show you how to do that so we pulled the basket earlier from the um data layer at the top so we can see we actually pulled it in over here so now we’re going to go back down go ahead and say basket do map then we’re going to say for every single item inside the basket I want to return the checkout product uh component this is the component that we saw earlier and basically what we’re going to do is we’re going to pass in the props for that component here so I’m going to go ahead and fix this right now there we go so we’ve got the the ID is going to be the items ID title is the item title uh image IM item image and so forth so we’re going to use this as the props now this means that whatever we had inside the basket is going to get shown on the screen in that very nice sort of reusable approach and also this means that it will have the removed from basket functionality okay um oh yeah fley said Papa react for your information you could just type dot class name and then hit tab I actually found that out today that’s such a cool tip as well I usually write div dot when I’m doing emit trick but you can actually write Dot and the class name and it will work so thank you for that um uh flute Cod says can you move to the header so we can see the tabs um I’m not sure what you mean at this point yeah so that’s the that was the homework um nice so we are going thank you guys by the way people are noticing my new glasses cuz my girlfriend by mistake stepped on my previous ones but you know these are clean match my shirt they match their headphones as well yeah purple headphones but yeah matches it but somebody did notice I like I was noticing you do match your shirt matches your headphones oh yeah exactly yeah I like matched only day you get the white headphones you wear the white shirt yeah I thought would change it up a little bit clean nice now it’s it’s either black or white guys you know me keep it simple um so now we have the payment items and here it says checkout product is not defined so need to go ahead and import check out items so let’s go ahead and do that so check out items is actually do I pull that in um check out product sorry yeah yeah there we go now we’ve got that inside and and guys is that distracting at the top or is that actually helpful if the step is distracting I’ll remove it so just you know this in the comments you can just say remove it if you guys like it then just say like cake yeah so somebody said the ongoing task head is disturbing the view a little bit maybe we can make it a touch smaller I think okay one second I’ll do that yeah there we go because then that way they could see the active tab maybe yeah Al a lot of people said helpful I like it um some people saying remove it I think maybe just a smaller version yeah and then that that might be okay A lot of people are saying remove all right gone you guys uh nice so now what we’re going to do is we uh Co if you go ahead add some items to the basket we can show what we just built here holy crap I never thought it was going to be this terrible of an idea Jesus wow really yeah damn kindly remove keep it going it’s gone it’s gone guys thank you it’s gone nice don’t worry now they’re just kicking now they’re just kicking us while we’re down let’s go ahead and add some products to the basket so Amazon yep okay yep add some products to the basket and then go ahead and hit the basket icon and yeah and we click on proceed to check out yep now you see what happened there nice reusing the component that we had in the checkout page here and all the remove from basket buttons work as well oh so if you go ahead and click one the remove from basket buttons boom we get that functionality in this page as well so you see once you build something correctly once it becomes so easy to then go ahead and save yourself some time and this is why it’s important to write good code as opposed to code that just works okay now let’s go back to the next section which is the final payment section which is the payment method okay so the payment method we’re going to have again a payment title div and and a H3 tag inside of it and here we’re going to go ahead and drop that in right here so just going to increment that there we go there we go oh God damn it yeah so we got payment method and then we’re going to have a div called payment details here so payment details like so okay now here is where all the stripe magic I’m going to say for now stripe magic will go okay now let us know if you guys are excited for learning stripe uh Frank says today sunny looks like an actual react god with the white headphones your microphone is buttery smooth hey thank you dude that is round of applause hey the white headphones yeah you look like a freak Angel oh man thank you so much Frank so this is where the stripe magic will go okay Stripes really powerful guys you can actually do recurring payments as well so you can actually once you get good at it you actually can go ahead and um start doing things like recurring subscription payments and all that sort of stuff so really really good skill to have now by the way some of them are really cool some bills are really really cool so n just found one and this is pretty epic so take a look at this somebody just like built Amazon and just like look at how slick that is dude dude what’s his name damn insane dude and it’s on versal which is pretty clean nice that’s awesome uh manav aora says your birthday is coming suay yes it is coming when 27th of September ooh 27th of September Sunny’s birthday okay all right we got you all right so now let’s go ahead and firstly let’s style everything before it gets to the payment details let’s make sure everything looks good make sure everything looks nice and then we can get into the juicy stripe stuff okay so let’s go to our payment. CSS and I’ve got that up here and what we’re going to do is we going to go ahead and open up payment. CSS on the screen there we go now what I’m going to do is for the first payment container I’m going to go ahead and Target and say payment and I’m going to make the background color white okay so the background color is going to be white and there we go and then I’m going to Target the H1 inside of the uh payment container so that we’re actually referring to the oh we didn’t actually add it in here so under on before we actually hit the first payment section I’m going to actually add in the following here so let me go ahead and dude David just dropped in the chat he goes sure sm7b the mic that you and I are actually using right now and he goes That’s the mic that Michael Jackson he used to record Thriller with it no way I didn’t not know oh damn no wonder why it sounds C be smooth as well yeah I mean I use it because Joe Rogan uses it yeah I mean like kazy told me to use it and I was like are you sure we need it and now I’m actually using it it’s like wow you’re like are you sure you need it this thing is like it’s like Crystal yeah all right if you guys got the joke drop it in the comments left me hang as well for $5 oh I see hey round of appla [Applause] nice other donation thank you so much for $10 damn thank you uro Jose I actually saw your homework as well so that’s awesome as well nice dude um let’s go so we are going to add in this this H1 right here now it says a link is not defined so what I actually did here was we have a checkout right so we have a check here what our tour said by the way that’s pretty dope he’s like I have uh 3 hours of sleep from the last 3 days going this and my full stack boot camp so he’s doing both and I love what you guys are doing thank you so much awesome thank you dude so here we’re going to go ahead and we’ve got a checkout uh piece of text and then all it is is it’s an embedded sort of Link which says that the link is to the checkout page and it has the basket items so it’s going to say like checkout and then in bracket it’ll say like two items or one item and if you click that text it will actually take you back to the checkout page which is kind of intuitive it’s very nice now in order to actually use that we need to go ahead and import from the reactor root Dom so let’s go ahead and do that and we may need the use history but later for now we don’t need it okay awesome so now what we’re going to do is save this and we should see that everything look at there you go so it says zero items at the moment and that looks like a link we’re going to fix that in just a sec but first we’re going to Target the payment container and we’re going to say the H1 inside of it should have the following it should have text line Center padding 10 pixels uh font weight of 400 and background color of gray and then we’re going to say border bottom as such okay now I’m not sure why it’s not finding payment container there we go so you can see it centered it and that looks pretty clean and we also gave a border bottom of light gray right so we’ve got that checkout in the middle of the screen now the next thing we’re going to do is we’re going to Target that anchor tag so the one which where it says the like two or zero items and here the way we do that is we say the following so we go ahead we target it and we say payment container the H1 inside of it and we’re saying Target the anchor inside that and the text declaration To None now what we’ll see is the underscore goes right so the underscore goes ahead and gets rid of that so that’s going to save you a bit hassle next we’re going to do we’re going to actually use some cover flexbox stuff right now okay so the payment details um we’ll come back to that in a second for the payment section so let’s go ahead and Target the payment section so I’m going to go ahead Target the payment section which is each of the those individual sections so we’ve got the delivery address the review items and so forth I’m going to go ahead and say display Flex right so as soon as we do that we should see it kick into action there you go so you see the delivery address and its information went into a row and then we have some padding margin and a border bottom we’re about to drop in right now so there we go Okay so we’ve got that dropping in save and it will look a little bit more clear see you see it spaced out a little bit so we get a very nice um spaced out situation now so everything isn’t so scrunched up now remember every single one had payment title so I had payment Title Here had payment title here and had payment title here now when you’re using Flex you can basically say for one element to take up 20% or one element to take up 80% so here I’m going to say the title should take up 20% okay so we’re going to say the tit should take up 20% and uh if we save that now we should be able to see the payment title should now be taking up 20% and then the payment address should take up 80% okay so the payment address should take up 80% so let’s go ahead and fix that there we go save it now you can see it spaces itself out so the address section is going to take up 80% always regardless of what screen size and the delivery address is only going to take up 20% now we’re going to go ahead and Target the um the items we’ve done um yeah so now Kazi let’s go ahead and add some items to the baset all right so I’m going to go here boom I’m going to add this one this one this one and I think that should be pretty good going to go boom okay now what am I doing uh proceed to check out all right done ooh that looks clean bro you see it’s starting to look clean right we got a really nice looking design right here and you can start to see everything sort of pop in in the way that we want it to pop in um so if we make the screen a little bit bigger kazy we can see that it’s quite responsive so as it gets bigger it’s going to use up uh some of the screen real estate there we go see looks pretty good um looks really good bro yes we’ve got the items we’ve got the uh everything that we need oh and also we need to change the uh so the reason why it doesn’t it looks a little bit off right now that’s because the um payment items needs to also take 80% so here what we can do is to make a rule of attach both we can say comma we can say the payment items and the payment address should take up 8% now if we do it kazy we should see an equal split so if we make it bigger now all right there you go nice see now everything’s in line there we go y yeah that looking beautiful a bit strange before and now it’s like everything is in line looks a lot more Amazon right yep so with that said now we’re going to get to the juicy stuff guys [Music] so this is where we start learning about stripe so if you need to have some water stretch out stand up get ready because this is where we get into the juicy stuff okay this is going to be the most sort of technical stuff that we probably covered in thein 3 days and it’s going to be some fun Cloud functions Firebase all of this stuff is incredibly valuable to learn hopefully you guys have fun yeah I had a ton of fun figure this stuff out exactly yeah really really going to be some fun right now so let’s go ahead and start so inside of check out um not checkout sorry it would be inside of app.js so let’s go back to app.js now what we need to do is we need to install some dependencies now in order to get that special card captur in element right we need to use something called stripe uh so we need to use some stripe modu when you say card capturing you mean like when I pop in my credit card details here something needs to be able to handle this right yeah so we didn’t actually write the code for that we use something which is provided to us from stripe and they capture your details yep okay it’s a stripe library right yeah exactly do um so Goin Shan mugam says Cloud functions are free to use I remember like ear you said it was paid so in order to use cloud cloud functions are free but what you’re going to need to do is put a card on your account now trust me guys it’s free don’t freak out like I’ve done it a million times you just put you upgrade your Firebase plan to blaze so it’s in the bottom left it will show you how to go ahead and do did for even our you know the notifications that we get for our business Revenue every single day we use the Cloud function to run it but you basically put on a b Blaze plan and it’s not going to charge you yeah it won’t charge you yeah definitely won’t charge you it just allows you to then make outbound API requests that’s all it is yeah um nice and uh yeah and stripe gives you like a a testing key so you’re not going to actually be charging the real code like the real sort of money um you just swap out the keys and then you can actually start building your and if you guys are excited and you want to build stri functionality into your app and you want to become a react developer smash that like button if you’re watching this on YouTube and also if you’re watching this on Facebook guys exactly smash that thumbs up guys that’s you know we we work really hard to put this together and that does us a huge favor because our biggest goal is to help 5,000 people get jobs as developers and by you just hitting the like button doesn’t cost you anything it’s free but it literally sends out the video to so many people and it helps helps change so many people’s lives so you are in effect changing people’s lives by just hitting that one button and it turns blue exactly thank you guys broke thank you nice so with that said guys we need to install two dependencies into our project so let’s pull up the terminal all right let’s go nice and then let’s go ahead pull up the terminal why is not pulling up all right there we go yeah all right nice so I’m going to get uh some access to this uh request read and WR there we go nice so guys what you want to do is do mpm install and then you want to do this right here so at stripe stripe DJs right so this is the first dependency we want to install this will allow us to this will allow us to pull in stripe into our app and the second one is going to be something slightly similar named but it’s slightly different you need both of these to get the app working okay so we’ve just gone ahead and installed the first one the second one is going to be mpm install and then it’s going to be um app stripe react stripe.js so you want to make sure that you get that down hit enter and then that will start in installing right now the next step is we actually need to go ahead and create a stripe account okay so um kazy have you got a spare uh email that we can set this up with or if not I’ve got um I’ve got one that we set up with okay let’s do it with yours that’s fine I can’t remember a spare one I have okay so what we can do is um let’s use the cover and yeah just don’t use your real card information for the stripe just for the stripe just and you know you’re going to just use something like 42 42 42 that’s going to be a test account but when you’re getting the blaze planned from Firebase you’re going to need to put in your actual card all right so what’s what’s up Sunny also just want to mention Willie Rosa hka says it’s not necessary a blaze plan free plan has card functions yes for plan has card functions but you’re making an outbound request to stripe and in order to do that you have to have the blaze plan okay so I just want to clear that up cuz that’s going to stop a lot of people and it’s going to error out so you need to make sure you’ve on the blaze plant otherwise it won’t work okay um and if you don’t uh want to do that then you can always do an Express server but I wouldn’t recommend that i’ recommend just upgrade to blaze it’s free Okay so let’s head over to stripe kazy all right Stripes website yep got it all right so I’m on stripe.com nice let’s go ahead and hit sign in landing page is clean it’s gorgeous right wow that is a clean landing page wow they done it super clean dude oh man that is just beautiful to look at yeah they’ve got some crazy front end developers I want a we got to have a front end page like this so beautiful kind of like apple though Apple’s landing page always blows my mind God damn this is so beautiful dude just all right so where do we want to go sign in MH all right now what we want to do is yeah so you want to make sure you’re on the um input so is the can you see the username password field um yeah I email and password right I’m there right so now show the screen uh okay yep and hit the uh don’t have an account sign up by the bottom click that yep all right I’m going to click sign up boom y now here guys you want to make sure yeah so just double check before it’s all you know um so make so now you want to add in the your email full name password and the confirm password send me the email you want me to pop in yeah you can switch the screen to us when we do it um but let’s go ahead and use Sunny live uh sunny plus live clever program.com uhhuh and then let’s just go ahead and set up you can fill out the rest of them the details so you guys are just going to need to go ahead and create an account on stripe it’s completely free by the way there’s no card details for stripe so don’t worry about that you can just set that up and it’s very easy very quick all right oh wait password is not strong enough okay oh damn all right here we go okay and we hit over a thousand likes thank you guys all right so this is the filled out version and I’m just going to hit create account right y hit that create account button oh my God bicycles select all squares with bicycles God damn it so Alexandro tuition says can Paypal work trust me PayPal compared to stripe is such a pain to get working sucks it really is annoying to get working I would recommend using stripe all the way yo did they change they changed how stripe looks from the inside yeah so uh don’t move off this page because this page is really important for the people who jump in so this one here yeah they changed the entry page when you sign up so this one’s really cool because look you see where it says get your test API keys where here there click that all right all right I will go ahead and click that and guys it gives you your publishable key now we need that publishable key okay now this is one way to find it we’re going to show you another way to find it in case you need do we need secret key we may do in a bit we may do in a bit yeah on the back end I think we need to see so if you want to click on developers on the left panel so developers on the left yep click that and then here guys you want to click on API keys this is the way that you can always find it so API keys and there we go so you want to copy that publishable key um okay give me one second Jesus I hate when it’s in text mode and you can’t get out of it all right here we go I always find that problem nice you like that that’s what I’ve been doing when I cough oh yeah quick nah nice yeah I discovered that for sneezing hit that mute button sneeze as loud as you possibly can exactly nice all right so we want to copy that publishable key okay got it I’m going to click to copy copied nice now what we’re going to do is we’re going to grab that key go back over to the app so let’s go back to the build right so what we’re going to do now is two special Imports right so we import we actually install two dependencies earlier going to go ahead and pull some things from it so load Stripe from stripe for stripe JS and elements from stripe for react stripe JS okay so that’s awesome we’ve pulled that in the next thing we’re going to do is go ahead and say const promise equals load stripe okay con promise equals load stripe now inside of these brackets we’re going to go ahead and paste that key as a string so KY if you want to go ahead and paste that key as a string all right now don’t worry guys this is something what we call a public key so it’s completely fine to be visible it doesn’t matter you don’t need to hide this or use get ignored for this or anything like that yeah exactly you don’t need to ignore this or anything it’s completely all safe to use that so now we have this promise okay now what this does is it loads stripe up and it stores it into you a promise and then what we do is we go down to we go down to the payment and we’re going to use something called a higher order function now we don’t necessarily need to know too much about what this does but essentially it wraps the payment element so it’s going to be elements um and it’s going to we pass in something called stripe and in here we pretty much pass in that promise okay we just passed in that promise and then we need to go ahead and get our payment cut it and paste it inside of here so now we’ve got the payment element sitting inside of this elements uh component like this so it should be inside the elements right save it and if everything’s good your app will still load your app will still run nothing should be bugging out at this point so Kazi let’s go back to Local Host 3000 and double check that we’re all good y okay all good so if you ran into a problem at this point just go through those steps again and you should be able to get to this again but let’s carry on so inside of payment. JS so in here guys what we want to do is we want to grab a few different things um so remember we wrapped in that element right so there’s two very powerful hooks that we’re going to use and these are as such so these two hooks are the ones that we need to go ahead and write so con stripe equals use stripe and con elements equals use elements and to import that we need to go ahead and pull in the following and I’m also going to pull in a third dependency here so I pulled in the Ed stripe and Ed elements that we used here and I’m also pulling in card element Now card element is something that we’re going to use in just a second and it will make a lot of sense as we begin to write it okay now guys don’t freak out if any of this doesn’t make sense you just to follow along pause the video you guys can do it at your own pace just take your time with this and it will work and you’ll have a full payment e-commerce app so next what we’re going to do is we’re going to go down to the payment section so down here and we’re going to go ahead and create a form okay so here we going to go ahead and create a form as such okay now this form is going to have a card element inside so you know that element that we just pulled in we’re going to go ahead and render it here and this one is going to uh so we got the card element here so Kazi if we go over to the payment page all right let’s do it so pyment yep and then can proceed so here you see nothing is actually showing right now okay it’s not showing the payment container it’s not showing anything um and that’s for a few different reasons but you have to trust the process now okay so the first thing what we’re going to do is we’re going to go ahead and drop a bit of styling in to fix this so we’re going to go to our payment uh into our payments. CSS and add a few Styles in so firstly we’re going to say payment details is also going to have Flex 0.8 so we need to go here and add payment details so payment uncore details so now the three of these things have that style applied okay now you can see that card element has popped in on the screen so on the right hand side can you see that c it says card number oh yeah and the CC yeah I see it it’s got that even nice responsiveness to it as well right boom there we go yeah awesome right so now the card element actually pops into the screen now what we’re going to do is we are going to go ahead and create a um we need to do two functions so we need to connect the form and we need to say onsubmit okay and this one we’re going to create a function called handle submit so let’s go ahead and create that function at the top so we go up to the top we say const handle submit equals it takes an event and it does some stuff okay it takes an event and it does some stuff now here we’re going to sort of do all the fancy strip stuff okay inside the handle submit but for now we’re going to go back down and inside the card element I’m going to do unchange so every time you change that card element we need to go ahead and handle the change so we’re going to create a function called handle change down here we go back up go ahead and say const handle change it takes an event and it does some stuff so when we do a handle change we are essent just going to do the following so we need a so we need two pieces of State we need one for a disabled state so we can disable the button and we need one to be able to set the button error so if there’s any kind of error we need to be able to capture it okay so I’m going to go ahead and create those two pieces of state now one is for disabled and one is for error so I’m going to go ahead and do that now and do that here wait where are you doing this cuz is it showing us okay I it yeah so you’ve got this right here so we’ve got error and disabled so error set error equals use State no and disabled set disabled equals UST State true now this is how you write variables inside of react pretty much so we’re just creating two pieces of state and what we’re going to say here is when we handle like when whenever we write into the card element this is essentially what’s going to happen we’re going to listen for changes inside the card element and display any errors as the customer types their card details okay and the way we do it is you just need to go ahead and copy what I put in here right so we’re going to go ahead and say set disabled event empty so I’m going to go ahead and put a snippet in here so these two lines of code will handle that I say if the event so this event is empty then go ahead and disable the button otherwise if the there is an error show the error otherwise show nothing so this is very important okay it’s very very important and it’s going to allow us to do the next step so now what we do is we need to handle the submit the submit is where all the fancy stuff happens okay um so what we’re going to do is um inside of the is that marabon texting you yeah C she’s on the live stream commenting here as well I was in my focus zone hey yeah yeah she’s she’s there girlfriend’s in the house nice um so what we’re going to do is we’re going to have the price container okay oh wow shout out to Chris I’m going to queue up some sad music over here wow rip rip Chris he’s said I mean Chris is still alive by the way but he goes my computer just fried I’ve been working on this for the last 2 days straight oh my God I mean I hope your computer saves stuff yeah but that would really suck bro yeah I mean say keep saving I mean like you should be saving your files as you code oh man I mean you kind of deserve it if you didn’t save and you come back learn a very very important lesson exactly yeah you need to be able can you imagine that coding without saving godamn oh hard mode it’s like coding with hard mode oh man so now what we’re GNA do is we’re gonna add in Ed state so that it doesn’t bug out and then over here we are going to go ahead and at the bottom we’re going to have [Music] the where we have the card element right so inside this form we’re going to render out a price okay so let’s go ahead and do this so we’re going to say div and this div is going to have a class name so let’s go ahead and do this it’s going to be div class name and this class name is going to be p uh payment sorry payment undor price detail price container we’re going to call it so this is going to be the price container okay now what we’re going to do is guys we previously used something called currency format right I think we used the inside of the checkout. JS yeah no is it checkout checkout product it was sunny by the way are we going to show them how to get on the blaze plan or is that like just assumed were we going to cover it at some point yeah we will be covering it okay got it yeah we’re going to show you guys how to do that so in yesterday’s build we actually added the currency format um so what you need to do is go ahead and go back into the payment component and here guys all we’re going to do is go ahead and add the the following snippet okay so add this snippet in and I’ll break it down for you so there we go and I will check this in and we can explain it so here we have the currency format and remember guys it renders out some text okay so here we’re just rendering out a simple H3 so we can get rid of this um it’s just going to render out a H3 with the order total which is which has some kind of value right that value we are attaching to the get basket total so yesterday that was part of the homework but that’s no longer the case um so we’re going to attach that to get basket to and what that did is remember that was a selector that we wrote in yesterday’s build inside of the reducer and that actually sums up this basket total and allows you to get the sort of value of whatever is in your basket uh then the following so th separate yes and dollars okay so all all good um so Sati sing says sunny did no Jess is no Jess covered in this tutoral yes dude keep tuned and we’re going to pretty much be um yeah we’re going to be covering that with the cloud function so stay tuned and we have that we have a lot of Juicy stuff today so stay on this right so let’s go ahead and import the currency format and the get basket total whoa what is CLP we got nice CRA I think it’s a four I think it’s $4 donation by Matas he goes thank you so much for doing this stuff it’s the first time I use Super Chat because you really deserve it greetings from Chile damn nice thank you International and it’s crazy that’s sick thank you yeah thank you so now we have the currency format so I’m going to go up to the top all these people’s computers are dying like in the chat like everybody’s like my computer died too this happened crashing laptop Nan goes Firebase is on fire frying everyone’s computers literally nice the greatest ever Amazon is crashing laptops and PCs to make sure his dad’s birthday so greatest ever shout out to your dad he’s OG let’s go let’s go dude nice so now we’re going to go ahead and do import the get basket total as well from the reducer nice and then we’re going to save it and then go down and down here we are going to go and check this one second okay yeah so now we should be rendering there we go so we can see the order total so with that said KY let’s go ahead and add some products and come back to the checkout page let’s do it boom and I’m going to add my few iPad pros this Alexa Echo so we got five products here actually one two three four five yep five products and now go to proceed to check out boom nice now let’s scroll down and we can see the order total there is 2,480 I think 2,490 um it’s not it’s actually cropped off on your yeah there we go nice so that’s really clean guys so now we have the order total popping in at the bottom right now that order total is actually important for later as well that’s why we went ahead and built that now um so once you’ve got the currency format done underneath that we’re going to have a button okay now so here we’re gonna have button like this and inside this button we’re going to go ahead and say the following so the button is going to be disabled based on the following states okay we’re going to say if for any reason the button is so we’re going to have three variables and I’m going to set these up in into in a second we’re going to have processing we’re going to have disabled which we actually already have disabled and we’re going to have succeeded right succeeded so these will this will make sense in just a second um but basically we’ve got this button State dude I love this by the way so just want to highlight this real quick uh the greatest ever says my dad says thanks LOL he’s smiling so much cuz he knows how crazy I am about this channel even though he doesn’t understand it LOL nice that’s awesome dude yeah happy birthday to you Pops nice this is a family man team CP is a family so you’re either in the family or you’re not exactly all right so Theon we’re I hold on one second I think I’m going to connect my road it’s disconnected just give me one second but keep going so hey guys we’re going go ahead and processing say processing right I want it to say processing so I don’t want it to say the actual um the the buying Now text I kind of want to block and say processing because remember oh God remember when we uh it’s processing the button going to be disabled so when it’s processing I want to sa processing otherwise I should be good now right am I good yeah we good dude nice beautiful what kind of weird freaking crap keeps happening dude damn it I know like literally just with this challenge Jesus Christ this is not a challenge for any of them it’s a challenge for us literally is oh my god oh man so now we’ve got this span which says if it’s processing say processing otherwise just say bu now Okay so go ahead and save and what we need to do now is processing and succeeded aren’t actually declared anywhere so we need to go ahead and introduce those pieces of state so the first one I’m going to introduce is succeeded so let’s go ahead and import that add that in here sorry succeeded and the second one is going to be processing uh processing so this one right here so we’ve got con processing equals set processing and that’s going to be some use state and then what we have is we have all four set up now so now we have um okay let’s save it now KY if you want to hit Refresh on the right side on the Local Host all right boom yeah nice want to hit yeah there we go and then so now what we can see is that button says that which says buy now it’s actually disabled right so it’s disabled um awesome so with that done now we’re actually going to get to the juicy part right so underneath it what we’re going to do is outside of this div whenever we have an error we already have a piece of error an error piece of error state so inside the form but outside the div we’re going to have this line of code so it says if there’s an error only then show the div with the error in okay so that’s just a sort of like safe and it’s going to allow you to sort of have some um some error sort of message on the screen if there’s anything wrong with the card for example the card number or anything like that it will pop up at that point so now we’re going to implement these two things the handle submit and the handle change and they’re going to be the most important things for you guys to get this working so we’ve done handle change so handle submit is where we are going to focus now so whenever you so let’s say you add in your card details right add in your card details and I’m going to change this to event to make it more explicit and this is also going to be an asynchronous function so we’re going to go ahead and make it async okay like that now this is where we do all the fancy stripe stuff so here I’m going to say event. prevent damn the greatest ever is like guys this is the first time you can even tell Sunny is feeling it this is such an incredible build God damn it I wish you guys all the greatness in the world this is incredible nice yeah I am dude this is like an exciting honestly getting like this cuz this is a full stack sort of build right now so we’re going to have some payment stuff we’re then going to create a cloud function deploy it connect it all and it’s just going to be amazing guys it’s going to be amazing it’s going to be crazy when this works right so we’ve got event. prevent default and this will stop it from refreshing because we don’t like refreshing here what we’re going to say is set processing to true so as soon as you hit that enter it’s going to block you from hitting the enter button uh the button again because remember button is disabled based on processing or disabled or succeeded so this will actually go ahead and block you so we’re going to go ahead and say set processing to true that will stop them from basically clicking the buy button like five times they’re only allowed to click it once and it’ll block okay now what we’re going to do is this is where the sort of magic happens so we say const payload so const payload equals a weight and then we need to import stripe so I’m going to write in stripe and to get stripe what we need to do is import it from oh no we don’t need to import remember we use that used stripe earlier so we actually have stripe available and it’s connected based on that stuff that we did earlier so now what we’re going to do is we have a weight stripe and then what we do is we say confirm card pin P okay so actually before we do this there’s a pre-step to this okay so I’m going to just quickly go ahead and um yeah I’m going to quickly go ahead and carry on the first step actually so before we do any of this right so before we actually crunch the card make it work we need to do something beforehand and this will make a lot of sense okay so on once I explain it so we need something called a client secret so whenever you have any payment processor or any payment platform you actually need to basically tell stripe that right I have a payment that I want to send to you and it’s going to be of like $50 uh can you please give me like a client secret that I can then use to run by the card right without that client secret we can’t actually do that we can’t actually go ahead and say stripe here’s a $50 sort of transaction that I want you to charge so we need to get that client secret so we need to First make a piece of State for it so we’re going to go ahead and say client secret client secret set client secret like this right and then what we’re going to do is we’re going to use a use effect now use effect as we all know is a piece of code which can have some dependencies um so it runs when the payment component loads as well as when any of the uh variables inside these brackets change so in this case the dependency will be when the basket changes because what we’re going to do in inside of here is we’re going to generate that client generate the sort of let’s call it the Special stripe secret right which allows us to um charge a customer right so let’s just say this so it’s the special stripe secret that’s going to allow us to charge a customer but whenever the basket changes we need to get a new secret right because we need to tell charge that uh we need to tell stripe that it’s no longer $50 that we we’re charging but now it could be like $30 because you took off That Lean Startup book okay so now what we do in here is we say const get client secret okay get client secret and here we need to make it an async function so it’s async and it’s as such and then we are going to call that afterwards so we’re going to say get client see and then afterwards we call the function that’s how you run an async function inside of a use effect in case you’re ever wondering and then what we’re going to say is const response equals await axios right axios so at this point we pause and we need axios okay so we need axios before I can write the next piece of code so axios is a way of making like requests so like we can make a post request a get request or anything like that in this case what we’re going to do is we’re going to go over to our files and let’s go ahead and create a filei called axos JS let’s just so it’s very clear so that they can see it we going to create a file guys called ax. JS yep nice a tojs all right now in here what we’re going to do is first thing we need to go back to says pop up our terminal so command J and here we’re going to do mpm I and it’s axios so we need to install axios so axios is like a a very very popular fetching Library um so you can fetch you can do Post requests allows you to interact with apis very very easily so while that’s doing it we can actually go ahead and say import axios from axios and then we’re going to say const instance equals axos do create and then what you need to do here is actually create an object inside right inside you base URL okay base URL it’s actually Capital URL and then here we basically need to put in the URL of our API okay now at this point we don’t have an API we don’t have any API set up we’ve done no Cloud function work nothing like that so at this point I’m just going to say export default instance okay so at this alandro asks why do you prefer axios over JS fetch API it just makes things easier but you can go into more detail if you want yeah so it just makes things easier and it also gives you this um easy way of adding a base URL so the base Ur is a really nice sort of touch axios does I think you might be able to do that with the base um JavaScript fetch API but at this point exos is so widely used that the chances are you’re actually probably going to run into it on professional environments so most the tutorials when you look up for react will be using axios and most of the articles that you’re looking at are help so I think it’s good to just pick it up with react yeah it’s definitely going to be good definitely so this is going to be where this is where we have the API URL okay so the API in Brackets I’m just going to write the cloud function right Cloud function URL so we have to still build this so we’re going to save this going to go to payment and now we have this await axios right now here what we’re going to do is we’re going to prep everything up right we’re going to prep it all up and get it all ready and then we’re going to go ahead and create the back end to support it so here we say away axios and we pass in an object here and the method is a post right because we’re making a post request and the URL at this point we’re going to use back ticks to do string interpolation I’m going to say SL payments SLC create this is a URL that we’re going to create and then create afterwards we’re going to pass in something called a query parameter so it’s going to have a question mark and we’re going to say total cuz I’m trying to pass the total amount of the basket to that API so that we can actually go ahead and charge the customer so here I’m going to say total equals and I’m going to do some string interpolation and here I’m going to say get baset total and then I’m going to pass in the basket and that’s how we find the basket total now stripe expects every um total or amount in um when we’re when we’re coding um so a lot of people are saying they can’t see at the moment kazzy I don’t think that’s correct I think you guys can see oh right they can’t see oh you’re not following me oh crap yeah so guys I’ll run through that again um so here we have this is what was written so con that’s the entire thing that was written right there’s nothing more yeah it was just this guys it was just this bit right here yeah so we we previously had a we axios holy everyone’s like oh my God I can’t see it the Panic yeah the Panic is real all right so now guys it said away axal and we basically created an object and inside it we said method post okay and then URL and here we have back ticks and it’s basically saying forward SL payments right for SLC create then we’re saying total okay so total and then this is question mark total because this is something called a query pram right then we say equals get B get total like this right now so we’re passing in the total now something to bear in mind right I’m going to write in a comment here stripe expects the total in a currency’s subunits which means that if you are using dollars it expects you to pass the total amount in cents if you’re using pounds it in if you want to say $10 like you really have to type in 10,000 yeah so what we’re going to do here is we’re going to times it by 100 okay that’s how you get the and it depends if you’re using like rupees you’re going to have to find out the sub currency and use it so this is why i’ would say stick to uh dollars and just do it like us so we built over with dollars um and yeah and you just times it by 100 to get the sub currency okay um whoa dude grab let’s pull that up on the screen wow thank you so much for a $20 donation you go was welld deserved great content anybody dare to match this amount or do more damn this guy freaking calling people out let’s go starting a donation W yeah like a all out donation like freaking war and he’s like a knight leading it thanks Gabriel appreciate you brother thank you so much dude thank you right I’ll match you get basket total times 100 to get the subunits now this essentially creates that um so it goes ahead and we’re going to basically once we set up this endpoint we’ll be able to call it and we should get some kind of response okay the greatest ever just comments he goes Frank is coming dot dot dot Frank’s just going to come in swinging holy you don’t want to wake up Frank nice so now what we do is when we get that response back that response should have the client Secret in right now um a few of you asking what this times 100 means again it means the currency subunit so if you’re doing dollars it changes it into cents and so forth okay yeah and also guys if you for questions we’re going to do a full-on Q&A at the end so if you have like deep questions instead of copy pasting them over and over again we see them we just are not going to answer all all of them right now but at the end of the stream we’ll answer all your questions so make sure you’re in the Q&A section at the end exactly make sure you’re in that section at the end right awesome so now what we’re going to do is we’re going to say set client Seeker all right because we get that secret back and we’re going to go ahead and say response. data. client secer now you might be wondering where the hell is this coming from it will make sense once we build out the back end okay so this will make sense once we build out the back end so with that said now what what we just wrote here essentially says whenever the basket changes it will make this request and it will update the stripe special stripe secret which allows us to charge the customer the correct amount this is a really important snippet of code guys like I can’t stress this enough if you don’t get this snippet right things will start to wrong things will may break like please please please take very good care of making sure you write this correctly okay so this a very very important snipp it um so once we’ve done that now what we’re going to do is we are going to go over to handle submit now inside of handle submit we are going to go ahead and say con payload equals await stripe and then we’re going to say dot confirm card payment so confir confirm oh confirm card payment okay then we’re going to say we first pass in the client secret right so we first pass in the client secret like this and then the second argument is an object and inside that object we pass in something called payment underscore method right now the payment underscore method takes an object as well and here we say card and the card that we use is we say elements do get element right and then we actually pass in the card element right so this is all stuff which we’ve imported um previously at the top and the card element is actually the thing which rendered at the bottom of the page so you saw it down here and we imported at the top of the page up here okay and then the actual elements that we saw earlier was actually pulled from when we did this elements equals use elements okay so with that said now we have the uh confirming the card payment and what this does guys is it uses that client secret now this client secret is going to be the important part because remember guys this is how stripe knows how much you charge the customer I got a secret for you go here we go check it out fire cut Clips goes a billionth times thank you for advancing my career and also I got a job of react JavaScript because of you guys thank you nice dude I never forget you in my life damn let’s add that to the list of the 5,000 developers dude holy crap and somebody came in hot with a $20 donation and now we’re officially over $200 in donations today thank you guys so muchan thank you so much guys that’s awesome dude wow nice so that is awesome we’re getting closer to that 5,000 go every day guys that is really cool to see right Gabriel is like now we’re talking somebody just matched him nice Gabriel Graves has got the got the sort of the rally going you know yeah all right so here we confirm the car payment the client secret is essential right so it’s going to be essentially how stripe knows how much we’re going to charge and that sort of stuff the payment method is the card and then we go ahead and find the card element with this code okay so that’s really really cool then what we’re going to do is we’re going to say when that’s finished so after this we say dot then because this is a promise then we say something will come back right and it what was going to come back is going to be the payment intent now what you need to be careful about here guys is this is the sort of uh the response comes back okay but we need to to destructure it so we’re going to destructure it with the curly braces and we’re going to get out the payment intent right now this is this is what stripe call it so don’t get confused by it it’s just nothing extremely complicated or anything it’s just basically it’s the payment sort of confirmation think of it is that the payment confirmation okay now the payment attent okay so this is essentially I’m going to write it here so payment intent payment intent equals the payment confirmation just think of it like that okay payment confirmation and that will make it a little bit easier right now um what we do then is we go ahead and say if that was correct and everything was good then we’re going to go ahead and say set succeeded set succeeded to true because the the transaction was good set the error to null because there was no error set processing to f as well because there’s no nothing going to be processing anymore right so remember at the top in the beginning we set processing to true so we need to set processing to false and then what we’re going to say is history. replace we don’t want to push because we don’t actually want people to come back to the payment page after if they press back on the keyboard otherwise you get them in that Loop and it doesn’t it’s not a good user experience want to throw them over to the orders page so the orders page is going to be like where your orders show after you place an order okay now what we’re going to do now guys is we are actually going to go ahead and build out the back end to support this right so we made a few different uh API calls here we have this API call which is powered by AOS and the base URL was the cloud function URL which we are yet to write okay so if you guys are pumped up about Cloud functions let us know right now because we’re about to teach you guys how and we will push this code to get Hub afterwards so it’ll make it very easy for you guys to go ahead and follow along and and check what we did um but if you’re excited for this let us know right now because we’re going to go show you guys how to build a cloud function now somebody said why not push history. push why not history. push because you don’t want them to come back to a payment page whenever you’re doing payment stuff you don’t want them to come back to the payment page afterwards if they go back on the browser so instead you swap the Page by doing replace okay so we got loads of people saying they’re pumped go go go this is sick nice okay so now what we do is we go into our terminal so let’s pull up our terminal Cy all right right this is the juicy stuff guys this is where essentially yeah this is where we essentially go ahead and build a full stack application okay yep um somebody says you didn’t import use history hey good catch dude yeah Daniel [Music] Sol that was that’s dope dude hopefully my pronunciation is perfect we’ve also got some other things which we haven’t imported like use effect uh we’ll fix that in a sec we’ll come back to this anyway afterwards so we’re all good um and even axio oh yeah so axio import axio live coding man this is insane I can’t wait till we are doing actual inperson events which once this whole Co thing is done we will be that’ll be insane honestly it’ll be insane guys I cannot wait for that so this guys is not pulling from our the normal axios is pulling from the local file axio so make sure you don’t do that and then the final one says unexpected use of history and what line is that kazy um what oh I see f uh line 53 col 13 boom right the reason why that happened is because we need to set up the history so we say con history equals use history like so okay and that will actually go ahead and get rid of that last error nice so we’ve got the terminal up guys let’s jump into Cloud functions okay so here we say Firebase in it okay now here I want you guys to pay close attention right so here we this list pops up we’re all familiar with this list but now we’re going to take the functions one so I’m going to click functions with the space bar and then hit enter on the keyboard and then this will pop up and it’ll say which language JavaScript or typescript we’re going to go ahead and do JavaScript today uhhuh so I’m going to enter on that um enter sorry and then it says do you want to use es link to catch probable bugs we’re going to hit y for yes es L is quite cool you want to install your dependencies with mpm now we’re going to hit why and do yes oh I like it even makes a get ignore for you yeah exactly now something to know now guys you have your front end right so you essentially have your front end which is essentially going to be the react app so it’s everything inside the source folder is your front end app now what we have is this functions folder so kazy let’s open up the fire directory right so you guys need to really kind of think about this carefully now so we have the source which is essentially the entire app okay that’s the front end app now the functions hold up one second I’m going to help you out here visually so this is our yeah so that’s going to be the front end okay so that’s the app right then we have the functions folder now the functions folder is essentially a full back end like I’m not joking guys this is not like some little like toy or whatever I see people saying what about man stack this is a full back end what we’re doing right now okay yeah there’s a full back end inside of that functions folder okay now and it’s going to be insane what we do here guys because it’s really really going to blow your mind and there a power what we’re going to do here so now we’re going to go and do CD into functions so we CD into functions and you can see now we’re inside a function fun which also has um it says it has a a get but you can see now if you open up functions Kazi all right so functions has its own node modules its own package Json its own Index right so it’s essentially another project inside of your project okay so try not to get confused here but if you do mpm install at any point now make sure you are inside the functions photo okay because it has to be inside the functions photo right otherwise you’re going to end up installing things into your app and not your back end right because functions is the back end app source is the front end so that took a lot of time for me to figure out when I was first learning this stuff make sure you guys pay attention to that because it will save you a lot of making a lot of sense now yeah and the real CP family is sticking it out out with us and uh the greatest ever was like yeah I remember when you were like the real developers or the people who are going to become real developers are going to stay here and the number is going to keep dropping off and look at that the number just keeps dropping off on Facebook it’s almost like nobody left I think it’s like hundred something people but it started with over a thousand but this is what it is the number of the people becomes so small but there are tons of jobs out there but it’s like you have to be able to actually stick it through all the way be committed just like how a lot of you are and you guys are watching this right now supporting the channel and also building these projects and putting it on your portfolio that’s actually what makes the difference at the end of the day can you actually push through exactly and guys this is why they pay top dollar for this sort of stuff right you have to stick through get through it okay right don’t quit on this all right now what we’re going to do yo this is really cool dude I want to actually give this a highlight this is freaking awesome David says um he goes David Jonathan and he actually joined pwj as well I remember and he goes I was asked by my office to pick a training I’d love to be sponsored in for 2021 I filled in reactjs Python training with clever programmer I hope it’s approved and I make it live with the CP team oh dope damn so that’s actually really cool because if people get jobs as developers we can be like hey maybe you can uh get sponsored and even get other software developers to be sponsored by their company so the company pays for it and they can get educated with us and we can actually hold like online or in-person trainings for them like exclusive yeah that could be really freaking awesome literally an Enterprise level yes like Enterprise level trainings like not just you know here’s some stuff like real crazy stuff exactly that would be awesome yeah that’ be really really cool right so now guys we have the functions folder okay so inside that functions folder we have the index file we have a bunch of other things the one thing that we are interested in is that index file so I’m going to click inside the index file and cui just show them which one I’m inside of right now what just point towards the index that we’re in at the moment so that they know ah this index file oh yep yep yep so this is the one in functions yeah exactly this is inside the uh functions right so in here guys this stuff is all handy if you want guys want to go ahead and learn this stuff yourself but what we’re going to do guys is we’re going to build an Express app and host it on a cloud function so this is some crazy powerful stuff that we’re about to do um and it’s basically going to scale it’s going to do whatever we need to do it’s going to be a full backend on a cloud function okay now let’s go ahead and do that so what I’m going to do is I’m going to get rid of all this so delete and then I need to install a few dependencies so again make sure you’re cded into the correct directory so now it’s functions at the bottom and I’m going to do mpm so you can see I’m typing in the bottom terminal right now so right at the bottom says mpm install and then here going to install Express okay so we’re going to install Express and you can see it’s installing Express at this point so we went ahead and did that so what I can do now is I can go ahead and at the top I can write const Express equals require Express okay now this is in node.js so right now nodejs by default doesn’t include that fancy import Express from Express syntax we’re not going to go over how you get to do that right now but whoa dude check this out Samuel weru just said hey guys you he love you guys I got a $2,000 client I will enroll to profit with JavaScript who that is sick that’s insane dude yo we need a counter going for these jobs cuz we want to record and document every job or every gig somebody’s getting and we want 5,000 of those to happen that is so sick we got to have a counter going and start start recording yeah we do man and even like on yeah I mean maybe we should maybe Frankie just start recording it or Nas like just like literally a counter every time like literally yeah like we should have a c just start one right now create air table no just like have a manual one started right now and then we can have a air table yeah I know for sure it’s like yeah that would be awesome but like yeah Nas just pop up one right now and we’ll just keep adding to to it I’ll actually save this and also send it over to NAS so now every single time we get a uh thing where you guys got a job or you’re making an income uh send it to us we’re going to record it and we’re just going to start documenting it all in one place exactly that would be dope and then we can reach that 5,000 go oh yeah that’ be beautiful and we can make it public so everybody can see it too that’d be so cool yeah exactly um marabon says I just landed my first client too how much are you paying her for this bro oh man sun is my first expensive deal nice when Sunny saw marabon he reacted quickly I hey let’s go that was smooth oh man all right so guys now we’re going to go I was going to make I was going to make a joke about my girlfriend and python but I thought it was going to be a little bit tasteless oh I mean you kind of nailed it even by saying that oh man right so now we’re gonna install course this can’t be real is this guy real is this for real or is he just making this up just to be on the front page kazzy I just got a job at Google because of your tutorials and told Google and they checked you out they thought you guys were what what what what no way this live stream guys the the freaking Channel challenge is over wait that’s why that’s why Google went down yesterday all the Google employees were checking out the channel was That why Google went down yesterday they were all busy he said JK JK JK okay oh man God damn it all right you’re getting timed out no man don’t do that I know he did say okay okay all right all right it’s a it’s a joke but you’ll be back you’ll be back just a little holy crap Le just Le just blocked him completely we like timed them out like 300 times and blocked him everybody just went crazy come on man we’re trying to like actually document real people getting jobs I know man all right all right but a funny joke funny joke made us laugh too so great job right so we installed Express right so make sure you’re inside of functions in your terminal now we’re going to mpm install CES right so this is going to be needed as well so while that installs we’re going to go ahead and online three I’m going to drop in con cuse equals require cuse so that done it as we needed it and the final one guys is stripe so I’m going to say mpm install strip and there we go mpm inst stripe and now what we’re going to do iszy do you have that secret key right so this is where we need the secret key I don’t have the secret key but I’ll go get it right now all right so remember guys when we set up on let’s actually show them where they get it from as well KY dope so you’re going to get it from here we’re not going to show it to you because then you’ll have access to our secret key but here is a secret key right here um and if you’re yeah this is the page you will be able to get from the URL is also at the top this is a test key right so even if they got it it won’t be the end of the world but we probably shouldn’t show it um yeah I mean it’s a it’s a it’s a test yeah I mean we can I think we can show we’re g to reveal it I’m not going to show it bro I I don’t like in the code we’re gonna have to hide it somehow then that’s the only thing I mean so if it doesn’t matter we can just show it then yeah yes it’ll be fun and there’s only going to be very few of them that copy the whole thing and type it out anyway yeah exactly all right and we can take it down anyway off to oh yeah and generate a new key I already have it copied so let’s go okay so guys if you’re wondering that was in the developer tab on the left API keys and then you’ll see secret key okay yeah um so now what we’re going to do is we’re going to say const con uh stripe May says you guys are doing a very good work I’m an angular developer but new to react but um I feel like it’s very easy and I can also start doing react thanks guys to the confidence to start learning the mer stack yeah switch over if you’re on the angular side we let us help you convert your religion of angular and join the side with react exactly oh the one true [Laughter] framework oh man all right now we’re going to go ahead and click you should have like One landing page where just like you me Nas and we’re just like wearing like long like you know gowns and like religious clothing almost on the landing page and just like join the one true framework yeah the react like floating in the air like react go join yeah oh man that would be great oh god um right so now we’re going to say require stripe like so and then here what we do is we have brackets afterwards right so the brackets afterwards actually will have the secret key inside of it right so now KY let’s go ahead and pop the secret K holy M Nolan is a it keeps getting timed out by mavon damn holy crap too much power oh God all right here we go why is it giving this weird error it’s in quotes oh it’s because of this I I don’t get it oh there was a like a okay space or something yeah got it so guys uh it may seem a bit off right now but that’s actually there’s no space between this and this one right so if I go ahead and delete you see that yeah oh my God all right Mar stop bullying him he fine he just made a joke yeah Naza is just laughing so hard in the background [Laughter] oh man all right go ahead all right so now what we’re gonna do is go ahead and we’re gonna go ahead and set up the express app right yeah um so so here I like to sort of this is something David taught me and it’s actually a really good practice so it’s similar to how I Mark things out so here we’re going to have the app config right then we’re going to have some middle so we’re setting up an API right now okay so this is all to set up an API right so we have app config then we have middle Wares right middle and then we have API Roots nice right the API roots and then we have a listen Command right so listen Command right so this is what we need in order to set up an API so I’m going to make it extremely clear for you guys so to set up an API these are the things we need okay now for that’s a funny comment Faraz is like I got to know about CP few weeks back and now I feel like a crawler I have visited almost every single one of your videos and every single social media platform that made me laugh pretty hard like an actual web crawler nice all right um so now for the app config right to set the express server up we say const app equals Express like this right we say Express and then what we do is we go to middleware and then here we say app. use and here what we’re going to say is cause cause is a sort of uh let’s just think of it as a security right now so we’re just going to say cause and then an object oops this is wrong should say cause and inside these brackets we say origin true okay so it’s just ignore what that means for now you don’t need to know about that but we need this command to sort of do a few safe things okay so let’s go ahead and do that now we’re going to go ahead and say app.use express. Json and this will allow us to sort of send data and pass it in the Json format think of it that way right now here’s the API Roots okay so what we like to do is we like to set up a dummy route to sort of test if things are working so for this we’re going to go ahead and use a forward slash and then we’re going to and this will give us something called a request and a response so this is how an API works now for this one we’re just going to make it super simple so we’re going to check that it works by saying result. status is 200 if you call this and it should send back a message saying hello world right hello world right save now what we’re going to do is go ahead and um I’m going to show you guys how this works so uh to finally get this thing up and running we say exports. API because it’s going to be our API and we say functions this is where the cloud functions come in HTTPS because it’s a secure function and we say on request like this right on request and we say app right now this is the setup need needed to get the uh backend Express app running on a cloud function okay now to actually get this up and running on your local what we can do is we can actually emulate it okay so to emulate it there’s a very nice command that we can do and Kaz I just want you to copy this Command right and run this in the um actually I can do it I mean so inside of the the terminal right now what I’m going to go ahead and do is run functions so I’m going to write no sorry Firebase we’re going to say Firebase because we’re going to emulate it guys we’re not going to deploy it just yet we’re going to emulate it see if it works and then we’re going to deploy it and then change it okay so we’re going to say Firebase emulators so emulators then we’re going to say colon start okay we’re going to hit enter and what this will do is it will spin up right so we will actually go ahead and spin up the um a server right so spin up like an Express server and it we actually go ahead and it should pop up a um a window as well so I’m not sure if that popped up for you kazy but it would have actually popped up a few windows for you nope I don’t see any Windows yet at least hold on let me see let me uh okay so if you go to the terminal no bro don’t see any windows so if you go to the terminal and scroll up on the log yep something all of you guys to do so and go ahead and click on that yeah there we go now this will show you the logs from the function right so this is like our backend logs right now so you don’t want to close this running command because this will actually keep on running the sort of uh the stuff so um if you scroll a little bit further up on the logs KY um on the um on the terminal sorry okay yeah scroll a little bit further up and if you go a little bit past this you should uh oh no down down um stop little bit down uh little yeah we go so it says HTTP function initialized and it will give you a URL now that URL is an API endpoint so can we just copy that into the code over here maybe so you can see that so yeah there we go so this is an example endpoint okay this is an example endpoint now if want to call this end point right so this is the forward slash which means it’s the default one so kazy what I want you to do is go ahead and write uh command click on this and we should see Hello World right so it says res is not defined and that’s because you see here we said res this should be response yeah right because this should be response so I’m going to go ahead save it and the good thing about an emulator is it does it really quick which means that we can go and test let’s go nice so that’s dope have an API running right now so that’s really cool okay now we have the API running and what we’re going to do is obviously hello world isn’t that that exciting but I mean it’s pretty cool that we actually have that running on a cloud function yeah we’re emulating it now to make sure everything works to debug and do all that sort of stuff and then we’re going to go ahead and deploy it deploy the app and then you have these two completely powerful apps running okay now sham shy Patel says never studied at 2 a.m. in 20 years damn nice that’s awesome dude right so we created this route right here now I’m going to show you guys a test of how a sort of endpoint works so if I was to go ahead and copy this exact same route but say this is for SL like let’s go ahead and say for slazi then this one will send a different message it’s going to say what’s up Kazi so what’s up oh man what’s up bro how you doing exactly so I’m going save it now kazy if you go to the URL and do for slash uh Kazi so at the end of it so it’s API slazi now it will hit this end point so let’s go ahead and enter this one oh snap hey see that so now we can see that this works guys so get requests we can very much very easily do uh with a gap but we want to do something a bit more powerful now we want to create the uh an endpoint now we’re going to go ahead and create one called app we’re going to get rid of this one right now um to simplify it so that was just a sort of demonstration so now if we save it it’s actually going to bug out on the right because I don’t think it will show you okay that’s fine so now um let’s go and say do post CU we’re going to make a post request okay so apis have different types of requests they have get requests they have post requests they have different things right somebody says they got so much into the screen that they burned their toast nice um so now we got a post request so what we’re going to do here is we’re going to create a post request at this route okay we’re going to say for/ payments SLC create now this may seem similar right p for/ posts for payments create now we actually use this we use this over inside of payment. JS now if we go back to payment. JS here payments. forc create right so what we do is we go back to our index over here we go back to the index and we’re going to say okay when we make a request to this it’s going to be async firstly we need to do some Ayn yep it’s going to basically take a request and a response this is how an API works there we go uh Omar says oh yeah eating it with but butter right now since it is edible still just a bit black all on the [Laughter] back yeah oh my God way you said it so seriously I was like oh I knew it was gonna make your day that’s why I read it right now we passed in you remember here guys we passed in a total variable okay now the way we get to that variable is we actually go ahead and [Laughter] no n just heard it so he’s laughing someone El Manana says I don’t smoke but I feel like a smoke break nice right so here we have total so request right so this right here where it says total that’s called a query pram right now here what we’re going to do is we’re going to go ahead and say const total equals request do query so we’re going to access the query and we’re going to access the total and that’s basically what we had here that total query okay then we have that in the variable here so that would be the amount in subunits remember okay now what we’re going to do is we’re going to console. log and we’re going to say um we’re going to go ahead and say um payment request received boom that way we know it’s us right and then we’re going to go ahead and say comma and then we’re going to say total right for this amount so this is going to be like a debug little console log for us and then what we’re going to do is this is where stripe comes in now we’re going to go ahead and do um somebody said why aren’t using request uh prams yeah you can use request pams actually um but in this case I’ve used query. toal but yeah you can use pams as well um but here we’re going to go ahead and say const payment intent so const payment intent oops I’m going to copy out a snippet here guys once payment intent and this basically goes ahead and it can it goes await stripe payment intents damn finally somebody appreciates me proo goes thanks KY for the breaks in between man Elsa was tough catching up with the speed nice I’m your speed breaker for today sunny nice dude Rene says how to sign a code while reading comments multitasking multitasking G on point so now we’ve got await stripe. payment intents create and then this takes an object which has amount as total and the total is the subunits that we passed in remember this is in subunits subunits of the currency right and then your currency here is USD so that’s what we’re using USD using anything else you have to change that to the correct country code now one once that’s done guys we’re going to go ahead and say response. status right of 21 now 2011 is is the sort of response status for which means okay like everything went good but it’s created something right so we all know 200 is good 200 is usually good 2011 is uh okay created so that in this case we created a payment intent so it’s the correct one to use then we’re going to go ahead and send the response back and in the response we’re going to go ahead and send back the following we’re going to send back the client secret which is which is the payment intent that we got from stripe do client secret okay client unor secret now what this will do is if we go ahead and hit save right let’s go ahead and hit save and um sorry let’s go on to our back to our Local Host now Kazi all right here we go yeah so wait I’m on my oh okay okay I see no no that’s a server yeah so that’s another Point guys it will run on a different port right so now when you have a backend app you actually go ahead and have um you have Local Host running on 3,000 and usually the other one on maybe 5,000 6,000 whatever it decides to choose you can actually Define that as well when you’re using Express um somebody said you’re both you work both yeah okay we do we do yeah we use pair programming um so now let’s go ahead and go to axios dude I’m getting pretty excited about like coding up some stuff on you know just like a live stream outside of this like a twitch type of live stream and just like actually just relaxing and coding something together that would actually be so fun this that’s what me and David did earlier we literally went ahead and um uh we just kind of had like some music in the background and we were just coding on I like this is such a Vibe no we did this earlier when we were set everything up it’ll be such yeah that’ll be such a future yeah 100% yeah I want to do that that’d be sick even the YouTube thumbnail app that I want to make with you like and the few more apps like I think that’ll be really dope to do that yeah exactly um all right so now the B we need to go to axios and this base URL right this is essentially from if we go back to our index do you remember when we ran the thing when we ran the um command it actually went ahead and um ran this um it gave us the API endpoint right so this is the local API endpoint so inside of axios now what I can do is I can go to the base URL and I can change it to our local API endpoint right so I’m going to go ahead and just change this there there we go so HTTP Local Host 50001 then we got challenge uh K you’re you’re showing us yeah yeah my bad one second go for it nice we got 5,1 and then we’ve got Challenge and then we’ve got this right it’s for/ API now if you’re wondering why it’s for API it’s because here we have exports. API so that’s why it gets the name and then the for slash after that when we make a new request we just need to write AOS and then for payments create so now we set this up in AOS it’s the base URL we go to payment. JS and this is where we made that nice request right so now what we can do is if I console log the client secret we should be able to see something now so if I go here and I write console.log and I say the secret is and we go ahead and do this like just to emphasize it and we say client secret now let’s go ahead and check something okay so Cary let’s do two things let’s open up Local Host 3000 mhm y then let’s go ahead and open up the inspector as well all righty and hide our big faces so they can see go to the console uh nice and then let’s go ahead and um you can actually hide those error messages these these yellow ones if you click on that yep uh no if you click on default where it says default get rid of get rid of uh info get rid of the um oh okay don’t wor just scroll to the bottom hold on what the all right there we go warnings yeah there we go and the arrow yeah so we just want to show you guys the exact what we have right now so now if you want to go ahead and add some items to your baset all right let’s do it bro all right I added uh the Echo the Samsung this yep proceed to check out yep and then let’s scroll to the bottom of the console is this clear the console right now it’s cleared oh no no no wait no go to the bottom I can’t see the bottom of it uh there’s really nothing happening it’s very exciting at the bottom maybe it’s actually hiding because of what we did um oh I see what you’re saying yeah yeah so we actually want to show you click on default default y I did refresh yeah you can refresh okay so now it should say client secret and then it’s okay the secret is true okay so there’s nothing there right now inside the secret right in fact the secret yes so the secret is actually there’s nothing right so in fact this should actually be like no if anything so that that’s not a secret right now so now what we can do is we go to Amazon add some products and go back to the that screen so let add some products whoa somebody came in with a 10 Bulgarian donation thank you so much man I I got to like learn the currencies of the entire universe for these streams know right he goes take care guys see you again on the next live session I got to work early at 5:00 a.m. here’s a little something from thank you so much pressl really appreciate you we’re going to keep going yeah now what we’re going to do is we’re going to go ahead and have the yeah so let’s go ahead and go to Amazon and add some products add add add all right yep okay and then let’s click on uh proceed to check out done client secret is [Music] nice exactly and then let’s actually look if you look on the left Kazi so the terminal that was running our back end can you see we actually had a console log which said in which actually said uh payment request received Boom for this amount right on the left on the terminal uh code terminal okay what about it at the bottom bottom it says receive okay you see that yeah yeah yeah right there so what it did guys is it went to our back end right made got a payment request for that amount in subunits and then it actually went back to the front end so it sent it back as a response and then we rendered it on the screen as that secret key which was that Pi stuff right so if we scroll to the bottom of the inspector yeah we should be see there we go that’s the secret key now that key is essentially what is going to power the transaction okay so that’s going to power the entire transaction so this is really really good um now what we can do is we go back to payment. JS go down and we can carry on press goes my next one would be around $500 just got to slip the first oh nice dude um join so now we’re going to go ahead and on 950 mhm so payment you forgot to hit mute bro I need to yeah there we go right so in payment. JS now we’re going to go ahead and do right so the payment actually went through kazy so let’s open up um no it didn’t go through yet it hasn’t gone through yet not nice right so let’s move our face off the screen done right let’s go to that card at the bottom so where it says card number yeah and guys when you’re using the test Keys you have to use 4242 42 just keep typing in 42 in this bit right all right hold up hold up hold up hold up hold up hold up um G to make it go up so it’s damn how high up is it there we go all right so here in the card number WR 44242 and just don’t stop writing 42 forever yeah and then click on buy now and then it says processing and then boom right whoa now I want you to pay attention to a few things the URL on the on the top says for SL orders yep right so we’re going to build that page and it would actually take us over there now KY go over to stripe all right guys this is going to blow your mind if it works right hey oh Bro today I made $948 in my store hey let’s go guys and if you notice if you push that to the right hand side Coy push this to the right hand side notice how that $948 94 is the exact same amount that is on our terminal oh so let me so that’s how you guys know that we’re not messing around right dang so that’s actually a human that went through so and look warp says oh yeah because that that’s it it worked dude so now what we can do is let’s go ahead think this is a perfect time to drop this in I think that’s pretty cool and Alexander goes not going to lie I have learned more from your live streams over the past few days than what I’ve learned over the last three years at my education that’s amazing dude that’s amazing let me just give it a little hey hey exactly what we aim for guys um so let’s go ahead and delete Beast thank you for the donation he goes I love the CP team Sunny take rest first as in rest API let’s [Laughter] go uh go ahead and go to the top uh of stripe uhhuh I’ll go to the top and go to payments MH right and then you can see there you go boom that par let’s make that full screen and if you can see if you click that that’s a full guys that is an actual payment right so it’s a dummy payment so it’s not actually charged the card but that is a full payment and the only the reason the only the way you actually go ahead and make this a real payment is you switch from using the test keys to the real keys and that’s inside of AP section okay here we go Shahed says making clones is actually very helpful to both learn and impress I got an ship interview some days ago just cuz they saw Instagram clone in my resume that is insane that’s what it’s all about Nas it’s this is coming your way you ready I know all right here we go we’re building up that counter nice building up that counter all right any you can check the description if you want to join the react course nice yeah um okay so let’s go ahead and go back to the [Music] hold right so now guys what we’re going to do is we are going to redirect the user to a orders page okay um but we also want to do two things right so right now we also want to empty the basket so at this point I’m going to dispatch an event into Redux and I’m going to call it type and I’m going to say empty B basket right empty basket now this is what I love about the react context API so I said Redux but I’m talking about react context API now we’re going to go ahead and save and then here I’m going to go into the reducer and I’m going to go into so this is where we listen to the events I’m going to add a case and I’m going to go ahead and say nice donation from sh sh thank you so much bro thank you so much and he goes I’m learning Java and Swift at Uni but learning reactjs with sunny and Kazi has been a great experience love you guys thank you brother thank you so much dude thank you um right so now what we do is we say case and then we say empty basket and then what we’re going to say is when we get this uh action I want to return the following so I want the state to now look like the following I say keepo every was inside of it but change the basket to its original empty array so we’re essentially emptying out the basket save it now that means that whenever we have finished with that call so let’s go back to payment objects whenever we have finished that call say dispatch type empty basket and then we’re going to go ahead and so this will actually empty the basket but we’re going to redirect them to orders so at this point I want to actually build the orders component so let’s go back to app.js and let’s create a route for orders so let’s go ahead and add it here doesn’t really matter where you add it as long as it’s above this one um and let’s go ahead and do orders and then here I’m going to create a orders component and here I’m going to say orders. JS and we go orders. JS and then uh wait for it orders. JS and I want do RFC there we go and then here I’m going to say div class name equals orders and hit here I’m going to say import orders. CSS I’m going to create that file and this is a awesome comment too and Steve goes um and Steve is actually a CTO and he has multiple developers working for him and he goes sh the freed well done I can tell you as an employer resumΓ©s showing relevant projects is one of my main criteria for selecting people to interview so 100% actually that’s massive and it goes a long way yeah and I can tell you I’ve been on the interviewing end at companies and if somebody pulled a resume in front of me I’d be like okay that’s whatever I I mean even the degree I mean I be like whatever but if you showed me like you had a list of builds like this I’ll be like holy okay this guy knows what he’s doing right or like at least like he’s he knows he has the ability to follow like that sort of to have that many builds you must have picked something up right so that’s going to impress someone a lot lot more um go back to orders go back to app and let’s go ahead and import orders from We’re say orders from orders like so save save it and then here we’ve got div orders okay so now let’s go ahead and do build out the orders component so orders comp opponent guys is going to have the following it’s going to say let’s just test it out and let’s get this whole flow working so it’s going to say your orders okay your orders and this is where we are going to introduce fir store the realtime database guys so if you’re excited for that let us know because this is where we combine all of this stuff and you thought we just had finished with that no guys we’re going to do we got a lot more coming and we’re going to do it at a quite a fast pace um to be able to get it all in all right so I’m going to go ahead and pull in some values from this um so now we’re going to say uh your orders no so your orders here yep and then there we go okay so now when we redirect to orders itur push us to this page so let’s actually test this out kazy let’s go back to the homepage and I’m going to put the header in the orders as well say header andage go go to the homepage let’s go ahead and add some products to the basket all right I’ll add um two three Lean Startup books for my friends let go and then let’s go ahead and proceed to check out all right done and at this point you can still go ahead and let’s say like you only want to buy two lean starter books go ahead and remove a book MH right and you see the order total changed it would have created a new client Secret right because it made a second request back to the back end every time it changes the basket it goes ahead and fires off something then go ahead and put in the Cod details oh I see by now yep oh snap is it going to work that’s it hold up hold up let me see oh it worked bro exactly dude nice my sales are going up my store is finally working I can pay the bills and survive yeah and guys this is like a full build right like as in like I don’t think like it’s it’s really insane like how quickly from what we’ve shown you you can then go ahead and build a completely functional commercial app like from the skills that we’ve shown you here um so we shown you that it goes to the order ERS page right but what we actually want to do now is when we process that order we actually want to go ahead and take it a step further we want to take it a step further and we basically want to do the following we want to go ahead and um push the order into the database so let’s go to the payment. JS and then here what we need to do is a little bit of setup right now so let’s go to um Firebase right now all right Shahed says I look at my dark circles and think it’s all because of you papa react um is he talking what what is he talking about um eye bags or what I think so yeah oh my God hatch Mor says I’m gonna need a big ass nap after this amazing workout all I okay okay got it I heard it as patch said I’m going to need a bigger ass but okay I get it I’m GNA need a big ass now after this amazing workout got match all right so let’s go to Firebase and then once we have Firebase open let’s go to the fire store tab now one thing I know is that I actually snap that is damn Gabriel coming in hot Gabriel goes get these guys over $1,000 in real money damn Gabriel thank you bro thank you dude thank you so much appreciate that yeah now I actually went ahead and set this one up earlier um so if we go into the left hand side and we go to fir store all right so I’m going to keep going and until I see Cloud fire store it says those two like General ranking symbols right there y and then you see here so now we’ve already got some data in here right CU if you just want to go ahead and delete this so go to um where it says users and that little three dots right delete collection type in users I won’t type in users boom uhhuh so we have this right now but you’re going to have when you first go into the screen a button which says create database or create fire store click that button make sure you click test mode right so there’ll be a popup that comes up click on test mode and then it will ask you for which location it doesn’t matter which location wait what do you want me you want me to do something uh no no I’m just telling them because we already set up Cloud fir store but they will have to click that create uh database option but make sure you click test mode okay test mode and then you want to go ahead and go through it uh and then just click next next next you’ll get to this screen okay y now what we’re going to do is uh so someone GP says how are we handling the orders in the back end we’re covering that right now yeah so now what we’re going to do is we’re going to have a collection of users right now when we’re signed in we have the user’s ID so we can use that right then every time we push an order in we’re going to basically have every single user is going to have a collection of orders right then in those orders we’re going to store orders so now what we do is let’s go back to the code so let’s go half and half now Coy all right like my favorite type of milk yep and I just want to mention guys that yesterday we showed you or the day before we showed you how to get the Firebase config file right so that’s going to be needed today right and you can get that inside of the Firebase console um but this Firebase config file is essential for today right so we’ve done this and yesterday and we also went ahead and set up this where say cons DB equals Firebase app. store so if you don’t have this just go ahead and create this and change this to your Firebase config and it will connect fibis now we have the DB right so this is going ahead and accessing fir store and it exports it so we can use it elsewhere so now let’s go to our payment. JS so we’re going to go to payment. JS and in here what we’re going to do now is when we actually complete the payment right so inside of um right underneath the dot then with the payment intent now what we’re going to do is now what we’re going to actually go ahead and do is we’re going to push into the database so the way we do that is firstly we need to import the DB from that local Firebase file so let’s go to the top and we say import DB from our local Firebase and then um then we go down here and we’re going to say DB do collection and we’re going to Target the users collection so this is using a no SQL uh data structure so the collection document collection document data structure okay so if you’re not familiar with that then definitely go ahead and check out no SQL databases but in this case just go ahead and follow along so we’re going to have uh db. collection users and then we’re going to go ahead and do um we’re going to say dot doc right so the document that we’re accessing is the users so the user their ID right us ID so I’m going to go ahead and drop this on another line so it makes it quite clear for you guys so the database we’re accessing it we’re going to the collection we’re going to the user and then inside of that we’re going to the collection of orders okay so you see how this this is kind of like youing it this makes sense right we’re going into the user us uh the users’s collection we’re going into that user we’re going into that user’s orders and then what we’re saying is go into the document and we’re going to use the payment intents ID right so we’re going to say payment intent do ID as the do as the sort of order ID and then what we’re going to say is dot set like this it takes an object right and then this takes a few things so here what we can do is we’re going to pass the basket items before we empty the basket so we pass the basket items here and then we say when we pass in the amount of the order so here we’re going to say payment in oops payment intent do amount because that comes back with stripe and we’re also going to do the created date okay so this is going to be created and this one is going to be payment intent. created this will give us a time stamp for when the order was created okay now oh dude I love this comment warp said this is the stuff grandchildren will talk about oh we trying to fight for yeah oh whoa whoa whoa whoa whoa whoa whoa whoa whoa this is what I’m talking about baby LM candy goes I’ve made over $11,000 on wisan in the last month let’s freaking go bro just starting out um I have a few regular students plan and dropin during peak times clever programmer thank you life changing bro I want you to come on our live streams at some point um try to get a hold of us LM somehow like either Instagram me or sunny or Nas or somebody but get a hold of us or email kazak clever and um or I think support at clever program.com show our um insta tags and just DM literally DM one of us and we’ll go ahead and start a conversation about that yeah but that’s huge dude because I always talk about using WIS an even if you’re a beginner it’s such a great platform to get clients and you can be so new to coding with few months of experience and you can be teaching people and making an income with that so for you to cross over $11,000 cash in bank that’s real and that’s massive so that that just makes me so happy dude we’re going to save this and we’re adding this to our job counter and if you guys see I have added this like little Easter egg I don’t know if you guys can find it um but it’s I’m going to change that from 27 to 28 now oh dope dude yeah you like that a little hidden Easter egg nice that’s cool dude um and we had loads of people that we actually sort of didn’t count as well so it’s crazy like we’ve actually got quite a few people that have have got jobs since this streaming side yeah yeah yeah there’s like a lot that we didn’t count but I’m kind of just starting something uh from now that’s nice so to to re yes get on weisan patch is going to get on wisan ASAP Yes actually do that and start doing submissions the people who don’t do well on it or the people who just like never make submissions and just cry for no reason it doesn’t work you got to start making submissions and be posting like 10 to 20 times a day there but all right y nice right so now what we’re going to do is when we when the order comes back as successful we’re going to go ahead and do reach into the database collection of users to that user to their orders and we’re going to create a document with the payment intent id then we’re going to basically add this information in so let’s demo this out kazy let’s get local host on the left and the app on the right all right wait the The Local Host asn’t all right got it uh I got you I got you I got you bro so the actual deployed app yeah all right oh what’s going on this is where it gets tense guys because we’re going to see the database works and everything goes guys on the leftand side we have the local host on the right we have the actual Live app what will happen right so on the right we’re actually going to have Firebase the fire store oh okay I [Laughter] see yeah oh that’s what you were saying okay nice and then now what we’re going to do is we’re going to add some baset items all right right and we’re going to go ahead and you want me to refresh this uh you can do there’s nothing in the database right now all right yeah uh now let’s go to the basket all right you want me to click the basket one item yep pick it and then click on proceed to check out all right well by the way thank you so much my girlfriend just brought me some food much needed food thank you oh man hot sauce too [Laughter] sick guys the freaking best hot sauce in the game I mean not the best but like just the great one should be sponsored by them literally with the with the sort of Music my not the time for this right now all right but turn the music up bro cuz it sounds good all right tell me what do we need to do bro so now let’s go to proceed to check out all right and we’re going to go ahead and put in some card details all right we go all right 4 4 4 4 right now when we hit buy now we should see it take us to the orders page and it should push an order into the database oh snap it’ll be popping in here in the real-time database yeah because it hasn’t got a collection in there we may need to refresh the right hand side yeah but it should be working right all right okay let’s go ahead and hit by now damn bro sure about that yeah dude all right I think I will okay all right all right bro I’m hitting it nice oh God damn dude what happened here now we’re gonna have to figure this one out guys oh man right so it says document requires its first argument to be of type non string it was undefined right so this happens at times um I need to figure out why now oh I see okay so you’re not actually logged in right now are you I don’t think so right I got to log in first yeah log in let’s go ah okay yes we have to sign in we need to protect against things like that all right we’re going to protect that later on we will protect against that all right here we go test is in okay so now I’m repeat again dude this stuff is free I’m getting as many ipai Pros as I Canon no MacBooks unfortunately no iMac Pros on here $6,000 checkout I’m excited bro my store is about to be freaking be banking yeah this is this is take two guys oo all right here we go I’m gonna hit it okay ready do it oh okay oh right it looks like the back end may have crashed for some rude reason okay all right okay we have problems here all right let’s go ahead and restart the back end all right right I just ended it right now boom yeah and Firebase emulator start right yeah let’s go so you can see guys this stuff happens on builds right like this stuff does happen like you get crashes it’s part of the game right all right so now we’re back up with the API let’s go ahead and let’s not let’s only add a few things to the basket to test it out all right so so refresh I’m in here now yeah just going to remove bunch of these iPads three is fine yeah so three this just have maybe three items all right proceed yep all right let’s do it card number our fa is in the way all right face is now gone all we doing it sunny yep all right let’s check it out oh okay are we logged in I was pretty sure we were logged in this time okay so now we have to check it out okay God damn it right so this says col unhandled rejection that what happen that’s what happens to most developers who try to go on [Music] dates all right so for this one let’s go ahead and jump in a bit so KY go ahead and hit refresh all right I have a feeling we changed a few things and we didn’t refresh so let’s go back to Amazon uhhuh yep and um okay go ahead just add one book just add like one item all right like this y do 4 42 42 all right by now yep go ahead if this doesn’t work then we’re going to debug it guys okay so now it says all right so it’s the same issue so it says that it’s not defined so at this point I think we may not be pushing the user in so we’re giving it the secret right yeah so the Secret’s good the payment confirmation happens because we are getting back so if we open the inspector right so go to console and let’s double check so open up the console uhhuh and let’s go up to we get the secret so the secret comes back everything’s good right it’s just the document collection so payment intent. ID um okay and then let’s go ahead and check so that one’s good a nonempty string is it because we don’t have any collections in our Firebase database no no no so that that will actually work it’s actually down to we need to just double check that the users actually actually there so let’s go ahead and do console.log I’m just going to go ahead and do like a person and I’m going to say user okay so now what we should see is let’s go ahead and check do we see the person right so go up uhhuh yeah yeah we do see it we do see the person in the console because it may not be in the react context API uh uh I think so let me see yeah yeah y right there uhhuh um oh oh I found it God damn it all right guys the issue was here this is not you this is not ID this is U ID wait where where is the uid right so you see line here so it’s not user. ID is user. uid okay so yeah guys shout out um I’m going to highlight the hell out of this so make sure you guys actually find this boom right there uid whoops uid change that I was going to buy you in the if you don’t change it MH now it’s a very very small thing and here where is it popping up so when I hit refresh so where did you find uid from so I’m looking at this yeah and go down and you’ll see a u down down little bit further you see uid at the bottom somewhere uid there is ah yeah so it’s not ID it’s U ID right now I see loads of people saying no no the collection’s not it hasn’t got the the database and things like that but guys you need to always like I would console log the user what you’re trying to use and make sure you’re actually getting the correct value y so let’s go ahead and check again all right let’s do it again all right boom here I’m going to add uh two things okay not too many things there two things y um I’m going to hit I’m going to get out inspector mode yep I’m going to move our face here oh man the Moment of Truth Sunny I’m counting on you bro I’m counting on myself dude we’re all counting on you this is tense dude live let’s go we just got a donation too he we done it guys this is like every developer’s like wet dream like you code something and then the whole crowd just erupts and everybody like God feeling we have that’s the feeling having your is it like people like ripping their shirts off in the so let’s go ahead and check fir store hold on bro before I check fir store I got to make sure the payment hey the payment came through let’s go nice oh man nice collecting those paychecks yeah all right now let’s check the fire store yeah oh damn it’s hiding behind this one second okay all right now refresh that because it wasn’t initially created so you’re going to have to refresh the first time let’s make it full screen as well oh damn oh Calvin kabanda damn dude guy always always donates thank you so much thank you bro and he goes thanks guys this react challenge is cracking my skull and I’m loving it when will be the final submission for all the homework cuz I’m balancing this challenge with another course # fancy dinner that’s funny so the final submission is going to be pretty much tomorrow no later than tomorrow for sure but if you can submit it today please get it in today so then we can actually try to review it and things like that too exactly all right now see full screen this yep and here we go it’s in the database actually right the order have the order of the person that Kazi logged in as that order and you can see the basket actually has the items that he pushed in ooh my iPad Pro I got my Kenwood mixer so I can eat some food uh watch stuff on my iPad Pro I need some food that’s look seems like a pretty good day for me nice so now we have some data right we know it works it pushed it in and you see and the crazy part is is like it just required this bit of code and it did it so now what we can do is we can go to orders guys if you like that smash the like button that Sunny made this work you know for him guys let’s give it a round of applause smash that like button so video goes out everywhere yeah honestly guys it does get tense especially when you’re live and debugging but like I just want you guys to see that you do run into bugs don’t quit don’t give up just break it down okay yep nice thank you naen for another donation appreciate you guys nice exactly thank you so much naen all right so now what we’re going to do is go over to orders and here we’re going to actually go ahead and first we’re going to create a piece of State and this state is going to go ahead and be responsible for actually storing all the orders okay so first thing I’m going to do is create a piece of State like here and this one’s going to say use state so we’re going to go ahead and do use State like so and then here we’re giving it an initial value of an Mt right now here what we’re going to do is when the app loads we’re going to say use effect so when the compon ERS component loads we’re going to fire off the use effect hook cuz we love this hook and here I only want it to run once so if you if you keep these brackets empty it will only run once make sure it’s not you don’t you have to have the brackets here okay this is not the same as this okay so having the brackets is important and now here what we’re going to do is we’re going to import the DB because we’re going to need to we’re going to need to pull the orders from the database and then here we say DB do collection users right db. collection users I’m going to just make this nice like that and then we’re going to say go into the document of the user. uid we’re not running into that again and then I’m actually going to pull that user from the uh react context API so like so which means we need to import the use State value so over here and um oh nice I saw so many people dropping some love that’s awesome haira said this build is the most intense and the most epic so far I was literally replying to haira just now oh nice yeah and then we’ve got the used State value and then what we’re going to do is go into the doc and then now we’re going to say collection so we’re going to go into those orders right so go into those orders and then we’re going to say order first thing we’re going to add this special order by so remember we actually pushed in a created field right we’re going to order everything by created we’re going to say give it back in descending order and then we’re going to say this is a magic function here we’re going to say on Snapshot and this gives us a real time snapshot of the database of what it looks like and what this means is and this is where it comes really really powerful this essentially means that if we push a value into the database or if we remove a value from the database it will provide a real time Fe like a real time response so this will update in real time based on that value so now we do set orders and then here we say snapshot. docs because this is all the um this is going to return all the orders as documents so we’re saying docs and then we’re saying map through every single one and this is what we’re saying we’re going for each document return an object right so return an object and that object is going to have an ID and that’s going to be be doc. ID and it’s going to have some data and that’s going to be doc. data like that okay um and there we go and in this case that will be enough and in fact we can simplify this because we don’t need the ID in this case so we can actually go ahead and change this to the following actually no we’ll keep it as that you might want the ID for later so there we go we’ll keep it as that and this down real quick so yeah uh the first thing you’re doing is you’re accessing The users’s Collection with this line that puts you in here yep uh then you’re getting the specific user that’s logged in at that time making the thing right yep which is which is going to bring you right there exactly then you’re accessing that user’s order that particular user’s order so then you get into this collection right here yep then inside of this collection you basically go hey all these orders that are inside of this I want you to order them based on the date created in a descending order yeah so meaning the most recent one should be at the top exactly got it and then what is uh Happening Here with this set orders um line this allows us to basically what create an order yeah exactly no so set orders is not creating an order it’s so snapshot. docs. map is mapping through all of the in this case we only have one order there oh we’re like reading it out yeah it’s just kind of like going through that list bu up into an array got it is this going to be useful for like a thank you page once somebody orders so then we can show what they ordered so we didn’t actually go ahead and build a thank you page but we’re going to show all your orders on so once you place an order it will take you to your orders page so you’ll have the most recent order that you just placed at the top right that’s okay so that’s what I wanted to know so but it we will be using once they place an order we want to show this later that’s what we’re doing got it exactly okay that makes sense and so okay keep going with the set orders so what are we doing here as we go through and we map it yes so we so imagine we have like a few different documents in there inside the orders collection it would map through all of them and it would basically go ahead and get the IDE of the document store that in the ID key get the data of the document so you know all that stuff where it say amount basket all that stuff go ahead and put that inside of a data um key like it’ll give that for the the data key got it and then basically this bubbles up into like an array and then we basically set our orders variable on on our state to that array got it okay it’s real time when we use Snapshot it’s real time okay dope perfect that’s awesome yeah perfect so with that said now we’re going to go ahead and we’re going to say here we actually need to protect oursel a little bit we need to say if user exists only then do we want to do this right so only then do we want to do this otherwise else I’m going to say set orders to an empty array and this will be important for later and then here because we’re using the user variable we’re going to be dependent on it so we need to put it here if you’re ever using an outside variable you have to put it inside of here okay now let’s hack together the UI so your orders we’re going to have um a div here and this div is going to say uh class name of orders underscore order this is going to be like an order container of it like that and now inside of here guys what we’re going to do is we’re going to say orders right be optional map through every single order and let’s return an order element okay so we’re going to have some kind of order element so in this case I’m going to do order and this is going to take a prop and we’re just going to pass the entire order through it okay now what we need to do is create this order elements so I’m going to go ahead and create an order. Js order. Js like this and then now we’re inside RFC wait for it boom um then we’re going to say class [Music] name equals order like so and we’re going to go ahead and do import react order sorry CSS let me going to say um order. CSS we need to create the file nice so this will then work in that way now we’ve got the order. JS now here what we’re going to do inside the order right did we actually get this through as a props so this is where the props come through we’re going to destructure and say instead give me the order like so and then on 97 now we’re going to go ahead and build out the order so inside of here we’re going to have a H2 yeah just do this we’re going to have a H2 which says order so like so right we’re going to have this and then we’re going to have a P tag now we’re going to install something called moment so I’m going to open up the terminal CI all right let’s go to um yep yep let’s go to this one nice and I need to to get uh written instructions oh yeah okay yeah moment uh I think it’s just moment without the JS yep so we’re going to install moment and then here I’m going to import moment from moment moment is a really handy library for passing any kind of kind of date stamps so here uh time stamp sorry so here we’re gonna have a P tag and inside of this P tag we’re basically going to do the following so inside of the order we have a time stamp and the time stamp is in where inside of order. data. created okay now what we can do is because it’s a time stamp and this it’s something what we call Unix time stamp so what we can do now is we can say is we can say moment that was good what’s that I said nice one Sunny that was good oh the timing yeah moment. Unix and then we can say order. created order. data. Created and then here we’re going to go and say um format and then inside of here we’re going to say just copy and paste this right and I explain what this does so boom that so this is saying the U the months the years the date hour minutes and this is like a P.M this one yeah now what we’re going to do is we’re going to have the following we’re going to have a P tag and inside of it it’s going to have a small order ID so I’m going to go ahead and pop this in so we have a P tag with a class name of order ID and we have a small order ID inside of it and this would just be the order ID itself and then here we’re going to render out so this bit’s pretty cool so we’re actually going to render out the checkout product okay so here we’re going to say check out check out product like this and this is going to take a few things so we’re actually going to reuse the checkout product right so here um but we actually need to Loop through the order contents so remember we actually saved the order contents when we um saved it to the database so now we can say order. data basket right option we’re going say map so map through every single item in your order right or we can say item here actually and this will return the following we’re going to say map through it and we’re going to reuse the checkout product component so here we’re going to say checkout product so check out product like this and then here I need to rename these two item now get rid of this for now so this is what we have the checkout product so I need to go ahead and import checkout product from the top like so Doom now what we’re going to do is we are going to if we go to it says user effect what um what far was that Cy let me zoom in a little bit and also um can you read it sunny yeah um sunny I we just got the best comment ever so I’m going to read it okay go for it um all right so here we go so LM from the live stream and LM says I’m also in pwj and I’m just going to go to this comment over here this is awesome goes um wait second all right goes proper keyboard I’m a self-taught developer with a learning disability poor student at everything but web development survived open heart surgery and vowed to finally make money for myself and my family now here I am 100% determined 100% pumped to be part of the pwj community let’s awesome dude that is insane dude that is incredible it’s you know like it’s so amazing to see people there’s a whole set of people who make an excuse after excuse and then there are people who can be making excuses and you can’t even be mad at them you’re like hey you have a disability makes sense but they’re not using that as an excuse they’re just like going full speed ahead and crushing it and also thank you so much for being part of the profit with JavaScript Community like that’s massive we love you lamb huge dude huge thank you for that um so we have the US state what are we doing we’re importing order that’s it y order from order like that save and then here save and then now you see user effect is not defined so let’s go ahead and import that so we say user effect save and then here let’s go ahead and check so okay so now you can see Kazi it says your orders and this is something you placed before wait what happened so now you can see the orders so if we do nice I see that yep yeah so you see that you can see the orders right now yeah uhh that’s really clean and what we can do now is that’s actually the order that we just placed so you can see it’s pulling it in from the back end now and we can go ahead and style that so it looks a little bit better um so what we’re going to do is and before we do that we’re actually going to add in one last thing which is the currency format so here I’m going to go ahead and add in that currency format that we used before so this one uh here nice and this one is basically it’s going to have a render text and we can get rid of these fragments like so and this is going to say uh it’s going to have a H3 with the class name order total this one’s going to say order total with the value the value is going to be order. data. amount and remember we we had to pass in the subunits in sense it’s in sense so it’s like if it’s $10 it’s going to be like 10,000 so you just divide it by 100 to get it back to that exactly that’s why we’re doing to divide by 100 exactly and then that will work that way and then we need to actually go ahead and import currency format so here I’m going to say import currency format so go back up here and say import currency format from react currency format there we go and here now inside of order let’s go ahead and style it so we’re going to say dot order is let’s actually refresh the right hand side done and there we go nice so now we’re actually going to say padding of 40 pixels D margin of 20 pixels her Hermon says insane guys brilliant job keep it up joined pwj loving the content you guys provide thanks so much for joining pwj brother love that thank you so much dude that’s awesome we’ve got margin 20 pixels and then here we’re going to say border one pixel solid light gray background color white and position relative like so so we go ahead and do this this save it and now what you can see is position relative is actually going to be important because the next thing we want to do is actually going to be absolute inside of it so what we’re going to do is order ID over here like this and it’s going to be position absolute top 40 20 pixels and then you can see the order ID is now on the top right because we did top right top 40 pixels right 20 pixels and position absolute and the the parent was relative that’s why it’s staying inside of the container then we’re going to go ahead and start the order total and we’re going to say go ahead and make it font weight of 500 and the text align to the right okay and then before we wrap up with that we’re going to go to orders. CSS and we’re going to add the following so orders. CSS we’re going to say for all of the orders we going to say padding of 20 pixels and 80 pixels so it’s going to be 20 top and bottom 80 left and right then we’re going to say the orders H1 oops orders H1 inside of orders is going to have a margin of 30 pixels and zero here we go icing on the cake there we go dude oh that looks beautiful that’s juicy right super juicy we have one problem when you placed an order shouldn’t have the remove from basket button right because it doesn’t make sense yeah yeah yeah because what are you removing from basket there’s no more basket anymore yeah exactly right so here what we can do is inside of check out product let’s go ahead and pass a prop called hide button and let’s go inside of checkout product and then here we’re going to go ahead and pass in another prop callede hide button and we’re going to say only render this button if it’s not hidden so if it’s not hidden then we will render this one like so so now we should see it render without the button so just refresh yep and there we go dude look at that nice right so now what we want you to do is let’s go ahead and go back to the uh I forgot to style one button which was the um uh and also actually actually I want to show you one thing firstly let’s go ahead and click sign out look how cool this is guys when he hit sign out yeah hey the ERS disappeared clean right now go ahead and sign in as the same one yep and now we’re wondering how do we get back to your hey so I saw you wanted to click the returns and orders right yeah so naturally in by intuition that’s what we do so let’s go that up that that worked out perfectly you actually went there so yeah so inside the header we’re going to go ahead and do all the returns and orders we’re going to wrap it inside of link two and we’re going to say link two for/ orders and then that’s going to do the annoying thing here we go wait wait wait wait wait wait wait wait wait wait everybody’s going to start freaking losing their goddamn Minds in the chat all right so we missed like half a fraction of a second so let’s go back oh my God I can’t see it watch it’s going to come it’s going to come because there’s a delay so it’s going to come so we just unlink to fors orders around the returns and orders now so if we save it now click on returns and orders uhhuh o juicy to prove to you guys that this is working this is fresh it’s all good here we have an iPad and a bread mixer let’s go ahead and buy the Lean Startup and the screen and something else for example all right and the watch we never did anything with the watch CU I don’t like this watch all right and hit proceed to check out and the buy now button looks ugly so we’re going to start that in a sec as well that’s a Finishing Touch but kick by now and boom there you go St into the orders nice bro look I got two orders one at 2:43 p.m. one at 2:18 p.m. they both look clean let’s go to stripe let’s see if my store is making money if you click on payments it should show that payment that just went through hey it does and if I go home nice my store is at 6,000 whopping 6,000 nice dude awesome also it’s on the screen again yeah yeah I’m aware oh yeah dope um nice so now what we’re going to do is we’re going to go to um we’re going to go over to uh are you sick Sunny yeah are you serious yeah yeah it’s like a I swear to God I think I’ve got like I think it might be bloody Corona virus cuz I’ve got like a bad cough dude in my throat and everything’s starting to like go but so good damn bro it’s it’s been like that’s why I keep coughing as well like I’m trying to like keep it together for the stream damn bro that’s crazy good thing Corona can’t spread through the internet let’s go yeah damn bro that sucks but yeah hopefully you’ll feel better guys for sunny smash the like button you know that one actually got me ill how she she was ill and then it actually spread it over to me so now it’s like yeah damn bro it’s definitely the corona bro alert your whole family yeah I know right I’ve literally been in this room like on lockdown damn that’s crazy okay let’s go ahead and uh finish off the um sty up the checkout to the payment screen so that button at the bottom and then we then then it goes down goes down to the deployment stage okay so get excited guys oh one second hold on I it up all right now it’s [Music] good all right so now inside of the button and payment just go to payment. CS s right so payment. CSS is missing some Styles right now and the one that we’re interested in is exactly for payment details so we need to go to payment details um and go to right so firstly we’re want to say Target the form inside of payment details so I’m going to add it here and we’re going to say Max width of 40 pixels so go to the uh payment form screen Kazi so you can just add a product and go to the um proceed to check out uhhuh there you go so stay on this screen okay we’ve got the um that’s right and then we’re going to go ahead and Target the H4 inside the payment details and go ahead and do this save it I love how you say h bro H4 yeah you you say h but I think that’s just how they say it in um British in Britain Britain Britain exactly Britain H H4 now I love the love dude like everyone’s dropping so much love in the comments you guys are awesome p just like get those Halls cough drops with the vitamin C yeah that’s how we Americans that’s how we Lo Los angelinos fix all of our problems said do an English accent Kazi me you want me to do a English accent yeah I got a pretty good English accent how how do you guys think I have a strong British accent yeah I think so you got quite a strong British accent British it’s a little Nitty Gritty stuff yeah Nitty Gritty all of our like you guys are like sto and we’re like stop code says you sound like a Western Canadian yeah my accents are awful yeah oh the greatest ever says yeah I I crossed 10K today guys thank you so much for that as well oh yeah nice bro that was dope yeah all right on Instagram let’s style that one so this is basically a s i explain what it does so here we’re saying payment details go inside the form inside the D holy crap Vish says take care of your health guys because of Corona no because I got Corona and admitted in hospital and I’m still attending this live stream oh let’s go I hope you’re okay but God damn that level of commitment just inspired me damn that’s awesome cup of tea cup of tea I don’t all right guys let’s get back to the so we just startled that button so you see the button looks much better now much much much better now yeah so we have that that looks a lot cleaner um I just want to check one thing in payment we had the H3 H3 payment um H3 payment details so we have payment details here we say H3 inside the dev okay so I actually used so this one should be H3 instead and then that should go ahead and change it okay so so that’s actually finished up the UI nice so now now we’re actually um he says edge3 nice so now what we’re gonna do is we’re going to go ahead and so previously guys we were pulling from our local uh running local host s of running um API right we don’t want to always do that we do that when we debug and we test because it’s very quick to go ahead and um do all of this like very quick to develop with this but we’re going to deploy this so let’s go ahead to Tom noazi yeah man and we got fires everywhere so that’s scary so I just told uh I was like Sheila hey look for uh renters insurance for the home just in case our home burns down so oh wait every problem in the world when it comes to the challenge like the entire sky is like orange around us and like when you go out to like breathe in the air you’re like oh you just come back inside cuz literally just burning like everything in California is like burning holy oh damn dude I’m like I was laughing because it was so intense with your face like close up yeah yeah it’s it’s um so I just you know hopefully we’ll see what happens but we got to coat it up you know right so let’s open up the terminal somebody says on fire infected and still streaming oh it was Leaf nice so now let’s go ahead and we’ve got the terminal yeah and Patch is right and all because of a goddamn gender reveal party it was like somebody and they were doing a gender reveal and they and then they like launched a firecracker and that one firecracker set a fire and just like lit up all of California on fire like all of California is like burning down damn holy crap dude the intensity I think the reality is kicking in you know as I say it but okay let’s keep going yeah right so let’s go ahead and deploy now so [Music] um oh she’s like wait I wasn’t laughing at the fire I know she’s laughing at God oh man right so now let’s open up the terminal and oh say flies dude all right let’s open up the uh the uh dude it’s open bro it’s open how many times you want me to open that no no open up the terminal with the Local Host in um with the uh server in ah yeah this one yeah this one no no number I think it’s number one maybe I am on number one bro number two which one is it number three number three right yeah that one so cut this one cut it right okay so now guys whenever you have a function like a cloud function right to Loy it what you need to do is go ahead and write the following so you need to say um you need to show a little bit of the bottom fzy yeah yeah right there we go so now what we’re going to say is Firebase and then we’re going to say so to deploy the function we say Firebase deploy Das Dash only functions and this means you only deploy the functions right so make sure you’re in the functions folder and then run this basically we’re saying deploy only the back end yeah You’ already only going to deploy the back end right and then you see it does a bunch of stuff and guys also at this point you’re probably going to fail right it probably will fail now what you need to do is go over to uh Firebase and upgrade your plan to Blaze Blaze all right let’s do it so let’s show them where you do that actually while it does it I think patch is already on that plant all right let’s go let’s go to the um um and and and if any point by the way guys you failed when it failed it’s because of that right it would have failed because of Blaze wait you you want me to go there is that what you’re telling me okay okay all right dude sometimes you’re so freaking subtle bro I don’t all right now go now go to uh so actually expand the bottom so right at the bottom there’s like an expansion yeah yeah and then you see where it says the bottom where it says Blaze pairs you go you guys are going to be on something where it says spark ah right okay so it’ll say spark at the bottom but then what you want to click is modify okay okay I’m going to highlight this so people can see what you’re talking about so here it’s for you guys it’ll says spark but for us it says Blaze yeah then what you going to do is click on modify or upgrade if it’s free so we’ll just click that and then what you want to do is here this will pop up right now you want to make sure you click on select the plan for Blaze yeah so you don’t want to use Spar you want to use Blaze and you might have to go ahead and hook up your card and follow the steps that you need to do but it doesn’t take long literally we did it and it’s but think of it this way yes you put a card on your account but it’s free okay it’s actually free it does it’s not going to charge you it’s not going to Bild you it’s completely free yeah and then you just pop in your thing click here and put in your card details and then that’s it it basically just wants to use that to know that you are a real human being that’s using this exactly and then on the bottom left it will say blaze yep yeah dope and now um uh then what we’re going to do is it’s going to go this go back to the terminal yeah oh yeah now it’s says deployment complete okay so what we can do is click on that console Firebase that link that where it just said project console you see it where in the terminal oh y let’s click that click open and now uh okay so now you this has happened because it’s logged you out into a different account even this sounds like a religious thing like your operation is forbidden holy oh man we should just like have our own language like we should like sell like a react book and it’s like in its own language like you know Lord of the Rings has its own language for like elves yeah exactly oh man they got that like what’s that klling on like a geeky Dev language or something oh yeah yeah there you go yeah greatest ever is like I knew that religion was coming all right cool so what are we doing refresh this or refresh the app yep I mean you said yep I asked you a or question click on the you’re not logged into the correct account I don’t think good looks good looks yeah mhm okay so go into Amazon Challenge and what you can do is you can actually access it from here so go to um the left side but say make this full screen okay and go to Cloud functions or functions on the uh it’s yeah functions now you guys need to grab this link so you see where it says request so maybe pinch and zoom here Kazi but um we want to basically go ahead and grab this so where it says https that link right there that is our URL that’s our end point so we’re going to copy that go back to our ao. JS file all right hold up boom bada bam bada boom yep and then here we going to basically highlight this one get rid of this and so this is where we had our local and what I like to do guys for debugging purposes I actually go ahead and drop this on a new line comment it out and go ahead and uncomment this and then I’ll grab this basically just pop this here and then that way what you can do is if you ever need the Local Host one you’ve got it there you can just uncomment it com in that one and do it like that that’ll be a bit easier right um so I’m going to go ahead and save and what we can do then is um yeah so this will actually this should now so we’ve deployed the back end up into Cloud functions so it’s actually living in the cloud functions right now so to test that actually we set a endpoint here which was if you go to the endpoint it was just say hello world so to test it Cy go ahead and that URL that you copied go ahead and just paste that into the browser that should say hello world nice nice very nice nicey right so that’s a that’s a live URL now so now we don’t need to run it locally and our app is pulling to that one and what we can do now guys is actually go ahead and prepare the build so we already showed you guys how to deploy on Firebase yesterday so let’s go ahead and open up our terminal today yep let’s open up the terminal now all right and let’s go to uh the so now we’re inside a function so what we can do is we can do CD dot dot to go back a level and now we’re inside the app and what we can do here is we can just say mpm run build to build the app nice right and what we’re going to do now we deployed the back end and now we’re going to deploy the front end oh thank you aush for the donation go thank you so much for live streaming and showering your knowledge awesome you’re welcome we’re sending blessings your way I I’m laughing at the forbidden [Laughter] thing oh man oh operation is [Laughter] forbidden Jane says damn Sunny how are you keeping it together I’m just watching now we’ll continue with the app tomorrow dude take your own time and yeah make sure you get get this built and it’ll be awesome all right so it went ahead and built so that went into the build folder now we can do Firebase deploy oops my God Firebase deploy now guys don’t run Firebase deploy by itself if you do this it will deploy the cloud functions and the hos thing so here we only want to do only hosting and that allows you to do individually otherwise if you do Firebase deploy it deploys Cloud functions and the hosting hosting is the front end and functions are the back end yeah now guys like let us know in the comments because this is so much better than deploying a separate nodejs app like it does it all through the cloud functions and through like the the fireb CLI it’s just so clean this way of working work what’s that did this work yeah just works oh yeah it deployed oh hey let’s go nice let’s go I will drop this link in the chat and you whoa whoa whoa don’t drop it in the chat it’s not working oh is it not no no no don’t drop it it’s not working hold on bro it says site not found okay so we can check this out so damn bro getting way too confident why did that wait LS mpm run [Music] build Okay so we can do mpm let’s do a rebuild that’s strange because that should work um let’s rebuild it you haven’t depl no wait a minute challenge app all right we’ve got everything attach because the the database is attached to it which is great that all works and then we do build right let’s log in let’s open up Firebase in the back end while we check I’m going to do Firebase deploy again and what we may need to do oh okay I know why you want me to open right so the reason why this happened is because we did Firebase in knit and I feel like we over it yes yeah okay so yeah that’s exactly what happened no public build cuz we had already done in it like a few days ago right yeah so that’s just and we’re also in the right folder right yeah we’re in the right right photo so now just to be sure guys we’re going to do Firebase and net right firee and Steve is asking to for the correct and here you’re going to go ahead and say hosting hulit is like I have to go to office in literally five hours but I really want to see working say five it’s build in the public directory so here build and it says already exist overwrite yes then here we say mpm run build and if you want to chain two commands guys you mpm R build and and Firebase deploy D- only hosting little bit of tech for you okay so now that should create an optimized build and do that and this should this should work at this point because strange if it doesn’t but it should work Felipe says I’m a little afraid of Firebase pricing when I ran the slack clone and tested it with three to four friends the reads were increas were increasing very rapidly like 10,000 in a couple of minutes with little use comments question mark yeah so honestly 10,000 may sound like a lot to us but it’s not like 10,000 is minuscule compared to and it won’t charge for that right yeah all right so let’s try this still not up site not found okay let’s um let’s open up Firebase on the right so let’s go to Firebase let’s go to hosting demo gods are against us dude yeah what is happening hold on I clicked hosting why did I put put me back in functions yep hosting you did both deploy back and you did deploy both hosting and front end yep so now it says files are let’s go ahead and go down uh I can’t see CU it says the current one is at zero files we should maybe just like revert um no one public build okay so there’s no there’s no build folder right now so on yours can you see a build photo here in your code in your code tree so look at your files oh uh yeah I have a build folder you have a build folder yeah it’s right here okay let’s go to fire base. Json here we have the build adjon node modules Source index HTML functions hting is this one Han is saying Sunny you need to delete the Firebase Json file and try try it again I got I got into that issue last night you don’t because this is the correct um this is the correct you have one Firebase Json file which goes ahead and sets this up for you damn this is the correct 4B 2b2 dependra I think dependra just hates bem he’s like remove slbm and app.js and build and [Laughter] deploy B go ahead and back super strange roll back yeah do a roll back for now just test that it’s actually there all right I’m rolled back I can’t actually see functions in M dude so if I do build LS build I can’t see it strange I mean it’s right here yeah on my screen you can see him right yeah um greatest ever was like that’s some crazy advice public my B Jason dude what the hell Atara says you need to delete Firebase RC which contains the hosting details go ahead and delete it and Firebase in it again and it will work so you can try it I’m telling you I don’t think it will but like let’s go ahead and do this and we’re not going to delete our Firebase Json again because that’s going to mess up our um functions uh let’s go ahead and do Firebase in there our get ignore is supposed to ignore the functions file or no uh that doesn’t matter I mean hosting uh build yes yes there we go now if we check out five Bas RC I mean dude depend dependra is insisting that in appjs after the return you remove bam the comment the bem line with the comment and he goes and it works after building it I mean can try did you save it or I just saved it yeah I Sav saved it all right Craig says go go to root then rmrf D then deploy again don’t do that guys what you there no I just laughing at Craig’s comment cuz it’s building super somebody’s like nervous laughter cuz we kind of believe that guy we kind of believe the guy who told us remove bam this is the stuff that happens with me and Frankie every time I tell Frankie’s wrong on something Frankie is like no just do this you just restart your computer I’m like bro it’s not going to work just by restarting the computer then I restart the computer and it works and like Frankie feels good I’m like God I think yeah we may have to do Source try this oh let me do you want me to refresh no yeah one sec cu the build should take a little longer [Music] usually yeah yeah exact dude this stuff would happen to me with Firebase where there’s some kind of like thing going on with the hosting and I would keep getting into this I remember even when you and I we were working on the stripe functionality for our back end every time I deploy it it would just keep having some kind of weird thing happening yeah this is this is strange though because this this has never happened and we’ve done we’ve done so many builds right what we can do is we can fix it after the stream and then just quick video or whatever and explain how we did it and then everybody just can watch that video and deploy it online or it could be their homework to figure out how to deploy it online because you guys are actually going to go like if you do it it will probably work for you we’ve run into an edge case yeah um let’s try it one more time all right dependra says now you can deploy after remove now that we have removed [Music] B the pendra is giving us to go ahead I don’t know man I have kind kind of trust him and guys tomorrow is going to be the 100K a year road map for reactjs developers so make sure you don’t miss out on that that is going to be where we’re going to go deep into how you can earn an income as a reactjs developer and then scale it to $100,000 a year we’re going to be going into that tomorrow so bring your notebooks bring something to write with if you want to do digitally that’s fine too but that’s going to be at 11:00 a.m. Pacific day five of The Challenge so I just want to let you guys know and then go ahead and on your phone like just go and spam the alarms like set them up like crazy for tomorrow all the way up to 11:00 a.m. so don’t miss out and once you’re good to go for tomorrow at 11:00 a.m. let me know in the comments that you are committed to showing up tomorrow at 11: a.m. specific so everybody else can see it and then we want to give you a shout out exactly guys make sure you go ahead and do that and we want you in our go ahead sunny in the meantime I’m just thinking we deployed at 1104 and it actually actually had all the files at 1104 when we deployed interesting I’m going to roll back and check mhm um nice people are like hey I will of course the greatest Serv of course I’ll be there richy says I’m committed VES says I’m committed [Music] awesome yeah so I think in this case what we can do is we will go ahead and fix this issue and we will update you guys in the chat with a video why there’s already one that You’ have deployed with this exact URL what you mean the the demo you were showing us in the start this the one I’m looking at right now that’s deployed with the exact same URL that’s what I’m saying yeah so I actually built and deployed this before that’s what I’m saying but like if the new one is building with the exact same URL do you think that’s causing a problem because the new one has literally the same exact URL as this I mean I have the I have the exact same build on the side on a different repo so what I’m going to do is I going to do mpm run build on that one and Fire Bas to play only hosting actually you know what good shout let me double check the config on that all right go for it yeah oh dude I found it found it I found it I know why all right guys so this rewrite stuff is where it broke so can you guys see in here we have rewrites yeah get rid of that right because it’s strange I was like look it is up loading it says found 18 files if you scroll up a little bit in the terminal it says found 18 files in build then it messed up the rewrites like I don’t know what was going on there but what I’m going to do now is do F mpm run build and and Firebase deploy D- only hosting you need to abuse that reverse search uh vov says the app is not deploying live because you removed the bem comment oh we love you guys Dam so we built it and now it’s going picking on the pendra nice okay so let’s see uh yo crispy it has nothing to do with get ignore either pit says b Gods would be anchored by now I’m going to I’m actually going to deploy on my other one so I’ve got the exact same build in a different folder I’m going to deploy that right now wait did you just deploy it right now or no uh give it one second it’s still doing it ah greatest ever says this comment section is so funny today damn I’m in tears yeah guys don’t mess around with B ‘s food must be stale now dude please eat it right now yeah it’s um you know it’s definitely gone a little bit colder um uh what I have here I got some chicken got some sweet potatoes trying to get the you know protein and carbs right that’s it got my um hot sauce I never know what brand like what is this brand oh chili I got my chili garlic sauce should be pretty good but you know got to first um finish this project dude this is so strange I literally deployed it in the same place previously and it worked so this is something which is like a edge case would you guys you’re not going to run into this Edge case yep all right so what we’re going to do is we’re going to deploy it afterwards guys and we’re going to actually what we can do is I deployed at 515 with the finished version so I’m going to actually go ahead and roll back to that version all right do it you want cuz that’s the exact same finish version all right and what Sunny’s going to do guys is he’s going to basically go into his thing and um there’s going to be a version is’s going to roll back to one of them should I just roll back from my screen or go ahead you want to do it from yours uh I did it but I think it’s cashed right now wait what the hell is this is this guy lying to us or is this for real Roger says Hey KY yo I got third project within 20 days earned almost $5,000 oh guys believe me these guys are Gods yo thanks to Sunny and KY still using Sunny tricks in my projects um dude that’s actually pretty crazy if you did this but somehow find a way to send us proof that would be sick so like reach out to us at support a clever program.com or Instagram DM uh you this is my handle right underneath me right right there boom where am I pointing dude right there um and I’m just going to save this and send it to NAS nice so with that said guys it I we were showing you the demoed version previously and it was working so I I mean I feel like it’s cached on on the server or something that like is out of our hand because it’s deploying 18 files means that it’s definitely deploying what we want yep all right guys so hopefully you guys enjoyed the [Music] build hopefully you guys enjoyed the build it was absolutely insane I mean even if you have not deployed it yet this is what it looks like so I mean just take a look at this this is literally a real Amazon app and fully functioning app that can actually collect payments and when we go to stripe you can actually see that there are payments being collected so this is as fancy as it can get we wanted to take it even to the next level and deploy it but just for whatever reason it’s bugging out but we will deploy it and send you guys a simple guide on how to do that yeah with that said we really hope that you guys still got value out of this and enjoyed this okay I just want to highlight John wer said I got my second full stack job second full stack job thanks to studying off these dudes videos that’s awesome dude uh John wer on on uh YouTube oh what insane dude I mean that goes in our counter right yeah 100% I got my second oh wait I’m not showing it I got my second full stack job thanks for studying off of these dudes videos that is sick sick no sending another one your way got it all right here we go all right now the counter is at 31 nice dude beautiful that little Easter egg counter okay did we set for the homework oh yeah duh okay yeah guys so uh today’s so we have homework today we are going to be doing we’re going to show you exactly how you can make over 100k a year as a react developer Sunny himself has done that with react and we’re going to give you the guide that is something you don’t want to miss out on and um we’re going to bring you ton of value it’s going to be epic all right guys that’s it thank you so much for jumping on we will see you guys is there anything else Sunny that I am missing no guys all right with that said dude I think we wrap it up that’s it guys we love your face this is Cy this is sunny and as always is we will see you [Music] next with that said if you’re ready to get your web development career started if you are ready to learn the most popular framework in the world which is reactjs which Facebook uses and all the top companies in the world actually use Instagram and if you want to learn learn the skills to become a modern react JavaScript developer then register for this free training packed with value and you’re going to have your resume and portfolio completely built again all of it is completely free all you have to do is click the link below register for the training and I’m going to see you inside [Music] o [Music]
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
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 you please share the source code of this ?
I'm not able to add material-ui can anyone help me out please
@41:32
I have this error can anyone help me in this — Request failed with status code 404
AxiosError: Request failed with status code 404
is it still working in 2024??
at 1:37:48
can use this newer code
<Router>
<div className="App">
<Routes>
<Route
path="/checkout"
element={<h1>i am a checkout page</h1>}
></Route>
<Route path="/" element={[<Header />, <Home />]}></Route>
</Routes>
</div>
</Router>
hope this helps
Thanks for putting efforts for making this video. Can you please share your GIT repo link for this project
commited to build it today
Enjoying this all the way from South Africa π₯π₯
any body would like to tell me that previously i attended his fornted class and now from where should i continue
Hi , i dont get the search icon
has anyone used razorpay instead of stripe for payment functionality?
3 years AGO!!?π€·πΎ 1.9M views and still nobody responds w/ success?β¦ come on team?!!π€¦π½ββοΈβ¦ I want this app up and running!β¦ somebody please???ππ½π³
My payment method is not showing successful status . Anyone pls help
Today I am gonna complete this project and learn new things no matter how much time and effort it takes
I'm following this video in 2024. Such a great one. Thank you guys!
If you're like me and keep getting dependency-related errors with react-currency-format due to react version, don't install react-currency-format.
Instead, install react-number-format. Use <NumericFormat /> instead of <CurrencyFormat />. Everything else will stay the same and it will work perfectly.
Who's doing this in 2024?
i had an dought from 2 haurs 6 min
i m not able to resolve the index.js
no don't talk behind programmers.
hii i how can i get link for home image of amazon
For anyone doing this now react is very different I can help create-react-app is not a thing anymore it's create-next-app and your going to have to do a few things different to make this tutorial work but I have been doing it it is great.
guys i am getting this error while signing it says "Cannot read properties of undefined (reading '_getRecaptchaConfig')" i checked it can't seem to find much about it
Anyone completed this project ? please replay is it working properly ?
i am readyyyyy!!!!!
Informative and Great.
Thanks brother π’π’
Here's the solution for the deprecated switch/routes problem at 1:37:05
import React from 'react';
import Header from './Header';
import Home from './Home';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div className="app">
<Routes>
<Route path='/' element={<Home />} />
<Route path="/checkout" element={<Checkout />} />
<Route path="*" element={<Home />} />
</Routes>
</div>
</Router>
);
}
// Additional component for the /checkout route
function Checkout() {
return (
<div>
<Header />
<h1>Checkout</h1>
</div>
);
}
export default App;
I am getting vulnerability issues
yeah cool guide and etc but what the hell is wrong with the architecture, components folder? nah thats crazy
4:04:09
where do you get the image links? guys, I'm stuck for example the links of amazone logog and home image around 58:00
Mangliya's Suarπ’
The written medium page is missing most parts
No offense, but why firebase? MySQL is far better than firebase when it comes to creating e-commerce website. Isn't it? Firebase is really bad choice when it comes to creating filter, sorting, especially searching functions that need many queries. I think Amazon "clone" app without these functions is far less adequate than what Amazon really is.
Can you go over your Config on how to you get emmet to work in A React App
!!!!!
7:43:23
Thanks a lot Clever Programmer!!
You guys are awesome
I only know react js. With no
Backend knowledge should I watch this video?
I'm Immy to be a frontend dev.
Where is GitHub code link ?
you people are gr8.
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
Hello, I am Korean. I don't know how to speak English, so I need subtitles. Can you solve the subtitles??
what a energy πππ«΅π₯π₯