Jumia Ecommerce Clone built with NextJS Firebase Tailwindcss MaterialUI and Google Cloud Client

good evening everyone I'm welcoming you to my latest project it is a junior e-commerce clone now this website this project I've working on it for about two weeks now it looks just like the jumia website if you download the jumia website it's an e-commerce store jumia.ng as you can see here I have my slider I have my categories you can see this looking neat I have arrival products you can see all the products I have Supermarket products or Supermarket products and I have gaming products this website is mobile responsive as you can see mobile responsive it looks clean needs well ordered and really really nice now if we go to an individual item like this mini mini Chin Chin you know I really like snacks so if you go to supermarket items we can see Supermarket items like whiskey sunlight Mini Me Chin Chin oil if you click on a specific item we can see the item here you can see free delivery is currently in stock we can see the image of the product you can see the product details the specifications and the product features the association of fullness and generosity notes of Ginger and carbine fruits now you can add to your cart sell or Cuts item you can add to your cart C get updated with one item now if we go back to home okay you can click on any project this is currently loading any products if we click on this we come over to here you can see orino Freeport 4 we click on add to cut you can see our store our cart gets updated two items our products details products feature specifications if you go back to our home we have here categories of items if we click on gaming will be will be navigated to a page that will show us all the all the gaming products as you can see here we have gaming products uh PS4s headphones games if you click on the products we can see the price is currently in stocks the shipping fee shipping from 3 000 error you can see you've solved assassins you had to cut now if we go to our cards you can see you can see all the card items that we currently have as you can see here it's currently loading the images uh we can see this free delivery shipping fee one five shipping fee three thousand naira we can see the sub total here 73 000 there you can see the images have now loaded and if we want to remove any item from our cards we can do that we can just click on remove and boom it's removed our subtotal gets calculated our delivery fee look at it here and then our total will be the delivery fee plus the subtotal and it will have it over here 41 000 naira and guess what this site has an admin page yes if you come over to here this is the admin page of the site we'll also be creating this when we go to our code on this admin page you can see all your products as you can see here total product 44 total active orders two now you can see all the products on site here we can also see the brand we can also see the units that that is available to be sold we can see the delivery mode if it's free delivery free delivery and pay on delivery you can see all the products on our site here then if you want to create a product you can just create a product here when you click on it you can select an image let me just go to one image that I have here and no that is not an image okay this is a mute okay you can see you can click on an image or let me see if I have something okay you can click on an image a product image you can create the title put it in a category you would like select the price the product brand to details key features specifications the number of units you have available the delivery method and the delivery price and submit and it will be added to jumia website here and you can also see the orders that you have for example now we have two orders by smart look at the phone number you can see the delivery address is Lagos the card sum is 55 000 the delivery sum and then the total and these are the items that smart has ordered so if we go back to our site we can see this if if a customer has picked items into his card as you can see here we have two items in our cart you're just fill in your phone number and say yes this is for my phone number and the delivery address Losi South Africa um Cape Town and then after filling this information we can click on checkout you can see it is loading and you can see here six congratulations your order has been placed order received successfully then you click on your button your card will be emptied and you click on a button to go back to the home page now if you come to our admin section over here we can just reload this okay so now that we've reloaded the page you can see the order we just made just now or remove free applied for Freeport 4 Ubisoft Assassin Creed now this site is so clean look at the footer look at how the items are arranged Supermarket items for rival products everything is looking clean and needs mobile responsive like I've showed you now you can log in using your Gmail or Google your Google account you can click on this to log out as you can see I'm logged out now and when you are logged out let me show you guys some neat tricks with this application when you add an item to your cards like just click on this item sorry my data is so slow that's why if you want to help me get better internet you can help subscribe to my membership on my I'm buying a copy if you will it really really helps thank you so I can get better internet so if you have to add an item to a cart you go to your cart you see the item it won't allow you to check out it will tell you that you have please login to be able to check out you need to be logged in before you can submit another because it is true you log in that will get more information about like your name and then you refill your phone number and your delivery address so once you go to login will be taken to our login section of our application and we click on sign in with Google if you guys want me to put other ways of signing in like true GitHub and all that means just let me know in the comments I will do that for you so now you can click your Gmail or preferred Gmail account and the site will automatically pick your your name and use that and your email and use that to sign you into the application now while this is loading because my internet is so slow you can see take a look more at the admin page the admin page is so awesome it allows us to create products it allows us to see all the others as you can see here this is the first order the second one that this is the third order and if we go back our page is still loading so now now that our page is loading we can now click on an item you can add it to our cards go to checkout and we can see we can check out but if you want to try and check out to tell us to please fill in our phone number and deliver our address before it will allow you check out so you can just put in your phone number and deliver your address and you can check out and if you submit your information you can go back home I need to submit your information here where you just reload and you're able to see all your orders as you can see the latest order that was just placed okay CTA um smart Clipper 2 powerful professional cordless hair clipper so you can see the phone number the delivery address the card Zone the delivery sum and the Twitter so this is an incredible application you can see here I edited the the theme icon and also the title you can see the application is looking clean and neat and also when you come to mobile mode when this section disappears in Mobile mode you can see you have this when you click on this you have all your categories look at this look at this just look at it it's really really nice I took a lot of time to an effort to make this application look neat so if you will you can also please subscribe to my membership here so you can have access to the entire code the admin code and also the jumia um e-commerce code clone code now if you don't want to do that if you're not able to support me I will be going through how to code this application from scratch I'll be doing it in a different metal way I won't be explaining too much on styling I'll just be focusing on explaining the logic part and the reacts Parts but the styling I will just style that quickly and we'll just move on to more of the logic so as the video the latest video will not be too long all right let's get started okay so let's get started I want you to MPX create next application over here I've already done that because my internet is so I like to do these things beforehand okay type script no yes links no Tailwind CSS please say yes um Source directly no approach unknown would you like to customize default input areas yes and we're using apps so there it will create your next application and it will have you all set up like this now the first things first let's npm starts I want us to create the basic layout of our application sorry not npn starts npm run there I was working on a reacts video so I can't kind of remember okay sorry about this we need to go into the jumia upload and the MP and run there okay so we are on 3200 so we're just going to ship this here and go to localhost 200 then we're going to go back to our application we're going to go to pages and in our video we're going to go to the index I want us to with this we're going to clear all of this out scan for this okay just click everything all right so we're going to create a new me okay so that's good then we're going to remove all of this we're going to the end of this so we need a layout so a layout because we need to start with our nav bar so before we create the layout I want us to install DZ UI I don't forget so we're going to come over here we're going to control C come back to this UI see get started uh let's go to installation install here copy this on back and if you watch a lot of my videos you say I like to use these UI a lot uh it's just so easy and I just like the components is so consistent and also going to use material UI just copy this installer and I'm also going to use material UI icons so we should just go ahead and install that okay one over here copy here this is still running paste then we'll go back to this UI we see we need to go to a plugin and paste this in our tune config file foreign okay so that's all we need to do for that so now that we've done that we have our icons installment let's go back to our main folder we need to create a components folder let's just read that components the first component we're going to use we're going to use layouts okay so we're going to create file layouts.js now in all the other JS like I said earlier I'm not going to be uh write something on scratch I'm just going to be explaining most of the logic I'm going to write most of logic and then I will just be pasting most of the style so what we're doing here is very simple well just uh seeing the layouts children as we know children will allow anything we pass into layouts uh so let me just explain that more when we put the app let's go to app.js and accessories let's do that so we'll go to the app.js which is here we're going to import layouts and we're going to wrap this component with layouts then say layouts accessory main Dost interval layouts imported from here okay I see why it's not working it's why it's not working we create the component folder out of the Gmail account folder so we're going to move this yet okay this is now confidence folder now it should work exactly so now we've imported layouts uh npm one there let's start this so that we can we see what we're doing so in our components we have layouts here we're going to create a new folder you can see now bar we're going to create the first thing we're going to say index okay in your Wednesday RFC we're going to change this to now bar and we're going to go back to layouts and on top of here we're going to see now bar okay you can see this okay so let's go back to our number and I'm just going to copy this from here I'm going to paste this and I'm going to explain this so we have our div background Orange um MX Auto full weeks we have our source image okay so we have MX also we basically put that twice and screen on let you see is only there's a Transit okay one two two three thousand two hundred three thousand and two but we're not seeing anything in our code let's go back to our number okay well we not seeing it we're not see anything because there's some things they are not um okay so let's just cross this this skin space [Music] um so okay you can see why we're having this issue exactly Elementary is not defined let's go back to our index I mean three let's cut this and it will refresh Refresh on click sign there okay so we have our code here uh let's explain from the top we have MX also we have our image which is this image here that's this first section then over here is our number we need to set up our login but we're not going to do that now we're just going to go down uh we have the background whites allowing me do MD Max 7 so we have this first image that is here which is our jumia logo which we have nowhere so what we're going to do okay so first we're going to create our number now bro okay I'm just going to redo this whole processor we can understand it better and I don't feel like we're understanding it the way I'm explaining so let's see this then we're going to pull the first section so this is our first section of our image which is this image you can see looking clean and nice then we're going to come over down here we need we need our images so over here we're going to get our images PNG this is our Gmail PNG so if we go back to our narber see deep class name BG White uh then we can see deep class name I'm going to see MD or Max sweets or 7xl thank you so uh most of our number items are going to be within here so we're going to create a new item here we're going to name it elements no no no here I'm going to name it elements three our three is like this 30s you see IFC elementary perfect components actually okay so in our elementary this Elementary is our if we come to our code here I already knew the quote I was going to exceeded if we shrink this this is our elementary this now by items okay so if we come back to our localhost we're going to click that functionality well first of all we're going to do a lot of inputs foreign button menu menu menu items for material UI local grocery store icon just a lot of icons and were importing sidebar menu item from sidebar menu item which we're going to create later on so this element clearly we're just going to leave it here we're just going to see menu here and we're going to go back to our code in our index and we're just going to Quality table later and we'll come and work on it so we're going to say spam class name let's space X two while we're doing this I need to okay so Flex space X2 then once we've done that we're going to import element three here that's our menu that we get uh okay so we're going to go back to this element tree and we're going to comment this sneak that up okay so see the menu here we're going to work on it so it only shows in small mode all right so we're going to go back to our index after a minute three we're going to have an image we're going to put this here and this on click we're just we're just going to leave it like as a so this is the jumia image so when we unclick it so we're just going to go back to the main page you're seeing router is not defined so we're going to Define that let's go up over here and imports use router you come here and say constant router cost to install and so that should be defined now which is perfect it just now get back to the main page looking clean now we're also going to need the an inputes for this UI I'm going to come back here after the spam into the inputs inside it looks so see the imputes here so this is a spawn is going to be hitting there when it's larger than medium size is going to be in line so what we're going to do we're just going to put a button to log in and sign up and always remove this on quick signing because we're not done that yet I'm going to save and we can see our login and sign up here then we need a shopping cart so what we're going to do we're going to come to another bar and create a new file say shopping it's just okay this shopping cart is very straightforward we're just using a shopping cart icon and we are getting items these items will be the things in our card but for now we're not using that so we're just going to delete this and we're going to put here see you okay so link is going to link us to the cards page when you are done with the cards page so when to come back and in after the spawn we're going to import the shopping cart and I'm just going to click okay so when we come back refresh what is it saying here same expression expected let's check block up to the everything here it looks okay we just need this to refresh I think application refuse your signal purpose without this currently still is being set up we'll spend trying to run but we should be done with our now bar page so now we're going to go on to this section over here okay so as you can see it's loaded now so we can see our jumia icon and everything is good to go how many acquisition will be appearing unless it's so okay with not fully customizing and Elementary so later on customize it and it will show when it's in small mobile boot so now next thing we're going to do we're going to go to our main page our index over here it's another index Will Go On Me we're going to style this a bit and see class name osc class name MD Max with 7xl MX also and padding officer first of all Whitney is going to need a header so we're going to come to our components and create a new file folder either an inter header we're going to create many files so let's start creating them so it's going to create adder.js we're going to create left side dot yes creates right side and just also going to create we do TS JS then we're going to create a site menu I said just okay so we're going to start off with the header header is very simple we're just going to see Flex with full padding two empty space between then the left side middle and the right side so I'm going to start off with the left side uh before we start over the left side we're going to work on our sidebar menu item which is going to be a component that we're going to be using so in outside web minute I'm going to get a link text icon and active which we're going to use to display some things in that so when we're done with this we're going to go back to our left side and let's copy so we're going to come to our left side and here we're just importing a lot of things so we don't need this we're just importing a lot of icons then we're also importing the sidebar menu item and we're using styling here to hide it and only show it when it's greater than the medium size so we see our sidebar menu item we're getting our link text and icon this one in the first one so it's mean active so Supermarket is the link because we're going to go to categories also my market items Health and Beauty Etc so over here in our left side we should be able to see it now or we may not do it in the fact that we haven't styled having studied or we haven't seen its control indexed and said header okay okay so what's the issue is saying Pages index you get the expression alone don't get any of that so when icon can resolved okay so we're going to go back to our left side and we're going to delete this because we don't need I was testing a lot of different uh packages Heroes icon whatever you like when I just found material icon to have no support I needed so I just left with it so it's in element type is invalid that's where your string for getting along like that so you like to go to export your comments finding and change your Elemental header so go back to our header and let's define well here uh left side okay so I think the issue is we'll go to our header those that was uh highlight this out all right so we're good spoke to science so son so good to go now as you can see we're having our left side items you can see there's a little bit of text shadow I really like the effect so you can see it's looking clean and neat if we go back here I want to add something to our Global Styles oh this should be gone unions have this Justice so you can see the app is coming together now we have to work on the middle the middle section so go back or go back to our middle our header and we're going to uncomment this okay so come to our middle and then over here now I'm going to take so this is just basically the slider nothing else so we're just saying the width should be 100 if it's large it should be sixty percent and we're using the carousel for which we're getting this Council for our Daisy UI here let me look for a call so here so we're currently using this one the last one if I remember yes we're currently using this one yes so if we come back here it's just the slider styling that we're using that's just always in the middle that's really it should need it in an image our source we are changing the source this is where you can change the image that you want to be showing and that's just basically it so if you come here we can see it's looking nice and neat so now we need to work on this other side so you have to go to our left side our right side now okay so in our right side we're just having two images it's hidden when it's large it's inline so that's just pretty much it's in our code so we'll go back to our header and we uncomment this you can see that's okay so our application is looking really really neat uh really straight to the point not too many fancy just basically styling that's just literally it so now that this is done um allow us to work on some other aspects let's go back to our index so in even now index in uh main page we have like or remove things at the rest so we're going to do our slider main page well let's create a new folder in our components we just close all this and cancel all of this so now we can actually work on our number our elementary that we had issue with before because we hadn't worked on our Side by menu item because this sidebar menu item so we're going to work on that now so in our element three you're just going to come here space and paste this okay so nothing fancy here we're just using the sidebar menu item but we're giving it a little bit of styling uh we're using the drop down from Daisy UI so you do this so usually drop down to do this as you can see we have all the sidebar menu item with their icons gaming Sporting Goods other categories that's just basically what we're using the ESC menu icon is not defined let's go back up a new icon okay cyber items so right all right so you can see it doesn't appear here but one once we need to use this and click you can see is behind our why is it behind is behind our well instant power so it shouldn't be behind our cars so so if you increase the Z index to a Higher One 25 ounce y okay so we'll currently have an issue of this being under here so what we're going to do we're going to come to our element three we're going to come to style I'm going to style it and give it Z index yeah see index 100. so when we come back let's reload okay so we'll click now you can see it appears on top of this so as you can see now it's working perfectly with that I want to click into the category and that's why if this happened okay so this is looking okay let's just uh Push It Forward like this okay so now we go to our recommended our component section I'm going to create a new folder called with command did and in our recommended we're going to create so code all right so the first one we're going to do we're going to create the first category section we're going to say rate common that that's just and here we're just going to fix this so here we just import so we don't need to even import to react we just using padding at the top five we're using carousel it's some images phone and tablets images up to 30 of televisions groceries refrigerators Electronics so then we come back to our Pages we control index and after this header we want to say welcome mend it yes then we want to see it below this our header section boom so you can see just a car so really really nice now the next you want to do we want to also create another recommended for you so you're creating that we could see very common that's for you .js and this recommended for you is just simply just cool gaming okay so won't squeeze a slide the basically so we're going to create a new folder in our components our winds name it's mean page components so we're going to create a file and say slider or juice and in this later the JS we're going to have a carousel again we just say import recommend header so this recommend Handler is like a small component that we're using in our recommended page here so we're going to create this we're going to say okay comment where we come together just so in our recom header.js I'm going to repeat this this is just what we are using we're just styling I'm just telling something so we can edit the title and the color whenever I will use it so when we come back to our main page and we're using it here we're seeing the title should be official store and the color should be BG lime 300. so we're just creating another slider as you can see all right so we come back to our main page our index and we see this later main pitch come back to our code and we will load okay seeing the Imports become is not okay so what we're going to we're going to come back here is complain about the Imports so let's come here and just to control this uh no I'll show this and import it again so let's just load and we can see we get our official store really really clean really really nice now we need to connect Firebase since application oh and we also need to work on our login and sign up so we need to in we need to install a lot of things right now so we're going to control see this we're going to install npm install next I don't even know how to type that next also let's just go to the next auth websites this is the actual jumia website so you can see how similarities to ours so we're going to see next odds so next odds and get started so this is what you may need copy this come back to our put and paste so we're currently install the next odds now we want to use the Google provider so to use that we need to go to Google Cloud and before you go you also need to go to Firebase I explained to you guys I have a video on how to connect Firebase to your application I'm going to link it in the description below but we're also going to go through the process right now so when you are creating a uh starting with your fire piece all you have to just go to firebase.com this is what I'm trying to do okay so my English and five is you just go to your console foreign create a new project I've already done mine which is this I won't be going through this process I will put a link in the video how you can start one but it's very simple just to add a project give the name and then you you just get to this place that we just got to so once you've done that you need to go to Project settings and connect your application to it it will tell you to install Firebase you see connect to a web app or you can just see your ad up here and you just connect it to a web app and it will ask you for a nickname of the application which I just did here jumia beef B1 and you should say to install Firebase which I'm going to copy now and come here and install Firebase so when you're installing that is going to give you a write-up like this which we're going to use to create a Firebase um file which I'm going to do now so I'm going to come back here do all this and I'm going to create a new file here move off and I'm going to say fire peace.js in therefore visuals JS is very simple I'm going to just copy all of this and paste it here for you okay so you can see I have a couple of this this is our keys you're going to get those keys here see your keys see my keys here you can see there so I have created a which is not here here I've created a DOT emv.local file uh you should do that as well and you can see me here using it any any uh dot EMB a parameter where we're going to use next yes you need to start with next public so you can see I've done that for my next public Firebase API key which is this API key they give you here next public Firebase alt domain which is this Auto domain that you get here and the rest I've done all of that for all of this and then in my Firebase application I've not linked them those dot AMV variables that we have environmental variables we have here I've linked them to this file by just using API key I've just changed it to process.emv dot then the key that you use like here we have next public Firebase API key it is this next public Firebase API key that we have here so you can see it's very simple it's good that you create a dots environmental variable file for your application it makes it easier and it makes your application more secure so now that we've done the linking to Firebase I'm not going to be doing much here until we are creating the because we're just going to be reading data from here when we're creating the admin page it will show how we the process of us inputting data into this application as you can see these are Firebase firestore I don't know if we're going to be able to see our collection because it shows that push my quota I don't think we'll get you able to see anything okay we need to see so these are all our products these are all our orders so now that we've shown you how to connect the Firebase to the application also need to connect the Google um the Google Google Cloud console to our applications that we can log into Google and use Google to log into our application with next so now that is currently going to that section just go to console very very simple now what you're going to console you want to go to click this and you want to go to API Services credentials now when you come to credentials when you create a Firebase application like you say I named my jumia version one when you come to your Google Cloud if you are using the same email you used to create the Firebase application here you can just click on this and select all your projects and just click you see what you created on firebeam so you're just going to click that Gmail if you want so now that you've clicked that I want to come to your credentials you can see your old two dot 2.0 client ID you come to edits so when you come to edit we're going to have this additional information here your client ID this client ID and this client's Secrets you're going to want to copy that into your environmental variables files here so I'm just going to do that One Piece of My Own let's say I need my Google client ID and in my Google client Secrets see two of them here so after you've done that you want to come here and add the URL of what you're currently using for instance I'm using localhost 3000 so you want to add that here copy you want to add that here three thousand so you can see it has been added and then your authorize redirects URI we're going to get that now so let's just come back to our code this is tough man tough tough why do we have this error okay we've known who started our application today that's what we have this here so here we're getting a timeouts what was the last thing we try to try to install Firebase my network is so bad so please you need if you want to support me just click on the link in the description on the buy me coffee so I can help support me so I can get a better internet so my setup can look if it's much better thank you so we're going to try to install this now and you can see we've set up all our environmental variables so we don't need to be here again we've set up our Firebase we don't need to be here again cancel that we've done our slider we don't need to be here we don't already come header I mean did the don't disrepromander we're going to stay on CSS we've done our element 3 so we don't need that again so now that we've done most of that we want to work on our footer so we can have like a better footer so what we're going to do I'm going to create a new folder in our components and say full oops are in that photo we're just going to clarify called index .js you're going to miss so this is just what we're going to use I just basically copied if you come here you can just see what's uh let's say here I just basically copied this code that was here so you can see you can just take the jsx and copied and I copied and paste it here so what I use a data team of dark to make mine darker which you can do by coming up you can come to themes and with the teams you can get different different like color matching stuff so what I did was that I just came you can see there's a UI themes in your Tailwind config file so just go to your table config file and you can literally just after I come up place this so you can see there's UI themes light dark cupcake so we're going to connect this footer then I'm going to show you how that's going to look like so here we're just going to see a footer so when we come back to application against ironing G [Music] okay so let me refresh so while this is loading uh we're going to create a new folder here which is going to be our lib we're just going to knock in the not here okay which is going to control all our functions that we're going to use to fetch our data so you know leap we're going to create a file fetch data dot Js I'm going to create another file help .js I'm going to create another file again just openload our order to choose so code is C trying to start it hasn't locked it off yet all right so it has loaded successfully so you can sell a footer here this is going to be dark scene like I said if you come to the components encounter footer index we have a thing called cupcake so I'm going to use that called Kick so you can see you can just basically change the um see so anyone you want you can see we have different themes here so you can just paste this and then be able to test out all the themes this will be really cool is check it out so now that we've done with basically this we want to sign up want to create our sign up page so we want to First four first of all first of all go to our pages and go to our API and in our API we'll create a new folder and call it odds and then in our odds we're going to create a new file and quality brackets in square brackets dot dot dots next odds and webc.js okay we can paste that here now this is just taking next auth and Google provider and we're going to take our Google client ID and our Google secrets to help log Us in and it's going to direct us to for our sign-in function is going to direct us to off sign in and then our callbacks which we're going to get back from Google we're going to get the session talking news up and essential user the user the username we want it to be want to split up the names and to lower case so that we can have like if your name is um okay username is Jeremy smarts it will separated to Jeremy space then smart yeah so this is just doing so we're going to also go to back to our pages and as you can see we're directly signing to alt sign in to in our page we need to be the folder see what's sign in .js okay so here we're simply just going to import get providers and sign in from next aux and we're just going to see welcome to jumia and we're going to use this and map all our providers you can have more than one provider like if we had Google and GitHub it will show two different providers here and where to use get site um server side props to get our providers and then pass it on as props into this page which we're not going to uh map throughout here so now if we want to sign up or sign in we can go back to our nav bar so that we can attribute that Now by our index so over here we want to import sign in and use session so you need to import stuff okay so we're using session to sign in sign out so we want this input button that we have here and here so here we're going to on click sign in okay and click signing so I want to come back here on just to refresh foreign so we're going to click on this button do you find this what's in okay so as you can see it's shooting weapons image let's go back to our code sign in and I'll click this one dot PNG so we don't have that in our public directory so let's close this excuse for click and let's copy this here convert this show now okay wonderful so when you click sign in with Google this is already working uh I use my Instagram um listen to run this so this is already working but when you get here it won't work it will show you redirect URI and when you click Simo under here it will show you these three Direct cover so me I'm already using this here and I'm using this one here so when you take that URI it will show you redirect URI which you copy and you paste here okay so I'm going to maybe show a clip of that of what the error it will show you right now so you take that and you put it here and then you see once you see it will work effectively sometimes it may not work instantly it may take some time before it kicks in Google is not perfect so it's just like that sometimes so when we click this now we should be redirected back to the home page of our site and we should be logged in to our site so right now we are not showing any sign of login in so we are going to go back to our nagbra and when you because we've already import your session here we're just going to come down here I'm going to see constants data session equals to used session okay so with this we get our session information and we want to come down to this spam here so if I logging on to show this login button anymore obviously so let's say session and then if we are not logged in so let me take this foreign okay so now I want to show something if we are logged in we're going to copy this paste this here just we're going to import it very more watching you're just trying to import some icons and just copy that and this dark here so we're importing these two icons for material UI and then we're saving let's change online not to see anyway I'm guessing myself one parent Linux okay so here we want to do empty braces and take this to the bottom and see you can see we just extremely past the name and high so when we come back here we are logged in so we should just see what we need to see the same use session must be wrapped in a session provider okay so that's what I mean so we need to go to our app on this product app and over here I'm going to say session provider wrap everything with it and then here after our component so let's say page props all right session dots h oops this is all in the next odd documentation if you would like try and read it section equals to session okay so now go back and refresh okay so you can see boom we are logged in looking nice and neat very nice so I'm happy with this so now we need to also work on our categories because we have different categories here you want to if we click we should go to supermarket category so we're going to work on the category page now so we close all of this and we just close this this this this this we really didn't lose all of that before we start working our categories okay [Music] Okay so now in our pages and create a folder I'm going to say cutie we need to create another file let me see Chloe .js okay so over here now went to the RFC all right though we're just going to paste this okay so over here we are using context to get the params that we're going to get and then we'll fetching products by category so before we start on this category page we're going to be fetching a lot of data so what we're going to do we're going to go to our lip we're going to go to our nib I'm going to go to fetch data you know okay so we have different ways of fetching data here which I'm going to explain to you one by one so I'm going to cancel this the reason is I don't want uh I don't want Firebase to give to increase my billing and short stay the this thing down because that's what they do if we extend their quota in a day if you are currently unlike the busy Club so I'm currently on the basic classes here as you can see I just have little reads left needs to let's start not very much I canceled greens so please buy new coffee so we need to upgrade all right so let's get started we first import DB from Firebase which is this DB here get firestore and once we import it we're going to import collection query where get stocks on Firebase as well and with which creates a general products worked as the collection will always going to be fetched upon this product so here we say fetch products it's an async function because we're going to our wheat inside so we're going to say query products worth a width gets talk so we're getting all the documents in products the DB products and we are mapping them through so we can get the ID inside the array of that of each product we will need the area the ID so when will you fetch the data it doesn't come with the ID you have to do it like this market like this will scale the ID so now returning the result so this is returning all the products on our uh Firestone database so here we see fetch products by category we're using a query where it says where occurring we're seeing products where the database products we're acquiring the same way categories equal to category we're going to be passing the category yes what we're going to be using here is Supermarket fetch all the products that their categories is equal to supermarket gets the docs and they map them should I use how you can get the ID and 20 results here is fetch products by brand the same logic we are checking where that we pass through this function then we're using this function you're going to pass the electron treats if you don't pass a branch rate this will not run properly the way you pass the parameter is you check into brand is equal to the brand I passed and getting documents map it out like this or you can get the it and we can join with only result and also here this is going to be used when we are fetching individual product pages so fetch products by ID is an async function we'll then pass the ID and it's going to fetch the data of just that product so we're first going to fetch all the products and I'm going to fill site and look for the products through the products ID and we're going to install it on the first thing in that indicator which is obviously just that product so that's just what this functions are doing they help us to fetch data okay so now we're going to go back to our categories like I said we're currently Merchants so be careful how we maximize this quota so we're just going to try and be careful okay so in our Pages [Music] um our category our category here we are going to be fetching products by category because when we click on Supermarket or any of these things here is going to link us to let me show you let me show you oh components hello okay so this sidebar menu is currently linking us to category and the link which will over passing through your Supermarket they can see this website or passing it treats home office helps Beauty Supermarket these are all categories they're all categories which will be showing more in our when we are creating that new section of this jumia clone so we're going to go to this category of this um so we're going to pass we're going to go through slash category slash the supermarket or whatever category we have we're going to take that context that params in this Supermarket if it's gaming if it's home office I'm going to fetch products by category which is we're going to fetch that category with it because we get the params here and to fetch it and then we're going to pass the proc through pull-ups this is get server side prompt it will run before this page is loaded on loaded for the viewer to see so we're going to pass it through with props here and then we're going to pass that through into category details which is going to display that for us so in our component we're going to create a new folder to help us on the speed up so we're going to create a new folder here and we're going to call it team movie and create so let's see [Music] sales let's choose okay so yeah it's been pretty like straightforward we're just going to be this yeah we are important error okay so our funds so we haven't created the error picture first winning this l.js okay so this is a function error and this area just we're going to use it in case we are unable to fetch data for the page it will just show sorry page unavailable and then whom I think we can even use that if we want let's go to our DOT in video us highlight this so I will don't end up maximizing our Ulta today because I want to try and get this video done today so npm1 depth doing this okay so this is just an error page it's just going to show error in case you are not unable to fetch any results for the user General marks our category If the product starts the lens that is being passed to this page is less than is equal to zero then it will just return that error page here we're just showing an image uh I will show you that very very soon yeah we're just running an image and we're using our Wacom header to show the category we are currently in or change the color to be blue and here we're mapping through each of the products which is very very straightforward uh you know product we're just mapping through them with their image their link and the naira like how much the product cost speech notes okay so if we see supermarketing we click on it uh we've seen okay let's see okay so it should be okay now okay so you have air with our helper function so you can see the error page is going to be showing sorry page unavailable if we are not able to fetch any products now let us just cancel this and then let's go and on highlight this so you can see [Laughter] foreign echoing those products so this is currently getting started but I think it has it has run successfully so it should work now okay so it's comparable narrow formats uh let me go let me quickly explain that so in our help here we're going to have okay so this is a function this is a function that helps us formats the currency style to naira it helps if you have a number like this let's say 83 000 if you converts this 82 000 into it will take this n NGM you know put it in front and it will say 83 0 to convert it to like this so we don't want the customers to see something like this we want them to see something like this which will be more easily understandable to them that's what engineer is using doing and in the here we are going to be using it here say engineer.format the product price which will get in as a number just like number this will help us formats or understand it better so let's run run the code again we're just trying to avoid like using our quota so we'll just have to like manage it little by little because I don't have a dollar card to so I'll activate its problem I don't know how this style of teaching is going if you guys like it let me know in the comment section I think it's much easier rather than typing and typing and typing just explaining the code and how it works it's much easier I just thought I think to do so one chance we load this a network so through okay so a site has Peak so as you can see let's come back here and end this so we don't have any issue later on come back to uh and highlight all of this okay so over here like I said this is just an image which we displayed here that's there's an initial constant so a Recon header is this so it picks out one of the products and gets the categories and shows it as supermarkets now over here we have grid which enables us to do this let me show you can see in small size is two Grid in medium sizes three and the last size is five so over here we're just displaying the image with uh specific Heights a link that is also the products slash product ID so enable us to go to the specific product of each of these things here and the product title which we're using a line clamp two which we haven't installed yeah we haven't installed that my I think it's working then um okay so how are we um doing this length and this length time enables us to uh you know allow this text yet be longer than two lines to be more than two lines so it's a package that we installed uh let me through the lying cloud very simple package it helps to educate our deep and PM okay so in your react application you can just take this code here and copy it copy and then J install it in your code uh so you just install it in your code and it's good to go okay so with this we're going to like make sure that this title here doesn't go more than two lines because we have some products that have very very long titles and want to make sure that it just stops at two lines and doesn't mess up our code so that's just the reason for this so over here um so now for maths I2 so that's just our dreams so now we if a user clicks on this it will be taken to the products ID so as you can see the products with the ID so right now we don't have this page set up so we're going to do that now so so we're going to go to page so I'm going to create a new for a new folder called Product any new file on dates the same way we did the categories cheers let's say prone Docs ID okay so over here this Tower we're not using gets server-side code for using get static props and we're using get uh static parts now let me explain uh we're importing the first product by ID and fetch products from and the first thing we're doing will getting static probes with context well taking these params here this is the ID so this is context dot params.product ID which is product ID because it releases this product ID is because of this what we gave it here so the same constant for ID equals to context.prime dot product ID or every console login you don't need to console log down and we're fetching the product by ID because in our deep folder press product by ID help Source gets um all the information of our product just with this ID so once you get that we are returning it as a prop which we are getting here and you can see we're detailing as selected products and we're sending this problem products details to be able to display it to our to everyone to the user then get started part allows us to pre-load um some of these parts you can do it in a way where you can preload some setting products that you know customers like to to view that will give you the most for inside PS5 comes out you want uh that PS5 product page to be included quicker than other Pages because you know a lot of people are going to be clicking on you so you can do that with get static parts and that's what we're doing Perfection of the products and we're we're pre-loading the pages with this and then this is our parts we've created Parts here with parents products ID and we're returning the parts and the fallback is true so our product detail we need to create a component for that to increase folder I'm going to see product details and we put another file and inside the file we'll see I'm going to create different things so red crumbs purchase also means creates the newly.js also against creates index .js and we're going to create more ETO juice so in our index speed which is our main pitch let us work on our small opinions first for example the breadcrumbs this is just for the top of the page and what we're going to okay after we we've worked on this we went to this place where I can explain it for the so this is just at the top of the page to show the home and the category the brand and the title uh let's go to our index okay so over here we're just importing the breadcrumbs which were shown at top of the page we're just summon all these inputs with the narrow Imports so that we can show that better we're going to delete this card because we've not yet installed our cards I'm just going to hit it and this so once you get our details that's been passed through here so productive details has been passed through here of the products uh we just easily displayed that since you can see details we're just going to say as you can see here what is playing the image of the products with details of URL um or maybe I should just do this before I continue once I load all those how about that okay so let's run this again quickly going to unlike this okay so against npm run there [Laughter] so we just want this to load then we'll not be able to explain how it is working if we come back here or index [Music] foreign that's four all right so who else pick me and this okay so now we can see here this is the bread prompts uh let's go back so so sincere bred cons for passing in category brand type 2 details those categories brand and title so in our break forms we have them all here this is just a daisy UI components that we're using which shows us this category brand and the title so after that so I'll go back to our index um over here we're just displaying the image which is this and we're just showing share this product with Facebook and Twitter icons which I just this then here we'll just displaying the side tool the brand and the price let's go back here so you can see we're displaying the brand the title uh on the brand similar product from the same brand or formatting the products price and in the details those units were checking if it's less if it's zero or showing out of stock if it's greater than zero we're showing it in stock and then here we're checking the delivery price if there's any delivery price we're showing if there's no delivery price that means it's a free delivery if there is delivery price was showing a delivery price which is also formatted to naira here and then here we're just shooting at cat button so you can see this button here at casting we're showing the product details product specification product features which we are all using more details to think around more details we're just showing the product detail specifications and features which are being passed through as props from here see very simple and the delivery was just showing this little element and that's just pretty much it with our product speed so now we're going to install react recoil which isn't under our state of the cars and we'll soon be done okay so now that we've got our product we need to install react recoil so let's just call them here see reacts weak way is the states management library for react so I like to use my next JS code so you just get started it's very very simple and just install check the paste so once you've done it you need to wrap your entire app with it so just copy this and then you need to go to your objects underscore objects okay so once you hit you're just going to paste that input that you just got keep and you're going to call to your session provider here and put we oil let's get that recorded it's okay I'm going to take this here okay so we're done with that very very simple then we're going to come to Junior clone here and create a new folder and call the atom and create a new file and we see cards atom got tattoo very simple so here this is our default States who is going to be an array and the key is going to be cut States and as we call it card State here so this is going to be our default so now we're going to go back to our index um [Music] okay so over here we get the cuts the cuts it's it works just like you States uh you're going to import cut States from this your cut atom here and you're going to import use recall state so you're going to say constant cut set cut equals use request state with the card State this is the current state and this is used to set the state so now we are going to be adding things to our cards how are we going to the wincy constant add to cut is a function constant new cut equals to we're going to take the previous cuts and put in an array and take the details of this current these coins and products that we have and put it in that area as well this is using already structuring to list everything in the cart here and we'll add this current product that we have on this page to the card and I'm going to set that cut with this new cards which is now going to make this new cut as this so it's just very simple it's just very simple and that's going to take effect when people click on our ads to cut button so that's just pretty much it so let's run this code and see how it works and before we even say I work we also need to go back to another bar um our shopping carts which is this no our index so go back to our number so we can display uh what we have in our Cuts so we're just going to come here Imports so we're going to import use recoil State and import cut States and then we're going to just use that to come back here and I'm going to paste that so you can see we're getting the cards set cards using it to user policy just to get this cut then for our shopping carts here we're going to see items equals to cut documents which is the total items that is in the cards like if you have 10 items or you have 20 so uh over here we get that simple items in here until we just can see the pay tips very very simple so now this one there to see how it works [Music] very very simple uh and some work perfectly the screws all of this I hope we make sure okay you'll switch you press this internet is so slow so slow let's refresh this again okay so there are cards here on the empty we'll add subtract so I've not seen anything we're not seeing anything while we're not seeing anything of the protoplasting in the products are imputed in the database already which we're going to do when we do our uh uh why is this not working foreign [Music] downwards and giving candies at clubs when I've seen it so let's see where are we getting in we get I don't keep cut since the first area in production uh hold up you know let's go back to our cards seem to be okay here [Music] yeah to what is the matter even if we're not having anything in our cart our our number is supposed to show something [Music] shopping carts items cardboard lens items okay what could be wrong in our code that's what I'm trying to figure out cut States my important in from the right place I'm sorry not simulated then the issue here uh why why is it it seems like sometimes cool changes when you rewrite it like when I was setting it up it wasn't having this issue so why they haven't and now trying to see recoiling root software Amazon let's go to our card index and click add to cards we should really return area uh so what could be out the issue that we're having so in our products product ID don't you get send the productive tools you get the point of details so one won't work why won't it add to the car sticks on Outlet it's category details that one little C it was good to our let's go to our index in our in our product details and let us cancel log just C5 Visa has given us moldy way please Firebase please but I is no in English Okay so console.log cards is here who's able to check or exactly or issue we're having and why this isn't adding to our car can't change fish out of these areas expectations are duplicate which page is this could sort of magnitude it's foreign went away so as you can see it's currently adding to our cuts and everything is looking a okay so let's end there in the application and let's work on our cards okay so if you want to go to our Pages we can see once we close all of this let's close all of this because we're done with our product details we're done with adding to the cards so you want to go to our pages get a new file say cards and click index.js so so over here we're just going to showcase our cart items that's just what we're going to do so we're going to go to our components with a new folder I'll call it cuts items and created M4 I call it cards item so this page a lot of logic is going on on this page name this is one of our heavy heavy duty pages that a lot of code is going into okay so now that we've done with most of our application let's get go ahead and kick off our cards so now we have let me just run this again and P pm and I have to wait like a whole day just to make sure my Firebase quota won't be exceeded so I could like continue this video all right so here we have our Cuts it's showing zeros we have to delete that s uh our products are not showing let's go to supermarket okay so let's click on the products let's add it to cuts add it to cut again go back to supermarket pick another item and add it to cut let's click our cuts so you're showing us error random method of cut okay so let's go back let's control see this so that we don't end up using our quota and for our cards we're showing this playing card items just that so go back to here to cut items you can see IFC uh items okay perfect so first of all we need to get the cards from our our react record so we're going to import stock we're just going to say import uh use the koi States from record then we're also going to import our cuts the cut States from that's on okay so that now that we've imported that we're going to get that once a constant Cuts sets cuts equals to use request it and cut States okay now we've gotten this also we also need to get our use session products come on come on come on let me to import easily I'll use session from next but yes Okay so we've imported this layer of constant data session because we use session so now that we get our cards we need to we need to display that information so we can see the information so we'll come here our first diff we're going to style it class name mdflex on d space x five okay so I promised I was not going to do so much styling this code so I'm not okay so this is going to be our cards we're going to say Cuts how many items do we have in the cards we just say cardstock length okay perfect uh all right we have our cuts.lens I want us to be able to see this as we're coding this page because this page is a very delicate page so what we're going to do we're just going to run this and we're going to copy that sequence.log cards we're just going to copy our cut and then hard code it here so that we can like be able to work with that because we don't be working well changing and reading detail from the database you're not all good is going to be exceeded so right now we don't have anything in our cards let's go back to our MEP just go to the health and beauty uh this Cuts go back go to gaming connecting how to cut go back another I think I need to cut let's go to our cuts cut to our three items we're going to inspect so on our console we have the array which is here so we're going to just copy this I'm going to copy the object and we'll stop this then over here we're going to say consent cards equals to this so we're going to use this data for the meantime just to show you how it's working you don't have to copy this uh but maybe if you can it's when it has it in your code we just use this to be able to check uh confirm what we're doing so we're going to go to our Firebase to make sure that our DOT interview to make sure that nothing is being used to call an instant then let's run this again and we're already going to focus on this cards page for now and see how we can like display in items so you know they're on this card page so yeah we have our cuts and our lens so the length of the cards so let's go back here so as you can see page has loaded for us I listened on it should be done now I actually don't know okay okay so we have our cards hard-coded so we're just going to use that to like work on the data here so we have our cards uh this should be in a spam I'm going to take this off save it then we're going to come here I'm going to see div class name The Fighter close look at that just give us a little divided okay after that we're going to say if cards dot length is equal to zero I mean if there's nothing in the cuts we want to show something to the user let me see D class name copy advice I'm going to say cards is MC okay so now we're going to match our Cuts Cuts dots map uh going to see it foreign we're going to create that just in a bit we're going to pass in the key I'm going to pass in the key to equals to item dot ID now because we have two products we should have the same ID in the cards we need to this will create an error because some products will be the same so we need to add something to just make sure it's it's in the idd key is never the same so I'm just going to see much random just give us a random number okay then we'll see the item equals to data and we're going to leave this for now do this all right so now we're going to go into here it should not show anything okay I just read this one div okay give that this itis items here we've not created so I'm going to create it now okay so you have our items now for our items we're just going to see Imports let me just copy this make it easier we're just going to copy our fetch product by ID um this is not really needed again since we're not fetching we're passing the product true button delete okay we don't need this we don't need this either as those coding projects had different ideas to how I wanted to run it so over again we're going to collect our item then we're just going to display this to these uh okay just get this I'm just explain how this is working so we're just doing a bit of styling installing it the image you are passing the item.url and the item dot title which is what we're getting from here see we're getting the URL and we're getting the title so that's just what we're passing through our passing through here we're using the title as the alts here we just created the div or using a link to link us back to the products where you can see the individual products with the with the idea of the item uh here we'll just checking if the unit is matching into zero tell the user out of stock if not it's in stock here we're just showing the delivery price which we're using the narrow format method to format the delivery price for us and here well we're going to create that so here we've created an icon delete icon which is removed so let's go back and see how this is looking okay okay let's go to our cut items and these items we need to import it see giving us hydration error or could be dehydration error want to spawn deep Thief not having a traditional area here let's delete this let's delete this and see if it will make our hydration every week then you know where the area is coming from it's giving us hydration error okay so let's delete this usually just spawn I'll see if we still get addition error okay what's the matter here what's the matter here where we get this hydration error cruncher C now as we start our server additional errors are common when you're using next year's but it can be really frustrated and annoying to so so let's see how we can resolve this issue okay acute no error right now let's go back to coding and make sure we don't get that error again today is going to put calculates we're not going to use the span make sure you don't get that error let's check our code I think you will notice this hydration error what could be the problem in this code what is the corresponding div is talking about uh if it's like okay I can see the issues from here I think okay so the issue was from here so we've solved the issue so we should be okay now let's check that all right so okay now so let's go ahead and copy back what we deleted let's just click this and put this back let's delete this because we've not yet explained that yes okay so see what our items are being listed out very very clean here is in both as you can see in our items Elite icon remove and reformat in there okay so now that our items are being listed as you can see here this button is not working how do we remove items from this card when we don't want them here again so we have to create a function we go to the top of our card items function called constants remove 18. it's going to equal to index because we're going to use the index of the we're going to use this function for each item so when you click on remove from this item here it will pass in the index of that product and we can pass that into the remove item function and then delete it so okay let's go through here so every time we use map we can return to things we can return an instance of like uh a parts uh we can map to an array and each individual item else we can also return the index so we can know which where this um where each item one mapping what's the index of that item so we're going to pass the index here and it's index and we're also going to pass the function remove item equals streaming of item okay so now that we've done that we're going to go back to our items here we're going to say index remove item okay so now that we've done that we're going to go to our delete button which we have here I'm going to say click we want to remove later in the index okay so that's good so that's good here so we need to go back to finishing up the function so in the function here we're going to say constant New Cut equals to avoid structuring cuts we're going to see new cuts dot splice index one so this will go to the the products index and then it will delete to one after that so it will just delete the index the product I'm going to set the cut to this new cuts okay so let's check how that works so Set Card currently is not defined so let's just highlight this uh when we run the correct instance of this this tool will now be able to test out this remove button but for now we can test it out so let's go back here okay after this diff we're going to post something here okay this is where we stopped so this is where we begin yeah we're just saying our cut summary the subtotal the delivery song um they deliver some now is a value we have to calculate every time the we create instance of this component so we're going to need use effect for that so I'm going to go to top I'm going to say use effects so I want to calculate the total delivery so of these yeah of our Cuts you need to evolve sum equals to zero we're going to see we're going to look through all specific one if one is less than cats.length so equals to parse because the the products delivery price is it may be in in a string we don't really know the formats we want to make sure we pass it as an integer so we can be able to calculate on it if we don't pass it if you don't run it like this if it comes in as a string we will not be able to calculate on it because sometimes it may it may turn to a string in the Firebase and we made like fetch it from Firebase database as a string so you want to make sure we pass it into an integer music cuts I product price and here we're going to see Set Card soon so we haven't created that yet let's do that let's say constant Cuts so set cards so it's equals to u-stage okay so here we can now set cut so what's this song so also we're going to do the same thing but this time around for uh delivery song I'm just going to paste that here so here we're doing the same thing but this time around we are summing everything in our delivery price so we're gonna have the total delivery price and we also need to constant ly free Price sets delivery price foreign okay so now that we've done that go back here okay so delivery fee delivery song If there's nothing delivery song free delivery fee will be free but if there's something delivery some delivery free will be the delivery song formatted into naira then here we have we have our this thing our username so we are using this session username that we get from when the user logs into their Gmail account here we're asking them to impute their phone number and then we're setting from data so we need to create uh from data okay the constant from this sir search phone see it so equals to use Stitch I wouldn't say phone number nothing hello I'm going to delete others nothing for now okay so now that we have that set here we're seeing on change to set our phone number to in case user changes anything to set it to be the BD phone number here we have a text area which we are collecting our delivery address and then here we have reporting so we click on submit to submit the data so we're going to work on our submit from now because okay so let's come here I work on expressing constant submit for this form is going to submit the cards the name of the user the phone number the delivery address of the user the total amounts and in delivery amounts so here we see submit form it's an async function because we're going to upload the data to Firebase events defaults it's willing to see if we're going to validate a bit so we'll see if formed user dots from number is NC so from data delivery address is when you see alerts is fill in your phone address and they're going to return so here um you're going to leave this as this one I'm going to go and work on the submission order function so here we have the upload order so let's work on this it's a very simple function all we're doing is just um taking the database collection at Doc while taking the phone number delivery address name the cards on the delivery song and the cards itself and we are uploading that collection to our others and let's go to our Firebase so we can see how that is set up this is very slow internet is very slow it's not something new so jumia so you want to go to your firestore database you haven't come here yet because we're going to compare when we're working on the admin version okay so you can see here we started the collection others and in this collection once you start the collection you don't need to do anything again we'll just be inputting items into the collection so you can see here let's go back let's go back okay see here we have our cards which has these two data in it the card some delivery address delivery some name our phone number so that's what we're doing here and we're adding the dock we're using a try catch to catch any error and we're returning false if there's an error when returning true if everything was successful so let's go back to our cut items so once we do this here once we do this here we're now I'm going to say constant results because our weights occupload order import starts and we're going to pass through it from data DOT phone number from data the delivery address again to session dot user .net I'm also going to see cuts soon I'm not going to say delivery song I'm going to pass in the cards okay so here now we want to run a loading let's go back top button so when we click on submit that function is going to run by any submit from teams submit how do you submit ah isn't name sorry minusing something okay okay submit phone now in our class name here we are doing something else seeing if there is no session disable the disable the button else if there's a session leave it alone then we're giving it some styling and then here I was saying if loading is true let's see the loading if it's not let's not sending loading so that loading we need to create the the state for it so we're going to just create the state first a second loading set loading your States okay so when the function is being when function starts we want to set um okay when the violation is done we want to set loading to true then after this after this await we made him stick here after this awaits we want to set loading so Force okay now if if results is true we want to set our cards to empty and I want to show a model that we told user that yes everything was successful so we're going to work on our model now I'm going to import model from Material UI so important our model and we're going to start a creative state to handle this model we're going to create a stitch let me just paste that here so we're seeing constant open set open this will be used to check uh if we should open the model or not and then handle open and then handle close to close and open the model so let's go back down now I'll close it soon okay so over here in our button if loading is true so loading if it's not done through the loading um class so our checkouts were just formatting the card Sun plus delivery song so you can know the 2000 user can see it if there is no session we want to tell the user please log in to be able to check out else you'll not be able to check out and then down here down here we're just creating a simple div so down here we're just creating a simple div with a message which we're going to create now discrete switch dot yes so here we're just showing the shopping cart icon and just saying all that receives successfully congratulations your order has been placed and then we're putting in a link for the user to go back to the home page so that's just very very simple and straightforward so that's just what we're doing here so we're going to have to import that so we'll import that now so let's continue about D so any vanilla D here okay so now our application blue should be working perfectly let's go back here and look through these so now that we have set the model because you can see our model is here this model will open when we as you can see open it you open when it's either true or false if it's true it will open if it's not previous fault it will close so on close handle close so we're going to use something else to trigger the open now we're going to use if the result is true if you get a True Value here from our weight we're going to set the handle contribution so here we're going to see handle open which is going to set the open to be true and now Wednesday else alerts error uploading order so as you can see very very simple and now that we've done that we don't need this card again these are fixed cuts just going to delete this I'm going to um highlight this so now our page should be working uh perfectly let's go ahead and I really hope we've not exceeded our billion let me see I hope we have oh my God you can see you can see this is what happens when you use three things three things but anyway this has not totally totally been like used so we're just going to chill and go back to our code and so this should be working perfectly we're going to test it out I'm not going to test that now because you can see private is already warning me on about my quota I'm basically left it open so that is partly my fault so we're just going to close all of this because all of this should be working perfectly but let's check it out and just make sure everything's working perfectly and we will be able to like once this video now I have to do a pause to when my quota has gone down so I can be able to like run this video it'll just refresh hopefully we can do one or two things before you know for this like stops completely okay scenario is not defined in our cut items so we're going to refresh refresh refresh okay uh so here is showing now also our cut is empty we can see here it's telling us login to check out everything is working perfectly let's go back to the home page go to gaming okay so currently our Firebase quota has been exceeded so we won't be able to do anything again I don't think we'll be able to do anything again I really need to put my card so I will not have disruptions when we're doing or creating code like this yeah probably is this algorithm available so we're just going to pause and then I'm going to continue this video tomorrow okay so now that our practice quota has resets for new day we can go ahead and test our code so npm Unlimited so this is going to start up our server let's go back and see how sights looks all right so this is our site still looking clean just login sign in with Google accounts and let's add some things to our cards phones and tablets Pages unavailable gaming please unavailable what's going on here where is our page unlockable okay seems like in our environmental files with fields to highlight this so let's just Ctrl C then let's run this again okay so our service started if you're wondering where my keyboard now it's a bit louder is because I just got a new setup I will show it in some of my shots it's enabling me to walk faster be more productive when I'm at home so let's just take okay so our server is uh starts kicking off again so let's refresh this uh so this page should work beautiful beautiful but now we have to log in again so sign back in let's go phones and tablets let's pick any items here so how do you saw cuts go back to school Peak on fashion exact percentage of fashion more I did not speak Spiderman I need to cuts go to our cards okay so in our cards now to items Let's test the remove button to see if it's working I will button is not working why is that so let's come back let's control let's kill this terminal okay uh Now cards it let's look at our code sustainable remove icing index sets cards new cards okay we connected just that's why so let's go back so yeah and we start awkward okay so we restart our code okay perfect through once our code restarts oh so sometimes we started now let's refresh this okay so good well logged in back our cut is empty let's go soon I care and click on some products again Spider-Man let's add two Spider-Man let's also add to Ronaldo okay combats or cuts position I'll cut the center after picking to item what is the Mata or in the matzah okay okay it was still this time now oh nothing let's new cards it comes with the matzah when we come to the page immediately uh Darkwood is running so on items let's check this items remove item with the index on click and also have any issue with this code well let's just go through it again and see maybe you made a mistake somewhere okay over here this is not how to run a function so here we want to say because when you do it like this and you put this day it's just running this function instantly so every time we add things to our cut and we go to the cut page it will just remove all the products I got to just remove themselves from the cards this has to be created it has the function in the button so we're just going to say listening this okay so that's just what we're going to do and with that our push to run perfectly you know go into amk anymore there so we're looking to let this through the bits okay so we're going to refresh now we're just trying to make sure we don't have any bugs or anything in our code okay so let's go back to Premiere page marker this time around let's pick sunlight spot markets alcohol control cuts click on one okay perfect so you can see it's running perfectly sub tools all is correct delivery fee is free because this is free delivery free delivery so phone number let's put the phone number address England museums Manchester okay so here we're seeing checkout is not a number what is the matter here let's look at the code we have to be careful not to touch anything so we don't go and like I said but was we're obviously going to touch something so let's just kill the stamina over here are we getting this so you're seeing format item dot product price okay now this is the items let's go to the cards the bot sound button button on the button check out so now song okay okay since okay so here we're seeing cartoon delivery song uh when we adjust them past numbers in our use effects here most seem to have any issues here and secondly with something this card some to be this okay so because the delivery fee is null and it's adding to a number it is causing this not a number issue so those come down let's go down so over here we're seeing card some plus dealing with some only fine only right so the Customs Define the delivery song is not defined that's why we're having that issue something is there when we can compare this three number by just adding close at it back we will just check that because I I think it forgets well you can't convert something that is nothing into a number there's a problem you can convert something I put into a number you see this work PCL it's an area right here let's not find let me see if this will work I haven't tried this before but went straight now so um delivery song there's nothing delivery song is [Music] um it's zero if there's nothing to lose some u0 memory so let me share this video okay so it seems this may work so let's try it okay okay okay foreign very cautiously not to get some issues I think this may work so let's check let's try it now let's pick some items the same items you picked the last type that have free delivery so let's pick those items good tuna good so not obviously involved in right nothing at all that's not what we want we don't want this to be changed nothing so how do we do it let me see I don't want to create a complex complex code here I don't want to be complex so where's this cue this uh what if we're doing if call if check to check if the reason is empty then we run a setting code if not to run a setting code oh should we just use the card some rather than using delivery song I think that's what we should do let me see how this is looking so check out the narrative so you just need to put just like a total here so when the user is clicking it he knows it's too tall so I think it's important for us to use that if if checks are going to do a bit of a long process on this like so I'm going to do this this okay so we're going to do a new one say if there's nothing in linearly wait is it delivery song or delivery how to do a series okay delivery some actually okay let's go back to this little bit that's it sweet here it's a new resource if there's nothing delivery soon let's run a different codes let's see cut some experience make this here it's it's on it I'll still be soon okay so we're seeing if there's nothing delivery so I'm just shows they cut some else showcat Sun plus delivery song so we have to also format this so let's take this oh Max so anything that is inside here we also format it so doing Thomas Works put this here now I'll do it for maths I don't know where to put this now so we have the narrow that formats here and here we're just using a format engine inside here okay we put that here just copy this and put this here no let's copy it again okay okay it sets here and let's follow this okay so let's try this and see how it works funny enough I didn't run into this issue when I was coding the site at first and I'm just running that into the issue right now so I'm just creating uh trying to find a quick solution for it okay so our site should be running now let's refresh this is supermarkets I'll pick the same thing okay so you can see everything is working perfectly now we'll move beautiful beautiful beautiful beautiful we can see we don't have this second and this thing here so let's just put that hopefully our code doesn't show what's up an error okay all right so you can see perfect now so let's add our phone number The View information in plan vanilla Manchester all right let's check out what what why is we know here okay so all I received successfully now we can go back home was our cards cleared our cat was not trading since until we need our cards to be cleared which is uh up here in our submits to see here we need to set the cuts to clip let's kill this uh over here we after submitting the form to our listing we need to now see those okay um we set the cuts on here okay this set cut song as a mistake it's supposed to be set cards alone so here we have set cards okay so here now we'll now empty the card force and undo open first so that is all done here um what other issue do I want to make sure don't have the stsds so go to the nav bar networks okay good let's delete that s from here okay so our shopping carts looking perfect now we don't have any issues with tips I don't think we do and we have an issue or something cards now in our main page I want us to be showing uh products depending on their category here so we're going to do that now so we're going to come to recommend it well first we're going to create a new file I'm going to say in limo dot JS this is going to display all the original products in our in our database this is just a simple code so I'm just going to copy and paste CK and explain it so we're importing use effect and use States so I'm going to explain that uh Recon header that we created and we are importing our function fetch products by brand we don't need this option and it doesn't use that so what we're seeing here we're seeing use effects anytime the page renders we want to create a user effect that fetches all the products uh with the brand or remote and sets the post which we have yet to be those products results we got from this function let's try out the console so we're creating the inside I use effect function it's an async function because it has always here and then we're calling that inside these effects to run and then it sets the posts that we want and then here over here we're just saying map all the proofs if there's anything in the post if you don't put this uh if you don't put this before the dot it will create an error because obviously this is an awaits function it's going to take a while like some a few milliseconds to get the data so in the first instance when the page is loaded and that data is not there it will come out as post is undefined so that's why you want to put this uh question mark here to see if there's nothing codes don't do anything or if there's something post then print out of this so we're rendering what we get from the products inside each post and inside Carousel and in the post we're just passing on the key as opposed starts adding the title the image and the price which we formatted here and also the ID of the post and so it enables the link to the upper channels so we're going to get our posts so we went from here I'm going to get a new file you can name it full yes these are here very simple code we're just getting the title image price and the ID we just displaying the image and then we're linking to the products uh page with the ID as the params and it will just display in the price and the title here that's just all what we're doing in the full speed so we've done that for rhino uh we also want to do that for other categories because in our remote we're using fetch products by brand so we're also going to be fetching product by categories so we're going to create any one called gaming this uh not into fallacy it's the same thing with the Orion fish okay well this time around we're fetching products by the category gaming you know setting the posts with only this console and then we were setting it to be our post here and which were now mapping trades with the help of posts so that's just what we're doing here and we have the first recommended which is just digital categories we have another recommended here which will go into paste it all right so over here we're just fetching let me create an error okay so in this recommended well feature product by category we're just using supermarkets just like we did in this gaming is the same thing those are over here we're using gaming and over here we're using supermarkets it's pretty much the same thing and you can even create like a just use this as an instance and then just pass a props with category here and then use that for here in surface like multiple pages that I've created I've done but I've just done that it's just now coming up to like the idea there's something I should have done for the code okay so posts uh here just getting this information being used in our post and so we're going to display all this in our main page uh so when it gets pages and and our index so actually recommend that we have this slider mini page so here we're going to put another recommended recommend this for you then [Music] want to close rmo products and after this slider that we have here you want the game okay so now we can our server okay let's start our server uh so what is this thing is not found okay I came on standard let's kill this let's go back to old Gaming first which one header let's count this and it is that this optional we used to do the exactly I'm creating using results option is it optional control okay control space okay we don't have that that's okay so this we come here every port set it's action B let's move to why not it's not the same things named it header before all right so here same thing foreign okay so we're running code now dot C okay or what page is this person so I've called the function that I didn't I later did not use a chicken which page isn't foreign let's refresh this all right our Pages ready you can see we're getting things from the supermarket or IMO products and gaming awesome awesome so our page is complete now uh for me you can pick products Straight Talk okay and add it to the cards and the cards good or cut two items remove One content for no more ones in England and checkouts well admin please go back home okay so that concludes it for this I'm going to create another video where I'm going to show you the admin panel because I don't think I'm going to put that in this video as well okay that will be a video of its own as you can see looking nice and clean see this right here okay so uh make sure to leave a like uh to subscribe it really really helps the channel please do that and I'll see you guys in the next video cheers

Channel: 9jaCoder

Views: 8,228

Keywords: nextjs, react, ecommerce

Id: enp-9yWhD7k

Length: 170min 44sec (10244 seconds)

Published: Thu Jun 15 2023