Full Stack eBay Clone with Next.js 13, React, SupaBase, Tailwind CSS, Prisma, Stripe, E-commerce

yo so today we're gonna build eBay and this time we will be using next js13 Tailwind Super Bass Prisma and strike and this clone project looks beautiful so let's go and have a look there we go beautiful nice little header we've got the login button at the top we've got the shopping cart as well this search bar works so if I type in something you can see then it searches and spits back some items from our database awesome also all of our products underneath nice little footer and if we go and look at one of these let's go to the MacBook Pro and he's going to load him up and there we go you can see now we're on the product page got the image and I've actually got this in the cart already so if we remove it from Cox you can see that has now been removed and it shows at the top we have no items in the cart so let's pick another one let's get this dinner table beautiful so let's add that to cart added now you can see at the top we've got one item in there and what else should we get this old record player beautiful let's also add that to cart that has been added let's go and have a look in our cart and there we go awesome you can see that we've got the dinner table and the old record player and then everything on the side how many items and the total price which is right there and then if we go to the checkout uh because I'm not logged in it should redirect me to the auth page so we can then log in so go to checkout awesome we go to the authentication page so let's sign in and there we go you can see at the top now it says hi John weeks so if I click that I'm a little image my name and a sign out at the bottom but there's a my order section so once we've gone through the checkout process and bought our items we will then have our orders page so let's go back into the card then let's go to checkout beautiful and you can see I've got this section update address I've just put this in a test at the moment so if I go to the update page because without an address you won't be able to send an order so let's go and update this address and actually put in some real details so I'll print it one to three main street and then SW to sw2 London and then United Kingdom so if I update my address address updated and now you can see that has been reflected there and now if we try and confirm and pay we're going to get an error that says the card details need to be input so you see it right there card number is incomplete so let's put in a stripe test number four tools zero four twenty five and then CVC one two three and then I'm going to say confirm and P and it's processing order complete waiting for the redirect there we go payment successful so now we can either go back to the shop or we can also go and look in our my order section so let's go and have a look and there you go you can see that now we've got a stripe ID the delivery address is what we put in the total 325 quid the order created was today and the delivery time is on Monday I've just said it to three days in front because we have no concept of an actual delivery so I faked it and these are our two products at the bottom awesome so now if I jump into stripe and you can see right there this payment is complete 325 quid beautiful and also you can see that our cart has been cleared out because the payment was successful so then we just clear out our local storage awesome right if we sign out and we're on this page because we've got some middleware as well and this is a page that need to be signed in for it'll redirect us back to the main page so sign out we get redirected back and then if I put forward slash and then orders now we shouldn't be able to see the orders because we are not logged in and we need to be logged in to have orders so if I click that we get redirected back to the authentication page because the middleware is just kicked in awesome right okay so yeah there's quite a lot in this eBay clone uh all the authentication stuff the cart authentication cards uh all the API routes loads of stuff and on this channel this is the first time we have ever used a react-based project so if you're into it Chuck me a thumbs up and whilst you're here if you haven't subscribed already like subscribe and hit the notification Bell because after doing this project I think I'll be using uh nexjs a lot more because I quite like it if you're coming from uh next background so nux from The View ego system next JS I mean they're all kind of the same at this point it's just the folder structures are different the syntax is slightly different so once you've grown used to it you shouldn't have any trouble with this project whatsoever so yeah don't forget to like subscribe hit the notification Bell and share the video if you want and also I'll leave a buy me a coffee Link in the description option if you want to support the channel much appreciated anyway enough messing about let's do it okay so before we start what you're going to need to be able to get this project up and running is a code editor so I'm going to be using this Visual Studio code and you'll also need this node.js so make sure you have this installed on your machine because otherwise your project is not going to work okay awesome now I'm gonna take my face off the screen so we've got a bit more room and then we can start okay so let's set up a project let's open a terminal Zoom it in and I have a file called sites I'm going to go in there you save it wherever you save your project so if you have a file called projects save it in there and now I'm going to say MPX create next app at latest and then we're going to say eBay clone enter we're basically going to install the default so typescript no eslint no Tailwind yes SRC directory no app router yes and then import Alias no so that is installing okay that is done so let's CD into eBay clone enter and then we're going to say npm run Dev and now we have localhost 3000 let's copy that let's open a browser and let's paste it in and press enter and there we go there's our base project awesome okay let me slip this over there a sec and I'm going to minimize this terminal and now we need to open vs code so I'm just going to put in code and then we get our nice little code editor so let's put it over to the side beautiful just like that and now what I'm going to do is go into my sites folder where I saved the project and I'm going to look for eBay clone right there I'm going to drag it in and drop it and there we have our project awesome okay first off we're going to install our packages so let's open the integrated terminal you can click this button on the bottom and then you get the terminal like that and there's quite a lot of npm packages we need to install for this so if we do it now it'll save time later so first up what we're going to do we're going to add this little section that is for Prisma to seed our data this is for later on so if I add that in we have Prisma and then inside that seed which is going to be node Prisma forward slash C dot JS and now let's install our packages and let me just lightly Zoom this in so we can see a bit better awesome okay so we're gonna say npm I and we want at Prisma client at stripe forward slash stripe JS and then at Super Bass auth helpers next JS and then at Super Bass off help us react at Super Bass auth UI react at Super Bass or UI shared at Super Bass Super Bass JS debounce and then moment also react icons react responsive Carousel react toastify striped and finally Prisma and there's quite a lot here so what I'll do to make life a bit easier I'll leave this in the comments in the description awesome let's press enter and wait for this to install beautiful installed and there you can see now all of our dependencies have been installed awesome so what we'll do we'll start off with with all of the styling we'll get all the pages done and then once we've got all that we'll set up Super Bass do all the auth stuff do the API stuff do our stripe payments integration and then we're basically done so if we close this up and we go to the side panel and we're going to go into page and we're going to strip all of this out so if I make this larger and I pull this across like so I can then toggle back and forth like that so we can see everything that's going on okay so first off we don't really need any of this so we're going to clear this component out like that get rid of this image at the top and this is going to be a client component so we're going to say use client and then we're going to import main layout from layouts forward slash main layout and we haven't made that yet we're going to do that right now and then just take this main layout drop it in open it up just inside just put cool just for now okay let's jump in layout.js all of this is good for now but actually we need a remove these two so get rid of that and create next app is going to be eBay clone and the same for the description eBay clone and because we're already here now we might as well import what we need and in this one we need the toast container react toastify and we're going to get rid of this from the body and open this up like that and just above it put the toast container and that should be good on this page for now okay oh and let's not forget the toast style so we need to import react toastify forward slash dist forward slash react toastify dot CSS awesome save it and for now this page is done so Global CSS all of this stuff apart from this at the top we need to delete so let's go to the bottom grab all of this and just get rid of it save it now if we go back to our main page oh yeah because we haven't made that yet okay so we're gonna go make that inside app we want a new folder layout and then a new file mainlayout dot Js yes and this is also going to be a client component I'm going to export default function main layout and we want to pass children for the prop open that up and then say return open and we want to wrap it in that okay now let's create our main layout so start with the div open it I'm going to put an ID of main layout and just to check it's working I'm going to say ML and save that now let's go back to the front and there you can see ml so our main layout is being imported awesome right let's continue we're going to add a class to this that is going to look like that so Min width is 1050 pixels Max width 1 300 pixels in MX Auto to Center everything inside it and if we just save that and take a look you can see now that that's been pushed over and just so you can actually see it if I put a border there you'll see it's a bit dark let me put border four save that you can then see the border that is the max maximum width of all of our view content so let's continue get rid of that okay let's get rid of this and then we need another div open it and then inside this we're going to have three different sections for this top bit it's going to be pop menu is first so let's go and do that inside layout I'm just going to add includes because we're just including this into the main layout so we don't have 500 lines of code in the same file and let me just spell that correctly okay top menu awesome right so in includes we're going to say new file this is going to be top menu dot JS it will also be use client and then we're gonna export default function top menu and then some curly braces return open it up and then wrap it in that and we're going to start with a div and we're going to add an ID of top menu and a class with border B now we're going to have another div open it add a class of flex item sender justify between which fall MX Auto and Max width 1200 pixels now inside this we want a unordered list and open this topic up and first we're gonna have an ID that's going to be top menu left and secondly we're going to have a class that says Flex item Center text 11 pixels text lots of Threes And Then px2 and h8 Now inside our UL we have an Li open that up we're going to add a class of relative and PX3 and now what we're going to add in is our first link so we're going to say link and then close that off and you can see that that is imported that so make sure that you import link from next link let's open this up and firstly on the top I'm going to say href off and we want the class on there with flex item Center Gap tool hover underline and cursor pointer and then inside this I'm just going to have a little div that says login and underneath this we need an icon and that is going to be like this so BS Chevron down and let's close that off and what we need to do is import vs Chevron down from react icons forward slash BS and then save that let's go and take a look and we don't see anything yet what is going on oh the main layouts I didn't save so let's press save and what's going on the top menu oh we didn't import it so make sure we import that save it and let's take a look yeah okay you can start seeing now at the top we've got a little border at the bottom and our little login section beautiful okay let's go back into our topmanual.js so inside this Li underneath the link we're going to have a div because this is going to be a drop down menu so open this up and let's top it and first add an ID of auth drop down secondly we want a class name and inside this we're going to say absolute BG white with 200 pixels text this color z40 top 20 pixels left zero border and Shadow LG let's give that a save and take a look see if we can see anything out there's a little bit at the top but we can't really see anything let's continue okay inside this divot add a class that is going to be Flex item sender just if I start Gap one and P3 then I'm going to add an image and I'm going to put the width to 50 and then we're going to say source and we're going to put a dummy image in for this at the moment so if I go to the browser new tab and I say pick some dot photos and I just take this right here copy that and then go back to the project and drop that in and I'm just going to change this to 50 like so save it and if we go back to our project we can see a little image at the top is starting to come in let me zoom in a little bit just starting to come in let's just figure out what's going on maybe I need to say 50 forward slash 50 save that maybe this 50 I can actually just take it off and save yeah okay there we go so we got a little image so now underneath that we're going to add a div we're going to add a class of font bold text 13 pixels and inside this at the moment I'm just going to put John weeks and let's go and take a look there we go beautiful let's zoom out see our little menu starting to come together awesome right okay no end of that a little border of a single closing div and then next and there we're gonna have another UL open that up we're going to add a class of BG white and then inside a list item open it up and we're going to add a class of text 11 pixels py2 PX4 width full hover underline text blue 500 other text blue 600 and cursor pointer and then inside the list item we want a link open that up and we're going to add a href of orders like that and we're going to say my orders and all we're going to do is take this copy it paste it beneath and instead of having this link take it out and just put in sign out save it let's go take a look and you can see that we got a nice little menu beautiful oh okay so for now because we don't have any functionality for this all I'm going to do is scroll up go to this auth drop down ID and on the class name at the beginning just put hidden so we don't show it so if we save that and it's gone beautiful okay and then later on when we have all the functionality in we'll actually start making things Dynamic cool okay so this last unordered list section make a space before it and all we're going to do is add another list item that's going to be that class name PX3 hover underline and cursor pointer and that's going to be daily deals and then we're basically going to duplicate that again and we're going to put in exactly the same except help and contact all the text and that is it save it take a look there we go login daily deals help and contact beautiful okay next underneath the unordered list we're gonna have another unordered list open that up and on this again an ID which is going to be top menu right and then under that we have a class that is going to be Flex item sender text 11 pixels text this color px2 and h8 okay now inside this we're going to put a li a list item and we're going to class it with blacks item sender gap2 PX3 hover underline and cursor pointer then inside this we're going to have an image tag close it off the width is going to be 32 and then the source is going to be a little flag and we're gonna have to get this from the repository so if we go to the browser and I go to GitHub forward slash John week's Dev forward slash eBay clone like that we then come to the repository and if we go into the public file you'll see we have images and you need to download all of these let me just zoom in a little bit so if we go on images we've got UK dot PNG logo.svg and then inside Banner we have all of our Banner pictures so download all of these so the banner folder this logo SVG and the uk.png and then when we go back to our project it should look something like where's the public folder let's open it up it should look something like this so we have an images file open it up we have Banner with the three images inside so let's take a look we've got that top one number two number three and then the logo SVG and then the little flag wow that is a massive flag so make sure you've got that images folder okay let's close that and then inside this SRC we're going to say forward slash images forward slash UK dot PNG and then save it and let's go back to our browser and go to the Clone and then we can see our little flag right there beautiful okay and now just underneath this image tag we're going to say ship to and then save that and you can see it right there on the side ship two beautiful okay next we want another list item open it and class it with PX3 hover underline and cursor pointer and then inside that I'm going to check a div open it for a class of relative and then we have a little icon inside that so we are going to say AI outline shopping cart and the size is going to be 22 and don't forget to import it so let's go to the top let's duplicate this and put in AI outline shopping cart and this BS turned to AI like so save it and you can see right there there's our little shopping cart let's go back scroll down and now inside this we need a little red dot so let's put in another div under this and what I mean for a little red dot is a little red dot to show the number of items that we have in our card so let's add a class and that's going to look like that is quite a lot so it's going to be absolute x 10 pixels minus top 2 pixels minus right 5 pixels BG red 500 with 14 pixels height 14 pixels rounded full and text white and then inside that we're gonna have another div close it up add a class that says Flex item Center justify Center minus margin top 1 pixel and for now I'm just gonna hard code in there three and if I save that and then we take a look we can see at the top right there we have a little red dot with three so that represents three items in our card beautiful okay and for the moment this section is done so let's open a side panel now we need to make another file so all I'm going to do is duplicate this top menu.js and the next one is going to be called mainheader.js so the main header.js let's scroll up top menu becomes main header and this use client we need it link we need and we're going to remove these two icons and we're going to add in two new ones that are going to be AI outline search and bi loader Circle just like that and for our Imports at the moment that should be fine right so if we go down two divs one two everything inside this we want to delete so if we just go down this first unordered list delete and the same with the second one delete it so we just have that like so beautiful okay let's update our ID it's not top menu it's main header border B is correct and all of these styles are correct so next let's put a div inside that open it for a class with flex item sender with full and BG white then inside this we have another div open it class it with flex LG justify start justify between Gap 10 Max width 1150 pixels with full PX3 py5 and MX auto awesome so next inside this we have a link with an image inside and that's going to look like that so this link is going back to the main page and this is the eBay logo so we got a width of 120 and the source is logo.svg so if we save that and if we open the side panel go into mainlayout.js and this top menu duplicate and we're going to say main header like that and make sure you import it at the top save it and let's go and take a look there we go eBay that is massive zooming out there we go starting to come together beautiful okay let's continue go back in main header and underneath the link we want to have a div classic with with full then again inside this another div Placid with relative and again dividup class this with flex item Center and again div open it plus with relative Flex item Center border 2 border gray 900 width full and P2 and this is going to be the box for our input so first we're going to have a button and that's going to look like that so we've got a button with the class of flex and item Center and we have a little icon which is AI outline search a size of 22. next we have an input and we want to close that off open him up we're going to add a class with widthful placehold degree 400 text SM pl3 and focus outline none and we also want to have a placeholder and a text and we're going to say placeholder is search for anything and type text so if we just save that and take a look what is happening at the moment we can see now we have a nice little input with this magnify icon let's just zoom in you can see it right there look at that beautiful and that is working fine awesome okay for now that should be good so after this input the div after that we're going to put in a button like so and we're going to add a class with flex item Center BG blue 600 text SM fun semibold text white P11 pixels ml2 and px14 and in this all we're going to do is say search beautiful let's give it a save let's take a look there's our little search button looking gorgeous right finally last little bit for this section A little div to end it off add the class text XS px2 hover text blue 500 and cursor pointer and all we're going to say in this is Advance like so save it and there we go there's our main header section looking beautiful okay now if we jump back into the side panel we are gonna go back and this includes and this top menu we're going to duplicate again and this time we're going to say sub menu.js and again all the ul's take it out this one and this one take it out pop menu becomes Sub menu and we don't need any icons or links but we do need to use clients so keep that in there now we are going to need some dummy data so I'm just going to say can't menu item items equals an empty array so open that up and I'm just going to drop in a couple of objects that we're going to use for our menu and that is going to look like that we've got IDs and names we've got home saved Electronics Motors different categories so now that we have that let's go to our template section and this top menu we change to sub menu and again this is perfectly fine okay now inside this div we're going to say UL open and open the topic first We'll add an ID top menu left and then under this we're going to add a class that is going to look like that so we have Flex item sender text 13 pixels text this color the X2 and h8 and then inside that we have our little list item opening up we're going to add a class and just for now we're going to put in test let's save it let's go and have a look and see anything oh because we need to import it into our main layout.js so let's go in the main layers.js duplicate this Main main header and then say Sub menu import it make sure we import from the includes save it and let's go and take a look and there we go we've got this little section we're testing this so all we have to do now go back in Sub menu is Loop through all these menu items and spit it out in the page and this is very simple let's just make a space we're going to add in some curly braces we're going to say menu items.map and then item and then a little arrow function open this up and then we are going to drop this list item inside of this Loop like so and instead of test we have item dot name and this we need to have a key so we don't have any errors so this is item dot ID and that is it now let's go back to our browser and there is all of our different menu sections beautiful there we go awesome okay that is all the styles for that top section done so now if we do the footer we will have our main layout for the entire application then we can just drop Pages inside of it awesome so let's go back into our application open the side panel and finally we just want a footer so this Sub menu I'm just going to duplicate I'm going to say foota.js and everything inside of this I'm just going to get rid of like that and this array just delete it out submenu becomes footer now we're going to say Dev ID photo and then we have a class with order T mt20 and px2 then inside that we have another div open that up and we're going to say class Flex items Baseline justify between with full MX Auto Max width 1200 pixels and py10 then inside this we're going to have an unordered list open it and we're going to add a class to it with text Grace 700 and we better just import this into our main layout.js so let's just do that let's just go beneath here and we're going to say children there and underneath that we want the footer so make sure to import that and close it off like so so this main layout section is basically done so let's go back to the footer and I'm going to drop one of these in just to see what it looks like so let's paste that in and save it and let's go you can see right there there's a buy and because this is just a footer it's probably a better idea to go to the eBay clone let's go back to the main section go to the app layout includes and this footer you can see it right there you might as well just take it all copy it and just paste it in because I mean it's just a photo it's not really the most important piece of code anyone's ever written so just drop that in like that you can see we have this little footer then because typing this out is kind of boring so let's save that and then let's go back to our application eBay clone and there's our footer beautiful okay so now we have the base for our entire application and this Center section where it says cool all we have to do is drop Pages inside of it awesome okay so we might as well start with this main section we can start with our little header Carousel section so go back to our code over the side panel and everything we've got open we can just close all this for now because that's done keep this one open this page is dot JS because this is where we're going to be adding stuff so cool we can get rid of and we're going to make a component called Carousel comp so Carousel component so we're going to need a components file so in app make a new folder say components and then inside components new file and we're going to see Carousel component.js and for this we're also going to say use client also import Carousel from react responsive Carousel and import the style so react responsive Carousel forward slash lib forward slash Carousel dot Min dot CSS and then under that we need to export default function Carousel comp open it up and then return now we're going to start with a div and we're going to check a class on it that is Max width 1200 pixels at NX Auto and now we want to use our Carousel import so let's say Carousel close it off and we're going to add some tags on this first we're going to say show arrows is true autoplay true interval 3000 so the image changes every three seconds infinite Loop true so it never stops and show thumbs false so we don't have any mini images underneath it we just have the main Carousel and actually we shouldn't close this off at the end we should actually make an End tag just like that okay so now inside this all we're going to do is put a div with an image inside like that so if we save that and this images remember we imported this so if we go to the side panel public images Banner number one right there so images Banner number one and are we seeing anything no uh oh because my pages I forgot to save so save and now let's take a look what's going on cars.com is not defined why oh because it didn't import it so make sure we import that in our main page so there we go components Carousel comp save it and now let's take a look what's going on with this react responsive cars this is wrong let's have a look so Carousel comp what is wrong with this oh after lib it should be Styles forward slash Carousel comp now save it and there we go there's our first Banner image awesome and all we do for this go back into the castle component we're just going to take this copy paste paste this one is two and this this one is three save it let's go take a look and there we go there is our Banner easy as that beautiful and that is that component done okay so next let's go in the side panel and Castle comp we can close this we don't need it anymore and pages okay we're already in it so underneath carouselcom we're gonna say div open it and we want to add a class that looks like that so max width 1200 pixels and MX Auto and then we're gonna have a top div which is going to be kind of like a title called products we've got a class name of text 2XL font bold mt4 mb6 and PX4 and now inside this this is where we need to display our products so under this let's make another div open that up and let's just indent this so we know what's going on and then on this div we're going to say class grid grid calls 5 and GAP four and now what we need to do is make a product component so underneath this we're gonna have all of our our products in this section so in this top bit I'm gonna say const products equals empty array and we're going to put in some dummy products and that is going to look like that so we've only got two at the moment and that's all we're going to need for the dummy stuff well what we've got is an ID and then the title description I've just put in some Laura mipsum there's quite a lot of it if you want to get some lorem ipsum all you do is go through Lauren ipsum and then this ipsum.com the generator just for example I mean copy this and then drop it into this description section the URL is pick some photos id7 and then a price which is an integer because stripe doesn't accept float so like a DOT like this it doesn't accept it so we pass it as an integer and then in the front end if we divide it by a hundred then we'll get the actual price and the same for this id2 school books description again is Laura mipsum URL and the price again as an integer okay so now let's make our product component so first off what we're going to do inside this let's Loop through that so let's say products dot map open it and we're going to say product and then the allow function open that up and if I just say product and then save that let's go and take a look close this objects are not valid as react child okay so just put in the dot title save it and now you can see that our titles are coming through so what we're gonna have to do now is make a component to pass all of our products to so this is going to be very simple we're just going to say product close him off this is going to accept a key which is going to be product dot ID and also we need to pass a prop which is going to be product and we pass this product in okay now open the side panel and go into components and this Carousel component I'm going to duplicate it and I'm going to say product.js save it now now in product we're going to change this to product all this Carousel stuff at the top get rid of it we need to pass the prop which is product and everything inside this I'm just going to delete like that so what we do need is a link so import link from next link and then close that off open him up and first off we're going to say href and we want some back tick string thing forward slash product forward slash and then we need the product ID so then we need the product ID so product dot ID and that'll take us to that exact product and we also need to style this so just put this href on a new line and this section and underneath href we are going to add a class that's going to look like that so max width 200 pixels e 1.5 border border grade 50 hoverboard degree 200 hover Shadow XL BG gray 100 rounded and MX Auto and then what we're going to do inside this is so we don't get any errors we're going to say product URL so if it exists we then want to display an image like that so we get a class rounded anchors to pointer and the source is product URL and I've concatenated the size at 190 because if you don't have this on the end then I think the image CDN is going to send it through at a default size which is quite big so if you specify a size it should make our application a little bit faster okay awesome and we also want an else which is just going to be null so if the product URL exists so the image else no awesome and then under that we want a div open it up add a class of pt2 and px1 then inside this divot check class on it with font symbol text 15 pixels hover underlining cursor pointer and inside this we're just going to say product title like that and underneath this divid again add a class of font extra bold and what we're going to do for this is say make some curly braces but in product price divided by 100 and this we need to wrap in some brackets like that and then say dot two fix two like that so if the division gives us a decimal place that is infinite we fix it to two so then we get for example 15 pounds and 95 Pence and we don't get 95.555 pens awesome yeah so without the fixed it might come out something like that and we don't want that we just want that cool okay next div it open them up put a class and say relative Flex item Center text 12 pixels and text Gray 500 and then inside that another div add a class of line through and what we're going to do in this we are going to grab what we've done previously grab it copy paste it in and this section where it says product price we also want to put brackets around and that like so and we want to multiply by 1.2 this is to make the price higher to simulate or fake that there's um there's a sale on each product so we can put in 20 off that's all that's for awesome so then under that another div with class px2 and finally a final div underneath with line through and this is our little 20 off awesome so save that and go back to page and save this let's import our product so product from components which has now been imported at the top so if we save that and go take a look there we go there's our two products awesome and actually I forgot the the symbol sorry so in this I'm just going to put the pound sign and there I'll put the pound sign awesome save it and there we go 25 quid 19.99 and you can see the 20 off which would be 30 pounds originally awesome okay so that is this front page done so now we might as well go and actually do the product page itself so when we click we get product one we don't actually have anything at the moment so let's go and make that so let's close all these up and inside app I'm just going to say new folder product forward slash and then brackets ID forward slash page dot JS okay so again for this we want to use client we want to say export default function product open that up and we're also going to pass params so params as in url parameters so for example this one and then inside return open it up we want to import our main layout like so make sure you import that and then inside this let's add a little div we can say class max width 1200 pixels in MX Auto and for right now because we don't have any products in the database we're just going to go back to the the main page and we're going to grab these Raw products copy that go back into the product page drop this in the top let's call this product get rid of this one so we just have one product and actually we don't even need it in an array we just need an object so if we just have a product object like that awesome okay let's do our style so inside this div we want another open it up class name Flex PX4 and py10 and now we're going to put a little ternary if else and we're going to say if there's no product URL do this else do something else so for the first one I'm going to say image and for this we're going to have a class which is with 40 pixels and rounded LG and we also need a source which is going to look like that so this is coming from this dummy product we have up yeah and if I put this on a new line like that and then secondly we're just going to say div class name with 40 nothing so until this loads we're just gonna have a Blank Space which is a width 40 and then when it does load we actually show the image awesome it's just so the page doesn't do any weird stuff because if the image isn't there then things are going to move around crazy and it's not going to look very good so this is how we fix that awesome okay under this let's put another div open it up plus it with PX4 and with full again div classic with font bold and text XL this section is going to be our title and then under this I'm just going to divot class it with text SM text Gray 700 and pt2 and this we're just going to hard code we're going to say brand new full warranty let's just save this a sec and let's go and have a look what is happening yeah we can see that right there look at that beautiful coming together very nicely okay let's carry on underneath this full warranty we're gonna have a single div closed off with a class name border B and py1 save it we go in this we can see underneath we got this little line as a separator awesome next under that div open it class it with pt3 and pb2 then inside that divot open that up class it with flex and item Center and all we're going to do in this is say condition so the condition of the item and then have a little span with class name fontbold Tech 17 pixels and ml2 and the condition is going to be new so if we save it take a look beautiful condition new look at that okay so we need a separator so let's grab this so we put in previously copy that underneath paste it and there's our other separator save it you can see right there underneath another line awesome okay under this a another div open that last it with pt3 and then inside divid again classic with which fall Flex item send and justify between and then inside that div placed it with flex item Center and in this what we're going to say is price and what we want to do again is put a ternary if else so let's open up some curly braces and put in product price and then I'm going to put this on a new line and say first if and then we're going to add in the div and I'm going to add a class to this with font bold x 20 pixels and ml2 let's just indent this a bit open that up and open this div and we're going to do our little trick with the price divided by 100 and then fix like so so product price divided by 100 two fixed two decimal places and then all we're going to do after that is say no so if there is no price we're going to show nothing but if the price is there we show this section awesome save it let's take a look and there's our little price beautiful okay right under this we want a button and for now we'll keep this simple we'll just say class name and we're going to put in text white ey2 px20 rounded following cursor pointer and for the moment I'm just going to add an extra one which is the color so BG this color which is kind of a blue you can see right there and let's just put in add to cart let's save that let's take a look yeah you can see right there add to cart beautiful and later we'll we'll Jazz this button up because we'll add um some Dynamic stuff and on click so then we can add and remove the cart and all that stuff but for now this is fine then under that button we need another separator so let's add in Border B and py one and now finally another div section open it up class name pt3 and all we're going to do for this is put in a div and say font semi bold eb1 and that's description and then underneath we're actually just going to show the description like so so product description if we save that that is flexed so we're actually inside the wrong div yeah definitely so take this copy it remove it out and two down from the button so one two there now paste that in there that should be better okay save it and there we go there's our description and it's not mashed up anymore beautiful okay awesome so underneath we're gonna have another section called similar items no similar products so next let's do that okay so after the last div make a space and we're gonna put in similar products close that off and we want to make sure we import it similar products from App layouts similar products sorry not layouts this is components like that so now let's go and make it open the side panel components let's just duplicate this products one and we'll put in similar products.js save it and this link we can get rid of product becomes similar products we're not passing any props and everything inside this just delete and then let's start it off with a div just open that up and then at the top we're going to say Dave with a class of Border B py1 Max width 1200 pixels in MX Auto that's just a single div close that off and then under that div it open it flash it with Max width 1200 pixels in MX Auto and then inside that a div with a class on Bold text to XL py2 and mt4 and inside just put similar sponsored items and now for this we're going to need some dummy products so what we'll do is jump back on the side panel go into our main page and just take this products array copy it go back to similar products paste it in the top like that and for now two is fine but later on we'll have five so just this is perfect for now and now under similar products let's make a space really brace and we're gonna put in products dot length if that is greater than zero we then want to say div open it up add a class of grid grid calls5 and GAP four then we want to Loop through the products and we're going to say products.map and then products open it up and all we're going to do is use our product component again so we're just going to drop it in account we've got the key and the product and make sure we import it so go to the top import product comp from product and whilst those products are loading we're also going to add another section let's open that up and we're going to say div open that like so let's add a class with flex item sender and justify Center and then another div inside that open that add a class Flex item Center just if I send a gap for and font semi bold and we're going to put a loading icon in this which is going to be bi loader the size is 30 and then we've got a class of text blue 400 and animate Spin and at the bottom of this just put loading products and that is it for this page right let's save it oh we need to import our loading icon we can't forget that so at the top import VI loader from react icons forward slash VI save it Okay now what's going on here import components it's probably the wrong path so let's go back into our product page and let's just see if this is the correct path let's put in dot dot backslash dot dot backslash these components and then forward slash similar products there we go save that and now let's take a look and there we go there's our similar products at the bottom awesome so yeah for now this page is done so now we can jump into the cart page so let's create that let's go into the code open the side panel and inside app we want a new folder called cart and then inside cart a new file called page.js and we're gonna use client export default can't open that up return and open this up we also want to import main layouts and similar products and then we're going to say main layout and inside that similar products close that off now let's save that a sec and then go to our browser and we're going to go in this URL and say cart and there is our cart page right let's sort this out it'll go back into the code editor we're going to start off with a div open it class it with Max width 1200 pixels MX Auto mb8 and Min height 300 pixels and under that we're going to say there for the class name text to XL font bold my four and this is going to be shopping cart then under that divot open it classic with relative Flex items Baseline justify between and GAP two then inside this now the div add a class of width 65 percent and what we're going to do inside this is make a component called cart item just like that so if we go and get our dummy product if we go back to the main page and we take this again copy it go back to the cart and in the top just add this in it's not going to be an array it's going to be a single object it's going to put this as one and call this product so it's a single product and now we need to make the component for the card item so let's import that first we've got cart item from components cart item and now let's open the side panel components and this product I'm going to duplicate call it cartitem.js rename this to cart item and delete everything in the return and this link is not necessary okay so now let's start with div open it class it with relative Flex justify start my2 border with full and P6 and then inside this we're going to have an image to display what the item is and we're going to add a class with rounded MD with 150 pixels and height 150 pixels and we also want to add the source which is going to be product URL and then concatenate forward slash 150 so the size of the imported image is 150. awesome underneath divot add a class of overflow hidden pl2 on widthful divot Placid with flex item Center justify between and with full div again open it classic with flex item sender font semipold Justified between width 400 pixels Tech 16 pixels and underline and in this I'm just going to put product title like that let's save it let's take a look we don't see anything what is going on let's have a look or in our actual cart page so in cart page I didn't save it so let's save that now let's take a look yeah that's starting to come together you can see an item there beautiful okay so next inside card item.js underneath the title we want another div classic with font bold and text LG and this again we have our little trick where we divide the price by a hundred so like that save that let's take a look there's our little price on the side beautiful let's go back in this so then two divs down one two make a space we're gonna add in another div with a class of font semi bold and mt2 and this is just going to say new let's save it you can see new right there and then under that new definitely again open it last name text SM and mt2 and for this all we're going to say is product description and then substring so we only want to show the first 150 characters because otherwise it's going to be too long and it's going to look messy so we'll save that we take a look and that looks beautiful look at that awesome and then finally we just want to add a little button at the bottom that will start off with a div classic with absolute right zero bottom zero P4 and text SM and inside this we want the button open class with underline and text blue 500 and all we do in this is say remove like that so save it and there we go let's take a look they're beautiful there's our card item component we've got a little remove description it's new the title and the price and the image awesome so that component is done right next section let's go back into our cart page and now we're going to make our checkout section so underneath this cart done this div with the width 65 percent make a space divot and we're gonna add an ID and a class which is going to look like that so ID is go to checkout and the class name is MD with 33 absolute top zero right zero and M2 then inside that div open it I put a class of BG white P4 and Border then inside that we got a little button and we're going to class this with flex item sender justify Center BG blue 600 witful text white font semi bold P3 rounded full and mt4 and this is going to say go to checkout let's just save that let's take a look awesome you can see that on the side now a little button awesome let's continue so underneath this button div Placid with flex item Center Justified between mt4 text SM and mb1 now put a div and inside this just put items and for now we're just going to fake it we'll put three and then duplicate this div and put a pound sign and say I don't know 12.99 something like that let's save it and there's the first line beautiful now what we're going to do is just take this copy it paste it in and we're going to change this to shipping and free and we just need to remove the mb1 so it's like that so there's no margin bottom save it and then we have our second line beautiful okay now under this let's make a little separator that's going to be like that a single div we've got bought a b and bought a gray 300 and then finally another div add a class with flex item sender justify between mt4 md1 text LG and font semi bold and inside this we want a subtotal and we can just take this 12.99 copy it and just paste it under there save it and there we go and this is a bit tight what's going on there shipping free what's this Styles okay this should be margin bottom save that let's take a look yeah there we go beautiful awesome and that is our cart Styles done so next let's do the checkout so app new folder checkout and then we want to say new file page.js we want to use client we want to export default function checkout open it return let's import our main layout let's put it in there like that and then we're going to say div open it we're going to add in a ID of checkout page and a class name of mt4 Max width 1100 pixels and MX Auto let's just save that a second and go from card to checkout beautiful okay right first we want a little div that says class text 2XL font bold mt4 and mb4 and then inside up a checkout so it looks like that we know where we are under that divot for a class of relative Flex items Baseline Gap four justify between MX order and with full then inside this divid add a class of width 65 scent dive inside that class of PG white rounded LG P4 a border and then inside that we want to say div with a class name text XL font semibold and mb2 and that's going to be ship in address let's just save it and have a look what is going on yeah okay beautiful this is what we want now under the shipping address div and we want a an ordered list open it up add a class with text SM and mt2 and then a list item like so and this one is going to be name I'm just going to put test and then we're going to duplicate this so we're going to have address ZIP code city and Country so this will be address ZIP code city and Country cool save it let's take a look and there you can see our little address awesome okay so from this unordered list we want to go down two divs so one two make a space and then we're gonna add another div and this is going to be for our items that we're gonna buy so we're gonna add in a class of of BG white rounded LG and mt4 and I'm going to put an ID on this of items so we know where we are and inside this we want to make a component kind of similar to what we've got on the cart page so what we can do if we're going back into cart we take this product object let's go back into checkout and dump it in the top like that now let's go back and cart and this section where it says card item we're going to take it so copy that back to checkout paste it inside this div with items on it and we're going to call this checkout item and this key and prop is perfect and what I'm going to do for this is just open the side panel and this card item I'm going to duplicate call it checkout item dot JS so let's change that from card item to checkout item we're passing a product as a prop we also want to import the path name and let's bring that in like so and now let's strip out everything apart from the outer div and remove all these Styles and we're going to add new Styles and we're going to say Lex just if I start rounded algae mb2 border and P4 then inside this image and we want a class of rounded MD width 150 pixels and height 150 pixels and then the source is going to be the product we're passing as a prop next let's put in the div open it class it with overflow hidden and pl2 and then again got another div in there and we're going to say font semi bold and this is going to be our product title so let's take a look if we can see any no we can't because I didn't save it in this checkout so let's go back to checkout and let's add this prop in so import it check out items go to the top and you can see there import checkout item from components now save that let's have a look yeah okay there's our first one so let's just finish it off go back to checkout item and under this title we want another div add a class of text LG and font semi bold and we're gonna add in this a little span gonna say class font bold and then our little trick where we take the price and divide it by 100 save that and there's our price and then underneath this another divider add a class relative Flex item sender text 14 pixels and text Gray 500 and we're going to add this where we have a class name of line through and there's our little trick again this is where we multiply the price by two and then divide it by a hundred so we get a 20 off thing again and then next another div with this what is this a hyphen or a minus the class name px2 and then finally inside this we just run this little 20 off so if we save that take a look we can see there we've got our little section telling us that this item is 20 off awesome under this div open it add a class of text SM mt2 and inside let's just say product description substring 0 to 130 so only 130 characters show save it here we go looking very nice and finally at the bottom we're gonna have a button but we are going to say if path name equals cart and remember we imported this path name from the next navigation we want to say div add a class with text SM mt2 with full Flex justify end underline text blue 500 and cursor pointer and just add remove and at the end of this we're just going to say null so if it's not it's null we don't show anything awesome save it awesome now that component is done so let's go back into our checkout page and we can continue on so we want to go two divs down so one two make a space got another divider open it and put ID place order and also check a class that is going to be relative minus top six pixels with 35 border rounded LG and then inside this divot or a class of P4 and then inside that they've opened it class it with flex item Baseline justify between text SM and mb1 and this is going to be similar to the cart section so I'll just drop this in it's going to be items three and the price and then it's kind of the same thing again underneath so if we just did it put a class put a class or Flex item Center justify between mb4 and text SM and then in this we put shipping and free let's just have a quick look coming together on the side there beautiful okay now under that a little divider that says border top then under that div open it class it with flex item sender justify between an my4 then in there div with font semivold and order total and then let's divot again let's put a class in text 2XL and font semi bold and again for now we're just going to hard code in 12.99 just like that okay let's save it let's take a look yeah it's looking okay let's continue now under this div we're going to have a form open it and this is going to be for all of our stripe element stuff so we'll just add this in now so we don't have to do it later so first off a single div a class is going to have border border gray 500 P2 and rounded SM and the ID is card element under that a little P tag with ID card error the roll is alert and the class name text red 700 tech center font semi bold and relative top two and then finally inside this form we want a button open it oh over the top and we're going to say class name mt4 VG blue 600 text LG with full text White on semibold P3 and rounded full and we're going to add a type of submit and inside this we're just going to say confirm and pay just like that let's save let's take a look yeah okay beautiful and now we've got our last little bit so from the form one div down so they open it divider add a class with flex item Center P4 just if I send a gap to and bought a t and this is pretty straightforward all we're going to do is add an image with 50 and images forward slash logo.svg and just under that a div with a class of font light mb2 mt2 and money back guarantee and then save that and you can see the money back guarantee with our little eBay logo this padding is what's going on there let me check I've missed something oh yeah okay inside this place order it's class name not last name so class name save and then there we go beautiful and that is the styles for our checkout page done okay so all we have left to do now in terms of pages is the success page so after we've confirmed and paid we go to the success page the orders page to see all of the orders and the authentication page so let's finish up all them okay let's go back into the code open the side panel and now let's do the success page so let's make a new folder in app success and then new file page.js and we are going to use client and for our Imports we want this icon our main layout and a link and then we want to say export default function success open it up return and let's open it and drop the main layout in open that up and let's begin so divot open that we can add an ID of success page the class name is mt12 Max width 1200 pixels MX Auto px2 and Min height 50vh so view height next we have a div open it I'll asset with BG white with full P6 Min height 150 pixels Flex item sender and justify sender and then we're gonna have a div with no Styles and then another little div inside that with a class of flex item Center and text XL and then this is where we're going to use our icon so this AI outline check Circle the class is Tech screen 500 and the size is 35 and just check a little span underneath that's going to have a class of pl4 and this is going to say payment success what else do we need under this so under this div we're gonna have a little P tag with text SM that says thank you we've received your payment and then earned this P tag we want a link open it and we're going to add a href to go back to the main page and then class is widthful and inside this I'm just going to put a little div opening up add a class of widthful textender BG blue 600 text SM font semi ball text white P11 pixels and M T4 and all we're going to say is back to shop like that so if we save that because that page is now done nice and simple go back to the front and instead of checkout we're going to say success and there is our success page and if we click that we go back to the main page beautiful okay next we'll do orders so go to the side panel and inside app new folder orders and then a new file page.js again use client and we want a couple of imports to start so we're going to say we want the link a react icon which is CI delivery truck and our main layout then we want our main section and that's going to be export default function orders open that up return open that and open this in the middle check our main layout in there open that up and then inside this we are going to say div open it add an ID of orders page and a class name we've got mt4 Max width 1200 pixels MX Auto px2 and Min height 50v H then inside that div open it class name BG white with fall P6 and Min height 150 pixels divided again and then put a class of flex item Center and text XL and this is where we have a little icon and that's going to look like that so CI delivery truck the class is Tech screen 500 and the size 35 and then just under that a little span with a class of pl4 and that is orders let's just have a save and go and have a look let's do forward slash orders oh totally wrong or there's okay beautiful now what we're going to do for this is just say can't orders opener already and we're going to put one object in there ID one drive ID whatever just put in a string of numbers name I'm just going to say test same for address ZIP code city and Country and then we're gonna put total as I don't know 12.99 and then because this has a relationship we're going to put in this order item and then we want another object inside that actually won't be an object it'll be an array and then an object there and if we go back to our cart scroll to the top we have a product right there so let's just copy it go back to our orders page and drop that in and this ID is fine and this description we don't need that get rid of it the price don't need that get rid of it and that should be that should be okay so let's save that and let's just carry on and if anything breaks we'll just fix it so now underneath this section we're going to say orders.length if that is less than one so there isn't any orders we want to say div and then we've got a class Flex item Center justify Center and you have no order history else we want to show nothing and then under that we're going to say orders.map order open that up open the div and we're going to add a class that is text SM and pl 50px we also need a key which is going to be the order ID and then inside that they've opened it on a class of Border B and py1 and then and Dave open and classic with pt2 and then inside this all we're going to do is drop in that so we've got a span with font bold and MR2 and that's the stripe ID and then we've got this order stripe ID then what we're going to do is Let's Make a little space we're going to copy this paste it stripe ID becomes delivery address and then instead of stripe idea we're going to put in name address ZIP code city and Country let's just save this and see what's going on yeah just like that that's perfect let's continue you can do the same again with this you can copy and paste it and the next one is going to be like that so it's going to be total and order total divided by 100 and then under this div open it add a class of flex item Center and GAP four and now we're going to say order.order item dot math open that say item and then open that up and again inside this we want to div that up open it and we need again a key which is item ID and the class name is flex item Center then inside this we want a link open it add a class to this with ey1 hover underline text blue 500 and font bold and for now I'm just going to leave a href as just a forward slash just nothing and then in this we're going to add our little image which is going to look like that so image with a class name rounded with 120 and then the item product URL but actually that might break so let's just put in the item.url at the moment and then finally this at the bottom item dot title so let's save that and see what is happening yeah okay so there we go we still need to add in uh the date so create your ad and Delivery at but we'll do that when we have um our Super Bass database so at the moment this page is done awesome okay last page the auth page so let's go to the side panel and in app new folder auth and then we need a new file we're going to say page.js again we're going to use client and for this we need three Imports and that is going to be that so we need Super Bass auth UI react this auth UI shared and the link and then we want to export default auth page and then return open that up and let's open this and there is no main layout for this so we're just going to say div open that and we're going to add an ID of auth page and then a class of widthful Min height screen and BG white and let's just actually go to auth and what does this say the default export is not really a component of page auth let's have a look why is that break-in let me just take that out all right okay so yeah so we need to use these okay so just bring them back in and next we're going to say div open it add a class of whitfall flex item sender justify sender P5 border B gray 300 and then we have a link open it and pull on the a href back to the main page and a class name of Min width 170 pixels and inside this we are going to have an image which is going to be our eBay Day icon just like that let's save it here we go eBay awesome under this we have another little section just going to be a div like that with login and register inside it and the class name is going to be whitful Flex item sender justify sender P5 and bought the B gray 300 right under that another div classic with Max width 400 pixels MX Auto and px2 and inside this we're going to use this auth input and this is very handy I didn't know this existed until a couple of days ago and if you want to see what this is if I go to the browser and I paste this URL in you can see this auth UI it's got all the Imports that you need for it how to set it up this is on the Super Bass website in the docs you can see all this there this is basically how you use it we're doing it slightly different where you can see all of this and it is awesome so if you want more information about that if you go into the eBay clone and we go back you can see I've put a notes dot text file where I've made a couple of note and you can see that I've got different links in for providers and basically where I got all the information to make this Pro uh to make this project so if you want to have a look at that there it is awesome right let's go back to our application and set this up so we want auth we're going to close that off open it and for this we want only third-party providers so we're going to use Google and we have the appearance from this theme super which we imported right there so if we save that take a look let's see what happens still breaking let's try and add a bit more in let's put in providers which is going to be Google let's save it they'll break in we're also going to have a redirect because we need a callback so let's drop that in we're going to say redirect to a window.location origin auth callback save and we need to pass in the Super Bass object like that we haven't got that at the moment so I think to make this work we're actually going to need it so if we go to the top and we import this we need to import create client component client from superbase or help us next.js and then we're going to bring that in I don't know if this is actually going to work at the moment because we don't have a connection to Super Bass so we might have to comment this out until we've set up the Super Bass database but let's give it a try anyway let's save it and yeah okay so we need to set up Super Bass before we can actually see this working so it's no problem for now what we'll do is just comment this out and save that and comment this topic out and let's take a look yeah just this is fine for now because otherwise it'll break and we can finish this off when we actually set up Super Bass so that is basically all the pages and I did forget one I forgot the address page so let's quickly go and do the address page now so let's go into app new folder address new file page.js and again use client this we do want our main layout and we also want a icon which is AI Outland loading three quarters and then we're going to say export default function address open that return and then inside this we have our main layout and let's just go to forward slash address and that is break in let's just comment this out and there we go there's the address page so let's start let's do div open this and let's open this top bit and we're going to add an ID and a class that looks like that so this is the address page and the class is going to be empty for Max width 600 pixels MX Auto and px2 and inside that they've added class MX Auto BG white rounded LG and P3 then we're gonna have this top section which is going to be address details and the class is going to be text Excel text bold and mb2 then under this we want a little form for our text input and for this you're going to say div open it add a class of margin bottom four and what we're going to do for this is make a compose opponent for our text input so open the side panel go into component this product will just duplicate call it text input and everything inside it just get rid of it rename this to text input and we're going to have a couple of props so this product get rid of and we're going to add bring placeholder error and on update so this is what we're going to pass into the component and then inside this input close that off open it up and first off we're going to say placeholder is placeholder then we want to add our Styles and that is going to be like that so we got a class name with widthful BG white text Gray 800 border text SM order this color P3 place all the gray 500 and focus outline none let's save that and save the address page after we've brought in the text input and let's close that off until we import it yeah we've got text input right there from components now what we're going to say on this is last name widthful we want to pass the ring which we're going to say test for the moment placeholder is going to be name and for now that should be fine so save it let's go take a look yeah okay awesome and then you can see later on we're gonna get the information out of this and set it in uh state but we won't do that until um we've actually got all of our API stuff and back end up and running so don't worry about that for now and then under this div we're going to make a button open it open this top bit this is going to be a class name and we're going to say mt6 with full text white text LG font semi World P3 and rounded and just for now I'm going to put on BG blue 600 so we can see the button and all we're going to do is add in update address we'll make this a bit better later on but for now this is fine so let's save it and let's see what we've got okay perfect this for now is completely fine so let's just jump back into our text inputs just to finish that up because there's slightly more we need to add under this class name we're going to add a value which is going to be string remember this prop here which is string we're going to have this on change so when the input changes we're going to have an event that's on update and we get the current value and we're going to pass it out of this component back to the main page and then finally we've got a type text and autocomplete which is going to be off and then at the very bottom just underneath we're going to say div which is going to have a class of text red 500 text 14 pixels and font semi bold and we're going to say if there's an error show the error else nothing let's save that let's see if it breaks it does not break that's a good sign so now just to double check that the error is working why don't we just say error and we're going to pass a string saying this is an error save yeah there we go this is an error awesome right that is all of the styles for all of the pages now well all of the base Styles we're gonna have to make it Dynamic uh later but now we can move on so what we're going to do now is go and set up a super bass and once we've done that we might as well set up Prisma in our application so then we can seed uh all of our data and have that up and running and also we need to go to uh the Google cloud and set up that as a provider and then get the information from that and put it in our Super Bass providers section so let's go to Super Bass and I'm already logged in I have an account so I can just go straight the dashboard but if you don't have an account sign up and then go to the dashboard or I'll go to the dashboard so I already have this from the original project but I'm going to make a new project in John Wick's Dev organization let's open this up and this one I'll call eBay clone database password let's just generate one copy it and if I just open a text file like that and I just drop that in there then we have our password just minimize that and then this region is fine and the price is perfect so let's create the new project and there we go there's all our details so let's jump into our application open the side panel and we need a environment file for this so close app close all this up and we are going to make a new file called dot end like that and what we're going to need for this is a couple of keys so first one's going to be next public stripe PK key after that just stripe SK key so the secret after that we're going to put in our Super Bass stuff this is what we're going to use now so next public base URL and next public Super Bass and on key and we'll also put in our database URL and this is going to be for Prisma so if we save that and we go back to our browser and then we've got this project URL so we're going to copy that and then go back base URL is going to be that and then API key let's go back back and we're going to put that in the Anon key like that awesome okay let's save it and next we're gonna go and what are we gonna do oh we're gonna set a Prisma now so but this what we want to do let's open a terminal let's open that up and all we want to say is MPX Prisma init enter and then you can see we have this new Prisma file with the schema dot Prisma inside of it and what else we're going to need in this is a new file called seed dot JS and for this seed there's no point in you writing it out because it is super boring so if you go to the repository so go to eBay clone let's go to the main section and you can see there Prisma and C dot JS all of this just copy it all so if I click raw so highlight all of it copy it and then let's go back to our code editor and just paste that in because you can see look at it there's just there's so many dummy products you don't want to type that out that is super boring so let's save that and now let's go and create our schema so let's go and scheme it up Prisma all of this is okay at the top we just need to add in what we need and let me just close this side panel so we've got a bit more space okay so first off we're gonna need a model address and what we need for this address is this so we need an ID that is an integer a user ID which is going to be a string and that's a uuid name address ZIP code City Country and created ad just like that awesome next we want a orders table so model orders open it and there's quite a few on this one so let's drop it in and we got this ID again the integer which is auto incremented the user ID again which is a uuid write ID name address ZIP code City Country the total of the order so how much the use are paid they created at and then this order item which is a one-to-many relationship which we're gonna set up now so and if you're thinking why is the name address and all that a and also on this one because this is the main address this is where you change it and on the order this is where we are sending the product so you don't want to reference the address by an ID because if you change this then it'll change on this orders table and then you'll end up sending the order to wherever you've just updated the address it'll go to the wrong place basically so next we want this order item so model order item open that up and there's a couple on here this is where we're going to have our relationships so let's drop this in okay so the ID again Auto increment we have an order ID a product ID created at right there and then orders right there so this order so basically this order item belongs to an order and then product same thing but we haven't made that yet so this is the final one we need so at the bottom model products open it up and let's drop that in like that again Auto increment we're going to title description URL price created at and then the order item and there we go awesome okay so save it and that is basically the Prisma stuff set up so what we can do now if we go back into Super Bass so there it is super bass we need to jump into settings which is this button project settings on the side and then we need to go to uh I think it's database I think so yeah let's scroll down yeah okay so this section where it says connection string we need that so we're going to copy that go back to our project go in the side panel n and then this database URL we're gonna put that in there and there's two things we need to do to this instead of 6543 we're going to do 5432 and the password is in our text file this password that we made earlier so copy that and paste that in there like so save it awesome now let's go and open this terminal backup go to terminal and we need to now put in a command to migrate all of our Prisma tables to Super Bass so I have a couple of notes in the GitHub repository so if you go back and I go into eBay clone and I go in notes.txt you can see there I've got Prisma migrate Dev hyphen hyphen name init so copy that go back to the project and we're going to drop this in paste it in and press enter and let's see if it breaks it hasn't broken yet so maybe everything's good and there we go we just migrated which is awesome so if we jump into Super Bass and we go to uh the fourth icon down database base on the side let's have a quick look yeah there we go addresses order item orders and products cool actually we can get the other command from the repository where is it Prisma generate so you'll need this one copy that go back to the repository and drop that in because we need to generate everything so we can use it our Prisma client so let's press enter and that is done so that generated this now so we can use that to access Super Bass via Prisma awesome and now all we have to do is seed our data so from this CJs file that we made just a second ago with all of our products in so we don't have to put it in manually because that would suck so let's go back to our repository and where's the my grade seed sorry there we go MPX Prisma dbc'd copy that back to the project and paste this in and let's see if it breaks probably not beautiful the seed command has been executed and if you have any trouble with this remember if you go inside panel and you go into package.json remember you need this little command in there so Prisma seed node Prisma forward slash seed dot JS because otherwise it will not work so make sure you have that in there okay awesome so let's go back to our browser and then we're going to go into eBay clone and where are we going now home no table editor yeah that's the one table editor there we go so if we go into products we now have 20 products awesome so with title description URL price and created ad awesome right so what we're going to do next is go into authentication and let's go into policies and you can see we've got all these warnings or role level security is disabled so let's sort that out so on the Prisma migrations I'm just going to enable row level security just do that confirm and then now on addresses we're going to enable to confirm then we're going to create a new policy and we're going to say a full customization this one is going to be the policy name authenticated user read only this will be just select and we're going to put authenticated and what we're going to see for this is if the logged in auth user ID equals the user ID then we're cool so review and then you get your little policy and then we're going to save that policy awesome is one next let's do another one a new policy I think we can do the get started quickly and this is going to be enable insert access for authenticated users only that is good so we're just gonna say use this template and this is all fine so review save policy awesome and then a final one new policy I think we can do get started quickly let's go enable update access for users based on their email no we don't want that so let's go back and we're just going to do for full customization I'm just going to say enable update for users based on the user ID and this is going to be update then we're going to select authenticated and for this I'm just going to say again the same auth uid equals user ID and the same in the bottom so review save policy and that is address done awesome so next order item we're just going to say enable RLS confirm and then orders we're going to enable confirm uh new policy all customization we're going to say authenticated user read-only select authenticated and this again is going to be auth uid equals user underscore ID and then review save and then one more this is pretty quick this is get started quickly enable insert access for users so the second one use this template review save policy and orders is done so now products all we're going to do on this is say enable and then new policy get started quickly enable read access to everyone use this template select review save policy beautiful there we go so now we have all of our policies uh the next thing we should probably do while we're here is sort out the providers so we want Google so let's open that we want we want to enable sign in with Google and then we need to get all of this stuff from Google Cloud console so let's go to Google Cloud console there it is let's go in there and I already have an account if you don't have one you can have to create one so in my case I'll just go straight to console and you can see that I've already made eBay C for the previous project but I am going to create a new project so new project this one I'll call eBay clone it's going to get that right eBay clone and no organization that is fine create and just wait for that to finish there we go so we're gonna select that project so now we are on eBay clone you can see right there so now let's go to dashboard and now we want to go into or the side panel then apis and services then credentials now we're going to say create credentials oauth client ID and what's the oh yeah we need to set up the consent screen first so let's go and do that okay so this is auth consent screen and if you want to know how to get there on the side apis and services and then oauth consent screen right there which is the page we're on so this is going to be external create app name eBay clone support email I'll just put in this email app logo none of this really matters app home page that doesn't matter uh develop a contact email I'll just quickly put in one and then we can save and continue okay now all of these Scopes are not necessary for this so save and continue and then test users I'm gonna put in a user which is going to be John weeks EV gmail.com and then add that like so okay save and continue there is our consent screen I think all of this is good so now let's go back to dashboard now let's do credentials create credentials auth client ID application type is web application name web client one is is fine and then this authorized JavaScript Origins so add URL this is going to be HTTP localhost 3000 and also I'm going to put in another one that's going to be just HTTP localhost like that just in case and then authorize redirect URLs we're going to add this URL and this is in our Super Bass UI so let's go back to Super Bass and you can see the Callback URL for a wolf copy it go back to the Google Cloud console paste that in and that should be good to go so let's create awesome now we've got our client ID so copy it back to Super Bass client ID paste it in then go back to Google get the client secret copy that back to Super Bass client secret paste it in and that should be it so now let's save it and there we go Google enabled so so that is all good so now what we can do is go back to our code editor and see that we don't need that anymore this end we're going to close that for now get rid of all this terminal at the bottom open the side panel and we're going to go into app auth let's go into page.js and let's see if we can get this auth section to work so if we uncomment that and then uncomment that let's save it go back to our browser eBay clone and let's go to login and there we go it's working we have no errors which means we are connected we're on the console got a couple of errors in here this is probably one of my Chrome extensions because I've got grammarly installed so normally that is the culprit for all of these errors even though I can see an on update one there so we have to fix that later but that doesn't matter for now so let's do this authentication section okay so first we're gonna go and make our callback route so in auth we want a new folder called back and then a new file and we're going to call this root dot JS like that and we need three Imports for this so I'm going to drop them in it's going to be that so we're importing the next auth helper which is create root Handler client we have the cookies from the header and the next server response then under that we're going to say export async function get we want the request open it up and then we're going to say const URL equals new URL pass in the URL here then under that we want to say cons code equals request URL so get in this searchparams.getcode and then under that we're going to say if there is a code we then want to say create root Handler client and we pass the cookies and then we assign that to a super base cons and then we're going to await Super Bass auth exchange code for session pass in this code again and all we do after that is say return next response redirect request URL dot origin and that is it so there is our callback route so save that right now open the side panel and inside of app we are going to create a new folder and this is going to be context and inside context we'll do the new file called user.js and this is going to be use client we also need some imports so first from react we're going to import create context use State use effect and use context next we have use router from next navigation and then again our Super Bass helper which is going to be create client component client now under that we're going to bring in the create context and assign that to a context cons now we want to say cons provider equals function passing children and we're going to open that up then in the top of this we need our router so use router then we're going to have to use state so there's five that we need we're going to need that so the user the ID email name and picture and then we need to assign our helper function to a cons so let's create client component client to a super based client and now we're going to make a function that is going to check our current session so if there is a session that means that a user is already logged in so what we're going to say is get current session and then we're going to open that up make sure that it's an async and then say const res equals await Super Bass client auth get session now under this we're going to say if there is a result and there is a session we want to return the session else we're going to clear the user with a function that we haven't made yet and then just return nothing okay there's one next we are going to make a function called get current user open that up and again make sure it's an async and just to avoid any errors we're first going to check to see if there is an ID so remember we've got this date as an ID so if there is an ID we don't really need to get a user because they're already logged in and then under that we're going to say const res equals await Super Bass client get user and then we have an if statement with the same type of thing again so in this we're going to say if there is a result and the result user exists we're then going to put the user into a const and we want to set those values in our user State and that's going to look like that so get the user if it exists put it into this cons and then set the user then we've been a bit more specific where we're getting the actual user ID the email the name and the picture so the image okay next we're going to use effect open that up and in this we're going to have a function that's going to be an async which is the is user function open that up and this is pretty basic we're just going to use the functions we've created just now first one's going to be await get currency session and then put it into accounts and then if there is a current session get the current user and then we're assigning the values to our state and then at the end we're going to make sure we call that and just for an empty array at the end like so awesome okay right next we're going to say can't sign out async open it up and this one is pretty straightforward we're just calling the Super Bass client and we're signing out the current user and then after that all we're going to do is clear user with this function that we haven't made yet and then just redirect back to the main page awesome now here is our clear user function this is very straightforward we got can't clear user open that up like so and this we're just reassign in all of the states back to null just like that awesome right now we need to expose our variables and functions so that's pretty simple what we just say is const expose equals user ID email name picture and sign out so we have our sign up function there and then we're exposing all of this state at the top awesome right let's go back down underneath that we then need to return the contact so return and we're going to put context.p provider that is a value exposed close that off and then just pass the children just like that awesome and then at the very end we are going to export cons and then that's a use user and then we're going to say equals use contacts and we're passing the context and the final bit we're just going to say export default provider and that is our user context done so now if we save this and we jump into our side panel and go into the layouts.js what we need to do is wrap this in our user provider so let's bring that in user provider open it up and then the children put that inside like so let's just make sure we import that at the top so user a provider from Context user save that that should be good for now and because we've done that that means that our user details should now be available throughout our application so if we jump into layouts includes and then this top menu.js if we scroll up we have this login link button by here so we're gonna have to slightly modify this but first off let's jump in the top and we need to import our context so import use user from App context user and let's bring that into our top menu so const user equals use user and in this top section we're going to make a function called is logged in open that up and what we're going to say is if there is a user and the user ID is an empty we want to return open that up and we're going to add a button into this open it up open this section add a class name of flex item send the Gap to hover underlining cursor point there and inside this all we're going to say is Hi the username so whatever the user's name is and we have this icon as well so make sure we import that which is that right there react icon BS and if this does not trigger we're going to have another return outside of it so return open that up and we're going to scroll down and this link with the login copy it remove it and then put in is logged in that function and then drop this HTML into this return like that and then save it now we also need to add a state for this so we can open and close our menu to make it Dynamic so at the top we're going to say const is menu and then we want to say set is menu and then that is going to equal use State and make sure we import that like so so you state from react and that's an equals yeah so you state is false and on this but done we're going to have an on click event and that's going to be on click so if menu is false set item to true I'll set it to false and also we need to scroll down in our auth drop down right there we're just going to modify this class a sec so put a curly brace and a back tick and let's go to the end of this again a back tick and a curly brace and put this on a new line and then on a new line it's intended this hidden we can now get rid of to take that out and underneath this we're going to say if is menu we want to see visible so we want to see it if it's true else we want it to be hidden like that so save it okay and then inside this auth drop down we have this hard-coded image we don't want that we want to change that for user picture so we can see the logged in users picture and this hard-coded name we're going to change to user name and for right now that should be okay let's save that and let's go and test this out let's see if works or anything breaks so let's just go back to the home page a sec just to see if everything is okay clear this out let's say login okay sign in with Google and actually let me just grab this and I'll do this in an incognito window so I don't get any weird errors from the Chrome extensions that I have in so let's just try this this is specs okay so let's sign in with Google and I'm going to put in John weeksdev gmail.com let's press next and then put in the password and let's press next I'm just going to verify with my phone and is it going to work uh it looked like it worked because there is my name at the top John week so if I click this way there we go beautiful but we have just successfully logged in awesome so what if I sign out that didn't work oh we probably haven't set that up okay so let's go back in our code let's go and check sign out yeah there's nothing on that so sign out is pretty straightforward if I just put this class name a new line like so and then open this up and then put on click we're getting our user context and we're calling the sign out function and then after that we're just set in is menu to false so the menu closes so let's save that and let's go back to our incognito window which is there okay now if I press sign out hopefully this will work yes awesome we just signed out let's sign back in yes there you go so now our register slash login is working perfectly beautiful okay so now that this authentication stuff is working uh why don't we go back into the code and this time let's make our cart and how I've done this is the same as user I've just made a context called cart so just a heads up there's two ways you can actually do this so you can do it in the way that I'm going to show you or you can use uh a global State there is a package called uh zustan and if you're coming from The View ego system the equivalent is pinia it's based basically the same thing but in this case I just use the context because we don't necessarily need a global state for this so anyway let's make our cart context so in context I'm going to say new file car.js and again this is use client let me just close this side panel and we need to import the router and the create context you state and use context and then again under this we're going to say context equals create contacts and then we need a const provider pass in the children open that up and then inside this get our router at the top and we also need a state that is like this so is item added and set is item added and by default that's going to be false okay so there is seven functions in this and they're not too complicated so first we want to get our card so we're going to say cons get cards open this and then say let cart equals empty array and first if the type of local storage is not equal to undefined so I'm just doing this so we don't get an error we want to say cart equals Json pass and then inside this we're going to say localstorage.getitemcat and just to make sure we don't error we're going to say or send back an empty array and then we return the card so basically we're either going to return the items or we're going to return an empty array awesome okay next is going to be add to cart and we're going to open this up and we're going to pass a product and we're going to do exactly the same as the first one so just copy this paste it in and then we're going to get that cart object and we're going to push in the product and then we're going to reset our local storage to update the cart and then we're going to say is item added to cart pass the product and then just do a quick refresh just to double check just to make sure that everything is up to date awesome okay next is going to be remove from cart like so open that up and the same again we're passing the product because we need a product to remove and we'll just take this up top copy that paste it in then we're going to say filter through the cart and if the item ID is not equal to the product ID we're going to get that and then we're basically going to do exactly the same as we did previously so just take a less copy and paste it in and that is our remove from card function awesome next we have this little function and we're going to say const is item added to cart pass the product open it up and the same procedure again with the check-in if the local storage is not undefined and again we want to do the same as we did before but except this time we want to see if the item is equal to the product ID and then we're going to say if cart.length is greater than zero set item is added equals true and then just return that so we exit else we're just going to say false like that and that is that function done okay next one very simple this is cart count so we're counting how many items are in the cart so const count count open that up same again we're gonna check to see if local storage is not undefined just like that and then if so all we're going to do is return length and that is it awesome okay next is the cart total so the total price of all the items combined we're going to say const total open that up and then we need two variables at the top of this so we can have a total which is going to be by default zero and the card and again we're going to copy and paste this if local storage is not undefined just so we don't get any weird errors and then under that we're gonna do a for Loop I'm just gonna set this to I and the array is going to be cut so cart.length and this array is going to be cart and all we're going to do is say total plus equals element dot price so we're adding the price up as we Loop through and then all we do is we're return total and that is it awesome right last function and this is super easy I'm just going to drop this in because it's very easy all we're going to say is const clear cart and we get the local storage and remove the card and then just do a quick refresh just to make sure everything is updated awesome and that is all the functions to our card so now all we need to do is expose it and return the contact provider so let's say const exposed equals object and then we're just going to say everything that we want to expose so all of the functions and the state that we've made so that's going to be is item added get card and card remove from cart is item added to cart count cart total and clear card and then finally we want to be able to return this and access all of that information so we want to return on text provider which is the value to expose and then we put the children inside that and then after the end we say export const use cart and we're passing the context and then finally export default provider like that and that is our cart complete so now to get access to that throughout our application we are going to jump into the side panel go back to layouts and inside this user provider add in cart provider open that up and put the children inside of it and let's just make sure we import that like so so cart Provider from Context card save it and now we should have access to our cart application wide just like that awesome so now that we have that why don't we go and see if we can add and remove items from our card so let's go into product and page then at the top we want to import our card with this used car so make sure we import that at the top like so and now if we scroll down to this add to cart button we're going to open this up like that and we're going to change this to a curly brace and a back tick the same on this end back tick curly brace put these on a new line and then we're going to have a ternary statement inside this so we're going to say cart is item added if that is true we're going to say the BG color is orange and then we're gonna have hover BG color a darker orange and then after that we're going to say else the BG color is blue and then when we hover we get a darker blue like that and we're going to change the text based on if it is added or not so instead of add to cart we're going to put in this so if item is added we want remove from card else add to cart now above this on the button we're going to say on click let's make this a little function and in this we're just going to see if the card item is added we want to get the product and pass it into the remove from from cart function so this product and then we're going to have our little toaster a notification that says toast info remove from card and after three thousand milliseconds so three seconds it'll close and we just need to import this so if you go to the top and we import toast react toastify like that let's scroll back down and then on the other side of this if we're just gonna have an else and this is pretty straightforward we're just going to say else we want to add to cart and then the toast is going to be success added to card so if we save that and let's go back to our window and actually we have this red dot hard coded at the moment so we can actually do that now that's pretty quick this is going to be inside the top menu so in layouts includes top menu and if we scroll to the bottom this section we need to make this Dynamic so if we scroll up and we import our card so import the contacts then we're gonna use cat like that that let's go back down and just in here let's make a space and we're going to say curly brackets if the cart count is greater than zero we want to take this so copy it remove it from here and drop it in there and on the end of this we're going to say else an empty div and now all we need to do instead of having this hard-coded three we're going to put in our card count like that it'll that'll come out as a number okay so if we save that now let's go back to our window we have nothing in there at the moment which is good so now let's go to products and then we have this product if we press add to cart we should add it and see this go to one so let's press add yes there we go add it to cart and you can see there you've got one so if I remove it it gets taken away and we get this notification saying removed from card awesome so that is working and if you want to know where that is being stored if I just add it back to cart and I go into the application local storage and we click this you can see right there our cart key has an item in it right there which is this down the bottom there is our item in the cart beautiful okay let's close this up a bit and now we should probably do um our middle way because we are logged in at the moment we can see that I'm logged in but we can still go to the auth page and we don't want that we don't want to be able to go to the authentication page if we if a user is logged in so let's do our middle way let's go back to our code and let's open the side panel let's close all this for now and in the top level we're going to make a new file we're going to say middle away.js and we have two Imports for this so at the top we're going to say create middleware client from the next JS auth helpers and the next response now under this we want to say export async function middleware open that up I'm going to put in the rack for requests we also want to get the response so we're going to say const res nextresponse dot next now we want to get our Super Bass middleware client we're going to do that by calling this and passing the request and the response and then pulling that into a Super Bass cons and then we want to check to see if we have a session because remember if we have a session that means somebody is logged in so we do that by saying const data await Super Bass which comes from this all forget session and now the first one we're going to say if there is a session so if somebody's logged in and if the path is off so if they're on the auth page we want to redirect away from that and we're going to send them back to the main page like that because we don't want them to go there because they're logged in already awesome that is one next is the same type of thing we're going to say if and then we're going to say if there is no session so nobody is logged in and then we're going to say and we're going to open these is up the URL is checkout success orders or address we want to send them oh the authentication page because remember there is no session so that means they're not logged in and we want them to be logged in to be able to get to the checkout the success page the order or the address page awesome and all we're going to do to finish this off is say return res and that is it so if I save this that is exactly what we want so if I go back to the browser and I refresh we get sent away from the authentication page because we already have a session you can see right there because I'm logged in so we get redirected away from there which means our auth is working we've got this little error what is that what is this hydration oh yeah okay yeah if you've got any hydration errors don't worry about that for the moment we're going to sort that out later we're going to make a component and we're going to wrap certain things in it so we don't get a hydration mismatch error so no need need to worry about that for now okay awesome so next what we can do is we can build all of our API endpoints so then once that is done we can focus purely on getting our front end setup and then we can finish off with setting up stripe and finishing off our application awesome so let's do all of our API endpoints because now we have a user logged in and all that type of stuff so let's go into app new folder API and the first one we're going to do is address so we need a new folder for that we're going to say address and then we need a another folder and this one is going to be a dynamic ID so we're going to say ID and then inside this new file and this is going to be root dot JS and this is where we're going to make our first endpoint so we're going to need Prisma to be able to get all of our information from the Super Bass database so what we're going to do is inside app create another folder called Libs so libraries and we're going to make a file called prisma.js and all we need to do in this is get our import for the Prisma client and that looks like that and then all we do is just export default Prisma so we can then actually get it so save that and let's go back to our API and in this root.js okay so now we're gonna import Prisma from App Libs Prisma like that we also want next response create server component client from the Super Bass auth helpers and the cookies from our headers and this endpoint is going to be a get let's open it up and so we can't access this endpoint without being logged in we're going to say create server component client pass it the cookies from our browser and then we want a little try catch and then we want to get the current logged in user and then we're going to say if there is no user we're going to throw an error which is basically going to trigger this catch block we're going to put a console log in there I'm also going to say await Prisma disconnect connect because at one point I was having issues with too many connections at one time so we manually disconnect it and then we return a new response just something went wrong at the status 400 but if all of that is good and there is a user then we want to say can't res await Prisma address find first open that up and we want to get the address where the user ID is equal to the logged in user like that and once we have that we're going to disconnect Prisma because again it was giving me some issues and then finally return the response like so and basically all of our functions are going to look like this so yeah basically all of our endpoints are going to look similar to this so if we do the next one let's go into our side panel next inside API addresses we're going to make a new folder again I'm just going to call this one create and then we're going to do new file and we're going to say root dot JS and then this this root.js we made previously we're just going to copy all of this go back to this one paste it in and we're going to make some modifications so all of this import we need this we need we need to get the user we need to know if the user is logged in or not we need to change this from a get to a post and we need to pass the request and then how we get that request data that we're passing through all we do is say rec.json and then I'm going to put that into a const called body and instead of this we're just going to take this out and we're going to say await Prisma address create open this app and then we need to pass the data as an object and all we're going to pass into this is a user ID which this user ID again we get from this because they're logged in then name address ZIP code city and Country and there we go that is that API endpoint finished so save it open the side panel and now we can move on to the next one so we have this one and create the next in address we're going to make a new folder this is going to be update and then new file root.js and again going to create and copy all of this go into root.js the update paste it in all of this again we need this cookie stuff we need the user and this throw error we need same as the body and the only thing we're going to change for this is this function so there's a slight difference if I get rid of it this is not a create this is an update and then open that up and we want to update where the address ID equals the ID so like that where ID equals address ID and then under this we got data and then we need to pass all of the data that we want to update so in our case it's going to be name address ZIP code city and Country and that is it for this that is that API endpoint done so save that and that is the addresses done so close all these up and next we're going to do orders so in API new folder orders and then first we're going to have a new file which is going to be root dot JS again we want to get pretty much the same stuff so if you go into the address update and we copy all of this and go back into orders paste it in again all of this stuff at the top is needed except this is not a post this is a get and this update and body section we do not need so get rid of it and this is going to be a weight Prisma orders find many and then we're going to find many where the user ID is equal to the logged in user ID so like that where user ID equals this logged in user ID we want to order by descending so we want to get the latest purchase at the top of the list and we also want to get our relationship because if you remember if I go back into our Prisma folder and I go into the schema I go to orders we have this order item so orders has a 1 to many relationship so we need to say include order item and then include product and we're going to set that to true and that will get all of the order items associated with an order and then this orders all we're going to do is in our response return orders like so and that is it that is this endpoint done save it now another one in orders we're going to do new folder create new file root.js and let's copy from the previous one so copy all of this go back into create root.js paste this in now there's slightly more going on in this so again we need all of this the get is going to be a post because we're posting data all of this section is correct we need to get our body again so rack.json and we're going to get rid of this section for now so get rid of this and because this is orders create we are going to create the order so we're going to say oh weight Prisma orders create open that up let's say data open that and there's a couple of things we need to pass for this so that is going to be the logged in user ID stripe ID name address ZIP code City Country and then the total like so and then after we've done that we then need to save each individual item associated with this order so after we've done the order let's go underneath and we're going to say body.products dot for each and this element we're going to turn to async prod so for each individual product and then inside this we're going to say await Prisma or the item and then we're going to create each order item for the order open this up this is also going to be data and all we're doing is saving the order ID which is coming from this what we've just created and the product ID as well which comes from this what We're looping through and then at the bottom instead of we're turning orders we're just going to return or to complete status 200 save it and that is this endpoint done awesome right so next now we've done orders and addresses so now if we do product so if we go to API new folder product and then that's going to be forward slash we're passing an ID and then inside product ID we want the new file which is going to be root dot JS and again if we go to one of the old routes so this create one let's copy this and go back into product ID root paste that in and we don't need all of this in this one we don't need authentication so we can get rid of cookies and this Super Bass auth helpers don't need that get rid of it there and get rid of all of this section and this is going to be a get and we're going to add context into this and then from that context we want to get the ID parameter now this create orders we don't need that remove it the same as this body remove it and for this we're going to say a weight Prisma products find first because we're getting a product by ID so we just need to say get product where ID equals ID and then return product and that is it save it and that is that endpoint done awesome so now we can close that up we have product ID next in our API we're going to have products so multiple and then we want to say new file root.js and again we can go into product ID root.js Rebel let's copy it go back into products root paste that in and we don't need any context or any of this delete all the params the products is not fine first it's going to be find many and then all we're doing is getting all of them and returning the product actually that should be products so let's just update it so products yeah we're returning all of the products just like that awesome finished so next in products we want to have a new phone folder and this is going to be search by name so we want to this is for our search bar the input on the main page so inside this new file root.js bring that in and in this it is going to be a get but we're going to put in red and context and from the params we need to get the name because that's what we're going to be searching for all of this can go this product section and we need to say await Prisma products find many open it now we want to take a maximum of five because otherwise we'll be taking loads and then we're going to say where the title contains the name for our parameter and we're going to put in mode insensitive so it doesn't matter whether it's uppercase or lowercase awesome now all we're going to do is take these items and return it in our Json response like that save it and that is that done awesome one more for products this one is called get random because we want to get random products for our similar products list let's say new file root dot JS and let's drop in our code from before and again all this is the same at the top in the get we don't need any of this there's no params and let's just get rid of all these items now first we want to count the product so we get all the products and Counting them and then we're going to say math.floor math random multiplied by products count and then let's do a weight Prisma products open this up and then we want to take five of these items we also want to use the skip which is going to be skip from here and then order by ID ascending just like that and then make sure we put products and we return products so we save that like that and that is that one done easy okay for the final one we have a stripe endpoint now we haven't set stripe up yet or done anything with it but we might as well make this endpoint while we're here so if we do a new folder in the API it says stripe and then inside this new file root dot JS and for this we do need validation so if I go in address and I go in this update one and I just copy all of this and then go back to stripe and drop that in we can use that and clean it up so all of this we need this top section this we can delete so let's get rid of that and the same as this Prisma disconnect because we're not using that and actually we don't need to import Prisma we actually need to import ripe from stripe and then what we're going to do is say stripe and then say New stripe object and we're going to pass it our environment variable which is the secret key from stripe and if you remember let's go into the end file there is our secret key there we haven't filled it in yet but we'll do that when the time comes later on let's go back to our stripe route and this is where we're going to create our payment intent so we're going to say can't stress await ripe payment intents create because we need to create a payment intent before we can actually make a payment so for this we want to pass an amount we want the currency as well and I've just hard coded in GBP So Great British pound and then finally I'm just going to put in automatic payment methods enabled so true and then we return the response now we won't actually need to use this yet we'll go through this again when we get to the stripe section but for now this is all of our API endpoints done so all we really need to focus on now is hook in all of this stuff up to our front end so next let's jump back onto our front end and actually get our application to start working okay so we might as well do this page by page so if we basically just inside this app folder if we go from top to bottom and go through each page we'll leave out the checkout page for last because that's where we have to do our stripe stuff so we'll miss this and we'll leave that for last and we'll do the rest now so let's just start on address so let's go into address page.js and let's get this started so we are going to need the router and our user context so let's import that use router use user and use router so we've got those two imported and that is off helpers that should not be that that should be the context so make sure the Auto Import doesn't mess that up context forward slash user there we go okay awesome right also under this we're going to have to add some state so for the sake of time I will drop this in this is going to be like that so we have address ID name address ZIP code city country is updating address and error and make sure we import use state from react so that day and now let's start making our function so underneath const the first one is going to be show error open this up and we're going to pass an error type so we're going to say type and this is pretty simple this is going to be if the error.length is greater than zero and we're referencing this state there so this error is greater than zero and the error type equals the type we're passing we want to return the error message and if not we return nothing so this we're going to add to our text input this will go in the error section here so we might as well write all these functions first and then we can update our template how we need to okay so next we have a const this is going to be get address open that right up this will need to be an async function and we have some checks on this we are going to say if the user ID equals null or it's undefined just as a little check we are going to say use is loading and we have not made this yet we're just going to add return after it as well so we exit this function so what we're going to do is make this loading section now because it's basically a loading page that is an overlay for the entire application it's not very complicated we should be able to do it quite quickly so let's open the side panel and inside app we're going to have a new folder and this is going to be called Hooks and then inside Hawks new file we want to use is loading.js and this is very simple we're going to say hunt uses loading and we're passing a Boolean we're going to open that up then and there's only two lines we're gonna get our local storage set the item is loading to whatever Boolean we pass and then dispatch an event when the storage gets changed and that is it and then we just export default this function awesome save that now we can close this and then we have to go and make a little loading page which is going to be in components and I'm just going to take product I'm going to duplicate it I'm going gonna say loading dot JS and this is pretty straightforward so let's strip this out we're going to rename it to loading product we don't need any props we're going to import a react icon called AI outline loading three quarters and then inside this we're going to make a div open it and open this topic because there's a class with quite the few styles on it so I'm going to drop this in and it's going to be like that so fixed BG black BG opacity 70 in set zero so it's at the Middle with full Z for the flex item Center justify Center Height 100 VH and then overflow hidden and then inside this Chuck another div in it and then add a class with P3 and rounded MD then we're going to add our little icon and we're going to add two things on this first we're going to have a size of 100 and then the class name is text blue 400 and then animate spin so it just spins forever awesome and then another div underneath very simple and they were just going to say loading and the class name is tech center pt5 text XL font bold and text White NOW save that because that is that loading page done that's all we need so now if we go to the side panel and quickly jump into our main layout file layout.js in the main app folder and is it in here no sorry actually it's the layouts and then main layout yeah in this one okay and what we're going to see for this is we need the use State and we're going to do const is loading and then set is loading and by default that is false then we also want to use effect open that up and make sure you import that at the top and we need this state as well make sure to import that there we go so you state in there as well and then we're going to say window dot add event listener and then we're going to say storage function open that up and then what we're going to do is say get this is loading from our local storage and then if the result is false when a set is loading defaults else it's true so now you can see this storage when the storage gets triggered by the event listener it listens for a change so if you're going to use is loading whenever we change this Boolean we send an event that is storage so then we're listening in main layout so then we can display the loading screen whenever that happens so because now we're setting is loading all we're going to do is jump down and we're going to say if is loading is true we want to display the loading component or overlay else we're just going to put an empty div in there like that so if we save that because now that loading component is done so this main layout we can close and we can go back to our address page and then we can actually import this because we've created the hook so there it is use is loading from Hooks and then after this if we have cons response equals a weight and then this is a new hook it's going to be called use user address and we're going to go and make that now so let's go back to our Hox file we're gonna duplicate this uses loading and we're going to say use user address dot JS we need to change the name of it delete what is inside it and then export default use user address this Boolean we don't need and it's going to be an async function right we're going to start off with a variable that is an empty object and then after that we're going to call our API because we've made this endpoint already and we're going to say await fetch API address get okay and then if there is a response we want to convert that to Json and then if there is data set the address to that data and if there is none the address just stays as an empty object and then all we do after that is say return address and that is it beautiful so save that let's go back to our address page now we can import this so update user address and where is it from the hooks use user address beautiful now we're going to do the same type of thing so let's just say if we get a response inside this we're going to say Set current address which is a function that we haven't made yet so we're going to make that in a second and then after that we're going to say user is loading false so we close the loading page and then return but if we don't enter that if statement we just say use is loading false awesome save that now under this we have a little use effect and we're going to import that so at the top you can see now we've got use effect we can open this up and we're going to say so this is basically on load or on Mount of this page we want to use is loading and then after that get address so we're calling this function here I just need to spell it correct like that and then we need to pass in the end of this user like so save that let's just go to our address page quickly just see if we have any massive errors probably might use root that we probably didn't import that so let's scroll up use router next router no that shouldn't be rooted that should be navigation okay save that okay see now you can see our loading page and it's loading forever because we have a couple of Errors at the moment this set the current address is not defined okay so we need to fix that let's scroll down now after after this use effect this is where we set the current address so we're going to make this function Set current address as the result open that up and all we do is use our state and we're just going to say set the address ID name address ZIP code city and Country like so so let's save that let's go back and it has stopped erroring and now the loading actually works so if I just refresh this it should load yep started loading and then it should go away yeah okay so that has started to work still got some errors but that does not matter let's continue okay next we need to make some validation for our text input so we're going to say cons validate open this up and at the top of this we're going to say set error to an empty object and a local is error which equals false and now under this all we want to do is set our errors so the first one is going to be if there's no name so if the input name is empty we set the type of name so if you come back up to this and you see show error we're passing the type we're going to use that later so we set the type to name because the name has errored and then we pass the message a name is required and then we set this local is error to true and we're basically going to do that for all of them so next we're going else if there's no address we do exactly the same but with address same for zip code the same for City and the same for country like that so name address ZIP code City Country beautiful and then what we're going to do is at the end of this return is error so this okay and now we have our final function for this so we're going to say cons submit and this needs to be an async function and we need to pass an event well we need to get the event and we also need to prevent default because this is going to be a form we don't want the form to submit because that means the page is going to refresh and that is not cool so next after that we're going to validate so let's say is error equals validate because at the end we're passing back if there is an error and then under that we want to say if is error all we're going to do is put in toast error and we need to import this toast like so let's go to the top make sure that did come in Yeah Toast react toastify go back down and give the error Dot message and then return so we don't continue in this submit function but if we don't have an error we're going to continue and we're going to say try catch and then we're going to set is updating address to True which if we scroll up again if you remember we've got this set is updating address by default is false let's go back down and then we have another hook in here so we're gonna go make that now if we just drop this in we're going to say await use create address open that up and then we need to pass in all the address details so that is going to be the address ID name address ZIP code city and country which again is all of this by here awesome now let's go and open our side panel and go back in Hooks and let's do this use is loading duplicate that and we're going to say use create address.js and let's put that in there use create address copy paste it there empty this out this Boolean becomes details this needs to be an async also and now we can start so what we're going to say by default we want to say the URL is create and if there is an address ID being passed in that means we want to set the end URL to update so this creates or updates a user address based on if the address ID is in this user details object because then instead of making two functions we can just make this one and we just use it everywhere so what we're going to do for this is we're going to say a weight fetch API address URL which is going to either be create or update so if we just look for that API address create or update so these two we can then open this up and we want to specify the method so the method is post headers content type application Json I'm not sure if you actually need this on there if it's like required but it's on there anyway and then we need a body and we need to stringify all of our details so we're going to say json.stringify open this right up and then we're going to pass our details like that so ID name address ZIP code City Country beautiful and once that is successful we then get the response as Json and return the data and that is it so save that go back to our address page and we can now import this use create address from hooks let's just make sure that's been brought in use create address from hooks I right there beautiful now if all that is successful after that we're going to get the current address with our little function there it is Set current address and set is updating address to false because now it's been either created or updated we're going to have a little Toast of success just to say address updated and then we're gonna have a root that is going to redirect us to the checkout page and that is it well let's do our catch section I'll just drop this in that is going to look like that so again set updating your address to false just console log the error and just alert it as well just so we can see what's going on so save that and let's just go in this make sure nothing is breaking uh yeah almost okay so let's go back into our code and now let's finish this address page off so most of this is good we're gonna have to make another component and we're going to call this client only because as we don't want to get a hydration mismatch between the server side and the front end so for this it's on the side panel and go into components we're going to make a component called clientonly.js so this product.js duplicate it again call this clientonly.js delete everything inside of that and this link we can delete on this client only product we need to have as children and we are going to say you state and this is going to be set is client and then under that we want to use effect set is client to true because we don't want this to load until the client side starts loading because we don't want to get the mismatch and all we're going to do in this let me just clean this up because there's not very much happening in this return just in the center of this we're going to say is client so if is client is true Dave children we want to show it else we're just going to return null just like that awesome so save that and make sure we import this use effect from react so we have use effect and use State like that so save that all we do now is wrap this client only around certain components beautiful so close this and we're back in addresses the page this text input I'm going to copy it and just get rid of it a sec and then we're going to say client only import that and then drop the text input inside of it because these do give a hydration mismatch it did take me quite a while to figure out what was going on and it was really annoying so let me just go to the top make sure that client only yep client only has been imported from components so let's go back and now let's finish off this top one so this first one is not test the string is going to be name the placeholder is correct we also need a prop that is on update which is going to be set name which is our state and then our little show error function that we made earlier which we we're going to pass into this and we're going to say Joe error is name and if you remember if we go to this show error there we're passing name and then we get the message for name awesome if we save this and we scroll back down we've only got one at the moment but let's see what is going on so this is looking okay if I click that nothing is breaking there's no errors what if I reload the page um what is this one top menu oh okay yeah so still don't worry about that yet let's just continue with this and just so we don't forget on this form we're going to say on submit and then we want to call the submit function like that and for the rest of this we can copy and paste so copy this paste name becomes address there as well make sure you're going uppercase there and this is address and set name become set address awesome next copy paste string becomes zip code this is zip code instead of the set address we got set zip code and address is zip code save Awesome Again copy and paste it in next is City this bit is city as well and then we need to set City and City and then the last one copy it paste it beneath string is country then we have another country set country and show era country save it okay let's go and have a look look at that beautiful that is looking very good awesome go back to our code right this button we want type submit because it's inside a form we're going to put the disabled on it so we disable the button if the address is updating or being created we also want to change the color a bit so I'm going to put in a curly brace and a back tick and the same at the bottom back tick curly brace like that and at the very bottom I'm gonna add in if the address is updating we want a dark blue else we want the normal blue and now in this bit we can actually take it out so the colors dependent on this if this is true or false and now inside this black then there's a couple of things going on so let's just delete this we're going to say is updating address is false and let's put this on a new line we're just going to have a div with update address we want another div open that up we can add a class with flex item sender justify Center and GAP two and then we want our little icon so let's drop that in AI outline loading three quarters and the class name we got animate spin so again it spins and then just under that a bit of text that says please wait and I think a page is done so if we save this and we go back into this that's cool now let's click update address there we go a name is required and then I'm going to say update address and address is required so I'll put one two three main let's try this a zip code is required I'll just put mp2mp2 and I'm pretty sure all the rest of them work so I'm just going to say I'm pretty sure all the rest of them work so I'm just going to add in the rest I'm going to say London and the country United Kingdom so let's get rid of this on the side and now if we update address we should update it in Super Bass we should create a new record so let's give it a try update address oh what's this AI oh look it did update so it did get created but we have a little error so okay this we need to import so let's import that from react icons so right there let's delete this one underneath okay cool save that so now we can see it did actually work so if I go into um where is there we go Super Bass I go into database or is it in the table editor it might be in the table editor yeah okay so now if I go in addresses and there we go you can see we have updated the address so John what does three Main Street mp2mp2 London United Kingdom and then the created app so now if we want to check the update and this time our icon shouldn't error let's put in John and I'll just update address and there you can see we're not Erin which is very good and there we go we just got redirected so if we go back now to address let's do a dress that is loading perfect there we go there is our address so basically our address page is now fully functioning and again don't worry about these errors because we'll sort them out when we get closer to the end we'll we'll figure all that out okay so let's do our next page and let's open the side panel the address is done let's close this API off we've already done uh let's do cart let's go into cart and this page is going to be quite easy so what we want to do for this so inside at the top we need our router again so import router and make sure it's the navigation so navigation and let's get our cart like that then we need to say use effect open it up then we want to call our loader so we want to say use is loading and that is going to be set true and then we want to get our card items so we're going to say cart get cart also the cart total and then we're going to set use is loading back to false once all that is done awesome so now let's just add in cart at the bottom of this save that and now we have to make a little function and we're going to say can't go to checkout open this up and inside this we're going to say if cart total is zero we're just gonna give an alert and say you don't have any items in the cart and then return it to exit or we are going to go to checkout like that and this product object we don't need that anymore so get rid of it delete that out and now inside our template this section in with the 65 percent copy it we need to import client only so import that and then we're going to drop the 65 section in there let's just make sure we imported client only there it is right there beautiful and then this cart item we want to Loop through the cart dot map and we're going to say product open this up and then take this card item and drop it inside there and that is done now the next section is this go to checkout and this div everything if I just zoom out one everything inside this we're going to copy get rid of it and again we're going to use client only open that and drop that inside let's just intend it so it doesn't look disgusting awesome okay let's save that now we need to make some of these values Dynamic so the button let's go to checkout we're going to add an on click that's going to look like that we're getting this go to checkout function that we made right there let me just zoom back in there we go then next we need to make these Dynamic so for these items get rid of the three and add in cart get cart dot length to see how many items are in the cart and then for the price take up 12.99 and add in that total divided by 100 and then two fixed awesome and then finally at the very bottom this subtotal is exactly the same as we just did so just paste that in awesome all right save that and let's go to the browser we're going to put in cart and there we go 25 pounds there we've got 25 on the side and 25 in the subtotal so that is working now we might as well while we're on this page age jump into this component the cart item so let's jump into that and if you don't remember where that is that is in components cart item and we've got two Imports for this so we got use cart and toast which is react toastify we're going to import our cart and then we just want to function that is going to say remove item from cart open this up and we have a first line that is a confirm so are you sure you want to remove this item and then the product title and then we say if res so if the res is true we then remove that product from the cart and we give this toast.info and we say remove from cart just to notify so save that and now let's take this remove from car item copy it and when you go down to the button and then say on click make it a function like that and just put in remove from cart just like that so now if we save that and we go back to our browser if I press remove that should get cleared out and this should not display any number so let's press remove are you sure you want to remove this brown leather bag okay there we go removed beautiful so that is working and let's just check let's go into an item and add to cart call now let's click card oh we haven't done that yet so let's just do it in the URL so cart yeah and there we go there's our item back in there awesome so now our cart is working amazing okay next up the side panel and we just did cart so close that check out we're gonna skip we're gonna do the last all these we can skip orders is next so let's go to page let's close the side panel scroll to the top and there we've got our order okay so now inside this we can delete this orders array because we don't need it anymore and then what we're going to do is we're going to get our user contacts and use State like that so let's import use State and uh use user let's make sure it's the context user like that now we have a little function under this which is called get orders open that up and this is going to be a try catch I'm just going to put in the catch section now just to save time so this is just going to be a toast which we need to import post react hostify which is there and this is going to be something went wrong and this use is loading we need to import that as well so let's import that from hooks right there now in this try section we're going to say if there's no user and no user ID we're going to return so we do nothing else we want to fetch all the orders and if we quickly jump into our API just so we can refresh our memory orders which is just this base route we are getting all the orders based on a user ID right there where user ID order by descending includes order items and then we return it so let's go back and then we're going to say response.json because we need to inverted to Json and then once that has happened we are going to set orders so we take the result and set orders is right there so it's state and then just under that we're going to say use is loading equals false awesome and that is that function done so now finally in this section we just need to say use effect open open that up and all we say for this is use is loading is true and then we just want to get orders and let's just add this user in at the bottom so save that and that is all this top section done now let's do our template what have we got for this so we've done most of it there's just two sections under this we need to do so let's copy this total add another one in because we need to do the date because we haven't done that yet and this is pretty straightforward instead of this order total we're going to replace it with moment order created and then calendar and then this total is going to be order created and this moment we need to import import moment because this is moment.js It's like a date formatting package and then we can take this again so copy this one paste it beneath and instead of order created this is going to be delivery time and all we're going to add into this is add three days like that so we're thinking that the delivery will arrive in three days from now so save that and that is good let me just check what else okay this href let me just get rid of that SEC let's put this on a new line like so indent the class and then underneath we're going to change this href for product item product ID so when we click on it we go and see the actual product and we also need to make a couple of little changes to this item so it's going to be item dot product dot URL and the same as item dot product dot title and if you want to know why that is let's go into the API orders this get root and you can see order your item include product and if you go back to the orders page order item product title there we go awesome so now I think that page is done so there's a side panel a sec let's go into our application and let's go to my orders we should see a little message saying you have no history beautiful there we go look at that you have no order history so this is working perfectly very good okay what is next from the side panel close this orders page product so a single product okay let's close our side panel let's go to the top and we have a single product in there already hard coded so now what we want to do is make that actually Dynamic so we need to use State and we're going to import that from react the product we can delete because now we can end the product from the state now we're going to make a function called get product which is an async function and we're going to start off by saying use is loading and we import it from box and we're going to set product to an empty object just to clear it out on load and then the same type of idea again as we did before we're just going to fetch API product by ID which again if we go to the API product by ID let's check it out see we're passing the context the ID get where ID is ID and then pass it back and then after that convert it to Json then set the product by passing the product in remember this is set product and then we want cart is I demanded the card and pass the product and then finally uses loading set to false so we want to close the loading page and then all we do at the end of this is say use effect get product like that make sure we import use effect from react and that is everything we need in terms of functionality so let's go and have a look through our template section and I think we did all this earlier didn't we yeah we did all this earlier so this is actually done so save it go back to the browser now let's go back to the main page and if I put in forward slash product uh uh 12. so we've got brown leather bag and school box hard-coded let's see what happens when we put 12 computer with accessories so yeah it's working we're getting that from our database awesome so product by ID is now working awesome so let's go back to our main page and let's go into our vs code open the side panel because product by ID is now done success I don't think actually has anything in it yeah the success page is done so no problem with that and now what is left Page yeah so all we have to do for this is get the products so this is the same type of thing again we're just going to use State import it we don't need this dummy products array anymore and again we need to get products which is an async function then before we load anything we're going to say use is loading import that then we want to get our products from our API endpoint which is API products convert it to Json and then finally that products and you can see I've cleared out the products before I reset it just in case and then set the loading screen back to false so we get rid of it and then we're just going to say use effect get products and make sure we import use effects from react so like that awesome save it let's go take a look it should reload and we should get all of our products look at that beautiful there we go all of our products are there nice so what else have we got we got the similar products so if you go into forward slash product one you can see there we got the similar sponsored items we want to update this so it's Dynamic so let's go back to our code over the side panel and this is inside of components similar products this products just get rid of that we don't need that and same procedure again we're going to use State and we're going to get all the products make sure you import it like that then get random products which is an async function or else we got try catch and then again we are going to fetch from our API products get random and then we convert that to Json and then if everything's cool we're going to say set products and we're going to pass the result and then we return and if there's nothing we just said at an empty array and then this little catch we're just going to put console.log error and alert the error and then just underneath this we're going to say use effect get random products and make sure you import use effect like that let's scroll to the top and there is use effect and use State save it now let's go back in this you can see it's loading right there yes and there is some random products look at that awesome so now if we click one of these barrel of oil we go to product six barrel of oil and then we get more random products again awesome this is working beautiful what else is there this top section this does not work yet this search section so let's now do that let's go back to the code open the side panel and this is not in components this is in layouts includes main header let's go to the top now inside this let's say use State and that's going to be items and is searching and then for the function we want to say handle search name and this is going to be D bounce and make sure you import that you should have imported that at the beginning but if you haven't just do npm I debent and then open this and say async event and then open that and this is pretty straightforward first off we're going to do a check and we're going to say if the event why is that break in oh because I spelled event wrong okay so if event.target.value if the value being passed equals an empty string we set the items to nothing and we return so we exit this function so the um the drop down disappears but then if there is a value in this being passed through we want to say that is searching is equal to true and then try catch and we want to do a fetch which is going to look like that so we want to await fetch API products search by name and then event Target value so let's go and check that out the API products search by name and then root and then we're passing the contact so we got this name parameter and we can see there contains name we're just searching by name and getting the first five that we find awesome let's close that and then after that if result you then want to set items so set the result that is search into false because then we've got the information that we need and if there is no result all we do is we set items to an empty array and again set is search into false and then for our error section we're just going to put in console.log and alert with the error now this debounce that we have around at the end of this function we're going to put in 500 milliseconds or half a second so if we start typing and then we stop and then we start typing again we have 500 milliseconds before the next call is made to our API which then gets information from our database so we have a half a second delay so this stops us from spamming our database with thousands of requests a minute because we're typing awesome right let's see what we need to update in this template let's go down and I think it's on this input all we have to do is say on change handle search name which is the function we just made and then there is a couple of little extra things we need to do for this so first off under this input make a space open it up and we're going to say is searching if that is true we want to put in the icon and we want to animate spin forever else if it's false we just want to say null like that awesome and then underneath that we have another little thing which we're going to say items dot length if that is greater than zero we want to say div because we're going to show the items that we've got back from the database so let's add a class to this with absolute BG white MX with 910 pixels height Auto with full z20 left zero and top 12 border and P1 now inside this we need to Loop through our items we're going to say Items Map item open this up like so and then inside this we have a div open that we're going to have a class of P1 and a key item id then we want link close that off open it and open up this top link section and we're going to say href product Item ID so we can click it and go to it and we're also going to Chuck some styles on this so it looks pretty so we're going to put a class with flex item Center justify between widthful cursor point or hover BG gray 200 P1 and px2 and then inside that for the div open it up add a class of flex item Center and then inside this we need a little image which is going to look like that so we've got a class of rounded MD the width is 40 and then we have a source which is item URL and we're concatenate in 40 at the end of it so that is the size of the image and then just put a little div underneath that and we're going to say item title just like that now last bit underneath this div section just before the link one more little div and we're going to say class truncate and then we've got our little trick with our price so price divided by 100 and then next to two decimal places and we have a little error at the end of this I think I forgot a bracket that looks like I fixed it and then this items length section I'm going to put in else null and there we go that is fixed awesome so now if I save that and I go back to the browser and if I try and search for something let's put in car what is this syntax unexpected Logan Doc is not valid Jason okay so that broke what happened let's go into Network and then we can see at the bottom we've got car 404 preview response we have a 404 this page could not be found let's go and take a look go on a code and let's scroll up we got this search by name and then we have our parameter right there um okay let's open the side panel go to API products search by name oh we didn't put the uh yeah my fault so inside search by name we're going to say new folder this needs to be brackets with name enter and then this root we're going to drop inside name move yeah now if we close that and then we go back to the front let's try this again let's just change it and we should get a response yeah there we go there is all of our items that we're searching for let's try something else let's try I don't know s and there we go school books camera gadgets like those let's have a look at the Lighthouse and awesome that takes us to the light Dives we get all the products and stuff at the bottom so that is another thing that is working awesome okay so what we'll do we'll finish up our checkout page we'll go to stripe and we'll get our keys we need for our environment file and then once we've done all the Checker process the orders have gone through we can see it on the order page we'll clean up the application make sure everything's working and then we're done so first let me minimize this and we're going to go to stripe and I'm already logged in so if you don't have an account you're gonna have to make one and go through all that process but if you do log in and then once you are inside go to this top section click it and then I'm going to click new account and for this I'm going to say test eBay clone like that Central operation UK yeah just create account and I've got to confirm this password continue okay so now we've got test eBay clone so I'm going to go to developers and make sure you're in test mode you need to make sure that that is orange like that and then go to developers and we need to grab this key so click the copy let's go back to our vs code and close this API and this layout and we need to go into dot end and then next public strike PK key so public key we're going to drop that in there and then let's go back to this and then we're going to get our secret key so we want to reveal test key click to copy let's go back into our application and drop that in there so we got EK test and SK test just like that so save that and this stripe page will leave open because we're going to have to check to see if we're actually making payments so just leave that open and we're going to go back to this and let's go to checkout and auth or I need to log in oh no because I was in the incognito window wasn't I so bring up study incognito window and now let me do forward slash checkout okay I'm gonna get rid of this inspect window and just make this a bit smaller and I'll minimize this okay so let's go on the side panel and let's go to app checkout page and let's get rid of that side panel okay let's start so this product we're going to get rid of it and then we're going to bring in use user so make sure we import that make sure it's the context user also the cart context cards and use router which is going to be next navigation like that and then under that we need a couple of variables which are going to be use ref like so so we're going to say use ref from react make sure we import that and this is going to be stripe elements card and client secret then we are going to import some state so we want U State and we're going to do address details and is loading address and then let's make sure we import that state 8 from react like that now under this we're going to say use effect let's open this up and first off we're going to say if and then we're going to say cart total if that is less than or equal to zero we want to show a toast and we need to import that so toast react toastify very important at the top so if we don't have any items in the card we want to show a notification that says your cart is empty and we want to redirect away from this page so we go back to the home page but if we do have items in the cart we're going to say news is loading and we want to import it right there uses loading then we're going to do a get address function inside this we're going to say can't get addressed async open that up this is basically the same as we've done in the address page so I'll just smash through this so we're going to say if the user ID equals null or user ID is undefined we're going to stop the loading icon and just exit else we're gonna say that is loading address to true and remember set this loading address is right there and then what we want to do we want to get a hook so I will use user address so let's bring that in use user address from hooks use user address and then under this we're going to say if response set address details response which set address details is there in our state and then after that set is loading address to false and after that we want to outside of this get address function we want to call get address and also we're going to have a set timeout underneath with our stripe init in it and we're going to say set timeout Drive the net 300 milliseconds so we wait 300 milliseconds before calling this function and we haven't made it yet but we are going to do it now so let's do just to finish this effect off put our user at the bottom now let's make our stripe init function so we're going to say stripe in it open it up and this is async right we are going to get stripe current and we need to wait to load stripe and this is a function from an npm package let me just go on the sidebar and show you so we should have imported this already package.json we go to the dependencies right there so stripe forward slash stripe JS so this is this one we're going to use now so if we go back to check out go to the top and we're going to import stripe.js and we want this function load stripe so let's go down and then inside this we want to get our key from our environment variable and we're going to say process dot end next public strike PK key or nothing okay and then after that we're going to say can't and then we're going to weight fetch we want to do API forward slash stripe and then we're going to say open this up and we're going to pass method as post because we're posting and then in the body we want to stringify the amount from the card and this API endpoint we made earlier so let's just go and check it API AI stripe root and there so the request invert to Json let me go body and we got this stripe key the secret key coming from our environment there so stripe secret key let's go back and then in the body we're passing the amount we've hard-coded the currency and just put automatic payment methods to true and then we get back the payment intent token so let's close that up and let's go back to checkout so now what we're going to do is we're we're going to get the Json and then put it into account called result and then we want to get the client secret which we're going to say client secret dot current and if you remember client secret is there as a ref and then under this we're going to say elements.current and we're getting the stripe current elements and again elements is a ref next we want to set our style for the actual element and this is going to be very simple we're just going to say style open an object the first one is going to be base font size 18 pixels and the second one for invalid will be font family aerial and Sans serif color this and I can't color that now after this we have to get the card object so we're going to say card.current equals elements current create openness and then inside this we're going to say card and we are just going to pass an object that's going to have hide postcode to true and the style is going to be style now we want to mount that card onto an element so we're going to say card current Mount and if we lock in our template you can see the ID on this card element so that is where that is what we're attaching that to let's go back up and then finally the last bit of this function we're going to say hard current on and then we're going to say change function open that up let's say event and the first one we're going to say document dot query selector button disabled equals event empty and then this second one we're going to say document query selector card error text content so that's referring to where is it this card error so this is where we show our errors let's go back up and all we're going to say on the other side of this is equal to a ternary statement so if there is an error show the message I'll show an empty string so nothing finally after we've called that then it's initialized we're going to say use is loading and if we import that yes we did use this loading is false so let's save it and let's jump into our browser and see what this is complaining about product is not defined okay let's give this a refresh see what happens yeah that's definitely broken let me just have a look and this is what we're looking for right there product okay so for now what do we sort that out and actually Chuck a product in it and that's going to be coming from our cart so inside the div just above it we're going to put in this cart.getcart map and then we're going to save product and then open this up and then put this checkout item inside of this let's save that and take a look okay this is working now and there we go you can see that our stripe elements is now working awesome cool right so now that that is working we can continue so let's go back up and we've got this stripe in it so after initialization there is another function and that is called pay because we need to pay so we're going to say can't pay equals open that up make it an async we need to pass the event because that's going to be attached to a form and then we're going to say event prevent default under this we're going to say if object entries address details.length is zero that means there is no address so then we want to show an error we don't want to be able to make an order without an address so this this show error function let's just quickly pull that in because it's quite small under this const Joe error and then pass the error message and the first line is going to be document query selector card error and then we're going to get that and then we're going to do a toast and have we imported that yeah we've already got that in there so post dot error and then show the message we're also going to show this underneath the card section so right there your card number is incomplete and then what we're going to do is we're going to clear out that message after three seconds just like that so let's finish that show error message is now done so let's continue with our pay function let's finish it up so if there is an address the next thing we want to do is confirm the card payment so we're going to say stripe current confirm card payment and again this strike current is coming from this ref that we put in at the top let's go back down and for this we need to pass the client secret and inside inside this object we need to say payment method card card current okay so now underneath this we have a little if and we're going to use this result so we're going to say if result error show error and we've got this function we're passing that text into there and then we can have an else we're going to say else if there isn't an error we want to show our loading overlay we want to set that to true and now we are going to say try cat now we're going to do a little fetch which is a weight open that up and this is going to be API orders create because we now want to save the order and the items after we've made a successful card payment and this is Method post we also want the body and we need to stringify and have an object inside it and we're going to add everything we need to identify the order which is going to be that so we've got a stripe ID which is result payment intent id name address zip code City Country get card and card total and then once that is complete we're going to say if response status or response from this is equal to 200 so successful we are then going to display the toast with autocomplete we want to clear the cart because we want to get rid of the items we've just bought and then we're going to return to the success page or get redirected to the success page I should say and then in our catch if anything is unsuccessful all we're going to do is say cancel the log error and then this toast error something went wrong and right after this catch news is loading is equal to false beautiful right let's go through our template and let's make sure we've got everything in there that we need so this address section we need to do that so Above This UL inside the div we're going to open this we're going to say is loading address open this up and inside this we're going to put a a link open that and we're going to say href address and the class name is text blue 500 text SM and underline and inside this we're going to have a ternary if else and we're going to say if there is a name for the address details we want to have update address if there's not we want to add an address and if is loading address is false we're just going to say no just like that so I'll make a little space there save that oh and actually this should be the negative so if it's false let's do that instead and this is breaking why is that break-in uh link is not defined okay so let's import link from next link save it and let's see if this fixes it yeah there we go and you can see now we've got an update address so if you click that we go to our address page and there is all of our details awesome so let's go back to the checkout and that all loads up beautiful okay let's continue okay under this we're going to say if is loading address is false and the address details name exists we want to open this up and we want to take this unordered list and put it inside like that and all we need to do is replace all of this test with address details.name and whatever else so it needs to look like that so we have the name address ZIP code city and Country and make sure again at the end of this we put else null so if we save that now and we take a look we should see our address pop-up under the shipping address yeah there we go name John week's Dev one to three main street and then we've got the zip the city and the country awesome right let's continue we have another one under this so we're going to say is loading address open it up and this is pretty simple just Chuck a div add a class with flex item Center mt1 and gap2 then we need an icon that is going to be AI outline loading three quarters and animate spin I make sure we import that let let's just double check yep there it is loading three quarters let's go back down and just under this we're going to say get address and then we have an else for this and let's just put in a div like that so we're going to save that and let's go check see we get this get addressed that is spinning loading and then when we actually get the address it shows up like that beautiful okay let's continue okay we've done these items what we do need to do is copy this and we need to wrap it in a client only tag so open that and drop that in like that client only make sure we've imported it client only right there beautiful now we have the same we need to use this client only inside this place order so for this div if I zoom out again so we can see most of it okay excluding this money back guarantee section all of this we're gonna grab put client only and drop that inside let's quickly indent it like so let's Zoom back in okay and now we're going to sort these out so this is pretty simple we got items we need to get the items from the cart the length and then we have our little trick with the price where we divide it by 100 and then to fix this shipping section is fine this order total this underneath we're going to do our little trick again just like that divide it by a hundred then we have the form that is going to be on submit we're going to pay and it looks like that page is complete so let's save it let's go back in this looking good at the moment what is this we have a brown leather bag let's go and get some more items so why don't we add a uh a car let's get in our search bar let's just add this broken cars and we're going to add this to cart beautiful and now if we click card that still isn't working so let's go and do it in the URL let's go to checkout because at the end we'll give it a quick brush up and fix all the errors so back to check out okay so now we have two items in the cart brown leather bag and broken cars we've got the total so let's put in a card number we're going to see four two four two like that 12 25 CBC one two three and let's confirm and pay and see if this actually works well let's inspect first just in case we have a massive error let's get rid of all this and let's confirm and pay okay we go in it's looking good oh there we go it is complete beautiful right let's go into the other browser with stripe is so let's go to strike dashboard successful 20 uh where is the where is the payment let's go payment and there we go succeeded 2 590 pound so we have just successfully made a payment so let's go back to the incognito window and I'm gonna go into this drop down section and my orders and we should see the order hopefully and is it coming in yes beautiful look at that so there we go it's right by D delivery address the total order created today and it's going to be delivered on Wednesday that is awesome okay so that is basically everything so let's just clean everything up and look for some errors this cart button doesn't work so let's quickly go into our code and let's open a side panel and that is in layout includes top menu and where is it okay so at the bottom you can see this little div all I'm going to do is add an on click to that and say on click router push to cart and we need to import that router so let's go to the top import the router and make sure it's the navigation router and also if you go back down just so we don't have an error all of this Li copy it we're going to put a client only tag around it and we're going to drop that inside like that let's just make sure we've imported that client only right there beautiful so save that now let's go back we don't have any errors that's good let's go to the main page and let's see if we have any errors we do not which is very good okay let's pick a product these shoes awesome there's the shoe so let's add the card one item added let's now search for one let's say cam or camera here we go camera gadgets and then let's add to cart and we have two items in the cart and finally let's get this barrel of oil we want to add that to cart and now let's click the card button beautiful we can see that we have three items in there no errors in our console and just a test let's get rid of the jewels let's press remove are you sure you want to remove this women's White Shoes okay that has been taken out remove from card we have two items in the cart all this looks good let's go to checkout that looks good when we update our address just to check one two three main street awesome and change this to just John weeks and then update that has been updated and then we have our new address so now let's test if this goes through let's put four to four two four two twelve twenty five one two three and then confirm and pay no errors in the console that's perfect order complete payment successful let's go back to shop this loads perfectly now let's go to my orders and there we go there is our order with our stripe ID now if we go quickly into the other browser into our stripe dashboard and we refresh this we should see a success yes there we go success 290 Pounds let's check our price 290 Pounds beautiful now let's log out sign out get redirected away from my orders because of the middleware let's just double check let's put forward slash checkout redirects us back to the auth this is working perfectly so now let's go back to the main page and that is it we have just finished the eBay clone congratulations and it looks beautiful okay guys we are done we finished we just finished eBay I hope you enjoyed it and if you haven't already don't forget like subscribe and hit the notification Bell and let me know what you think of the first react project on this channel because I'll definitely be doing more because I do like next JS I think it's quite good but yeah anyway guys thank you very much and I'll see you in the next video

Channel: John Weeks Dev

Views: 36,003

Keywords: next.js, next js 13, next.js 13, next.js13, react, react.js, react js, javascript, prisma, prisma orm, tailwind, tailwind css, tailwindcss, javasctipt, react tutorial, next.js tutorial, javascript tutorial, supabase, stripe, stripe payments, e-commerce, full stack tutorial, ebay clone, ebay, full stack devalopment, next.js api, vercel, learn web development, clone project, tiktok clone, aliexpress clone, html, css, backend development

Id: LtPYuFhYf1w

Length: 192min 40sec (11560 seconds)

Published: Mon Aug 07 2023