🔴 AMAZON REACT.JS Challenge | Day 3 (Checkout & Google Authentication | Redux | Next.js)

[Music] what's going on papa fam welcome back to day three of the five day amazon challenge i know you guys are hyped it's been it's been a crazy few days so far you guys are absolutely incredible the support the retention just insane amount of support we are showing the world what the papa fam is about guys let's go ahead drop where you're watching from right now welcome guys to day three of the amazon five day challenge just do this guys what's going on guys i can see the comments rocking in right now this is incredible stuff guys i literally cannot tell you the support you guys give the energy you give off is absolutely something that i have never ever seen before there we go we got malaysia in the house we've got united states we got india we got uk let's go guys incredible incredible stuff egypt is in the house too whoa that's awesome man guys are you guys ready let's go ahead and kick it today we're gonna go ahead and jump into day three of the five day amazon challenge i'm gonna be showing you guys what we're gonna be doing today and we're gonna be going over yesterday's homework so get ready for it guys let's start off with day three remember guys if you haven't already first link in the description sign up to day five because this that's where you're gonna get all the prizes all the good stuff is coming right but in the meantime i'm gonna go ahead and demo what we're gonna be building today guys so check this out this is what we're going to be going through in today's session so yesterday we left off with a beautiful looking responsive amazon build right and you guys came through oh boy did you guys come through you guys killed it with the homework submissions and today we're going to implement sign-in functionality so you can go ahead and sign in with gmail google oh that's interesting that's the first time let me go ahead and sign in but yeah we're gonna have full sign-in functionality which will work it just worked a second ago we're gonna go ahead and have full sign-in functionality and then we're gonna have a redux basket functionality so you can go ahead and add items to your basket and then we're gonna be able to check out now we have got protection if you aren't signed in it's gonna stop you from checking out but everything is gonna go ahead and kill it today guys so let me know if you're excited right now and uh yeah i'm about to go through the previous yesterday submissions because remember it's all about those points because this is a five day challenge okay guys so we're gonna kick it let's get into this today guys okay if you haven't already remember reserve your spot first link in the description comment i am registered if you are ready for day five where we do the big ultimate training which is completely free it's gonna show you guys how to go ahead and maximize your skills and land your dream job okay so first link in the description sign up now remember guys join our discord server okay we're gonna be like we're active over there we're active over on the facebook group this is the main place where you need to be if you're part of this challenge okay the facebook group is so is crazy engagement right now everyone is helping each other out you guys are insane that this is what i want to show the world what the papa farm is about and this facebook group does exactly that and we're going to go over and show you some of the support from some of you amazing people right now okay so remember share on your stories i've been watching your instagrams this is incredible stuff when you tag me i love to see your faces and getting involved okay so this is awesome stuff now remember guys from day fives where we reveal the winners exclusive surprise for every single person who signs up right so it's gonna be incredibly fun and this is where we go ahead and do that massive training where we show you how to land your dream job okay so it's gonna be so much fun first link in the description sign up now okay now here's the prizes let's go through it one more time diamond membership but place for first place right i love our gifts second place platinum boot camp experience three in fact okay and then third place we have 10 lucky winners so there is a huge number of prizes up for grabs you do not have to worry if you are starting late just make sure you get everything in before the fifth day because that's where we go ahead and tally everything up okay it's only fair right so i warned you remember on day five i'm gonna be opening the doors to zero to full stack hero so it's gonna be incredible be there there's gonna be an offer that you will never see again okay so make sure you're signed up now guys point systems remember one point for sending a message on enables any social media platform two points for tagging me three points for helping someone else on their homework four points referring someone on the amazon challenge and five points for all of your homework submissions okay so make sure you go ahead and join in otherwise you won't be able to be a part of this challenge so guys yesterday's homework what did you beautiful people deliver on because it was insane right the homework was to build the complete front end of the amazon build right and you guys did more than that holy crap and it was a little bit more than that it was to implement the fake store api okay so this was pulling data from an api and then going ahead and representing it on the screen okay so we received over 400 submissions like i didn't i'm not gonna lie to you right as the sort of streams go on you're gonna see the numbers dip right and this is because the challenge gets harder and harder and harder so only so many people are going to stick it through you can see right now the viewership's going to come down as the days go on and i'm ready for this right because there are only so many of you who are going to you know persevere want to change your life and are making zero excuses to not finishing this challenge okay so keep on pushing 400 submissions incredible stuff right so keep on going guys now you guys nailed it i'm not gonna i'm not gonna lie you guys went above and beyond i did not expect the the sort of response that we got from the homework so let's go ahead and check out some of your amazon builds right so guys right now if you see your name on the screen go crazy okay this is your time to shine this is some of your beautiful homework we had amazing coming in clutch amazing clone right everything was built perfectly well done dude and you should be proud of yourself samuel again perfectly built clone right so this was really nice to see that you guys followed it through got everything working and that was incredible to see that nancy came through clutch looks amazing well done alex tay did incredible stuff and i really love this board now this one holy crap if you're in the facebook group you would have seen this one dash santosh right i already i don't even know this guy because i've seen it but he basically went ahead and was like you know what screw this i'm gonna build everything myself he went and built and own his own little amazon right so he pulled data from the api the fake store api and boy did you kill it you absolutely killed it i can see kjs in the chat hey i'm 13 i made all the projects in the challenge you keep killing it dude dash incredible work dude like i'm not joking that was actually really impressive juliana coming in and i can see she added some internationalization in there love that rosen look at this looking clean fresh he actually adds had some uh different sort of uh products being represented on the screen natasha from germany killing it once again and guys we have a few different mentions right now okay so if you're mentioned right here you're going to get 10 extra bonus points in this challenge you guys are killing it okay and remember if i don't shout you out it doesn't mean i haven't seen it okay me and jay are literally working overtime to check all of your homework submissions so don't worry if i don't shout you out do not worry okay it is okay right you you will still be represented now khalid let's look at yours dude this one was a lot of fun look at this you had a nice little animation right there i think i believe look at this nice little hovering effect and i believe you had a sidebar no it wasn't khalid maybe it wasn't oh you had the live search so if i go ahead and say test look at that guys that's incredible he had a little live search feature i love that so well done khalid you definitely deserve that we had akash and this was the one with the sidebar functionality uh what only sort of feedback i'd give you here is reduce the font because the font here is a bit too big in comparison to the rest of it and also you have this red here whereas i would have preferred it to be a slight you know it merging into the rest of the page but this is the part i liked right that's really nice again a little bit of feedback add some more padding around the top you guys know i will always be real with you because i want you to learn and be the best so add a little bit of panning at the top otherwise great job dude looks fantastic so well done man um let's go ahead oh kali says click add to basket oh i will do that dude i will check that one out richard rose i love this one so look very sleek he followed everything perfectly and then he added a perfectly finishing footer section and look it's just like amazon so this makes it just seem all the more you know genuine authentic so dude amazing stuff i'm seeing you in the challenge dude great great contribution and then we've got psy prenate who actually went ahead and converted all the pricing over to indian rupees which is incredible stuff i'm sure it's rupees yes and this is looking amazing dude so incredible incredible work guys you should be proud of yourself that was absolutely awesome right you guys have been on fire you have been helping each other out remember that does result in extra points and i am tallying all of this up right so i am literally saying it i barely am sleeping in these days because i'm sitting there trying to tally up everyone you'll see me engaging in the comments trying to get involved you guys are killing it right so well done thank you thank you so much um khalid says i also added single product page and you know what i do want to see that actually let me go ahead and check this one out let's go ahead and click on kalin and let's click on a product wow look at that guys incredible work dude that's amazing look at this guys add to baskets whoa that's awesome dude you should just run the challenge so what we're going to be doing today is i'm going to obviously you can go ahead and link in redux so you actually get your live challenges there but incredible stuff really amazing stuff khalid well done guys shout them out in the chat that's very impressive right so guys like i said you guys are helping each other out you're on fire look at some of these responses that we have right check this out incredible stuff like we had people you know showing screenshots and one thing i'll say guys is well done because the one thing i can't stand is when somebody says i am stuck but they don't show the error and you guys were showing videos you were showing pictures of where you were stuck and then you were explaining it so that way everyone could actually help you that's the way you need to do it guys so that is really really awesome to see and i want to say again well done and keep on with that energy okay so amazing stuff guys really really impressive all right so we had a few more positive comments i love this this was one that we saw quite a lot save the tailwind config file and rerun the project yes 100 right so much love guys so much love and uh oh i wasn't even sharing the screen there you go here you go right this is amazing stuff right so let's go ahead and carry this on all right so much love during this challenge i love the positivity this is what we're about guys i see you all and i really really do love and appreciate even the donations you guys are incredible but guys enough of the enough of the community stuff right this is where we get into it we have a lovely donation by rutz thank you so much because you are the best man mongodb on my sequel um nice uh i'm not sure we're not gonna be talking about anything else besides the work so we're gonna we're gonna get into this a little bit okay guys we just broke 100 likes amazing stuff guys let's push to 200 and let's get this up on the road this is looking amazing let's carry on guys but now it's time to focus right we're here to do some serious work today okay so let's get into this let's get on that thinking gap and let's let's get the energy up and then we're gonna go ahead and get focused for today's build okay guys so let's do this the agenda for today is to build the authentication and the checkout flow okay so we're going to be going ahead and actually having next auth authentication for this portion of the build right so this is going to be how you implement authentication so that you can have the user's authenticated state even in the server side rendered portion of your next js build okay that's actually incredibly powerful and you guys are going to learn how to do it and trust me when i say it's surprisingly easier than you would think right so i'm going to make this extremely easy we have barcelona in the house what's up roger good to see everyone here danny lockhart says dude i love your channel dude i love you for tuning in i appreciate you guys for tuning in and and you know sticking with this right we're also going to be building like i said the checkout page this beautiful page you're seeing right here we're going to go ahead and use redux so if you haven't used redux or you're excited to use redux smash the thumbs up button we're almost at 200 likes we're going to go ahead and keep on pushing okay so guys are you ready let's go ahead and get this build started right remember if you run into any problems don't freak out okay do not stress go into the facebook community ask for help this whole challenge is about learning it's about experiencing new things and it's about you know pushing your limits as to where you don't feel comfortable right you want to go ahead and feel really uncomfortable in this one because the goal for me is to make you comfortable in that uncomfortable space right that's it right and then we're going to go ahead and land your dream job day five that's how we do it right so let's get today started guys right this is what we're gonna be building okay now remember yesterday i went ahead and showed you the amazon starter template so if you have missed that you can go ahead and check it out from yesterday's portion of the build follow it do not worry if you're late to the challenge you can still contribute you can still get started with the challenge and guys remember don't even worry if you're completely late or you miss day five just do this for yourself as well this is absolutely free so make sure you push your knowledge and go ahead and do it all right now again you guys are awesome you submitted all of the homework as needed this is the same principle for today after we have finished today's build the link is in the description all you need to go ahead and do is hit that link and go ahead and submit your homework and make sure if you haven't already remember step one is sign up for the fire last day so you just need to go ahead click save my spot otherwise i can't reserve your spot in the final day okay so without further ado let's go ahead and jump in so you can see i've actually got the code from yesterday's build up and running over here now most of you experience this problem where if you run yarn run dev right and it doesn't say tailwind you're going to have to open up your files go ahead and go to your tailwind config and hit save right and then you can see you have enabled the jit engine so that's a little bit of a bug that will happen from time to time when you're coding with um tailwind jit which is a new preview feature okay so it's very powerful but we're gonna go ahead and uh that's just a little fix for you guys to go ahead and get started now guys we are literally at 300 viewers across platforms thank you so much guys share this with your friends let's get the likes up let's get the viewers up let's get the energy up and let's get building the beautiful amazon clone okay so guys remember authentication and checkout is the theme for today's build and where we're going to get started off is we're going to go ahead and think about what we're trying to do remember the way we try and approach a problem is we look at what we currently have so in this case we have our build and then we kind of break it down okay so let's break this down so the first thing i want to do is i want to figure out the authentication so right now when i click on hello sonny's anger it just doesn't do anything okay i want to have a login state so we're going to begin this build with the authentication portion now as i mentioned we're going to be using something called next auth so you can go ahead and google it if you want to check it out and you can go ahead and see next auth.js right now this is the authentication platform for nextgs and it's you can either use this or firebase but today i'm going to be showing you how to use next auth for but and the benefit of using this over firebase is it's a lot easier to get the users authenticated say on the server side render okay now guys we are so close to 200 likes just keep on pushing and before we get started guys i'm gonna go ahead and have a quick water break hydrate yourself get your coffee and uh yeah let's do this together okay let's do this guys incredible support guys and trust me i'm going to see the viewers like you know we're going to get only the real ones are going to stay to the end and i want to see who actually can push themselves to that spot so here we're going to click on get started and the way it works with authentication in next.js is the setup is actually incredibly simple to be honest firstly we need to install next off so you're going to go ahead and copy next auth and i'm going to go ahead and introduce a second panel okay so a second terminal at the bottom over here now once i've got this open i'm simply going to go ahead and type in yarn add i'm going to type in next auth okay this is going to go ahead and pull in the next auth dependency into my project okay so that shouldn't take too long once that's done the next step to go ahead and get this set up um let's go ahead and see uh umang says sunny will you be adding the product quantity selection in this build you can definitely extend the build to include the product quantity if you want to remember bonus points for those extra beautiful features and i want to go ahead and you know i want to make it to a point where it challenges you and then you can take it the extra step further okay so amazing stuff okay so yarn add and then we go next off so that's gone ahead and added it and that's looking perfect so i'm gonna go ahead and continue on command j to hide our terminal go back over here and command b and let's open up our file tree now the magic point here is actually going to be in the pages okay so when we're using next js there the really nice part is that we actually had hey sunny final finally we got each other on the live session what's up joseph good to see you here dude welcome to the stream man right so guys when we do use next js rather than setting up a separate kind of express server typically when we have a react app we just have the front end right we just have a front end but when we use next.js it actually bundles in a little hidden backend for us and to access that backend portion we all we need to do is simply add in a folder called api okay so i'm going to show you how simple it is to go ahead and do this okay so to to get this working all you need to do is inside of our pages folder add in the new folder and call it api okay this is going to be our api endpoint so we're literally going to go ahead and have our own api endpoint working is in this in this build right now adrian says no way is this live well you know there you go i hope that answered it dude right so check this out so we've got the api over here and then what we're going to be doing is simply going ahead and adding in an additional folder called auth so you click on api click on add folder and this introduce auth okay now it's a bit kind of quirky because it's kind of a nested folder structure but what we're going to do then is we're going to add a new folder okay and this new folder has a bit of an interesting name here okay so what i recommend is you simply copy the folder name here so it's literally going to have square bracket dot dot next off dot js okay in pages api or if you see that so all we have to do here is go ahead click on auth new and then i'm going to go ahead and paste so it's next off dot js so now you can see guys inside of api inside of auth i have this file okay and this is going to be responsible for handing all of the authentication inside of our application again now the next step is honestly it's actually not that difficult to get up this up and running okay the next step is a bit simple what we do is we go ahead and we simply say um i'm gonna go ahead and actually you can pretty much copy this okay so you can copy up the uh the example that they have here and we're just gonna change around a few of these things okay right now they have github as your login provider it's actually extremely easy to add in facebook github google login if you saw the facebook build i actually did um facebook login right and today i'm going to show you google login and then you can combine as many different types as you want and it just works right adasha seeing you code is inspiration you make coding fun thank you so much dude i really appreciate that comment that's that's honestly very nice that you did so to change this to a google sign-in all we have to do is say providers.google that's it right the next thing i'm going to do is i don't i'm not going to connect a database here so i'm going to get rid of this line right now here you can see you can add more providers so it's as easy as simply going ahead and copying this line and saying rather than this you can say github and then you provide the credentials now each provider has a client id and a client secret well typically some of them require additional information but in this case it is pretty simple now here it says github id and github secret that's going to change right here we're going to say google oops google okay google i d and this one is going to be google secret okay there we go we've got our google id and we've got our google secret this is a single underscore in case anyone's wondering okay views chart says i like the way you teach well guys i like the way you support the stream so i really it's a two-way street right thank you so much for being here and guys we just passed 200 likes i appreciate you guys so much let's break 300 as we keep on building this app right so here we're going to see now you might have never seen the syntax process.m this stands for environment variables now why do you want to have something called an environment variable it's because sometimes you have credentials that you don't want to share right sometimes you don't want to share these credentials because they're private sometimes you can share some stuff it's public but in most cases when you have secret keys or private keys you don't want to share that with the rest of the world otherwise everyone's going to be doing havoc causing havoc inside of your database okay so this is going to help you out a ton so we're going to do process.n and then you've got google id and google secret now in order to populate these with variables i've actually added in a beautiful little file for you and it's actually a part of this starter template so if you click on dot m dot local doc example you're going to see the example environment file that you will have and inside of here you see google id where it says key goes here and google secret where key goes here and then you also see next autumn they've made it extremely easy for you okay so you have a little comment saying authentication here now all you need to do guys is go ahead and rename this file and get rid of the example okay get rid of the example and now you can see we have this working and the reason why my syntax highlighting is working and if you want the same thing you can go ahead and install the end plugin okay the end of extension and then you'll get nice little syntax highlighting inside of your environment file okay so this is how we go ahead and get this working guys this is incredible you guys are honestly killing it today with this chat this is this is really really nice similar says i came here a few weeks ago as a django developer suddenly told me to just get into an er wow i've learned so much already that's what i'm talking about it doesn't matter where you come from we can go ahead and keep pushing 250 likes broken already let's go guys yesterday we broke a thousand again that's just insane okay so guys here we have it google id google secret so we need to get these values okay so the first thing i'm going to show you is if we go ahead and hit save on this file and the first thing you want to do is just make sure that everything is working okay so you want to make sure that you haven't actually broken anything at this point right now how we how do we do that basically you can see once we've added this environment file i need to stop running my server and i need to run it again and now what you should be able to see is you'll see this loaded end from end local so this means it's loaded our environment of our files so you should see that and then you should see the jit engine being initialized those are the two things i need you to look out for when you're setting this up okay so the next thing we're going to do okay is we're going to go ahead and actually get our credentials now here is where firebase makes it extremely easy to do that okay so what i'm gonna do right now is i'm gonna go over to firebase so i'm gonna head over to firebase.com and we should be able to see this load up so here you can see i'm gonna go ahead and sign in to my account and right now i'm gonna go ahead and quickly log into my google account so give me one second guys and i need you to go over to facebook firebase.com and login as well all you need is a gmail account okay so it's extremely easy to get started and this is going to be a crucial step i remember a gmail account is completely free and it's going to be extremely easy to go ahead and guess up now i just need to do my two factor one second you might you guys might and i do recommend if you have any google account always enable two-factor authentication okay guys it's always good to have that for security purposes in this case i'm just loading mine up right now there we go and there we are now i am inside of my account so you should be on this screen once you're in okay so i'm going to click on go to console nice and then once we've got this open i'm going to go ahead and create a new project so i'm going to click on add a project for this one i'm going to say amazon and i'm going to give it a little bit of a name otherwise google might go crazy at me i'm going to say amazon too and i'm just going to say youtube and i'm going to click continue i don't want to have google analytics but you can if you'd like to okay whoa singapore in the house what's up man i actually touched this i like how consistent sunny's hairstyle is thank you i do try came back from the gym quick shower and we're going live this is awesome stuff all right so once this is set up we're going to go ahead and get our credentials set up now we're going to do two things when we do this okay we are going to set up a firebase configuration file um from this firebase panel and then we are going to be using that later when it comes to the firebase portion of the build but for now what i need you to do is go to the little cog at the top left once this loads up click it click project settings okay now once this is open you need to go ahead and click on this little web icon over here okay guys we are so close to breaking 300 likes come on we can do this together okay so here i'm going to go ahead and type in amazon or let's just say amazon amazon uh to youtube okay and we're not going to set up firebase hosting because right now we're doing uh versal for our deployments okay right let's keep going guys and now what we're gonna do is click continue to console awesome okay then i'm gonna click on config and i'm gonna copy this config right here okay so this is the magic config that i need so what i'm going to do right now is head back over to my code i'm going to create a firebase file so i'm going to say firebase firebase.js okay now remember i am moving at a speed which is going to be easy for you guys to go ahead and follow and actually go ahead and pause whenever you need to when you're watching this back okay so what i'm going to ask you to do is paste it in there right so that's the first step step one of the what we're doing right so that's that's the first thing we're going to do the next thing i want you to do is click on authentication okay now once we have authentication tab open click on get started right boom we just broke 300 likes thank you so much guys incredible support we have 400 people watching across platforms right now i think it's 330 on youtube right now let's push that number up guys but we just broke 300 likes let's keep on moving guys incredible stuff okay so once we've got the sign in method loaded we're going to click on google okay so i'm going to click on google and click enable now once you've done this you just need to go ahead and add in your email perfect stuff and i'm going to click on save okay now what we're going to do once this is done is we are going to go ahead and click on google and we're going to click on this web sdk where they go web sdk configuration now i'm going to go ahead and check something for a sec right so this will give us some contents right now what i'm going to do is i'm actually gonna go ahead and make it a little bit more smaller okay so this will give you some kind of some configuration so i'm gonna show you right now and i'm gonna hide one of the portions of the the config right so down here right now you should be able to see all of your configuration details okay so there is a secret at the bottom and then there is a web client id now i'm not going to show my secret because this is private for everyone so you should not be showing your secret as well but i need you to copy the id and i need you to copy the secret okay the id doesn't matter about it it doesn't matter too much that can be public so i'm going to copy this one and what i want to do is i want to head over to my environment file now for the google id i'm simply going to go ahead and paste it no quotes around it no nothing i'm just going to paste it there okay now for the google secret i'm going to do the same thing and i'm going to go ahead and pop it in like so okay so i'm going to do the same thing for my secret so i'm obviously not going to show the screen while i do that and now i have my secret uploaded too okay so what i'm going to do is right now i'm just going to do dot dot here so i can show you where i pasted there but the goal is that you have your google id open and then you have your secret pasted over here and i just showed you where you can find your secret okay so once you've got that done guys what you need to do is go back over to your panel and close that off okay so i'm just going to hide my secret quickly or some stuff right so now we've done that it all looks great and you can see it says enabled okay so this bit says enabled that's great that means it is working we can now use it right so what we need to do now is go back here i'm going to go ahead and paste this and then close the file right so you guys should have your secret uh your secret key there that should be secret to you do not share it do not post that around that's secret to you then i'm gonna close my environment file okay awesome stuff guys now we have that up and running what we need to do is in order to load those new environment files back in we have to stop our server and run it once more okay now guys look at the number of viewers coming up right it's insane that our attention is going up as we're streaming that's just insane i love that thank you so much all right so again i don't see the uh tailwind so i'm going to go ahead and save tailwind so there we go we can get our tail in and now what i'm going to do is i'm going to open up my second terminal and i'm going to go ahead and say yarn add firebase because we're going to need firebase for later on okay so i'm just going to go ahead and install firebase right now and then at the top here i'm going to go ahead and say import firebase from firebase okay now this part i'm going to go ahead and we're going to continue the firebase portion over here in tomorrow's build but that's where i want you to leave the firebase file okay so we've just installed the dependency the firebase dependency and now we're going to continue on now guys we are crushing it okay so we are absolutely crushing it somebody just said do you have a course in react yes i want to learn it 100 dude zero to four stack hero the doors open on day five sign up first link in the description and then you can go ahead and kill it guys we also hit 42 000 subscribers on youtube boom that's some flex that's incredible guys incredible stuff right so now what we're gonna do is we are going to go over to our next auto authentication and this looks pretty good right we have our google secret being loaded in with our google id everything looks the way it needs to look okay so the next step in this uh in this build is we need to go ahead and actually check out the let's go to our index right so inside of our index file so this is where we can go ahead and have some of the magic happening okay so firstly where do we want to log in from for the user so if we go over to our build i want the user to be able to log in when they click on account and lists okay oops when they click on account and list at the top right so when they click this they should be able to be prompted with a um a sign-in page right and this sign-in page is provided by default by next-doors authentication you can customize it but we're not going to go over the customization today right but you can add as many providers as you want and then you can just sign in it's incredibly powerful honestly you guys are going to love it i know you will all right almost at 400 likes guys let's keep pumping that number up right so we're gonna go over to our header now so component header okay now once you've got the header open i'm gonna go ahead and actually import a few things from that next auth library that i actually pulled in so i'm importing sign in sign out and use session so this is very important stuff okay these are three very powerful functions that we will be using inside of this header okay so firstly what i want to do is i want to say i want to click on the sign in right now how do i sign in okay so firstly like i said we want to have it so when we click on that you know that top part where it says hello sunny sangha i don't want to click on the p type i want to click on the overall div so i'm going to do on click right and i'm simply going to say sign in okay i'm simply going to say sign in all right and now let's go ahead and actually see if this did anything to our application okay so if i click on this hello sunny sanger account and lists let's wait for it oh okay we're not seeing anything oh yeah there we go sign in with google perfect right now we've got oh thank you so much daisy rowell so excited for day five of the amazon challenge thank you so much for the um 11 i think it's durham's thank you so much for that really really appreciate the donation thank you then we're going to click sign in with google now this is the interesting part here we see redirect uri mismatch okay so here is where you have to go ahead and update some configuration details in the google uh sort of side of things okay so they give you a url you want to copy this url okay copy this url and keep this page open because we're gonna need this callback function okay so i'm gonna copy this url and then i'm gonna go ahead and paste it into a new tab okay and then i'm gonna go ahead and sign in once again i don't know why it doesn't it did it for some reason mine is not keeping me signed in but anyway we'll see how it goes let me go ahead and sign in one more time guys so you guys should just follow along i think i'm going a very good pace today so that you guys can go ahead and sign in with me i'm gonna have to do my two factor again give me one sec wow we have another donation from siddharth thank you so much guys we are about to bake 400 likes we have nearly 400 people across platforms today this is insane okay so i've just logged in i clicked that link that we found earlier and this is where we get to okay well okay i've exposed something that's fine so now you can see the uri's portion over here okay so what you want to do here is you want to click on add uri now here i want to go ahead and copy the local host example but i'm going to go ahead and change this to 3 000. okay john stones he says i am late to the pie but i am ready to code hell yeah dude that's what the energy we kind of need right here this is incredible right cesar this man is like a human startup creativity and innovation thank you so much and with that said anyone who's coding right now quick water break guys hydrate yourself remember don't burn out okay take your time enjoy it and yeah enjoy the music [Music] all right papa fam let's go guys let's jump straight back into it let's go okay so once you're on this screen we're going to go ahead and hit the 3000 like this again then we've got the authorized redirect uris so at this point right we're going to go ahead and where we had our build so where we had this error i want to copy this top uri and this is very important right because what this is doing is it's going into that api auth folder that we set up and next door says you know it's set up a bunch of this stuff like call back you go google sorry google going a bit crazy there and then we're going to go back to our config inside of a google cloud platform and here on i want to click on add uri and i'm going to go ahead and paste it in so this will allow google to basically say this is permitted as okay right this isn't gonna freak out this is a secure safe thing that i'm allowing you to do okay so we need to go ahead and enable that so i've just gone ahead and added that in let's click save and let's just see now we've got http 3000 and we have our authorized redirect uri so now what we do is we go back to our localhost 3000 and we check it out again okay now let's check this out okay so uh jay i think you need to block a few people all right let's carry on so um now what i'm gonna do is i'm gonna go ahead and click on account and lists okay guys we broke three we we're so close to breaking 400 let's click on account and this and then sign in with google okay so i'm going to click this and now you can see boom we get this this is awesome this is what you should be seeing right now okay so what we just did is we gave google the all clear to say you can continue on okay so now what i'm going to do is sign in one more time because you know how my computer is doing today so i'm going to go ahead and sign in again and then i'm going to sign in again one more time so let's quickly do a sign in okay now i'm in and uh once again i have to confirm it's me it's always good to have you know another layer of security so i'd recommend that for you guys as well right so now i've signed in okay so it just redirected me back to this page okay rishabh says sunny mad respect thank you so much dude appreciate you man right and crow says practice i 100 agree with you dude it's simply practice okay there was once a time where my front end sucked right guys smash the thumbs up we're literally close to 400 is going to hype me up right so now we've signed in but how do i know that i've signed in right in order to get that signed in state right we have to do a step okay so the step that we need to go ahead and do is go over to and i see comments you know like you know like this just go ahead and kill the positivity game guys if anyone sprays negativity you don't need to let it in it's all good right so screw it right people get jealous when you're going good so don't worry about it right so now what we're going to do is we're going to go to index.js okay now over in in.js no sorry not index we're going to go to underscoreapp.js okay so here what i'm gonna do is i'm gonna go ahead and actually introduce something which will allow us to access that authentication state across pages inside of our application okay so in order to do that what i need to do is i first need to ins uh import a special dependency so i need to import provider but we've already got something as provided so i need to change the name as auth provider okay so here you can see it says import provider as auth provider from next off for client okay then what i want to do is i want to copy our auth provider and i'm simply going to go ahead and paste it okay now i need to go ahead and wrap the rest of this stuff inside okay so i need to go ahead and push it above it like so now there is an attribute that we need to go ahead and include it so i need to say the session is equal to page props dot session okay now what we just did here guys is we gave our entire application access to next auth the authentication state okay so we said basically now that that authentication state can be used throughout this you know throughout this next js build okay so and as you can see this is called a higher order component because it's in a higher order than the children below it okay so now we basically power up their app so we got cameroon and indonesia in the house daniel amardev what's up guys all right so now i'm going to go into index.js now i want to test something right i want to see if this is working and if i'm not you know i'm not talking crap basically right let's go to our header and then what i'm going to do is you remember this use session right so inside of header what we can actually do to check if we are signed in now is we can go ahead and pull in our use session hook right and the way we do it is we say const session and this bear in mind this is in brackets because we get two things we get the session and loading we don't actually care about the loading state for now we're gonna say equals use session okay and we've already imported it this session will include a few things so if i type in session dot right what this will include right here is two things a user and the user will have an email image and name okay so we can use this information now to go ahead and actually get everything up and running and working the way we need to right so guys we just broke 400 likes amazing stuff let's kill it guys absolutely incredible stuff so session.user okay so now what we're going to do is we're going to go ahead and test if this is actually working so i want to basically modify this now so rather than just saying hello sunny all the time right i want to say if i'm not logged in i want it to say sign in and if i am logged in i want to say hello and then my name of whoever is signed in okay so let's go ahead and kill this so what i'm going to do now is go over to that header right so where it says hello sunny sangha what i'm actually going to say is i'm going to change this entire line so i'm going to remove this line do a new line and i'm going to go ahead and say i'm going to do an optional here i'm going to say if there is a session then what i want to do is i'm going to do back ticks so i can do some string interpolation i'm going to say hello and then we can include a javascript variable and then here i'm going to say session.user.name i probably i love this song it's such a jam when you're coding right so we're gonna say hello session name otherwise i'm gonna say sign in okay and then hit save so now if i go back i am actually signed in so we should see on a refresh it should say hello sunny sangha okay now how do i check if there is a how can i sign out now okay so if i want to sign out right so we want to test all of this in action now what i can do is on the on click i can actually include something here i can say okay if there is no session then i want to sign in otherwise i want to do the opposite i want to sign out okay so on the click if there is no session sign in otherwise sign out okay hit save on that now if we go back guys check this out okay i'm going to refresh my page and at the top right now you can see it says hello sunny sanger if i click it boom it just signed me out okay if i click sign in once more it's taking me to the sign in page if i click sign in now i can choose to sign in and then if i go ahead and sign in now it says hello sunny sanger now guys that is literally as simple as it is right if you want to access the session state you use the you session hook and guys if you want to use it on the server side render which i'm going to show you in just a sec then we use it a get session i'm going to show you how to do all that but guys that was easy right that's literally so easy smash the thumbs up button if you thought that was easy blue octopus says that's slick right okoye says nice right this is what i'm talking about this is incredibly simple to implement and that's why i've gone ahead and implemented it and showing you how to do it okay now quick water break and this carry on and guys you can add as many authentication providers as you want into that and it would literally work it's incredibly powerful right oh this is a jam right let's carry on guys so now we have our authenticated state now i do want to show something cool to you okay so let's say i want to have you know multiple authentication providers and this is actually a challenge extension that you can do okay so if you watch the facebook world i showed you how to do the facebook portion of the login with next doors but what is so easy here guys is if i go back to my next door's authentication and i simply copy and paste it imagine this i say it changes to facebook for example and i click save right there now when i click sign in you see how it just pops up as another option right so imagine i had facebook here facebook and i've provided some credentials i'm not sure if it'll work unless i provide actual credentials but let's test it out anyway i'm going to click on sign in and you can see look sign in with google sign in with facebook all you have to do is go ahead and provide the correct credentials it does the rest and then the variables are available in session.user and so forth now that is so powerful i don't care that is so easy to use and it is just it's so nice guys okay so that is that's incredible stuff and i really am a fan of next door's authentication after doing this stuff because you can see for yourself how much it enhances your build okay so the next thing we're going to do is we're going to go ahead and implement the uh basket page okay so actually firstly gonna have you know add to basket functionality and so firstly well done guys we just finished authentication so boom it's not even 45 minutes and we just so ran through that right we killed that so quick so this is yeah we're going to keep on going at that speed right and it feels like we're not rushing either right so now if we click on the basket the goal is to have the checkout page come available so the first mission here is let's break it down i want to click this and be redirected to a checkout page okay so let's go ahead and solve that one first so what i want to do is i want to go ahead and to add a page i'm going to close the api but index.js is where we have our homepage if i want to add a checkout page i simply add a page called checkout.js okay and now notice how it's lowercase checkout because this will literally correlate to the forward slash link it'll say forward slash checkout okay and that's what we're basically going to go ahead and build so now i can use my snippets i can say underscore rfce and you can see the checkout and i want to go ahead and keep the naming convention here so in the file i can have the normal capital c for the you know the sort of component guys we are nearly at 500 likes that's insane let's keep on pushing 500 likes that's insane okay i'm going to click on checkout.js and now inside of checkout we've got some work to do right so now we're going to get back to hustling building some of our stuff so first let's go ahead and test if this works i'm just gonna say h1 i am the checkout page okay hit save now guys my goal is to make it extremely easy for you guys to learn how to code so let me know if i'm doing a good job with that right so i'm going to go ahead and click this and now i'm going to go to forward slash checkout and see if this is working okay nice we can see that i am the checkout page right this is looking great okay so now i'm going to go ahead and click back nice looking perfect right so what we're going to do now is we're actually going to start pulling in some of the components that we've already built okay so to make this very simple what i'm actually going to do is remember we are using tailwind so i'm going to make the background gray so i'm going to say bg gray 100 the second thing i'm going to do is i'm going to import the header right and this is the beauty of doing component based design so here we're going to say import header from components header and then as soon as i hit save look let's go back to that checkout page so forward slash checkout and look at this it's already starting to look a bit more like a page and this is fully functional right so i want to go ahead and actually implement some kind of routing now okay so i'm going to go back to this and i just want to say h1 just just to make it super clean and say check out page right just so we can very clearly see that this is the checkout page now when i have it when i click amazon it takes me to the home page when i click basket it takes me to the checkout page so let's handle routing okay so i keep going to that one all right so in order to do routing here i'm going to click into my header okay and now when i click on the image inside of the header i want to be able to basically root and push me to the home page okay so in next.js we have a built-in router this allows us to redirect the user to whatever page we want to do it to right and it allows us to do it in a very efficient way okay now let's go blue octopus coding says you are doing very good you are the best mentor i've ever learned from i appreciate you dude thank you so much and guys we're about to break 500 so that shows me something right matthew says liking the background music very energetic thank you so much man all right so we're going to go ahead and import use rooter from next forward slash router i'm going to go ahead and grab that then on the image i'm going to say on click this is the amazon image and we'll say on click and we're going to do an inline function okay then i'm going to say router dot push so think of the root oh no that should be lowercase oh oopsie actually so before this step i need to actually get my router object okay so get rid of this one that's wrong i need to go down here and i need to say const router equals use router because it's a hook okay this will give me the router object now i can use it so i'm going to say on click and i'm going to say an anonymous like inline function and then here i'm going to say router dot push okay now think of your your website as different pages being stacked on each other right this means that when you go ahead and say to a user that you're going to get redirected to the page over there when they click the back icon it's going to take them back to the page to think of like pages being stacked up on each other right so you literally are pushing pages on top of each other so that way whenever the user clicks back or forward like if they click if they go ahead and go to a new page it stacks the page on if they click back it just removes that page and they're back at the previous page that's how it works right this is how it's pretty much a stack right so here i'm going to say rooter.push and i'm going to say forward slash to make it to make it the home page okay this is looking nice now you can use the link component but in this case i want to programmatically do it on the image the link component is great for some text okay so bishow and a few others are saying why don't use next link you can do that but i this is how you programmatically do it right so this is a very nice way of also knowing how to do it you can use either off really doesn't matter right in this case i want to be i want to attach it to the um image object okay it's not confusing that's extremely simple okay so let's go ahead and click on the amazon link now and boom takes me to the home page it's simple as that on click routes me to the home page right routing.push homepage simple as that okay and i want to do it the other way as well when i click on the basket i want it to take me to you guessed it the checkout page so i go down now to my checkout which is this div because we've got the shopping cart icon and i want the entire div to be a clickable so i'm going to say on click of the entire div here i'm going to go ahead and say again inline function and i'm going to say router dot push oops root to dot push i'm going to say checkout forward slash checkout okay let's test this out guys okay so let's go ahead and do this right now hit save and then now what we can see is we're going to go ahead and click on basket ah there we go click on amazon hey there we go guys we got page rooting and we didn't have to install react rooter or anything like that next.js already has a router inbuilt okay so beautiful stuff if you just learned something new smash the thumbs up subscribe if you haven't guys by the way there are 65 or 70 of you watching right now who are not subscribed like please like what are you doing if you can if you're enjoying the content subscribe hit the subscribe button right it helps the channel grow it helps this value get out to as many people as possible let's do this guys we are papa fam material cody perry says are you british yeah i'm british mate full to the bone british okay so now we have the checkout page and we have our routine complete perfect stuff okay so i'm gonna go ahead and actually build out some of the checkout page before we start on the redux portion of the build okay so you will be you will be learning redux today as well guys right so a lot of fun stuff to be learning okay so for the checkout portion of the build right what we're gonna do is i'm gonna actually go ahead and have this next to it right here so i'm going to go ahead and include my local host over here so you guys can see it as i build it awesome stuff look at this perfect okay so now what i'm going to have is inside of our checkout page i'm going to go to my checkout page and if you don't know that trick it's command p and then you can go ahead and access your files so that's a very handy trick right that you can go ahead and do before we start the checkout page quick hydration and smash that thumbs up button awesome stuff ricardo says uh sim i don't know if you're saying simple okay ricardo says brazil oh nice what's up man okay let's carry on guys alright so we have the checkout page so the first thing i'm going to do is go ahead and introduce a main tag okay so a main tag like so okay ben carl what's up man good to see you here i see you killing it in the challenge all right so i'm going to go ahead and introduce a main tag now as you notice across the amazon pages we have the main you know the max width so this is going to carry on as we proceed through our builds okay so i'm going to go ahead and say clark main on the class name and i'm going to say when we hit the large screen right so i want it to be a flexbox firstly on the large screen and then i'm going to say a max width screen 2xl okay so i'm going to apply that same max width and again remember to center it we say mx auto okay and now you can see where has it gone oh yeah i don't actually have that h1 anymore so that's fine so if i type in h1 hello so you can see now my hello will should well it kind of you see how it gets cut off there right so that's very good whereas before it was going ahead and getting pushed over there so you see now it has a max width applied to it okay so that's awesome that's looking great the next thing i'm going to do is we are going to have a left and a right portion on this page so i'm going to go ahead and demonstrate that what i mean by that okay so here you can see on this page this is the official amazon page on sunnysanga.com right so not the official but you know the clone version so we have the left hand side of the page so this is my left hand side and then we have the right hand side of the page these are going to be two separate divs right so and notice how i said on the large screen we have flex and this is because on the large screen i want it to be in a row so i want it to be like this okay but on a small screen i want it to actually be stacked like this so that way on a phone it would be a lot easier to navigate okay now you can feel free to put subtitle at the top that's completely fine you can you know go ahead and customize to your heart's contempt but i'm going to go ahead and show you how to do this okay so tailwind yes i love the fact you guys are falling in love with taylor and this is incredible guys we're about to break 500 likes again and smash that thumbs up this is awesome let's carry on okay so i'm gonna i'll go ahead and comment in two things i'm gonna say the left-hand section and i'm gonna say the right section okay this is so fun guys i'm loving this right so now what i'm going to say is i'm going to go ahead and say for the left side we're going to have a div all right so i you know always containerize your stuff even on the right hand side we'll have a div okay so for the left hand side inside of our div first thing i'm gonna do is have an image tag this is gonna be no normal image tag it's gonna be the one from next image right then i'm gonna go ahead and have the source now this is gonna represent the advert it's gonna be a nice little you know amazon advert that pops up so this is going to be the following sort of attributes are going to apply here so i'm going to go ahead and paste in these attributes so you've got the source which has links pepperreact.com ikj width 1020 height 250 okay the final thing i want to do is keep the aspect ratio so i'm going to say object fit contain all right and that's just a nice little hack that you can do to keep your aspect ratio solid right now you can see if we go ahead and resize looks great and you see how it doesn't max out still sticks to my left hand side of the screen that's what i want okay oh this is a jam this always gets me like kind of pumped up when we're coding okay the next section is gonna be for the shopping basket so you can see whenever you're starting to build this stuff always think of containers so this is a div right very clearly is some kind of container here okay because it has like a background around it so i'm gonna go ahead and say div okay so inside of this one i'm gonna say div okay awesome nice and then inside of here i'm gonna have a h1 tag right so i'm gonna have h1 tag and here what you can see is it says shopping basket otherwise if the basket is empty you'll say your amazon basket is empty okay so for now i'm gonna go ahead and say your shopping basket and then once we implement the redux portion i will go ahead and show you how to do that okay so this is looking pretty good at the moment but the div that is surrounding we're going to go ahead and apply a few things i want this div to take up the majority of the space so this left div i want it to take up the majority of space i'm going to say flex grill and then i'm going to say a margin of 5 and i want to give it a shadow of small okay so you can see right now it's just very kind of like a little bit hard to see at the moment but you can see a very subtle shadow has been applied to that div okay looking pretty good okay so the next thing we're going to do is we're going to go ahead and we'll where we have the uh shopping basket that div i'm going to apply a few classes to that one i'm going to say that's a flex container oops lex container this is a flex column okay padding of 5 should be applied and here i want to do a space between all the y components of 10 with a background of a white okay and as you can see now we've got the padding being applied and then we will see once the sort of children components are inside of that they're gonna have a spacing between them of ten okay so it's gonna go ahead and help us out okay whoa we got toa tony he goes i'm from france paris what's up dude welcome to the stream right we have a h1 tag here i'm going to go ahead and say class name and then here i'm going to say let's make this a little it's a little bit too small right now okay so i'm going to do text 3xl hit save and you can see immediately that jumps up in size i want to do a border on the bottom and i'm going to give that a width of uh one so it's pretty much by itself and then i say padding bottom of four okay and there we go look at that it's starting to look clean right you see how quick it can come together right so this is looking great at the moment okay nice this is looking really really good at the moment okay so keep up with me guys we're gonna move a little bit quick here i think we're moving at a very good pace right now right so now what we have is the next portion where we have the items underneath now we don't have any items underneath right so what i need to now solve is the redux portion of the build so the redux portion of the build is where we need to go ahead and basically have the ability so when we click add product to basket it's going to store the item in some kind of global store that the app can then reference and pull information from right so think of redux as a global store around our application now i'm going to go ahead and i'd love to just you know draw this out for you guys so always kind of helps you out i think with a visual representation of what i'm talking about um so think of redux as this right here okay so i don't think i can actually oh no i need to actually activate a quick feature okay never mind that's fine so think of redox guys as a global store okay so if we ever need a variable that we need access to throughout our application we don't always want a prop drill and prop drilling occurs when we have a a variable at a higher sort of component and then say we need that variable our component which is used way down the tree right we have to kind of pass it through as a prop to every level that's not efficient right we don't want to do that and that's going to cause a problem called prop drilling so instead what we do is we introduce something called the redux store or you can use recoil or whatever you want but redux is something which is mostly known in the commercial and production environments so i'm going to teach you that today now i've already done a lot of the legwork and set this up for you but basically what we're going to do is we're going to have a basket slice right so that global store called redux right which basically has all this information inside of it we're going to push some information into a part of that and the part of that is going to be called the basket slice okay and basically let's go ahead and show you how to do that so inside of our code i'm going to give you a run-through of how i've set this up so where we have the pages right here right so let's go ahead and check this out so we have our we have slices right so i've already set this up for you if you click on app store this is where you can see i've set up your redux store okay so here we basically have that global store so this essentially is the global store setup okay and inside of our global store so this is inside of the reducer we have one slice so think of an onion onions have multiple slices inside of it so you could have you know like you could have use a slice a basket slice and all of these slices contain information which is relevant to that slice except for example items in the basket belongs you guessed it in the basket slice okay so let's go ahead and do that right now so inside of the basket slice which i've already set up for you you just need to click into slice basket slice and now you can check this one out and we're using the redux toolkit today which is incredibly simple to use there here is the initial state of that basket slice so the basket size has a global items variable okay and this is how we basically create the size so we create a slice and then we name it so in this case we're naming it basket okay so oops we're naming it basket and then we pass in the initial state as an argument okay this basically gives the uh slice its initial set of variables okay so the next thing we need to do is provide something called actions now we can't just simply go ahead and say change a variable in the global store or change a variable in that slice we have to do something called dispatching an action so let's say i want to go ahead and add an item to our basket i can't just go ahead and just push an item into our basket i have to create an action in this case it's going to be add to basket and that in will contain as an as an argument it will have the object inside of it so the item inside of it so i will do add to basket with the item and then i will dispatch that action and then the global store for example that basket slice we'll then pick up the action and then we can do something with it so i'm going to show you how we can do that very simply okay so here we have two actions so this is where our actions exist okay so these are our actions we've got the add to basket and remove from musk and here you can see we export them as basket slice action so that way we can use them throughout the rest of the application okay so here you can see we've got our two actions set up and these come with two things the state and the action itself now the action itself actually has something called a payload inside of it so when you want to go ahead and push an item inside it will be inside the action.payload but we're going to explain all this in a second the final step is when we have this global store how do i then pull a piece of information from it right so we have this amazingly useful basket slice now but i want to go ahead and actually fetch that those items from the basket so we use something called a selector a selector means that we can go ahead and you know create a very useful little function and then we can go ahead and call it whenever we need to grab that information and it should just go inside that slice fetch it down and then we can use it okay so extremely simple to use once we go ahead and do it now we just broke 500 likes that is insane thank you so much let's push for 600. now let's go guys remember don't quit when it gets tough right now you might find redox a little bit tricky in the beginning but trust me make it your best friend because this is where you will stand out against the junior developers right so here is the selectors and the the syntax is simply select and then whatever you want to go ahead and pull so in this case select items access is the state which is the global state goes into state goes into the basket slice which is basically named here and then we're going to get the items variable which is this one here okay so i'm going to show you how to do this this is the setup and already i've done all of this for you okay so i'm going to go ahead and hit save here um bichar you can feel free to ask all those questions in facebook okay so now we have the select items this looks great so what i'm going to do now is go over to my um home page right so we're going to go over to the product feed because this is where we're going to go ahead and implement some of those features so we're going to go inside of our product and where we have our product thank you so much mohammed he went ahead and dropped a donation saying please do some flutter projects we'll see i'm kind of moving on the react native stuff very soon so we're going to maybe see about that one um but yeah let's carry on guys so right now where we have the add to basket button right now we have no on click right nothing is special is happening when we are using this right now but what we want to have is when we click it i want to add something to the basket okay so how do i get that working in the way that we need to right so it's actually pretty simple to be honest okay that what we can do here is we can go ahead and actually firstly i'm going to make a inline function here so i'm going to go and say on click i want to go ahead and trigger a local function which i'm going to write in a second and call it add item to basket so i need to actually make this function so i'm going to go up to the top of my code above the return and i'm going to say const add to item to basket and then we're just going to do a little arrow function okay so here is a function that gets that gets triggered whenever i click the add item to basket okay now inside of add item to basket what do i want to do remember i said if you want to go ahead and push an item to that global store we have to dispatch an action right so we're dispatching the add to basket action right so i'm going to show you how we do it so the first thing we need is the special dispatch think of it as a gun that you shoot into that global store right that's how i like to think of it so in this case we've got const and i'm going to say dispatch equals use dispatch this is a very handy little hook provided by um react redux the little toolkit okay so we're gonna do use dispatch this gives us a special gun that we can go ahead and shoot actions into redux okay so we've got this dispatch now the second thing i need to do is import the action add to basket so i'm going to click on add to basket over here and then we can go ahead and check that out now what i'm going to do is i would love to show you the redux uh toolkit the redux of dev tools if you're using chrome install something called a redux dev tools i'm not going to open it now because it kills my ram whenever i'm using uh whenever i'm live but use something called redox devtools open the inspector and then when you click add to basket see where it's actually going ahead and showing you all the sort of you know actions that are being dispatched it's incredibly useful i promise you very very handy stuff okay guys we are almost at 600 likes holy crap let's keep going so we've got to basket i'm going to copy that now when i click add item to basket remember this function gets triggered off so i'm going to go into this code right here and this is where i want to push the item into the store okay so what i'm going to do is let's think about the product the product that comes through comes through with these props so essentially these props are the product that we're going to add to the basket okay so this is a product right here so it's an object which has all of these props inside of it okay so this is our product right this is the product that we're gonna add to the basket then what i'm gonna say is a dispatch so dispatch and then i'm gonna go ahead and say add to basket so i'm dispatching an action and the payload of that action remember i said you can pass in a remember you can pass in an argument anything you want right inside of this action so i'm going to pass in the product right so here what we're doing is we're basically sending the product as an action to the redux store right basically the basket slice right that's exactly what we're doing right now so we're dispatching an action into the redux store and we're passing the product inside of it okay so that's how we do that now okay we've shot an action up right we've shown action up and then how do we go ahead and actually do something with that action okay so now the next step is we go into our we go into our basket slice and then here once we're inside of the basket slice let me go ahead and grab my basket slice what we can do here is we can open up our add to basket and we all we need to do is the state dot items right so here what i'm doing is i'm manipulating the items in the global store and this uses something called a mutable js under the hood so don't worry uh if you ever think you know you shouldn't you shouldn't change a variable like that it's actually doing something very clever very clever under the hood okay so we're gonna do state dot items and we're gonna say equals pay attention here guys we're gonna pass in remember the data structure is currently an array so i'm gonna pass in an array okay and what i want to do is i want to keep whatever is currently in there right so what we do is we say spread whatever the current items are so this is basically going to ensure that we don't lose whatever else we're basically just you know we're copying the current store right this is exactly the same as what we typically do right this is exactly the same as the way that we currently do it now guys we are currently almost at 600 likes let's keep pushing i love you guys i appreciate everyone so this is how we go ahead and do it all right i'm gonna hit a comma and then i'm gonna say the item that we're gonna add is the action payload so you see how it comes through here and the payload actually contains that product that we passed in so what i'm going to do to make it extremely simple is here right so this is my product over here okay so you can see this is where i dispatch the product and then redux picks up on that and then it remember it basically goes through to here and this product is available over here action.payload so this product is being passed through as the payload right so i hope that makes sense right so what we're doing now is we're going to go ahead the internet is back i think we're good okay so i'm going to go ahead and hit save and now this is actually adding the item to the basket but how can we prove that right how can we actually go ahead and prove that it is currently inside the basket right the way that we can do this is we can go ahead and close our baskets nice go into our header and remember guys i want to go ahead and pull our items from the basket now so i've already got this you know whole process of when we've gone ahead and pushed it into the redux store thank you siddharthi goes um best explanation ever i appreciate it dude so inside the header oh we have the pop around going that's good right so inside of the header now i'm going to pull the items from the global store so i'm going to say const items equals and remember i told you about the concept called a selector a selector is where we can go ahead and grab some information from that global store in particular the basket slice of the global store so i'm going to go ahead and grab it and i'm going to say use selector which is a very handy hook that they give us right and then all i need to say is the selector that i'm after so in this case the selector was called select items right and then you see how we imported it from our basket slice okay so now if i hit save this is the items in the basket so here's where the genius part comes in guys i can go down to where we have the hard coded zero so right now we have a hard coded zero inside the basket and i can go ahead and say okay i want this to be items dot length right so items dot length and now what this will do guys is it will go ahead and give me the length of the number of items in the basket okay so let's go ahead and hit save now somebody says why not simply do items.push because you should always do an immutable update to an object right you shouldn't ever kind of change the current object so this is the sort of standard of how you should manipulate variables it's just something to know and practice and there are reasons for it but i'm not going to get too far into it okay so guys i'm going to have a quick hydration session and then we're going to carry on and i'm going to show you how all of this tied together in one go okay guys and if it works smash that thumbs up button and let's push this number over 600 let's go okay so right now we just gone ahead and implemented all of the moving parts so if we've done this correctly guys and when i click on add to basket it should dispatch and add to basket action which will then go ahead and push an item into the store which we are basically selecting over here and then we should go ahead and say items.length which would change this number to a one boom there we go guys it worked right if i go ahead and keep on adding stuff look at that guys it is literally adding it to the basket incredible stuff that is working everything is just as we needed it okay so what we can do now to go ahead and ensure that this is not fake that this is actually what the like is he's not lying when he's doing this is i can go ahead and actually you know start rendering this out on the page okay so what i can do is and typically what i would say is console.log it right and then that's going to help you out redux is so easy explain that way thank you so much jm ninja i hope to god that explanation helped you out because i know when i was learning redux i just needed someone to say it like that right i needed someone to explain it that way and i wish i had that because it would have made life so much more simpler right so now what i'm going to do is i'm going to go into my basket and this is where i want to render out the basket content so you can see we have six items over here and the beautiful thing about nextges is it does something called fast refresh which means we don't lose our state which makes it extremely easy to code and not lose our state okay so here i'm going to go into my checkout page and then we can go ahead and say it works jm ninja nice stuff good job dude so at the bottom over here underneath the shopping basket i'm gonna go ahead and render out the items okay so where we have the checkout what i'm actually gonna do is i'm going to go ahead and pull in the item so remember if i want to do a select from the redux store we say const items so i'm going to say const items equals use selector oops use selector there we go select items okay perfect okay so now we have our items and then what i'm gonna do is underneath so right now this is where we have um the shopping basket but i wanna do another little upgrade here right i wanna basically if i don't have items in the basket i want to not say your shopping basket but i want to say your basket is empty okay so here what i can say is items dot length right if it is equal to zero then i want to say your amazon basket is empty okay otherwise right i want to say shopping basket and if i hit save on this then we can see it says shopping basket right but if i go ahead and refresh because it's non-persistent it's going to say now we have no items in our redox basket your amazon basket is empty okay so if i go ahead and add a few items to the basket if we've added three items click my shopping basket and now it says shopping basket great stuff right this is looking good so what i'm going to do now is i'm going to go ahead and map through everything so we're going to go outside of our h1 go into a new line outside the h1 and then i want to say jsx items dot map okay now for every single i oh what we're done here items don't matte for every single item right and what we can actually do is put in parentheses and also get the index and this basically is that the count so it'd be 0 1 2 3 4 5 as we go ahead and pull it through i'm going to go ahead and do a return so parentheses and then i'm going to render out a checkout product item now the checkout product item is basically going to be this item right here so each of these different things is going to be called something like a checker it's going to be the checkout product component okay whoa just like saying what's up man he goes copies on me bro this looks like an amazing bird shout out to dash and this beautiful bird that starts so much talent in this community that's incredible dude thank you so much justin absolutely killing it just pushed over 100k in his career incredible stuff and he's part of the papa fam and he's part of zero to full sack here incredible incredible guy guys let's carry on wow i'm getting thirsty this is a lot of energy today okay let's go guys almost to 600 likes okay so now what we're gonna do is i'm gonna go ahead and render out the checkout product so i'm going to type in check out product now obviously we don't have this built okay so i'm going to go ahead and say um check out products i'm going to go into my components create a component called checkout product dot js okay there we go now i'm going to underscore rfce and this is going to represent a checkout product okay so now what i'm going to do is i'm going to go ahead and say um where is it going check out product there we go check our product like so nice so here what i want to do is i'm going to accept a few props so check out product accept some kind of props right so here what we should be able to do is destructure and then the props that it is going to accept are the following props okay so i'm going to go ahead and copy and paste this in so these are the props that i want to accept id title price rating description category image and has prime right so let's check this out so now i'm going to go ahead and say checkout.js now here what i do is i simply map through our products in the checkout page and i item has all of that information inside of it right so inside of checkout.js what i can do now is firstly remember whenever you're mapping through an item array or anything like that when you're mapping through something in react always include a unique key now if you don't have a unique key you can use the index but it's not the best thing to use but worst case you can do it okay but i'm not going to say you shouldn't do it in every build but this time we'll do it for this one right but what we can say is key and then i'm going to go ahead and say i and then afterwards let's go ahead and pull in the rest of the props so in this case i'm going to go ahead and say the rest of the props are going to be id equals item.id title equals item.title and you can go ahead and destructure it here if you want to so you don't have to say item dot but this looks a little bit clean okay so that's awesome we're pulling through the products and then i'm gonna go ahead and import check out product okay so firstly i'm gonna go up to the top of my code and i'm gonna simply go ahead and um i'll copy this line and i'll go ahead and rename this to become checkout product okay so now we have our checkout product variable right so if i go through to the checkout product now what we should be able to see if i go ahead and open our checkout product now what we should be able to see is all of our stuff being pulled through so all we need to do now is build out the checkout product okay so the checkout product is going to consist of a few things we've got the left side the middle and the right side okay so what i've actually decided to do here is do a grid system and this is believe it or not this is five grit like it's a column these are five columns here right so it looks like three columns that you might have right you have like the one the two and then you have the three okay so you have the sort of you know one column here and then you have a second column which means you have one two three but in fact what this is really is five columns and the the middle one takes up three right that's what i've decided to do here okay so what we're actually going to do is oh sorry skier yes that's a very good idea you can do that made me have a little bit of tongue twister there um guys we're almost to 600 likes let's go okay so let's go ahead and carry on what we're gonna do now is inside of this we're gonna firstly have the image right but i'm gonna like i said it's gonna have a grid system so we're gonna say grid and then it's gonna say grid columns five okay grid columns five and then we're going to have an image tag this is going to be a next.js image tag so i'm going to go ahead and say image tag pull it in from my image like so okay and then here i'll say the source is the image prop that came through and then we have the height and width now the height we're going to set to 200 the width we're going to set to 200 let's go ahead and say 200 and then we're going to do our object fit contain because we like to keep our aspect ratios we don't ever want anything stretched nice you can see some products all right this is looking good right this is looking very nice already right so now what we're going to do is you can see the reason why it's chucked over here is because it's columns of five so it's assumed that this is in the first column right so now what i'm going to do is build out the middle section okay the middle section is this section over here and i want the this section to span across the three of five columns so this is going to be the middle section and here i want to have a div right which basically has a span of three so it's going to span across three of the five available columns so i'm going to say column span of three and on this left and right i want a margin of five so as you can see it's pushed away from this and it's pushed away from this so that's with mx5 okay now here i'm going to pop in a p and title now look how beautiful everything starts to pop in so look at that the title pops in all right so we've got our title here and then i'm going to have the stars now remember we did a nice little trick yesterday with the stars so i'm going to do the same thing here so i'm going to go ahead and say array array and then i'm going to say ratings we pass in the array rating and this is to go ahead and remember this little trick that we did yesterday and then what we do is we say array.fill dot map and then remember we don't care about the value but we do care about the index and i'm going to map through these values and return the star icon okay so what i'm going to do is i'm going to pop in the star icon here okay and this we should be around parentheses and the star icon i'm going to go ahead and pull in from react from the hero icons okay so here what we've just done is we should now be able to see the relevant star icon from the basket so this has a five star rating so if i pull this in we should be able to see a five star rating which means that our styling here isn't correct okay so we need to go to our div and say class name flex and now uh once we've gone ahead and configured everything correctly then we should be able to see it all popping in as and when it's needed okay but for now we see a higher five yellow text there we go okay so this is looking okay at the moment we'll fix this in just a sec and uh yeah so we have our div there and then after this we're gonna have a p tag and the p tag is gonna have the description inside of it 600 likes let's go guys 600 likes and we still have incredible retention you guys are killing it keep it up i can't believe you guys actually like the way you are committing to this build is incredible this is what a pop-up farm is about i love this and i this is what it's about guys thank you so much right so after we're going to go ahead and pop in the description okay now the description comes in like so now obviously this looks a bit messy okay so i'm going to go ahead and start this a little bit i'm going to say the class name here should be uh let's go ahead and say this would be extra small text right because we don't need to spam out that section margin top of two because it's too close to the top star right oops let's go ahead and do it inside of here that'll help us out margin top of two margin bottom of two which means that we can just do our little you know rather than saying this we can go and say margin y of two and i'll do the same effect and then we're gonna say line clamp of two okay actually we'll give it three in this case right so now it should clamp it after three lines so that starts to look pretty good all right so i'm starting to like the look of this and i do want to check one thing quickly i just want to go ahead and grab this uh over here and just double check that i've entered this incorrectly okay we're good yep nice so now what i'm gonna do is i'm gonna go ahead and where do we have our description awesome and then we have our currency so the next thing i need is the currency package okay so currency is remember we used it yesterday for it's called react currency formatter and this is how we represent images on the screen okay uh max says brother sunny i'm working on day two almost finished awesome greetings from valley indonesia amazing stuff i was actually going to move to bali at one point so that's awesome dude and uh great to see you there forehead says your live streaming video skills is awesome thank you so much dude so we've got the currency here right now for the currency i'm going to say the quantity is the price of the prop that we passed in so here i'm going to say quantity and this is going to be the price and then what i want to do is say the currency is actually going to be gbp because you can change it up if you want i'm going to be using gbp there we go the price is now coming in awesome looks great all right this is looking very nice so far uh and then we want to go ahead and just check on okay great looking good okay so then the final thing i want to do is we've got the currency here and i'm going to go ahead and do the prime okay so we're going to say we're going to have a little bit of jsx and say if it has prime so if this person or no sorry if that item has prime delivery then i'm going to go ahead and return the div and this div will have the class of the following it's going to say a flex with the items in the center and i want to have space between the x components of two okay then this div is going to go ahead and say and guys if you haven't already remember sign up to the final day right if you're enjoying all of this stuff to get a chance at getting any kind of prize sign up to the last day remember every single person who turns up is gonna get something so i will i cannot wait to show you sign up first link in description let's carry on so we've got the div here i'm gonna pop in an image tag and this image tag is gonna be that little a prime logo so i'm gonna go ahead and pop in this now you can go ahead and optimize this a little bit if you want with that next gs image tag but i'm going to show you how we can do a mix if you want to if you need to right now remember whenever you have this i'm going to say loading is lazy okay now we should see for anything that has prime delivery let's go ahead and double check let's say this one has prime delivery so i'm going to click that then we should be able to see so right now we can't see the has prime which means we're most likely not passing in that prop correctly at this point right but before we go ahead and con and scrap that one off right we're going to go ahead and firstly add in free next day delivery right and i'm going to give a class name here of text extra small because i don't want it to be too big extra small and i want to do text gray of 500. now i am going to check through to see if i'm passing through these props correctly okay so how do we do that we go to our checkout and let's just double check that we're passing everything through so here we have the item right now the item let's go ahead and double check it so inside of checkout we have our product being mapped through awesome stuff and then we have the items as so okay this is looking great and then what we need to double check is that when we're actually adding the item to the basket so let's move over to product let's make sure that we're actually pushing in all the things so here is the problem right so here we weren't actually passing in all of the relevant things right so this is a problem that you're going to have to be aware of what we want to do is actually pass in all of the appropriate things so right now i was adding in not all of the product details so here i want to say id title pricing description category image and has prime so in order to get a correct look at this now we refresh go back to our amazon add the items so we've got one star 2.5 star go back and boom now we have all the relevant information okay so very important to not miss that step okay but that's a very easy thing to debug if you do want to check how to debug it you can always console log to see what props you're passing through okay so let's keep on nailing it guys check out product let's carry on so now we've got the next day delivery section looking amazing at this point right and then we're gonna have the button now remember we have that beautiful little functionality so if we go underneath this div and then we're going to include a button remember we created our own little class name right remember that custom class name a button and then we're also going to say margin top of auto so that way it kind of spaces itself out and this will just say add to basket and you can guess what we're going to do there right so i'm going to go ahead and do some kind of add to basket functionality there oops sorry no this is not what i was doing sorry this is the wrong thing i've kind of got that bit mixed up so we need to go back to our product and there we go so the right hand side this bit what we actually want to do is two buttons are very confused we need two buttons on the right hand side so what i actually want to do is after the has prime what we're going to do is go out of this so we're just going to go to the ending div i let a line up from the ending div um somebody says am i too late no you're not too late don't worry dude you can always join this challenge it's not never too late so here we're going to have the right add and remove buttons okay so it's gonna say write add and remove buttons like so hit save and then we've got the div okay awesome i'm gonna have two buttons in here one is gonna say add to basket and one is gonna say remove from basket so i'm gonna go ahead and paste it and one is going to say remove from a basket nice looking good okay so this is looking great what i can then do is do my double cursor trick so if you click option and click in two places you now get double cursors and here i'm going to say buttons a nice little trick for you and now they get the button styling okay now in order to get them looking the way we need to i'm going to go to the outer div go ahead and say class name equals right and stick with me guys we are almost there okay we're going to say class name equals flex flex column okay and then we're going to go ahead and say space y of two all right so this is looking great at the moment the space wipe two m y of auto so margin on the y-axis auto and i'm also going to say justify self on end okay so there's a little trick to kind of place it in a nice way okay so it's looking pretty good right so now you can see look at this guys go ahead and mess around with it and you can see it looks amazing right so this is looking great at the moment all right so everything's looking great now the thing that we're missing is this right hand side portion okay so firstly i want to go ahead and actually hook up the add to basket functionality which we already pretty much did earlier right so we're going to do the same principle here and we'll say on click add item to basket so it's going to be a local function add item to basket go ahead and copy the file name go up to the top and then what we do is we go above this and we go ahead and say const add item to basket and this is going to be an inline function there we go and here what i'm going to do is very similar to what we did before remember we need to dispatch something so i need the dispatch gun that's what i like to think of it right dispatch gun and then we say equals use a dispatch a very handy hook to get hold of that dispatch object okay guys we're almost at 700 likes wow pushing pushing right so i'm going to go ahead and we push that or we pulled in the dispatch and i also need to import the add to basket and this time i'm gonna import the remove from basket we haven't yet coded it but we will do that okay so let's go ahead and check it so the reason why it says add to basket here is because i'm going to allow you to add in a second one so if you want to add a second one or third one or fourth one you can go ahead and add more in if you don't want to you can just have remove from basket it's okay right but i'm just showing you how you can do both okay let's go ahead and check this one out right so now what we're gonna say is um we're gonna go ahead and um click on dispatch okay so this is gonna go ahead and say dispatch and then here i say add the item to basket so add item to basket open parentheses and instead usually before i create the product beforehand we can do it again we can say const product it's going to say cons product equals and what i'm going to do here and the product itself is going to be all of these things over here okay so it's going to be the id the title all that stuff great and then we're going to add the item to the basket it's going to be this product okay so again this is where we push it into the redux store so push item into redux nice and then if i was to go ahead and click add to item to basket now boom we added another one to the basket if i click men's cotton jacket boom and your challenge is going to be an additional bit of homework here where you can pretty much go ahead and if you can group them together that would be awesome as well okay so i'm leaving that up to you guys if you want to go and implement it but like as some kind of you know a counter of how many items are in the basket that would be amazing as well okay so again leaving that up to you guys to go ahead and implement okay the next thing we're going to do is go ahead and say on click oops out of this we're going to say on click remove item from basket okay so this is the next one we're going to say cons remove item from basket okay now here what we're going to do is create another inline function and this one is going to be at the top so we're going to say const remove item from basket it's going to be another inline arrow function okay and then here what we're going to say is a dispatch and we're going to do a remove item from basket so remove from basket action is going to get submitted but here what i'm actually going to do is i'm going to pass in as an argument the id as an object okay so it's going to be id as an object so all i want to do is i want to pass in the id and then i'm going to have the logic inside of the basket slice which will go ahead and find the id uh the item and remove it from the basket so we're gonna build that right now okay so this will go ahead and say remove the item from redux okay so quick little water break guys we are doing amazing we still have 280 people across platforms breaking 700 likes very soon incredible stuff guys let's keep on going we are so close guys all right so now what we're going to be doing is we're going to implement the remove item from a basket functionality so i'm going to hit save i'm going to go to my basket slice okay now inside the basket slice guys what we're gonna do is implement a bit of logic here now this bit is actually pretty interesting okay so we have a problem here we need to go ahead and find right the item with the id of where we click and remove from basket so when i click this i have an id so i need to go ahead and do a bit of javascript now to go ahead and say okay search for it so what we're going to do is we're going to search through that list and find something called the index right so what i do is i say const index equals and what i'm going to do is i'm going to find the index of that item so see if it exists inside that list so i'm going to say state dot items all right to go ahead and go through the redux items and say find it the index this is a es6 function and then what we do here is we get every we go through every single basket item now for every single basket item i need to check a check against something right because remember we're trying to find something which matches the id that we clicked remove from okay so what am i checking i'm checking against the basket items id so the item that we're iterating through i'm checking against that one and i'm checking if that is equal to the the id that we pass in and remember what i said when we pass in this id it comes through as the action dot payload so here i can say action dot payload dot id okay so that line in itself is going to go through and find the item okay so this is just going to refresh which means you lost the state for now that's fine but for now let's focus on this right so we're going to go ahead and say const index equals find this right so this will go ahead and go through that list and if it finds it it's going to go ahead and do what we do now this is actually kind of easier for you guys to see because it's a bit more personal with me so maybe this will help you out when we're doing this the next thing i'm going to do is say let index right uh let's sorry new basket so i need to create a copy of the current basket and this is very important because i'm going to be changing the current but the current basket and then it's going to go ahead and do its thing so we're going to say make a copy of the current basket so make a copy so an array with state the item so this is basically a copy of the basket and we're going to be able to change this one as we need to and now this is the important part okay if it found the item that we were trying to remove this index will be greater than zero so obviously if it was in the third place in that list it would be there at the third place right if it wasn't found in the list it returns something it returns a minus one value so what we can do now is we can go ahead and say if the index is greater than or equal to zero greater than or equal to zero then we we have an item so the item exists in the basket exists oops the item exists in the basket remove it basically okay else the item doesn't exist and in that case what i can do is i can say console.worn for example to provide some useful information and i can basically go ahead and pop in something like this i say cannot remove the product as it's not in the basket okay and you probably wouldn't reach this point because it won't even show you the product on the page in the first place but it's good to you know showcase yourself like that somehow says it's the best youtube channel on the plan thank you so i appreciate it dude thank you so much so what i'm gonna do here is where it says the item exists in the basket remove it at this point i'm going to say new basket so with the copy dot splice now what we're doing here splice is a very interesting function it's going to go ahead and go to the index that we found right remember we click remove item from basket and we have the id that we passed in right we go ahead and we check if that id exists in the list if the item exists in the list it will give us a number of where it exists in the list so what i'm doing is i'm splicing that point in this splicing basically just means cutting it out right so i'm going to that point in the list and i'm cutting it by one which means that it basically just removes it from the basket that's essentially what it's doing okay and then the final bit of logic to this to make everything work is we just say state dot items equals a new basket because what actually happens here is it cuts it out and then what we're doing is we're assigning the items so the global store to that basket the new basket which has the item removed that is how we do it okay that's how we do it and that's going to be awesome so let's go ahead and hit save okay so let's go ahead and check this out now let's see if all of this hard work went ahead and fixed our issue so let me know guys if you like that view if that actually made it quite handy now some people are saying use the filter array the filter array will get rid of all of the items with that id so you don't want to use filter lots of people make this mistake if you do filter it gets rid of every single item with the id you don't want to do that right that's why you don't want to do it so a lot of people are asking that question um so yeah so now you can go ahead and check this one out so what we're going to do now is click on amazon click on some items over here let's go ahead and pop this in nice and then what i'm going to do is go ahead and click on the basket now if i click on remove from mask here boom it worked right guys we are so close to 700 if you thought that was pretty cool that we can add items to basket and i can remove them from the basket i can remove it from the basket and add as many as i want remove as many as i want until your amazon basket is empty awesome stuff guys so the state work is working everything is looking great right so everything is looking amazing right now we are so close guys to the end point so stick with me we are nearly there let's keep on moving strong let's keep the energy high the next step what we're going to do is implement this subtotal section on the right hand side okay so how do we implement that section we go back to the checkout product okay so the checkout product is got the add to buy add to basket remove from basket section and then what we have is we go back to checkout sorry we go back to the checkout page so where we have the checkout page let me go ahead and just double check where we had this checkout page what we want to do now is ah rishabh says i purchased um so richard i'm not actually part of pwj so this is my course it's called zero to full stack hero it's different i'm not in pwj just fyi right so that's uh i'm not part of that right so i just want to make that very clear to everyone watching okay uh avnish says will you deploy today yes because remember we connected to verso yesterday so all i need to do to deploy today is push my code to github and then it will trigger a redeployment but i'm going to show you how to do it okay so now if i go and click on the right hand side so what we're going to do now is if we're inside the checkout page i'm going to build out this portion over here okay so i'm going to click on i'm going to say length so items dot length so if you're rich if you can feel free to check out papa react.com to check it out okay so items.length if it's greater than zero then i want to go ahead and render out that you know if we don't have any items in the checkout so if i remove everything i don't want to show it right but if we do have items there then i want to show it okay so let's go ahead and see this unity shop what's up welcome to the stream then click this out go ahead and click on the basket there we go so i'm going to go ahead and build this now so if we do have items then what we should see is i'm going to just put a react fragment because we're going to have siblings here so this is the same thing as a div basically right it's no different to a div and then i'm going to say h2 okay and then here i'm going to say okay i want to have the subtotal okay so subtotal oops subtotal okay so let's go ahead and do subtotal and i'm going to add an item to the basket so i can test this as we build it so you can see the subtotal is appearing at the bottom right now cool so we've got the subtotal and then what i'm actually going to do here is implement a bit of cool logic so i'm going to say this open jsx i'm going to say items.length items dot length okay because we want to see i mean i'm gonna wrap this in brackets so it looks pretty nice so now you can see two right so then what we're gonna do is we're gonna say two items right and then i'm gonna go ahead and do the following say colon and what i'm going to do here is i'm going to do a jsx sort of space so i'll show you that afterwards but all i'm going to do is actually span in something so i'm going to span right a currency right so i'm going to expand in the currency so just bear with me i know it can be a little bit kind of crazy there we're going to span in a currency so now it says cannot you cannot find currency all we need to do is go ahead and import our stuff at the top so let's go ahead and import the currency at the top cannot find the variable total oh interesting okay so i'm going to show you how we implement the total in just a sec all right so we can copy we can comment that one out for now but we're going to prep ourselves and we're going to say font should be bold here okay so the total of the items in the basket so like this for example i'm going to create a really nice little function which is going to make it um be make it work okay so that's going to be awesome so now what i'm going to do is actually have a button underneath the h2 so i'm gonna have a button underneath this h2 for the h2 as well i'm gonna have a class name so while we're doing that i'm gonna have a class name of white space no wrap okay and then what we're gonna do is gonna have a button and then here i'm going to say okay if there is a session all right so if there was a session so what i want to do is i want to protect it if you're not logged in you're not allowed to check out okay so that's what i want to do if you are logged in then you're allowed to check out so i'm gonna say if there is no session then it's gonna say sign in to check out right because we need a user when when we sort of check out otherwise it doesn't make sense right otherwise it will say proceed to checkout okay so right now it says cannot find variable session so what we need to do at the top is pull in our session remember we were using uh we created our authentication portion at the beginning of today's build so i'm going to go ahead and say const session equals a user session import that from next auth and then go ahead and hit save looks great and see right now it says sign in to check out okay that's perfect we're not signed in at the moment which is fine we can go ahead and do that now what i want to do is if we're not signed in i want to have this gray look otherwise i want it to be a button so the way we can do that is we can say class name equals by default it's a button all right so we're going to get the nice styling but remember if it's grayed out then what i'm going to do is very simple to implement this all we do is we get rid of oops we get rid of this we go ahead and put it pop in these and we put uh our little sort of back ticks instead and then we go ahead and say um jsx and then what we're going to do here is we're going to say firstly i want to do margin top of two so we're going to you know push a bit of spacing a little bit okay and then here i'm going to say oh do we have no do we have a donation i couldn't see it oh okay i don't know what's happening oh wow and they uh thank you nikitha devon says thank you so much danny for introducing me to tellwin css firebase next chess and more awesome video keep going thank you so much that was actually a donation through the uh the other link which is amazing thank you so much so now we've got button mt2 and then here i'm going to say okay if there was no session all right then i'm going to apply the following styles so this is how we apply those stars we say from gray 300 so i'm going to get a gradient to gray 500 right and then i'm going to say border should be gray at 200 and the text should be gray at 300 okay and i want to do cursor not allowed right that means that you were going to get a nice little cursor which says you can't click this right if i hit save now boom you see how it changed to sign in to check out look at that that's nice that's very clean right so it's extremely nice and clean to see okay so what we're gonna do now is actually have a quick water break so a quick little hydration and guys we're so close to the end now right so keep on going nearly at 700 likes guys absolutely crushing considering this is day three of the challenge wow it's incredible how many of you are sticking through let's go guys okay so what we're going to do now is i will toggle actually word wrap so let's go ahead and toggle wide wrap there we go nice so now what we're going to do is we have decided to check out cool looks great so what i'm actually going to do now is for this button i'm going to go ahead and say it's disabled if there is no session so we're actually going to disable the button as well because otherwise it can actually be clicked okay so now what we need to do is actually have that little um the 132 right so i actually have that number before i do i'm going to start the div so i'm going to say class name equals flex flex column i want it to use up the full space and i want the background to be white let's hit save and you can already see a nice little improvement give it a padding of 10 padding always makes things look look super clean so padding of 10 and there you go and then i'm going to give it a shadow of md so shadow of md medium there we go it looks nice now guys and now look what we should see we should see oh look how clean that looks all right so it looks super nice right brahim says watching from france amazing stuff right that's looking awesome right so check this out guys so now we've got the subtotal happening here right so what we're gonna do now is we're gonna go ahead and actually have the price okay so what we do is where we have a selector to pull in the items what we can do is we can actually create any selector we want so what if we want to have a selector which rather than giving the uh let's go ahead and talk a word right here i should actually just say enable this by default so rather than having just selecting all the items what if i wanted to like implement something better which said export so let's go ahead and make a new one so export cons select total okay and what this is going to do is it's going to have access to the state but what we're doing here is i'm going to teach you guys something called a reduce now what we what what our mission right now is to go through the items inside of our global store and basically calculate the total so i want to go through every item and accumulate all of the prices into one number so this is where we use something called a reduced es6 function and this is going to go ahead and calculate and accumulate all those values up into one value and that's going to be available as a selector that i can easily access whenever i need to so incredibly uh powerful stuff right so now i'm going to say state dot basket dot items sort of items and then what we do is we say dot reduce right now this syntax right here is an interesting one so you're gonna have to pay attention there this gives us two things so open up your parentheses it gives you a total which we can decide what we want to set as so what i can do is i put a comma at the end and i say the total is going to start at zero and then we actually get the item for everything every time we loop through remember we're looping through all the items okay so what this does is we loop through every single item we're saying the total should get added to and we're going to add up the item.price so think about what's happening here okay so look at this guys and this should make a bit of sense as to what's going on so we're mapping we're reducing through which basically we're iterating through all the items in the list we have a total which starts at a price of zero and then every single time we iterate we're saying total equals basically to add on the item price to the total okay this will go ahead and bubble up and then go ahead and you know create it now uh we've got ammon singles hello from france thank you for your amazing videos thank you so much dude for watching make sure you're there for the final day sign up to the first link in the description i appreciate it amazing stuff so now what we're going to do select total i'm going to grab this and you guessed it we're going to go back to our checkout page i'm going to say total equals use selector select total and now this will give me that total yeah so now we can do is we can go down to our code and then we can go ahead and uncomment this and now what we should see guys is if i hit save on this and we go ahead and add some items to the basket let's go ahead and add a few things to this basket go ahead and do this boom we get a tool right now if i want a little bit of spacing to the left of that right you can do it two ways right but i'm going to go and show you a little hacky way you can go ahead and add a space like that or you can do a margin left however you want to do it it's completely fine but there you go guys now look at this completely responsive and it actually goes ahead and works now i want to show you something if we sign in we should be able to see proceed to check out so let's go ahead and refresh we will lose our state but we're going to go ahead and sign in i'm going to sign in as papariat.team and then boom we should add a few products to the items add a few items to the basket sorry let's go ahead and add a few there we go basket is there and now it says proceed to checkout and look at this if i remove an item from the basket that total is always going to reflect the latest value and it's calculated based on the items in the basket so incredible stuff and uh sema says i just subscribed keep going amazing stuff remember if you are watching and you're enjoying this thumbs up we're about to break 700 likes and make sure you subscribe because so many people are watching right now that aren't subscribed so make sure amazing stuff welcome to the paparazzima and then once i click proceed to check out we're going to go ahead and you know we'll implement that in tomorrow's build but guys with that said we just went ahead and built the checkout page with redux we have authentication with next auth that's incredible everything is working the way we need it this is looking amazing now all you need to do next if you are carrying on from yesterday's build you would have already pushed your code to versa okay so if you don't know how to deploy to github check out yesterday's video all you're going to need to do is push this code if you're connected to versal and it will go ahead and redeploy your application okay so i'm gonna go ahead and show you how you can go ahead and do this right now so once we go ahead and uh once we've got our code up and running now what we do is we hit command j and then i've got my code over here so i'm just gonna double check if i got my remote so i'm going to say git remote dash v you don't need to do this but there we go i've got mine connected to the right repo perfect stuff so what i'm going to do is i'm going to say git add all okay so it's going to add all my stuff so i'm going to get status and this will see you should see everything green because i'm going to go ahead and push these files and then i'm going to go ahead and say git commit dash m and i'm just going to say something like you know this is a day three okay push it get push and this will go ahead and push it to my github okay so if you've got this connected to your versa then it would trigger a redeployment versa once it's connected and guys we just broke 700 likes so i'm talking about that's incredible thank you so much let's keep going guys wow honestly incredible incredible stuff guys so i'm going to go ahead and log into my versatile account quickly and i will show you how i have this set up so i'm going to do a quick login and in the meantime hopefully let's go ahead and quickly continue into github and uh let me just do my login in fact what i will do here is i'll pull up my uh i will open chrome for this one guys so brace yourselves we're about to use up all the ram in the entire planet just to get this working because chrome does that when i'm live for some reason right but you know it's okay it's all right so i'm going to go ahead and pop in versal there we go and now once i've got versal open you can see amazon youtube youtube is connected over here so if i click on this right now you can see look it's deploying the latest version okay so for your homework for tomorrow is very important remember the second link in the description is how you submit your homework what you need to do is deploy so push your latest code to versal so to github which will then trigger a redeployment if you don't know how to connect to traversal watch yesterday's build and then you will be able to get a link so in this case i've got my link over here let's go ahead and check it out let's go ahead and see if it just did it right now it's saying deploying right now so it's building it out right now boom it just done it look created one minute ago so now if i go to the deployment we should be able to see if i click on the domain you should get your url and let's just double check it if i add to basket boom i'm adding to the basket it works i have to sign in to do the checkout that's great okay but remember guys just bear in mind i will warn you of one thing when you do this step right you're when you do your authentication you're gonna get this error so if i click sign in now and i click sign in with google look what happens this is from the versal deployment wait for it we're going to go ahead and sign in with google you're going to get this invalid request error this is because we have a we have a missing parameter which is client id think about what we're missing here okay this is very important we added in two environment variables okay when we did the deployment so those environment variables are local to your machine which means inversor we need to upload those variables as well so i'm going to show you how you can push those variables to versal to make it work and everything work together okay so right now i'm going to go to amazon to youtube over here i'm going to go to settings and then we go down to environment variables now over here you've got the add new functions you've got the name of the variable and the value so in this case what i would say to you is go ahead open up your code so i'm going to go ahead push this on the left push this on the right so here on the left i have the environment variable screen and here i'm going to go ahead and open up my environment file okay so right now i'm not going to show the entire key because you guys are going to see it all but oh well i mean no it doesn't matter no you guys can't see it all that's fine oh don't worry i can never get away with this but there you go i'm going to copy my secret i'm going to go ahead and say pop the the value of the secret there and then for the example i'm going to say google underscore id okay and then i'm going to go ahead and say add right so this is the first one that's added the second one i'm going to do google secret i'm going to pop this here and then i'm going to go ahead and pop this value in and then do like so boom and i'm going to go ahead and hit add okay so i've just added in those two environment variables into the build okay so now we have the google secret and google id this is crucial if you do not do this it will not work okay so make sure you do this and this is very important because tomorrow we have a few more environment variables that we are going to have to account for okay also you do have the next auth url as well which is another thing that we have to account for but let's go ahead and see if this will work right now with google's secret and google id so to trigger a redeployment all you're gonna have to do is click on deployments and then where we have the most recent build which was let's just see four minutes ago so let's go ahead and click this and just click on redeploy okay and then you can go ahead and click redeploy and this will trigger off your deployment once again okay this will build out your application once again and this domain right here can actually become your domain that you're going to add to your next auth so what i mean by that is as you can see in next auth url we are currently referencing your local host now once you deploy your app you're going to get a url you need to put that url as your next author url and the same goes for your host down here and then what i would recommend is that you got you go ahead and get your own domain name so i do sunnysanga.com and then these are my values for sunnysanga.com on the local machine that they're the local host but on verso i use the domain name but if you don't want to buy a domain name you can simply use your domain name here to be the values okay so take your time take your take your time with this step if you get stuck the facebook group is where you can go to to go ahead and ask for help okay so let's go ahead and see what happens now most likely what's going to happen is it will deploy and then it will say on the google side we have not allowed that sort of you redirect uri so remember we have to allow it access to that uri before so we're going to have to do the same thing again okay so i'm going to go ahead and open this up one more time and let's go ahead and click overview let's go ahead and click amazon 2 and then it says create one minute ago awesome stuff i'm going to click on that deployment but you could you also get a nice little domain over here so we're going to click this domain okay this looks good i can add to basket it's there i can click sign in great and if i click sign in with google let's see what it says okay let's go ahead and click sign in with google and then here we go this is the next area you're gonna get redirect uri mismatch okay so for this one you need to go ahead and do the same thing where it's very simple to fix this error don't freak out you just copy this link remember you visit this link and then we have to add in these so i'll show you how to do it right now we go ahead and go back to the google cloud platform just go back to our page over on google cloud and then i'm just gonna go ahead and make sure i'm signed in to the correct app so let me go ahead and just quickly sign into the correct app guys we almost at the end right now so this is great stuff stick with me and we are going to keep on going okay so here we do it we have it right here okay so this is where we add in that uri so this was the you the link we had to include so this one right here all the way up into your callback google okay so i'm gonna copy this link i'm gonna go to my client and i'm gonna say okay let's go ahead and add a uri hit paste and you can see it's quite lengthy but it's okay right it's okay and then once we do that i'm also going to go into here and i'm going to copy it but i'm going to get rid of all of the additional things so it should just go up to the point where it says api so it's just a versal.app right and you can have the cleaner one if you want you can have all that stuff to just use this one right that is in the one that you have on your side just get up get rid of everything up to versal app then click save okay now once this is done right and remember these steps are the ones i just want you to take your time with it okay just take your time with it and then and things will be okay and you can click back to go back to your original website okay and then you can try it again so let's go ahead and you know just sign in sign in with google click sign in with google and then boom now it works okay so do you see how it's a very important to make sure you follow these steps carefully then we have the authentication working and it looks great okay so if i click on add to basket add to basket there we go you should get this this is where you need to get to for your homework to be considered complete okay so it should your authentication should work and it's also very essential that you follow those steps because in tomorrow's build we have a few more environment variables that we're going to need to tinker with right so remember do not get frustrated take your time with this end step because it's very it's a little it's not it's not difficult it's just you need to take your time with it okay so you can go ahead and just ask for help in the facebook group or watch this back slowly but i pretty much went ahead and showed you how to do it now so you can go ahead and you know get up to speed with that so remember do not forget the environment step at the end where you add in those custom environment variables it's crucial that you do that step okay jake zoo says i'm late but i'm keeping up let's go amazing stuff tom g says great stream thanks thank you so much dude hit the like button subscribe if you already uh if you haven't already and guys like i said hit the first link in the description to sign up to day five where we give away all the prizes we go crazy and i teach you how the i'm basically gonna allow the ultimate road map for how you can take all of these skills that you learned throughout this build combine it with your portfolio land your dream job and push your career to the best point it's ever been okay uh bashau thank you so much everyone you're incredible now i'm gonna go ahead and just run through what we built today's just to wrap up for today's build we went ahead and built our next auth authentication so now we just done the google sign-in flow we can even click it to log out nice and then we also went ahead and added in the redux checkout page functionality so that way we can have this page right here that is your homework for today i'm gonna go ahead and show you what you can expect in tomorrow's build right so in tomorrow's of build make sure you set the notification reminder hit the bell icon set your notifications do not miss that build because in tomorrow's build i'm going to be showing you how to take it to a whole nother level okay so in tomorrow's build we are going to basically go ahead and be able to add items to the basket just like we did right now but we're going to be able to click the proceed to checkout button and then you're gonna be able to implement this which is an entire payment form right so this is all happening in tomorrow's build i'm gonna quickly fill out the payment details so i'm gonna go ahead and add in some dummy details right now and then give it one second guys we're going to create our own web hook we're going to do so much crazy cool work tomorrow with the stripe cli and stripe and and work good stuff it's going to be so much fun tomorrow okay and then what we're going to do is we're going to click pay this is all happening tomorrow so if you haven't already hit the thumbs up button subscribe because all of this good stuff is going to come to you tomorrow and then we're going to click it's going to process once it's processed it's going to hit a web hook that we are going to create and then it's going to go ahead and confirm your order this would have hit a magic web hook and then we're going to click on go to my orders and then boom the order is now there this is what we're going to build tomorrow everything is fully responsive it looks amazing that is going to be a challenge so day one we started with the front end stuff day two we moved over into the authentication and a bit of more of the harder front end stuff to redux territory day three we go to the challenging point we're gonna push our limits we're gonna implement stripe we're gonna write our first on custom web hook we're gonna learn how to use the stripe cli all in another amazing fun stream this is what the farm's about guys do not worry if you get stuck facebook community like i said hit the first link in the description sign up i love you all thank you so much for today and yeah guys this is incredible somebody said that you know that yeah i've been testing this out if you haven't wondered already i've been testing this out but yeah guys make sure you submit all your homework and i will see all of your beautiful faces in tomorrow's video thank you so much guys and uh as always this is your boy paparat i'm signing off and i'll see you in day four the five day amazon challenge peace guys [Music] i've been worrying about my mental health cause when i'm alone i keep checking my phone seeing all these

Channel: Sonny Sangha

Views: 29,800

Rating: 4.9682999 out of 5

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, web-dev, clone, fullstack, backend, motivation, reactnative, react-native, redux, typescript

Id: uGhekiErHso

Length: 128min 48sec (7728 seconds)

Published: Fri May 21 2021