Build & Deploy: Full Stack Ecommerce AliExpress. Nuxt 3 Vue js Tailwind CSS Supabase Prisma Netlify

right so what you need to get this project up and running is super easy because there's no PHP or anything like that all you need is node.js install that on your machine if you don't have it and git as well so we can push our repository through a GitHub repository and then later on when we post it on netlify we can just link the repository and netlify together and then it'll pull from that repository awesome right let's start let me close this Global terminal and I'm going to CD into my sites folder that's normally what I keep all my sites you keep it wherever you want to now I'm going to install next with Veet and if I just open the browser and I go to vjs.dev forward slash guide and I'm going to scroll down this is how you install Veet and then this other command is how you create a template and I want this one so I'm going to copy that remember if you don't have video installed make sure you install it first let me minimize that and then I'm going to paste this in and I'm Gonna Change the name to AliExpress hyphen clone now let's press enter what's this install the following packages create Veet this is probably an update let's press proceed yes awesome so we want View and then at the bottom next also I'm going to open vs code there it is awesome and then I'm going to go into my sites folder uh AliExpress clone I'm just going to drag it in and drop it awesome there is our little application so as usual we'll install everything uh we need to install first so we don't have to do it as we go through the project it's better to just do it all now so if I open a terminal let's bring this up and let me zoom in a little bit like that so we can see it right let's say npm I nux JS forward slash Super Bass nox.js forward slash Tailwind CSS next icon Pina plug-in persisted State forward slash nux hinia forward slash next Prisma forward slash client stripe forward slash stripe hyphen.js next low Dash Prisma and stripe now if we press enter on this this might take a while to install and there we go that is installed that did actually take quite a while and just one more I'm gonna do npmi pinia hyphen f because sometimes there's issues with pinea and you have to force install it uh I think it's probably a bug with next or something but um just if we do this install there we go and all of our opinion stuff now should work normally okay let's minimize that open the side panel go into package.json there's all of our packages beautiful and inside this we're going to add one more command underneath scripts and that is going to be Prisma seed just like that that's for later on so let's save it now let's jump into next stop config and first off let's add pages equal to true we also want modules so all the stuff we just installed like that so next icon next low Dash pinion next pin your plugin position State the Tailwind package and Super Bass after that we're going to add in runtime config and then in the public section we're going to put stripe PK so public key and we're going to get get this from the end file later and this is when we set up all our stripe stuff we don't really need to worry about it for now but it's better to add it in so we don't need to do it later and then finally underneath runtime config we're going to have app head script and then the source is going to be stripe V3 and defer equal to True awesome and that is our config file done so save it and now we can actually shut this so close that and this package.json and let's open the side panel let's make our first folder which is going to be pages and inside Pages we want a new file index.view V base it so with the setup the style we don't need get rid of that now also let's make another folder called layouts and inside layouts new file this is going to be mainlayout Dot View name again the base it get rid of the style now in this index.view I'm quickly just going to test to see if Tailwind is working so I'm just going to part BG red 400 and then in this part test like that save it and let me bring up the terminal and CD into AliExpress clone and then do npm run Dev and watch this Missing Super Bass URL and key in end okay well let's quickly go and make that very simple let's do new file Dot and and we might as well add in pretty much everything so it's going to be drip PK key stripe SK key Super Bass URL and super bass key if we save it now let's quickly have a look at our terminal again and that is recompiling and we don't have any errors awesome so go back on the browser I'm going to go localhost 3000 and actually you know I think about it this next might actually complain and say that the Super Bass URL is required so we might have to actually just go and set up Super Bass now let me quickly try let me go into Chrome and then your localhost 3000 yeah so we're gonna have to do it anyway so let's go and set up Super Bass so we can get rid of this error well actually a better idea let's see if we can just go with the next config and just comment that out for now let's see and then let it recompile and let's go back in our browser refresh yeah okay so just we'll comment that out for now and then we can get all of our front end stuff done and then later on we'll worry about all the super bass and Prisma stuff and stripe and all that awesome okay our our project is working so let me just put this over there let's quickly jump into app.view and this next welcome we don't need that delete and all I'm gonna add into this is next page now let's save it and let's do yep there we go Tailwinds working we can see it right there awesome so just above this next page I'm going to add in a single div with a class of fixed Z minus one BG this color with full and height 100 VH save it we've got a slightly darker gray background perfect awesome let's jump back into index.view and delete this out a sec and add in main layout open it up and don't forget to import that layout and we also need to import main layout and inside this I'm going to add a div and on this just add an ID of index page and a class mt4 max width 1200 pixels MX Auto and px2 and inside this div I'm just going to say index page save that and we should have nothing yep nothing okay now let's jump back into mainlayout.view and now we are ready to start so on this div let's put ID of main layout and class with fall fixed and Z50 inside it divot open this top bit and add ID of top menu and class with full BG that color border B and MD block and hidden inside this we're going to have an unordered list open the top bit because there's lots of styles on there so we're going to add a class with flex item sender justify and text excess text this color font light px2 h10 BG that color and Max width 1200 pixels let's save it and take a look we can see now at the top that's starting to come in very good okay now inside our unordered list we need a list item that's going to look like that so we've got a class of Border uh border agree 400 PX3 hover text this color and cursor pointer and we're going to say sell on AliExpress and there's a couple of others that are exactly the same so copy this paste beneath change the text to cookie preferences and the same again the next one is going to be help the next one after that is going to be buyer protection so let's save that take a look that's starting to come in looking nice the next one is slightly different and that is with an icon in it and that's going to look like that so class PX3 hovertex that color and cursor pointer and we got this icon name which is IC sharp install mobile so size 17 and just the text is app save it you can see that right at the top but there and now this last list item is kind of a drop down so if we do Li open it up open this top bit first we're going to add Mouse enter and mouse leave and we've got is account menu to true and false and let's add that into our script on the bottom so we're going to add let is account menu equals ref false by default next we want to add a normal class and that's going to be relative Flex item Center PX 2.5 hovertex this color H4 and cursor pointer and then under this class we have a dynamic class which is going to look like that so if is account menu is true we want BG white border Z for the shadow this so 0 15 140 and rgba zero zero zero and 0.3 else if it's false we just want border and then border this color so if we save that now inside this we want two icons some text and that's going to look like that so the first icon name is pH use a thin the size is 17 we got a count for text and then the second icon name is MDI Chevron down size 15 and class nl5 let's save it and we can see up there now when we hover we have this little hover effect going on and all we need to do now is make the little drop down to go with it so inside the LI underneath the icon we're going to do a div and open this top section up and add in ID of account menu VF is account menu so if it's true show it we also want a class and that's going to be absolute BG white with 220 pixels text this color Z for the top 38 pixels minus left 100 pixels Border X and Border B save it now inside this div do another open it and for now we're gonna add V if and we're just going to set this to True first we're going to add a div look like that so we get a Class Tech semi bold text 15 pixels my4 PX3 and inside it but welcome to AliExpress let's just save it and take a look go on Hover yeah there we go welcome to AliExpress awesome right next underneath this dividend again and the little class that is flex item Center Gap one PX3 and MP3 now inside this we want a next link and that's going to look like that so we've got two off we haven't made that yet we'll we'll do that later the class is BG that color tech center widthful text 16 pixels rounded SM text wide font semi bold and P2 and inside it we got login slash register save it let's take a look login awesome okay two dips down from next link so one two space it we're gonna add a single div like that with just order B now underneath this we're gonna have another unordered list open it up and add a class of BG white now our first list item is going to be like that so we have an at click and we're going to navigate 2 and then we go forward slash orders we have a class text student in pixels py2 PX4 widthful and hover BG gray 200 and the second list item is going to look like that so this will be the sign out when we have a user we'll modify this slightly but for now this should be fine um so V if is equal to true and then we got class text 13 pixels py2 PX4 widthful and hover BG gray 200 so same as the top just for the text to sign out save it let's go and have a look and we can see we've got a nice little menu at the top beautiful okay awesome next let's do our main header so from this end unordered list tag go underneath the div right there and then div that up open it and add ID main header and class Flex item sender with full and PG white then inside that divot add a class with flex LG justify start justify between Gap 10 Max width 1150 pixels with full PX3 py5 and MX Auto Now inside this we have another next link and that's going to be like that so two is going to the base URL class Min width 170 pixels and then we have an image inside with width 170 pixels and the source is Aliexpress logo.png now we should probably go and get all of the assets image assets all this application so if we go into the browser open this up go to gitup.com and then I'll do forward slash John week's Dev forward slash AliExpress clone then I'm going to go into public and all of the images inside of this public folder apart from favicon you're going to need to download So you need AliExpress Apple Pig the cart GitHub logo Google logo MasterCard PayPal and Visa download all of those and then when you have that go back into the project open the side panel Channel open public and drop them in there and that should look like that so take all the images put them into public and you should be good awesome right close that and the side panel and now if we save this and we go back into our application look at that look how beautiful that is let's open it up beautiful that is awesome man a little hover we yes very nice and if we close this all the way we get rid of that top bit just like that beautiful so it's good for mobile awesome okay let's continue underneath next link we want a div add a class with Max width 700 pixels widthful MD block and hidden then inside that div add a class with relative then another div and we're gonna add a class with flex item Center border 2 border this color rounded MDM with full now inside this we have a little input and that is going to look like that so class with full placehold degree 400 text SM pl3 and focus outline none placeholder I've put in kitchen accessories the type is text and we've got a v-model of search item let's quickly go and add that v-model into our script so just underneath this let's say let search item equals ref as an empty string save it let's have a look start to see that coming together very nice right so underneath this input we're going to have an icon that's going to look like that and we've got if is searching which we can add in now so let's add that into our script and then the name for this is eos icons loading size 25 and class MR2 and by default this is false if I just change this to true and save it and we go and have a look you can see now we got a little loading icon awesome and underneath this icon will have a button that's going to look like that so class Flex item Center h100 Key 1.5 px2 and BG that color we got the icon the name is pH magnifying glass size 20 and the color is that let's save it and let's have a quick look beautiful look at that awesome very nice indeed now if we close this a little bit you can see all just disappears from the mobile view and for desktop brings it in beautiful okay next we're going to do our little drop down box so for this when we click it and we put something in then it'll search and it'll display uh this won't actually work properly now because we need data for it but we'll put it in anyway so let's go back in the code and underneath the button one div down but div add a class with absolute BG white MX with 700 pixels high note on with full then inside that divot again or a class of P1 then inside that we want the next link and that's going to look like that so this is all hard coded at the moment because again we don't have any data so I've just put two item one item is going to be a page later and then the class we got Flex item sender Justified between widthful cursor pointer and hover BG Gray 100. now inside that link this little div which is flex and item Center and inside it an image ranked in MD with 40 and the source is this pixm.photos I'll just put this at 300 just so it's a square and this is just dummy images that we can use then a little div underneath with truncate and ml2 testing and then finally the price in dollars with truncate on it so if you save that and now we go and take a look we can see there we have a little drop down section so we know that works now so for now if we go back in the code and on this div I'm just going to say VF and I'm going to put that to false so it doesn't display like that awesome right from this nux link go four divs down so one two three four open them up and then we're gonna do another next link like that open the top bit and add into that two shopping cart and class flex and item sender and then inside this I'm just gonna put a button open that up and the top it and we're going to add last relative MD block and hidden and then we have a mouse enter a mouse leave and is cart hover so let's scroll to the bottom and this is account menu we'll just duplicate and paste on that is cart hover okay so now inside this button we're gonna have a span open it open the top add a class with absolute Flex item sender justify sender minus right 3 pixels top zero BG that color height 17 pixels Min width 17 pixels text XS Tex white PX 0.5 and rounded full and inside this span I'm going to put a number of zero and if we go take a look we can see the number coming up there which is very good let's now add in our little cart icon and this is very simple underneath this span just have a little div that looks like that so the div has a Min width of 40 pixels and the icon name is CH shopping cart simple light size 33 then we have iscat hover so if it's true we have this color else we have nothing save it and there we go we can see our card so now if I put my mouse over it you can see it changes color awesome and if we just close this window a bit we can see it all shuts down so now we need this mobile button on the side by here so this nice and easy just underneath this next link we're going to add a button that looks like that and we have an ad click with a user store which we haven't made yet we might as well do it now well let's do it when we finish this main layout because it's almost done so we have this stuff inside the ad click the class is MD hidden and then block rounded full P 1.5 minus mt4 pixels and hover BG gray 200 the icon name is Radix icons hamburger menu at the size is 33 and now this button we go three divs down so the very bottom of the template all we're going to do is add in a div with class lgpt 150 pixels mdpt 130 pixels and then just a normal PT 80 pixels with a slot as well so if we save that we can now see we have our little menu button which is looking very nice let's open this up beautiful look at that gorgeous okay also in this main layout Above This slot and div section we're just going to add in a component that's going to be called loading and we go the user store again if it's loading then we show it so let's open the side panel let's go and make that component let's close layouts uh we're going to make a new folder called components and then new file and this is loading Dot View VB setup get rid of the style and this div we're just going to add a class on him and it's going to be fixed PG black BG opacity for the inset zero with full z40 Flex item Center just if I send the height 100 VH and overflow hidden now inside this div we're going to put that so the outer div as a class with P3 rounded MD BG black and bgeo pass 220 we have an icon in there the name of that is eos icons bubble loading and then the size is 100 and the color is that and then a little div with class tech center pt5 text XL font bold and text white and that is loading like that save that and that's done nice and easy that one so close that loading component now back in main layout under the slot we're gonna put footer and now let's go make this footer so let's open the side panel load in I'm just gonna copy the page and rename it shutter Dot View and if I just rip all this out and put another div open it up and then in the top I'm going to add an ID with foot domain and then a class with full BG that color mt10 and mb2 then inside that another div last that with Max width 1200 pixels MX Auto and PX4 then inside that divot add a class of MD Flex Gap four justify between them with full then another div add a class with MD with fifty percent and pt4 now inside this the first div is going to be like that we got the text as help and we've got class text LG font semi build and text that color and underneath this we have another div that looks like this so we have a class with text this color and text SM and all this stuff the text like help send their disputes and reports blah blah blah all this type of stuff uh I literally just went to Alibaba and I copied and pasted it from this site and I put it in you'll find it in their footer so it's probably much easier to do that than actually write it out and for the next bit it's exactly the same so just make a space and I'm going to add this in and all the Styles and all that are exactly the same it's just the text is different on the top one we've got AliExpress multi-language sites and then at the bottom loads of other stuff Russian Portuguese Spanish French blah blah blah blah and you can take that from the Alibaba site as well so if you copy it and paste it in it's way faster you know and then it's exactly the same thing beneath just with different text so make a space case I'll just drop this in so it's going to look like that it is identical to this but the text on this we got Bros by category and then there's all popular Product Promotion lower price Great Value reviews loads of text on that and the same for the other bit Alibaba group and then all the text at the bottom it is better to just go to the site and copy and paste it honestly so let's save that and then at the very end bottom of this template open this up and then we've got the like sub footer I'll just drop this in there we go ID foota sub class with full BG that color text SM text Gray 400 and then we got this class inside there with all this text inside it there's quite a bit so just uh go to the AliExpress page copy it and paste it in awesome save that and the main layout let's make sure we save that as well save right what does this say is loading is undefined that's because it doesn't exist because we need to make now our store so let's open the side panel and I'm gonna make a new folder stores and then inside our stores we want the new file I'll put user.js and I'm just going to drop all this in because it's very simple it's a super simple store looks like that so we just defined the store and then it's use user store with user the state is that so we have our booleans there we have a cart as an array a checkout as an array and then the persist to True which is the pin your plugin assistant State package that activates it so save that and that is done simple as that so now in main layout all we need to do is import that store so just above this we're going to import use user store from stores user and then const user store equals use user store save it and now if we go back and refresh our page there we go there's our little menu if we open that up awesome look at that beautiful and that is our main layout done so later on we'll come back and we'll um do all the API stuff for this searching input but for now I mean we don't we don't need it we're just doing all the all the markup so awesome let's move on to our index page and actually get some products in there let's go to the code close this main layout we don't need it anymore and this store but I'll get rid of that app get rid of it all this config stuff we don't need it right index okay so get rid of this where it says index page and divot add a class with grid Excel grid call 6 LG grid calls 5 MD grid calls 4 SM grid calls 3 grid calls 2 and GAP four So based on the size of the window then that will determine how many products are displayed per row but um I'll show you how this works now so if I drop this in we have a div with if products and then we Loop through it with this V4 so products in product and key of product we have a product component which we pass each individual product to and we're going to need to make some fake products so we can Loop through this so at the bottom of this script temporary rally I'm going to put cons products and then inside an array we want an object with an ID of one title which is Title One description this is a description URL just a a placeholder image and then price 9999 so I do it like this because in stripe uh it doesn't accept dots so you'll have to divide it by a hundred but we'll go over that later so anyway there's one product and if we just duplicate this 10 times or something so like that ID 1 to 10 different titles descriptions the same I've just changed the ID of the photos slightly different price so we have 10 items and now if I save this and if I dump this out I just say product save now we can see all of our little products and you can see if I open this up close it you can see it falls onto different lines because the grid system's kicking in awesome right so now let's make our product component so let's open the side panel let's just duplicate loading Dot View and call it product component.view and let's strip this out div and open this top part of the div app and we're going to add a dynamic ID with product component product.id and then a class BG white inline block rounded hover Shadow and then this Shadow and cursor pointer now let's add in the script stuff we need to do our props first so Define it and then put props to ref we're going to have a little computed which is going to be price computed like that so we take the price and just divide it by a hundred and I've also put in a non-discount price as well so this is old price computed and what it is you take the original price and you add 20 more to it and then divided by a hundred and return it and this two fixed is just to make sure that you don't get more than two decimal places so let's save that and inside this div I'm going to say next link open them up I'm gonna add through item and product.id and then inside that we have a little image that's gonna look like that so class rounded T and then the product URL let's just have a quick look and see if we can see anything yeah okay our products are starting to come through look at that beautiful so now underneath this image divot add an ID of product details then we have a fan add a class of flex item sender just if I start Gap 3 px1 and pt1 now inside that we have a span and that's going to be last text that color font semi build and price computed and then under that we have another one which is the old price that looks like that so text Gray 500 text SM text light line through and then old price computed let's save it let's take a look yeah you can see now that we have 98.99 and the original price was 103.94 the same with all the rest of them you can see there looking awesome okay let's do the next bit so underneath this span we have a another span which is just going to be class px1 relative minus top 1.5 text that color text XS font semi bold and some text which says extra five percent off now a little div under that span we have some things just for show so we got a class of flex item Center Gap one px1 relative and minus top one inside that a span with class BG that color text white text nine pixels font semi bolt PX 1.5 and rounded SM the text is going to be welcome deal and then underneath this span we have another one gonna look like that with class BG that color border text that color and then text again with nine pixels font semi bold PX 1.5 and rounded SM and the text in this is going to be top selling now a nice little P tag with an icon inside it it's going to look like that so class Flex item Center px1 PT 0.5 tax Xs and text that color 5000 plus sold and this icon on is material symbols star rate we've got a color of that and then class ml 1.5 with 4.7 at the end right there say that let's have a look yeah that is coming together nicely let's just jump in the index and save that so I get rid of all the other stuff yeah that's looking nice man awesome so let's finish this up under this P tag we have another P tag with class px1 PT 0.5 text Xs and text that color we've got the product title and a substring of 0 to 60 so we don't have any more characters than that in case there's a long title and then a final P underneath that which we have class px1 and pb1 and then the span is going to be text that color text XS font semibold and free shipping awesome save it and there it is look how awesome that is beautiful so that is this index page done okay so next why don't we do the item page so we can click on a product and then we go to forward slash item and the ID so let's do that let's go back to our code open the side panel and let's go in Pages new folder and we're going to say item and then inside item new file and this is going to be brackets with ID inside it dot view because this will be a dynamic ID enter vbase it save it and we also need to import our main view layout like that and this outer div we are going to just change that to main layout awesome right inside this divot and let's add an ID of item page and a class MP4 Max width 1200 pixels MX Auto and px2 then inside that divided flash that with mdflex gap4 justify between MX Auto and with fall inside that div class it with MD with 40 and inside this we want an image that looks like that so class rounded LG and object fit and for now I'm just going to put this hard-coded sauce in there because we don't have any Dynamic yet so just save that and let's go and have a look if we click one of these yeah awesome we go to image forward slash id1 let's try another one yeah item two awesome okay let's continue right now what we're going to do next is under this Mega div open it and add on if image is zero index is not equal to empty we're going to show it and we're going to class on this a flex item sender just if I send an mt2 and inside this div it open this up and put V4 image in images now we're gonna have another image inside this and there's quite a lot on it so it's going to look like that so we're going to Mouse over where the current image will equal the image so we can hover and change the image we've got a click as well which is the same thing with 70 class rounded MD object fit border 3 pixels cursor pointer then we got a dynamic class where if the current image is equal to the image the border is that color else it's nothing and then the source is image now if we save this let's have a look what happens nothing because we have no images so let's go and make our little images array so at the bottom we're going to add in const images which is a ref which with a array inside it and we've got all these dummy images and then the first one is empty and what we're going to do to make this work is underneath we're going to say watch effect open this up and add in images dot value zero index and I'm just going to grab one of these copy it put it in a string and paste that in and change this to I don't know like 77 something like that and then save that now if I go and have a look this is Mega break-in let's inspect images was accessed during render but it's not defined on the instance okay let me just refresh cannot access images before initialization Okay so let's try and put that in and on mounted for now just so we can get it to work try that and okay that's starting to work we can see down there awesome so let's go back in this let me just format that and we need to get this current image we need to make that work so in this watch effect I'm going to duplicate this and say current image dot value and I need to make sure that I don't forget to add it as a variable there so let's save that refresh okay let's have a hover beautiful that's almost working now this current image copy this Source we can change let's add what we should add onto this so we have a VF current image and then the source is current image save and now if we hover yeah look at that beautiful all right working beautiful okay let's continue we can close this inspect window from this image we're going to go down three divs so one two three open it up divided with MD with sixty percentage G wide P3 and rounded LG and then inside this we're going to have that so V if to True will make this Dynamic later a p-time class mb2 we got a title on it and then another one beneath with font light X12 pixels and mb2 and description section save it let's have a look coming together beautiful okay next section underneath this div we're going to add this other section so class Flex item Center PT 1.5 and then this span class H4 Min width for rounded full e 0.5 BG that color and MR2 and we've got an icon in the Middle with minus Mt 17 pixels size 12 and the name of this is material symbols star rounded then at the very bottom of that A P tag with class text that color with extra five percent off save it let's have a look see that right there looking beautiful awesome next bit underneath this little div we just did we're gonna add this section so class Flex item Center just if I start an my2 and we've got a couple of icons in this I mean they're all the same the name is IC Baseline star we have five of those and a little span at the bottom with class text 13 pixels font light and ml2 and some text inside it save that let's have a look see it right there looking beautiful awesome okay under that div we're gonna add a little single div with the class border B and then under that another div block which is going to look like that so Flex item sender justify start gap2 and my2 and then we have a Dave with class text XL and font bold and we got this price computed we'll go and make that in a minute underneath that we've got the span class BG that color border text that color text nine pixels font semi ball PX 1.5 and rounded SM 70 off let's jump down and make this price computed so let's make a space and for now I'm just going to put in that so we're just returning a string because later will make this Dynamic so if you save that and we go take a look look at that awesome beautiful okay let's continue next section underneath this div bit we're gonna have a P tag with class text that color text XS font semi build and pt1 with free 11d delivery oil and then underneath this P tag we've got another one that is going to be exactly the same class but free shipping now underneath this P tag single div with class py2 and then underneath this we're going to say button open it up and open this top section up and we're going to add in at click and that function is going to be add to cart with a disabled which is in cart and then the class pxx py tool rounded LG text wide text LG font semi bold BG gradient 2R so to write from this color and to this color and inside this button we have a little if else and that is going to be like that so if is in cart is true is added else add card save it have a quick look beautiful look at that awesome right let's sort out this is in card and add to cart we're going to need to import our Pina store so use a store from store and then put that into a user store const and if we scroll at the bottom under images I'll put it under here let's just say add to cart and then for now I'm just going to put alert and just say added save that and above this price computed I'm going to say cons is in cart and then computed then we want the local variable that is set to false and then we're going to get our cart from our user store and loop through it in a four each and then say prod so each product and then inside this we're going to say if root params ID so if this ID this root parameter is the same as the product ID the res needs to be true because that means we've added it to the card and then we want to return turn res like that so we won't actually see this working fully now because this add the card we're not actually adding anything yet because we don't have the products but it's better to put it in now so when we come back later we have less work to do and it makes our lives easier and finally just before I forget let's add in the root so use root and then the constant is root that is what that is for so root.params.id and for now that should be good so yeah if we leave that page like that it's pretty much done we can actually move on to the shopping cart page so next let's do that okay shopping cart let's go back in the code open the side panel and in Pages we want new file and we're going to say shop cart Dot View and then in our shopping cart vbase set it up and get rid of this style tag we're going to change this adjective for the main layout and import it like that and now we can start so let's close the side panel and then check the div add an ID of shopping cart page and a class mt4 max width 1200 pixels MX Auto and px2 inside that div and on this we're gonna put a VF for false just for now and a class h500 pixels Flex item sender and justify sender then inside that divot pass it with pt20 then inside there's the little image that looks like that so class MX Auto width 250 and then this is going to be cart empty and if we save that and we go to shopping cart so if we change item to shopping cart uh we can't see it oh because this needs to be true instead of false so just put this to a true save it and there is our empty cart awesome let's just finish this little section off underneath this image add a div with a class text XL tech center mt4 and inside the text is no items yet now under this divot and we're going to add another VF and just set that to true and then class flex and tech center and then inside this we have a next link that's going to look like that so the path we go to when we click is the auth page the class is BG that color with full text white text 21 pixels font semi bold P 1.5 rounded full and mt4 and inside the text is just sign in if we save that we're gonna have a look we can see there our little sign in button and if there's no user logged in and you come to this page then you'll show this button but if there is a user logged in you won't see it awesome right so from this next link go down three divs one two three open him up divot and we're gonna add a VL so let's just scroll up and turn this vif from True to false like that and then that'll be displayed and the class on this is going to be mdflex Gap four justify between MX order and with full inside that divot class it with MD with 65 percent another div classic with G white rounded LG MP4 and then inside this we have a little div with a class of text to XL font bold and mb2 and the text is shopping cart with zero this will be dynamic like that if we save that we should start to see something yeah right there beautiful awesome okay next section from this shopping cart tax go down to Davis one two face it and we're gonna add in that so the other day has a class of BG that color rounded LG P4 and mt4 and then the inner div has a class of texred 500 and font bold and in this or the text we have welcome deal applicable on one item only save take a look there we go login awesome okay next under this div do another and on the top we're going to add an ID which is items and the class BG white rounded LG P4 and mt4 now inside this we're gonna need another div with a V for Loop and product is going to be there in products and if we jump back to the index page and all of these products I'm going to take copy that go back to the shopping cart drop it in the script and we don't need all of those so just delete all of them and leave two like that and then save that and now we need to make a component and this is going to be called cart item and it's going to look like that so we're passing a product selected array because we can select what we want to go through to our checkout and we need to pass that selected back so we can do some stuff with it so what we'll do we'll make this cart item and then we'll do all of that stuff now so let's open the side panel and we're going to go and do components I'm just going to duplicate this product component and rename it to cartitem.view now everything inside apart from the outer div just rip that out get rid of all this stuff and on this outer div we're going to add a class that is going to be Flex justify start and my2 and this diff fine prop stuff is good we need to add a select array prop just going to add that into the refs this price computed an old price computer we can just delete that get rid of it we need to emit the product that we've selected so we're going to say Define emit selected radio we also have two variables that look like that so is hover and is selected and just so I don't forget at the top let's import our user store like that so import users to store from user and then assign that to a user store cons now I'm going to pull in the remove cart function now and I'm pretty sure it won't work because we can't assign anything to the cart anyway but if we just do most of this stuff now we don't have to do it later so let's say cons remove from cart open them up and we're gonna Loop through the cart in the store for each we're gonna say frauds for products and we want to get the index and then open that and then we want to say if a product ID equals the product ID being passed in we then want to place it so remove it completely from the cart array in our user store and that is done like that and that is how you remove it from the cart awesome and finally at the bottom we have a watch and this is going to be is selected value we're listening for changes and open this up I'm just going to put in this Val like that and all we're doing for this is emitting selected radio because remember if you go back into the shopping cart we have selected radio there being emitted and all we're passing out is the ID and the value like that awesome save it let's have a look let's see if anything is nothing yet okay this is functionality for later on but it's better if we do it now anyway so let's continue with our template right at the top inside this div to another we're going to add a class of my auto next div again open it and open open this top bit and we're going to add in Mouse enter and mouse leave which is hover true or false and then the class is text item Center justify start P 0.5 and cursor pointer right inside this div and open this topic and the first two things is going to be an add click and the class so the ACT click is is selected is equal to not is selected so if it's selected is true this will make it false and if it's false it'll make it true and then we have class Flex item sender just if I send a H20 pixels with 20 pixels rounded for border mr5 and ml2 and we also have a dynamic class on this and that is going to look like that so if is hover is true the border is that color else the Border gray 300 and then if is selected the BG is that color or nothing and just inside this we're going to add a single div with a class on it that is going to look like that so class h8 pixels with 8 pixels rounded full and BG white now if we save that hopefully we can see something yes so we hover we can see it like that we click there we go look at that how beautiful is that sick okay let's move on so from this single div let's go down three divs one two three open it up and we're just gonna add a little image that looks like that so class rounded MD MD with 150 pixels and width 90 pixels and then the sources product.url if we save it we should see that now yeah look at that awesome and then all that works is that we select it and then it passes back and then whatever we select we go through to our checkout awesome let's continue next under image div add a class of overflow hidden PL to and with full inside that divot add a class of flex item sender justify between and with full inside this another div class it with flex item Center to justify between and truncate inside this we have a span with quite a lot of dials on it if I drop that in we've got a span with a class that has SM block hidden BG that color text white text 9 pixels font semi bold PX 1.5 rounded SM Min width 80 pixels and inside that we have welcome deal so if we save that a second take a look you can see there we've got welcome deal beautiful okay and just underneath this fan a nice simple div with a class truncate and smpl2 and we've got product title if we save that we should actually see the title yeah awesome cool right next bit we have a little button so under this div button with an add click and we've got remove from cart which is the function we made earlier so this one awesome and then we got a class MX3 SM block hidden minus Mt 0.5 and hovertex red 500 and inside this we have an icon with a name material symbols delete outline and the size is 20. let's save that and let's have a look there he is look at that beautiful before go a bit of hover okay one div down from this pattern so one space it up and we're gonna add in this so I did with a span inside it the class on the outer Dave has got text XL and font semi bold and then we've got this little dollar sign before the span and the class is fun bold and we're taking the product price and dividing it by a hundred so we get uh the send so save that let's have a look and there we go 98 bucks 96 bucks beautiful next little bit underneath this div Little P tag with a class of text that color text XS font semi bold and pt1 inside free 11 day delivery over 828 underneath this P tag another with exactly the same class and we got free shipping on that and now underneath this P tag do a div and we're going to add this class with flex item send and justify end and we're going to scroll up and we're going to steal this button copy it and drop it in there so this is for when we're in mobile view the buttons in a different area and we're just going to change some things around so this MX3 get rid of it this hidden is not there get rid of that remove the block from the SM and add the hidden to the SM like that and if we save it and then we go into this and we start making it smaller the button should move yeah to the bottom you see it right there awesome beautiful look at that man very good okay that card item is done so let's close that up go back to shopping cart and let's continue going down okay from this cart from this card item we go down three divs so one two three base it we're just gonna add in a single div for the class of ND hidden and block my4 and then make a space under that we got a div class it with MD with 35 percent now inside this divot open that up and add an ID with summary and a class of BG white rounded LG and P4 now inside that divot with a class of text 2XL on semi build an mb2 that is going to be summary inside that save it let's have a look you can see this starting to come on the side looking sick now under this summary divot and in the top add a class of flex item sender justify between an my4 now inside this another div which is going to have total inside and the class is font semi-bold and then under that we have another div section with a span inside it and that looks like that so class 2XL font semi bold and then the span is on extra bold and we got this total price computed function inside it so we might as well just carry on going through the template and then when we get to the script section we can do it all in awesome so from this div go down one open it button it and then open this top into the button and we're going to add in an at click which is go to checkout and we've got a class on this which is flex item Center justify Center BG that color with full text white text 21 pixel font semi bold P1 0.5 rounded fall and mt4 and in this button we're gonna put checkout like that save it let's have a look if we can see it yeah looking good okay from this checkout button just go down one div one and then div that up we're gonna add in an ID which is payment protection and we got a class BG white rounded LG P4 and mt4 inside that a little div that has a class of text LG font semi build and mb2 inside that part the tax payment method then under that div it open this up and put a class on it of flex item sender just if I start gapping then my4 now inside this we have a little div with an image inside it and we're going to V4 through all of the cards so how we're going to do this is nice and simple let's just go down and put it under main layout we're just going to drop in this so we make a const called cards the ref has an array inside it and we got visa.png mastercard.png paypal.png and apple.png and that is from our public folder wherever it is the the Visa PayPal Mastercard and Apple pay up there as well awesome so close that and if we save that yes look at that that looks beautiful okay let's do our script section we have a couple of functions to do in this so first off let's bring in what we need we definitely need our store so let's bring that in so we've got a user store and we assign that to a cons and then underneath this we need a variable called selected array that's going to be a ref with an array inside it we've also got this on minded and inside it we have is loading equal to false and I've set this at a 200 millisecond timeout so what this is is when we come to the page we have the loader that comes up and Spins and then after it's mounted we just close it down and we'll do this on every page so we'll have to update a couple of things later but we might as well put it in now okay next we're gonna have to do our computed so underneath this card let's put haunt total price computed and then we need computed again open that up like that and this is going to be pretty straightforward we need a local variable of price which is going to be zero and then under that we're going to Loop through all of the cards we're going to say prod again open that up and then we're going to add all of the product prices into one and all we're going to do for this now is return price divided by a hundred so we get the decimal places as well so let's save that and it has changed you can see that's coming up as zero which actually is correct because there is nothing in the cart yet so that is actually working um but we won't see it until we have our database stuff coming in so awesome let's continue underneath this total price computed we're gonna have another function that is selected radio func opening right up and at the top of this we're going to say if the selected array length is nothing we we want to push the item to that array that we've selected and then return it to exit else underneath we're going to say selected array and we're going to Loop through it and we want the item of the array and the index of that array open that up and then we're going to say if e dot ID so e coming from up there is not equal to item id it doesn't exist in the checkout so we want to push it and then we have an else which is basically get rid of it so our little splice again awesome now we have a final function at the bottom and that is going to be go to checkout let's open him up two things at the top we have a local variable which is IDs and that's an empty array and the checkout we are just resetting to nothing because when we go there we want to make sure that it's empty before we reset our checkout because otherwise we'll just have duplicates in the checkout so this next bit very easy we're going to say get all the selected arrays Loop through them and then get all the IDS of that and push it to the IDS array which we have right there and then under this we're going to say let res equals the cart and we're going to filter through and we want to filter an item open that up and all we're going to do is return the item that has the same ID now at the bottom of this we just want to get that res right there and we want to say res for each and then we want to Loop through that each item inside it and then push that to the checkout and I put two raw around it so we don't get any of that proxy uh wrapper that view puts on it so we're just having a raw object being pushed to our checkout array and then after that all we do is say return navigate to checkout and then we go to the checkout awesome right save it and that shopping cart page is done so later on when we get the products we'll see how all this works but yeah again it's better to do it now because then once we kind of plug everything all in it just kind of starts working you know which is awesome right next we might as well do the checkout page so this ties into quite a lot so there's also going to be a link to the address page and there's all of the stripe stuff on it so the stripe stuff will leave until the end but most of the template stuff we can get done now so let's do that right let's go back in the code open the side panel and shopping cart I'm gonna duplicate and rename to checkout.view and in our template I'm gonna clear all this out apart from the main layout get rid of that just check the diving in and then at the top we're going to add ID checkout page and then the class is going to be mt4 Max width 1200 pixels MX although and px2 and if we quickly sort out our script section so all of this so far we need we also will need the root so add in use root equals root I'm also going to add in all the variables that we need as well so there's quite the feel it's going to look like that so we have stripe elements card form total client secret current address and is processing now inside this on mounted get rid of this a sec delete that out and add in is processing is equal to true and then we're going to Loop through our checkout and get the total price of all the items we won't actually see that working now but we can put it in and everything beneath this apart from the products all of these other functions up to the cards I'm gonna remove like that and then I'm going to add in a watcher which is going to be watch and then we're gonna have total value open it all we're going to do in this is say if total value is greater than zero we're going to call this stripe init function and for now all I'm going to do is add this in as empty like that there is also a pay function which is an async and I'm going to add that in as empty also also a create order which I'll also leave as empty and finally a show error which I will also leave as empty so when we actually come to the point of making a payment we know exactly what we need to put in okay now let's scroll up and inside this divot we're going to add a class with mdflex gap4 justify between MX Auto and with full inside that divot Placid with MD with 65 percent divot class it with BG white rounded LG and P4 and then inside this we're gonna have a div and it's going to look like that so class XL on semibold mb2 and the text is shipping address now under this divot and we're going to put a VF on this and we're going to say true for now and first we're going to add a next link which is going to look like that so this is going to address which we haven't made yet we'll make soon and we've got a class which is flex item sender pb2 text blue 500 and hover tax red 400 the I icon name is MDI plus the size is 18 and the class is MR2 and just put some text in update address try to save that go into this and take a look if we click checkout yeah we go to checkout we can see it right there now awesome let's continue under this next link divot add a class of pt2 and Border T inside that divot this is going to be delivery address and we just got class underline and pb1 let's save it take a look see that right there awesome now under this div we have a ul and we're going to add a class that is text XS I'm going to say this a little list item opening up we're going to add a class with flex item sender and gap2 and inside this we are going to have that so the top is going to be contact name and then in this div we got a class font fold and this is where the current address is going to be if there is one if we've added an address a delivery address but for now I'm going to delete this out and I'm just going to put test like that let's just have a look a sec save it yeah so it looks like that so I'll do that for all of them the next li we have address I'll change this for test and actually I can just copy this one copy paste it beneath address becomes zip code and then again paste that beneath this becomes City paste finally country like that so if we save that and take a look there will be all of our delivery address details awesome okay right from this UL go two dips down one two and we're just gonna add in a nuts link again and this is going to look like this so kind of similar to before I think the class is exactly the same so we got Flex item Center text blue 500 and hover text red 400 the icon I think is the same just for the text add new address and we've got this V else on there so if I save this and we go into this we'll see the address but then if I scroll up and I turn this if to false and I save it we will only have add new address awesome right let's leave that like that and continue right from this next link go one div down make another div and we're gonna add an ID of items and a class of BG white rounded LG P4 and mt4 and inside this is where we need to display our items so we are going to do this we're going to Loop through all of the products and if you remember these products I left them in at the bottom so there we only have two and if I save this oh we won't see anything because I we haven't created the checkout item yet but that is very simple all we can do is open the side panel and duplicate card item so let's duplicate and say checkout item Dot View let's save it and this is very simple all we actually have to do is delete stuff out of this so in our script there's no store we don't need that so we can delete select array delete remove it from there as well there's no limits and actually there's nothing of anything all you need to keep is that the fine props product and then convert that to refs awesome right if we start from the top we have this image here so everything before the image all of this mouse end the stuff all of that we are going to delete like that so we just have the image now if we go down this button with remove from card delete that a sec and this product price I'm going to grab it copy that put it underneath the image and also this section the product title this div section copy it and put that underneath the image and everything else underneath in this template we want to delete so let's grab this go up and remove all of that so that is all we have and let me just format this a sec like so now there's slight modifications to this so just under the image divot add a class with overflow hidden and pl2 now we're going to take our product price section and the title copy it put it inside of this like that we want to model defy this class so truncate and justify between let's just remove and on this span we're going to get rid of hidden and SM block and this div underneath the pl tool get rid of SM this little div section the text Excel becomes LG and we're also going to have at the end mt2 like that and I'm pretty sure that is it so let's save that and let's take a look see what's going on nothing okay there we go I refreshed it now we can see that we got summer going on which is awesome our two little products looking good so that is that component done so we can close that and now we can carry on in our checkout so from this checkout item go down three divs so one two three make a space and drop in a single div with a class MD hidden block and my4 and we're going to make a space under that and we're gonna say div classic with MD width 35 then inside that div ID of place order and a class of MD white rounded LG MP4 now we got our little div that's kind of a title with class text 2XL font extra bold and mb2 just put in that summary now we've got a little static div section underneath this summary and that's going to look like that so class Flex item sender Justified between my4 and then we got total shipping and free now underneath that section single div with a class of Border T So border top space it now under that we've got a little div block with an outer div of flex item Center justify between an my4 then this inner div with font semipole just put total in that and then a div wrapper with text 2XL and font semi bold and then inside there's a span font extra Bold and the total is divided by 100. let's save it take a look yeah he's coming together now look at that on the side beautiful okay right underneath this div we need a form open this up but get rid of the action we don't need that and we're going to add at submit.prevent and that's going to call the pay function and if you remember we've put that in just as empty for now awesome now first we have a single div and that's going to look like that so we've got ID card element and the class is border border degree 500 P2 and rounded SM next we have another one which is a P tag and that is going to be ID card error roll alert and class text red 700 Tech sender and font semibold now under this P we have our little button open that up and open this top bit up because there's quite a lot on this so let's add our class with mt4 BG gradient 2R from this color to this color with full text white text 21 pixel font semi bold P 1.5 on rounded full just above this class we're going to add two other things which is going to be disabled so if is processing is either true or false it's disabled or not the type is submit and then underneath this class we have a dynamic class that look like that so if processing is true or false we have opacity 70 or opacity 100 and then inside this button we have an icon and if is processing we have this spinny little icon called EOS icons loading else where we can place the order so let's save that and now if we have a look we can see starting to come together so we can just leave that as it is for now and finally one div down from this form so there space it divid we're going to add a class that's going to be BG white rounded LG P4 and MP4 first div is going to be a little title with AliExpress class text LG font semi bold mb2 and mt2 and then just under that a little P tag with a class ny2 and inside it it says AliExpress keeps your information and payment safe awesome right save it let's have a look and we can see it right there awesome okay while we're here let's do this add new address page so let's go in the side panel and go to Pages new file call this address dot view the base it up setup we don't need this style get rid of it and again in our script you need to import main layout and change this out the div to main layout then inside div open it and let's add an ID of address page and a class of mt4 Max width 500 pixels MX Auto and px2 now inside this div we have another divot and let's add a class with MX Auto BG white rounded LG and P3 now we got a div at the top that looks like that we have text Excel text bold and mb2 this is going to be address details let's save this a second and actually go to that page so if you press add a new address yeah we go to that page now awesome okay so underneath this address details div next we need a form and get rid of action again open it and on the top we're going to do an ad server submit.prevent and that's going to be submit and inside this we are going to have some text input components and that is going to look like that so class with fall we've got a placeholder contact name a v model an input type and then where we put the errors like that so if we go and make that let's open the side panel go into components new file text input dot view vbase it and then again get rid of the style and in our script it's pretty straightforward we're going to have an emit so we need to define a mix which is going to be update input because we need to pass information out then we have our prop so we're defining an input placeholder Max input type and error and then we convert those to refs under that we're going to have a variable that is is focus and finally we're going to have a little computed which is going to be like that so input computed so we're going to get the input value and then whenever it changes we set the value and emit it out of this component so it goes like that awesome and that is the script done so let's do the template now inside this div I am going to wrap this in a client only tag because I was getting some errors about uh I think it was like virtual Dom synchronization or something like that so I just wrap this around it and then it stopped so inside this I'm going to put input let's just get rid of this type for now open this up and first We'll add our class and this is going to be Whitford BG white texture 800 border text SM border that color rounded LG P3 placehold degree 500 and focus outline none then just above this we're gonna have placeholder equals placeholder and max length is Max then underneath we shall have a focus and a blur which is focus true or false then a little Dynamic class which is going to be like that so if is focused or degree 900 else if there's an error we want a border red 500 and then three more which is going to be the type which is input type the VM model which is our computed function down there and then autocomplete is off and save it and that is it that is that component done let's go back to address and now if we save this and look in our page and we can see it right there awesome beautiful now all we do with this is just add in all the rest that we need so under this next input we'll have another and that's going to be or address we've got a class width for mt2 make sure the model is addressed the input type is text and then we have all these errors which is going to be error type address and error message next under that the class is the same as the one above the placeholder is zip code because zip code as the V model input type text and then error type is zip code and one more plus the same again place all the city V model City and the error type is City and then last one so class the same again place all that country model country and error type country awesome save it let's have a look and there we go there's our form look at that beautiful very nice all we have to do now is make it work so let's go back in our code and underneath this text input we're going to have a button open it open this top bit and we're going to add disabled so it's working it's a true or false the type is submit and then the class is mt6 BG gradient 2R from that color to that color with full text white text 21 pixels font semibold P 1.5 or rounded full and inside this button we have an icon and a div that looks like that so if is working is false update address else we have a little icon the name is eos icons loading size 25 and class MR2 save it and there's our little button awesome now I'm just going to add in some of this script stuff so let's import our store from user we're also going to need quite a few variables that's going to look like that so we've got contact name address ZIP code country and city then current address is updated it is working an error so next what I'm going to do is add in the watch effect we're going to use later I won't put anything in it I'll just leave it like this so we know we need to use it I will just add in that so is loading defaults and I'll also add underneath that a function called submit and I'll leave that not empty because we can fill some of it in now so let's do it let's add in at the top working equals to true and error value we just clear out any errors if we had any from pre-submissions and then what we're going to do is a couple of if else's and we're going to say if contact name is empty so there all we want to do to the error variable so this is just assign it an object so the type is contact name and the message a contact name is required and then all we do is the same for pretty much every other one so we have an else if there's no address the type is address and Anna and and an address is required next we have zip code so if there's no zip code we put in type zip code a zip code is required next if there's no City type city a city is required and the last one if there's no country type is country and the country is required now at the end of this we'll do another if and we'll say if there is an error is working is false and we return so we exit and for right now that is all we're going to need because then underneath this we'll just say more here just like that so we know what we have to do okay right let's have a look update address we can see there we got a little red box around it but we don't see our error message why is that not working let's have a look did we forget something in the text input let's go and have a look yes I did at the bottom underneath client only we need to display the error very simple that's going to be a little span with if there's an error class text red 500 text 14 pixels and font semi build and in the middle era save that now now there we go we can see our little error a contact name is required so if we're putting something there and press update the next one an address is required we can print all these and then the bottom we have country our country is required awesome so that is work in okay next if we do the mobile uh overlay the animated menu and we can probably do the auth page as well because it's quite simple then that is all of our template stuff done I think and then we can move on to actually making this application Dynamic so let's start with the auth page let's go in the code open the side panel now in Pages we want new file and we're going to say auth.view V base this and get rid of the style because we don't need it and this is pretty straightforward so on this first div we're going to add an ID of auth page and then a class with full height 100 VH and VG white then inside that divot add a class with with full Flex item Center just if I send a P5 border B and Border B gray 300 now inside this we can have a next link with an image inside it and that is going to look like that so we're going to the main page and the class is min with 170 pixels and inside this we have our AliExpress logo and the width is 170. now if we save this and I go back into this and then I go account login register Yeah we actually go to the auth page then awesome and you can see if we click this logo we go back to the main page awesome let's go back to that let's continue underneath this div do another div flash it with Max width 400 pixels MX Auto and px2 then we have a div with a Class Tech Center ny6 and this is going to be login forward slash register let's have a quick look see it right there beautiful now under this login register div we want a button open it and open this top bit because we've got some stuff we need to add so let's add an at click and we're gonna have a function called login and this we're going to pass Google so this will be our Google login and then we got the this class which is flex item sender just if I send the Gap three p 1.5 widthful border hover BG gray 100 rounded full text LG and font semi bold and inside this button very simple all we're going to do is say image with a class of widthful and Max width 30 pixels and the source is Google logo.png and underneath Dave with Google and then save it and there you can see our little button beautiful and we also have a GitHub login so all we have to do is take this button so let's copy it and then underneath paste it below change Google to GitHub same on this GitHub logo.png and in the class just above Flex we're going to have margin top four for a bit of space and the login for this is GitHub now let's save that take a look beautiful there's our tool at the login buttons awesome right and for our script we might as well add in all of this stuff now because we're coming close to doing the Super Bass stuff so what I'm going to do is add it in and comment that out so if I put in the client so we're going to use super bass client and use super bass user assign them to client and user I'm just gonna comment that out for now under that we're going to have a watch effect and if we open that up inside it we're going to say if there is a user so if a user is logged in we want to navigate away from this auth page because we've already logged in so we don't want to be able to get to it and again for now I'm just gonna comment that out so we're just going to have it there ready and finally you if I go beneath we're going to add one last function which is going to be login and we're passing that Prov which is provider so we've got this login function and you can see login the provider is GitHub and up here the provider is Google and we're going to use the Super Bass off to sign in which is very simple it's going to look like that and that is it so when we come to actually setting up the Super Bass stuff we can just uncomment this and we should log in so for now I'll just leave that like that because that page is actually done nice and simple and now let's move on to the overlay so let's open the side panel we're going to say components new file and this is menu overlay Dot View and if we V base it set up that'll get rid of and the script is quite easy for this we might as well just do it now so we're going to import our store stuff so the user store I'm also going to put in the Super Bass stuff so the client and the user and comment it out like that and then we're gonna have our first function which is going to be go to and we're passing the URL and all we're seeing for this is is menu overly set it to false and then return to whatever URL that we've specified and we'll use this go to in our template you'll see that in a couple of minutes now so next we have sign out open them up and this is the same type of thing as before so we have this client auth sign out which will reference that when we have super bass in also again we close the menu and navigate back to the base URL and finally we've got a sign in which is just a redirect and all we're going to say for this is menu overlay is false so close it and then go to the auth page awesome that is our script done so now in our template this div let's start let's add an ID of menu overlay and a class fixed Z50 bottom zero height for widthful BG white and PX3 inside that divot flash it with flex item sender justify between in py 5. now inside this we have a little nux link and that's going to look like that so we have this two which is the base URL and when we click this as well we also want to close the overlay menu and we have a little image inside this which is again the AliExpress logo and the width is 170 like that now under this next link we have a little button looks like that so at click we close the menu again we have a class on there rounded full P1 and hover BG grew 200 and this little icon which is MDI close and a size of 30. now if we save this and I jump into where is it app.view we are going to add in our menu overlay so underneath the next page add in menu overlay let's close that off and we want to open this up because we want to put on some animation stuff so under template add a script and make sure it's a setup then we're going to import our store because we need to use one of the booleans inside it and now on this menu overlay we're going to a dynamic class which will have an array and then we need an object inside that and what we're going to do is say this so we're going to have this class which is Max height 100 view height transitional duration 200 milliseconds and ease in and also we want it to be visible and if is menu overlay is equal to true this is what happens and then let's just put a little comma at the end of that and make a new line because then we have the inverse and that is going to be like that so max height is zero nothing transitional duration 200 this is ease out and it's invisible and this is if the menu overlay is equal to false so save that and while we're here we might as well finish up this script section because there's a couple of other things in this so we're going to add a root and then underneath this we need a variable which is going to get the window width so at a certain size we want to automatically close this menu overlay because we'll be on a desktop because we won't need the overlay at a certain size so first I'm going to say on mounted so when we Mount this baby up and let's open that we're going to add in is loading the true and we're also going to say window dot add event listener resize and we're going to get the actual size of the width of the window and then we're going to assign it to this window width variable that we have made right there and then underneath that we're going to have a watch with the window width.value and then open that up and then we're going to say if window with stop value is greater than or equal to 767 pixels the menu overlay is equal to false so you want to close it and the last watch at the bottom this was very simple I'll just drop it in so anytime that the path changes we are we we set that is loading to true and that is it so save that and now if we go to our application and we go to to the main page you can see we're loading let's just close this down a bit yeah we got our little button if we click it yes there's our overlay let's click it awesome right so now we've got that all we have to do is add in our menu stuff so let's jump back into menu overlay and from this button go down one div open it div that up and we're going to add a class with flex item sender justify between a pt5 and then inside that we have a UL with a class on that with width full and then inside this UL An Li open that up and open the top because we have a class and an at click and it's going to look like that so we already made this go to function we're passing orders and we have a class which is relative Flex item sender justify between py 2.5 border B PX3 hover BG gray 100 and cursor pointer now inside this we've got a couple of things so I'll drop it in we have an outer div with a class of flex item sender text 20 pixels and font semi bold and then this icon which is pH pen light size 33 and a little span with a class pl4 and my orders now if I save that and we have a look you can see there's my orders and we hover beautiful look at that awesome and now for the next one we can do exactly the same so just take this Ally that we did copy it paste it beneath change orders to shopping cart and then inside of this Ally this section we need to change my orders to cart the name of the icon becomes pH shopping cart symbolite and also underneath this div inside the LI we're going to have another div and we're going to put a little class on it it's going to look like that so we've got Flex item sender justify sender BG that color height 35 pixels Min with 35 pixels text LG text white and rounded fall and all we're going to do for this is add in the cart dot length so how many items are in the card and then save that and there you can see there is the second line beautiful right last little bit let's scroll up back to our my orders list item we're going to copy that again and then go beneath our cart list item and then drop that in and then this at click this needs to change to sign out and I've added a vif which is equal to false on this so there's going to be a v else afterwards but for now just leave this as false and if we scroll down this my orders we change to sign out and the name we're going to change to pH sign out light let's have a look save it oh yeah because it's false we won't see it so let's just change this quick to True save it now we can see it nice little sign out there awesome let's just change that back to false so we can see what we're going to do next so all this section we just made we're gonna copy and then paste it beneath VF becomes V else sign out becomes sign in this icon name becomes sign in light and this sign out becomes sign in register save it and there we go there is our little menu let's give it a click look at that awesome beautiful and that is the menu overlay page done so actually now because this is open and we did our stuff in our app.view if we open this page it should be automatically closed so let's open it yes there we go beautiful and when we put it back it's not there click it open it again close this automatically look at that now just for the moment if we jump back into app.view and in this unmounded this is loading actually just set it the false for now because at the end of the project we'll do all of the loading stuff because otherwise it'll be really annoying but yeah that is uh all of the template stuff pretty much most of it done so at this point we can actually move on to making all of our database stuff okay so let's start by setting up Prisma and if you remember if we go into package.json we've already installed the Prisma npm package right there and we've also put in this seed command so if you don't have those which you should make sure you put them in and now if I close this and open the terminal and I'm going to put in npx Prisma in net and then enter and that is initialized and you can see we've got all this information and it is put inside our Dot N file this database URL if we just go and check minimize this yep you can see it right there it's automatically added all that stuff which is awesome and let's close this stores and where is our Prisma file right there that is what we need so first off we're going to put in everything we need let's go into schema.prisma right first thing we're going to do is put in addresses so this is the address table so let's put in model addresses open that up and inside this we're going to need an ID which is the auto increment ID a user ID which is a uuid because when we log in with Super Bass we will get the uuid from that we've got a name address ZIP code City Country all that is a string and then created at which is a timestamp awesome next we want orders let's open that up and inside this there's quite a lot we've got another Auto incremented ID and then again the user ID which is a uuid a stripe ID name address ZIP code city country created at and order item and this order item is a one-to-many relationship so what that has a relationship with is a table called order item and just to clarify if you're wondering why there's a duplicate with name address ZIP code country there and there so this is what we set as our delivery address and then when we place the order we put that delivery address onto the order so then the next order we make if we want to change the delivery address we can just change it there and it gets saved inside that so all of the orders don't change when you change the main address awesome okay next we're going to have the order item let's open that and in this it's going to look like that so again we've got our Auto incremented ID the order ID which will be this a product ID which we haven't put in yet we'll put in in a minute create that out again and then our relationship so this order item belongs to an order so you can see we've got order ID that there which references ID on order so references this so that is how we join orders and all the items together and then we have this products one so let's make the products table so model products open them up and inside this we're going to have that so another Auto incremented ID title description URL price created at and the order I item for the products and again that's the same type of things we've done with order awesome okay so now if we save that because this is actually done we need to go to Super Bass so superbase.com let's open this up a bit and I already have an account so I'm going to sign in if you don't have an account you'll have to register and you can see I've already got my AliExpress clone the one that I did previously so I'll make a new project new organization name I'll just say AliExpress Loan 2 and type of organization personally yeah that's fine create and we got this project name I'm just going to put a Express c 2 and then we got this database password I'll just generate a password and then copy that I'm going to open a text editor new document and I'm going to put that password in there awesome because we definitely need that and then this is fine East USA and free is definitely good so create new project and there it is there's our new project a Express C2 and now we need to take some of this information on the side so this project API keys and project configuration we need to take some of this and put it into our environment file so project URL let's copy it go back to our code go into the end file so super base URL let's paste that in let's go back to Super Bass and then the API key copy that and then super bass key paste that in and this database URL that was generated by Prisma we need to change that because that's wrong so let's go back in Super Bass and we'll go into project settings and then database I think what's the database settings if we scroll down connection string right there I think it's that so if we copy it and then we go back into our code and we replace this string with what we just grabbed we also need our password where it says your password so let's get our text editor back up and we grab our password copy now I'm going to paste that in save it and that should be good so before we migrate anything I am going to go back into the side panel and in Prisma I'm going to put a new file it's going to be seed.js so this will be our Cedar and instead of typing this out because this is super boring we're going to go to the GitHub repository with the AliExpress clone and if we lock Prisma right there just grab everything in this seed dot JS because you can see there's loads of it I'm going to go to the bottom just grab all of this copy it go back to our project and paste that in so all this is is just creating uh dummy products so we got a title description URL right there and also this little price as well and there's loads there's about 20 of them I think so yeah you don't really want to write that out because I mean it's always a time so save that and now that we've done that why don't we try and migrate our database so first let me clear this out I think we have to do MPX Prisma generate okay that's been generated and now we want to migrate it so we'll have to do MPX Prisma migrate Dev hyphen hyphen name in it so enter hopefully this doesn't break no it's broken what's wrong with that let me just have a quick look oh I think I see what the problem is this port number shouldn't be 6543 it should be five four three two so let's save that and now let's try it again let's just clear this out and then again MPX Prisma migrate Dev hyphen hyphen name and net now let's wait yep it looks like the migration is successful this time awesome so let's go back into our Super Bass application and then go into where is it uh on the side table editor yes we got addresses order item orders products let's go in address is a sack yeah awesome so we go user ID name address ZIP code City Country and create that now let's go in products and see if our Cedar has worked no there's nothing in there yet so let's try and Seed our data let's do MPX Prisma deed enter and what is this that I are in a wrong command let's have a look so package.json Prisma seed oh this will probably be npm run prismac let's try that clear this out and then npm run Prisma deed no let me just have a look what does this say so Prisma DBC okay copy that and let's do MPX Prisma DB seed that is running awesome and there we go the seed command has been executed so now we can close this and let's go back into our Super Bass let's refresh product ah there we go there is all of our products awesome so we got title description URL price and created app beautiful okay so now we've got that we can actually start making this application Dynamic so let's get rid of all this we don't need this schema open anymore and let's start in the where should we go Pages index page let's start there well actually a better idea why don't we do this um we make all of the API endpoints and stuff for the entire application because I think there's about six or seven so we can get them all done we won't do the stripe one we'll leave that until last so we do all the stripe stuff together and then um we can just go through the application each page and drop in what we need though awesome okay so for now close all of these pages so on any other mess close all this on the side close this Prisma and we're going to make a new folder called server and then inside server a new folder called API and then inside API another new folder and I just call this folder Prisma and now let's make our first end point so new file this is going to be get all products.js and we need to import Prisma client and then assign that to Prisma then under that we're going to say event default Define event handler needs to be an async and also put in Event open this up and this is going to be pretty straightforward the first line is going to be Prisma products and then find many which is all of them and then we're just going to return all the products like that and that is this endpoint done save it and let's open the side panel next we can just duplicate this get all products JS file and rename this to create order.js and all of this stuff in the top is fine we're going to need that for all of them and for this we're going to have to get the body because it's going to be a post so inside this drop in await read body and then pass the event and then get the body in this cons and we can just get rid of this and what we're going to do first is say const order equals await Prisma orders create and then open this up we want data and then inside this order we're going to create we need to put in all the things to fill our table so we have a user ID stripe ID name address ZIP code city and Country and depending on how many items this order has we also need to update our order item table so underneath this create function we're going to do another that is going to be body dot products dot for each and we're going to pass all the products in and then we're going to say async prod for product open that up and then again we want to create but this time it's not orders it's order item and then open that up and the same thing again we've got data and we're going to pass in the order ID and the product ID and make sure that is in side number so we force it to a number an INT sorry and then at the very bottom we're just going to return order like that save that that is that one done awesome on the side panel let's copy create order and this one is going to be add address dot JS and in add address we don't need this body products for each Loop we can get rid of that and if we scroll up we need this read body again and instead of Prisma orders we're going to put Prisma addresses because the table is addresses and inside data all we need to do is remove stripe ID we don't need that and every anything else we need and make sure on this one the zip code you put a uppercase C because on the front I've saved it as an uppercase I should have changed it before I started but I forgot so make sure that is like that uppercase C and zip code and save that okay awesome next we want to create a older this time so new folder and for this we'll say update address and then inside it we want new file which is going to be ID dot JS like that and again in this we want our Prisma stuff at the top so get our client and we also want all of this to find event handler stuff with the body inside it and because this is an update we're going to say punched res equals await Prisma addresses update and then we can open that up and we want to update by ID so we're going to say where ID equals event context params ID and make sure you wrap it in numbers because in our database it's set as an INT so an integer and then underneath this way we want to say data and we want to update the name address ZIP code city and Country just like that and finally at the end of this just return res just like that awesome and that is that one done so next we're going to have one that is a new folder again we're going to say search by name and then inside our new file dot JS and make sure that's an ID and in this update address I'm just gonna copy this file and then go into search by Name ID paste that in and we're going to make a couple of changes here so remove everything inside there let's get rid of this return for now and I'm going to start with let items equals await Prisma products find many and then find many we'll open that like so and because this is going to be the search so for our search bar at the top to look for products we want to maximum take five and we also want to say where title contains the search string ID that we pass into it and mode is insensitive then we want to return all the items that fit that awesome save that let's open the sidebar again new folder this one is going to be get product by ID and inside this we want a new file that is id.js and we want to import Prisma again and then under this we want to Define event handler like that and this is pretty straightforward all we want to say is Prisma products find first where the ID is equal to the ID we're passing like that and then all we do is return product like that awesome save now next new folder this is going to be get all orders by user and then inside that we want a new file which again is going to be ID dot JS and put in the Prisma stuff at the top and then Define event handler like so now in this we want to say a weight Prisma orders find many open them up and we have a where on this as well so we will say where user ID equals the user ID we're passing we want to order this by ID descending so we want to get the last one first and because this is an order and the order has order items with it so we also get that relationship we do that by including so we say include order item and then include product and put it to true so this this is how you join it all together so include order item you get in all the order items and then on order item we have a relationship with product so we include product and we set that to true and if we just jump into Prisma SEC just so we can remind ourselves we have orders order item there and on order item we have order and product with our relations right there order ID and ID product ID and ID and then on products we have order item so all three of these are connected and then we access them by doing this awesome now finally at the end just return orders and save nice right last one this one is going to be a new folder and we're going to say get address by user and then inside our new file because this also needs to be an ID dot JS and this one's nice and easy make sure you add the Prisma stuff at the top Define event handler like so and then all we put in this is a weight Prisma addresses find first and then the way is user ID and we're getting this address by user ID and then we return it and that's it so save that and that is all of our API endpoints apart from the stripe stuff done so what we can do now is actually go and hook some of this up so why don't we start with going into pages and we'll just start from the top down let's go in Item ID and let's see what we have to do so inside this we have an on before Mount and then we're going to open this up make sure we close it like that we also need to add a variable and that's going to be let product equals ref null then we're going to get product.value and then do a weight use fetch open this up use back ticks and then we say API Prisma get product by ID and then pass the root Dot params.id and that root dot params ID is if we go into items in the front the root param ID for this is number two so you go back to the code and we update a couple of things that we need though so this current image and images.value I'm going to remove that for now and I'm actually going to take it out of the mounted and just have watch effect like that format that now inside this I'm going to put if product dot value is not null and product value dot data is not null we want to get the product data URL assign it to the current image we want to do the same again with the images dot value zero index and set is loading to false and what we can also do is go down and we have this price computed which just returns a hard-coded string we can also do that so if you get rid of this for now and we do exactly the same we put that if statement with product value and product value data we want to return the data price divided by a hundred so we get the decimal place and if there's nothing just return nothing so 0.00 in a string and finally if we scroll down we've got this add to cart which is alert we're just going to change that for userstore.card push so we're pushing the product through the cards awesome save that now we want to go through our template to make sure everything in this is as it should be and there's the first bit line 26 we got this V if to true that actually needs to be product and product data so if that exists this title needs to be dynamic so product data title and then description section we're going to change for product data description awesome let's keep having a look I think all of this is actually done so let's save it and let's go to this page anime hard refresh nothing coming through let's inspect go in the console or network let's refresh that now what is this 500 fetch tool and in preview what is this invalid Prisma products find first uh let me just try and go into application and clear site data and add reload and empty the cache just to double check let's go to console while it's loading Network yeah okay there's a little arrow let me just figure out what this is maybe for example if I try to regenerate MPX Prisma generate let's try that so that is successful now let's try clear this out and do MPX Prisma migrate reset and let's have a look are you sure you want to reset your database yes now that is seeding okay okay the seed has been executed let's jump back into the front and give it a refresh and see what's happening no okay I'm gonna have to figure out what is wrong with this and yeah I figured out what the problem was so I went into my terminal and I stopped the application opened the new window in the terminal close the old one and then did npm run Dev so it opens up on the same Local Host with the same port and then it recompiled and it worked so the end file probably didn't compile properly but now it is working so just rerun your site with npm run Dev and it should work make sure that the port is three thousand awesome and there you can see we've got our little item so if I close this inspect window and if I change the url from item 4 to item uh eight there we can see we've got item eight awesome and that is been assigned to the first one in the image array and then if we go to the second one we have all these different ones like so and maybe I think we can add it to the cart now so if I press add to cart that did add but it hasn't been displayed in the checkout section up yeah the number is still zero so let's just continue to make this application Dynamic so let's go back in the code and close the end now um what are we in ID for items we don't need that anymore so let's go into the next page down which is is address and let's close the side panel and if you go into our scripts section now let's add in what we need those so in this watch effect we need to assign the current address if there is one so just above this we're going to say current address dot value and make sure the watch effect is async and then we have a weight use Fetch and then the end point is API Prisma get addressed by user and then we have user value ID now we don't actually have a user yet that is going to be the next page when we do auth so we'll add it in now so when we finish the auth stuff this page will actually work so at the top of this in under user store if I just add user equals use super bass user and let's go back to the watch effect and underneath we're going to say if current address value data has something in it so it is an empty so there is an address we want to assign all of that to all of these variables so contact name address ZIP code city and country so how we do that is very simple we just do this like that so current address dot value data name equals contact name and then addresses address ZIP code ZIP code city and country country and just at the end of this we're going to say is updated is equal to True awesome right let's scroll down a bit and we got this submit function with all of these if else statements in there and after this if all of this is successful we're going to go and do an if is updated dot value open that up and then we want to say await use fetch open that and make sure we got these back ticks and for this we want to say API Prisma update address and we want to pass the current address ID and then after this if we put a little comma and open this up inside this we're gonna have to specify the method and this is a patch and then the body we want the pass is going to be the user ID so the current user who's logged in the name address ZIP code City and Country just like that and then after that after the await once that is completed we're going to say is working is equal to false and then we want to redirect to the checkout so navigate to checkout just like that and if we don't enter this if statement is update after that we're gonna do a weight use Fetch and then API Prisma add address and open that up and the same thing again this is going to be a method of post and the body is exactly the same as it was in this one awesome and we can also grab this section he is working and the return and just put it after this await just like that so save that and now let's go up into our template section and let's go through this so all of this seems to be okay yeah I think it is I think this page then is done so awesome let's save this and now let's go on the side panel and we can do our all start view so now we're you'll have a user we can work with so let's bring all this back in the stuff we commented out like that and all of our template should be fine for this so now what we have to do is go into Google and GitHub and set up our sign-in stuff so let's go back to the browser let's open this up a bit I'm going to say console.cloud.google.com and if you don't have a Google Cloud account you're gonna have to create one for this and you can see I've already got my Super Bass Google off that I made before so if I make a new one and I click this drop down at the top and I say new project I'm going to call this Super Bass Google auth 2 and organization that doesn't matter create and that is created up there we can see awesome that is done now let's select project cool we are now on Super Bass Google Earth 2. now let's go into this menu section and we need to go into apis and services all auth consent screen and user type we're going to have external create app name is Aliexpress clone 2 user support email I'll just use this one the app domain for this is going to be HTTP localhost 3000 and at the bottom we have this developer contact information I'll just add in one and then I'll press save and continue and all of this page is fine I'm going to save and continue and test users I don't know if I actually need this let me save and continue and there's auth consent screen let's have a look at all this I think it's good let's go back to dashboard okay awesome now let's go and do credentials and we want to create credentials oauth client ID application type is web application web client one is fine and then we got this authorized JavaScript origin so I'm going to add a URL first one is going to be HTTP localhost and I'm going to copy that and add another one and just in case put HTTP localhost colon 3000 with the port number as well and then the authorized redirect we're gonna have to go into Super Bass and get it so let's go in our Super Bass project and if we go in set project settings on the side let's go down no it's not there on the side what's this API oh no sorry actually go on the side and in this authentication we have providers so go in there and we need to find Google and there we can see the redirect URL so let's copy that go back into this create auth and the authorize redirect URLs we need to add that in down there so paste it in and now let's create awesome now we've got our client ID copy it go back into super base paste that in there back to Google get the secret and paste that into client secret and then Google enabled make sure we got that turned on and now we want to save that so we have Googled enabled now and let's see if that actually works so let's go back to our application go to account login and what happened there use super bass client is not defined ah because at the beginning I commented it out in next so let's go to the next config and here let's bring it back in save it go back to our project there we go now we're in auth so if I just make this a bit smaller let me open the inspect window console just to see if we have any errors and inside auth this user I'm going to dump out so this watch effect comment that I have to SEC go to the top and anywhere in the page jump out user and then we'll see if we get something if we log in so let's try it let's refresh just in case and now if we press Google something's happening okay I'll press this one and I think that was successful let me go to forward slash auth yes there is my user okay let's close that you can see it right there there is my user id the uuid so Google is working perfect now let's quickly do GitHub so for GitHub we go to github.com forward slash settings forward slash developers and you can see I have one already AliExpress clone let's new oauth app application name AliExpress clone two like that home page URL localhost 3000. we've got this application description which is we don't need it and the authorization callback URL so let's jump into Super Bass and let's find GitHub right there let's open that we have this redirect URL so let's copy it go back into GitHub drop that in and then register application and there we go done so we got a client ID let's copy that back into Super Bass client ID and let's get our client secret so generate the new client secret password you're gonna have to put that in and there's the client secret so copy it and then go back to Super Bass and put that in client secret now we're going to save it and I forgot to enable that so make sure we hit that button and then save again awesome so GitHub enabled so is Google go back into localhost and open this I am just going to inspect go into network no sorry application and I'm gonna clear out my site data clear all that out and then empty cash and hard reload there we go so now to end console and click GitHub there we go authorize AliExpress clone 2 authorize domix Dev and there we go we get redirected let's just go into forward slash auth so we can see the object and there it is awesome so both of our logins are working right let me just clear this out again so go into application and just clear this site data again empty caching hard reload now I'm going to close this inspect window I'll make it a bit smaller and go back on our code now we can get rid of this user get rid of that go to the bottom and this watch effect let's put it back in So if we're logged in we don't come back to this auth page because there's no point because we're logged in now let's move on to the next one which is going to be check out and let's start from our script so in this we need to add again the Super Bass user so add that in user is use super bass user right underneath this is processing we're going to say on before Mount and then open this I like so and from the user all we're going to get the check out and we're going to say if checkout.length is less than one so it's empty we then want to say navigate back to the shopping cart because there's no need to come to the checkout if you have nothing in it awesome save it then under this we're going to assign a total value on the format so nothing basically and then let's say if user is logged in open that up we want to do pretty much the same as we did before we want to get the current address so if we add that in that's going to look like that so we have current address dot value and make sure you've got it in this as a ref and then await use Fetch and the endpoint API Prisma get addressed by user and then the user.value ID which is the uuid and once that is done all I'm going to do after that is put a little set timeout and I'm going to put is loading to false at 200 milliseconds later right save under this on before mount we want a little watch effect like so and this is pretty simple we're just going to say if the full path equals checkout so if it is this page and there is no user we want to send them to auth to log in and that is that bit done let's have a look to see what else there is to do uh the rest is okay the rest is all the stripe stuff so actually at the bottom we got this products we can actually get rid of this now so get rid of products and let's go up to the top to our template and let's go through this bit by bit so I can see this VF false that should be if there's a current address and current address.data display this we also have this the contact name stuff so the address stuff that's not test that should be current address data name this next one should be address next is going to be zip code the next one is City and the last one is country like that awesome let's keep scrolling through now this product in products products is not going to be that it's going to be userstore.checkout so save that and I think the rest of this for now is fine because the rest is all the stripe stuff so we save that that is the checkout done what is the next page Index this is very easy so all we have to do for this we can delete all the products get rid of that we need to import our Pina store so the user stuff we're going to have a little variable that's called products and then we want an on before Mount and let's open that up and we're going to say products.value is equal to a weight use Fetch and the end point is API Prisma get all products awesome and finally just a little set timeout that says is loading the false and a thousand milliseconds so a second save it and that page is done so let's actually jump through the index page we can click this AliExpress logo and we don't see anything let's inspect go into Network give it a refresh and it is get yeah it is getting all the products why is that not um displaying oh because products dot data that's why right save that let's have a look let's give it a refresh yes there we go look at that oh awesome let's close that there's all of our products from the database how awesome is that so now if we click one of these let's click this Lighthouse item 11 there's our little Lighthouse Lighthouse it says there awesome coming together right next let's do another page so what's next shopping cart okay and I think we did actually do most of this earlier there is a couple of things missing so underneath this use user store we need the user again so use super bass user and all of these functions look good we still have these products at the bottom so we can delete that get rid of it okay let's scroll up to the very top and this vif needs to be if length is nothing then we display this because this is the empty cart logo and we have another if here so V if true that should be if there is no user so if it's null and then there should be a VLS yeah there's one there beautiful and then what else we got the shopping cart zero that should be dynamic that should be user Store card length um what else this V4 so products is going to be userstore.cart let's keep going all of this looks okay yeah this looks pretty good so I think this is done and save that awesome so that shopping cart then so now we need to do the main layout so let's go in layout main layout and there is a couple of things we haven't added into this so we need this for our search bar so this bit at the top we want to be able to put something in and then see what products there are so let's do that we're going to add two things underneath the user store we're going to add client equals use super based client and then user is use super bass user and then we're going to add one more variable that's going to be items and the ref is going to be null now under this we're going to say const search by name and we're going to use debounce so this is low Dash and if you remember if I go back into the next config we have next low Dash right there so now it's available for us to use in the entire application so let's go back to main layout we're going to say async open that up and what we want to do is say that so is searching will be set to true so the is search is the little loathing bit in the top of the search bar so that will show we will then search for the item based on the text we've put in through the input and then once we've returned all the items we then stop the loading spinner and we can't forget because this is a debounce we only want to send the request after 100 milliseconds of no typing so save that and then finally a last watch and we're going to say watch search items value and then async and if the search item is nothing so if there's nothing in the input we want to set the items to nothing so the drop down uh gets hidden and also the loader we want to set the false and then return it but if there is something in there we want to search by name so call this function up there so if I save that and now if I go into our application I give it a quick refresh just in case let's see if we can actually search so if I put in car loader right there and no it's not displaying we probably need to mess with our template let's go up to the top and go through this because I've probably put in something that is hard coded that shouldn't be there so let me go through and have a quick check there is a if true there on line 52 that shouldn't be true that should be if there is no user and also there under my orders we've got a VF true that should be if there is a user and we want to say at click client auth sign out because this is a sign out button and then we have this VF online 123 so that is wrong we need to replace that with all of this so if items and items data isn't null display it then Loop through it and then in this tool the item one needs to be item.id and make sure we put a colon in front of two like that and then scroll down a bit more this image The Source this needs to be item URL make sure there's a colon in front of that as well and then this testing becomes item.title and this hard-coded price becomes item price divided by 100 awesome okay let's keep going and see if there's anything else yeah right there on line 169 we have a zero that shouldn't be a zero that is counting our card so that should be cart dot length like that and if you keep going all of this that's okay and that is it that is the end of our template so let's save that let's go back into this oh it's working you can see it already awesome so now if I go back nothing closes if I put in oil we've got barrel of oil now let's do I don't know L brown leather bag let's click it and then we go to the page with brown leather bag let's add the card oh yes there we go one there now what if we go and click on the card that is in our cart awesome and we delete this out yep beautiful so this this is starting to work very nicely we click AliExpress and we come back to the main page very good let's click on one of these let's click on this computer add to cart got him up there what about if we go into this account let's log in let's try it with Google uh log in with one of these users um let's go to account yes logged in awesome because now we're displaying sign out so that is very good now let's add another item to our cart let's add these shoes add to cart we now have two items in the cart and let's select both of them and then go to checkout yes very nice and obviously this actual checkout stuff isn't going to work because we haven't done the stripe stuff yet but let's try and add a new address let's say John weeks one to three main zip code whatever let's put in that City London country United Kingdom update address that's loading and there we go look at it beautiful there is our delivery address right right there so we're not that far from the end um we might as well uh set up stripe and make that work and then save all the stripe all the stuff in our database so yeah next let's do that right stripe in the browser open a new tab and I'm going to go to stripe.com there we go and I'm going to sign in if you don't have an account you'll have to make one so I'll sign in and here I have this test account and I'll make a new one for this so if I open this and I say new account let's say test account two test account two and we'll just leave the country of operation as default to the United States create then I need to put in my password and that is creating okay now test account tool right there so if we go to the top right you'll see this test mode make sure that is activated and then we're going to go into developers API keys and there I've got my publishable key so I'm going to copy that so back into our end file also open the side panel where is it n and that is the stripe PK key paste that in and then we're going to get the secret key copy it go back into the end file and drive SK key paste that in save it and now we can jump back in our checkout and let's scroll down we can do all of these functions that we need to do to make a payment so inside stripe init first thing we're going to add is this so we've got runtime config from use runtime config and then we pass that stripe PK and if we go into the side panel and look in nux.config you'll see the runtime config in the public we have our stripe PK which is linked to our environment variable right there so let's go back into checkout now under this I'm going to say let res equals await Fetch and this is going to be API stripe payment intent and we need to make uh API endpoint for this so if we just add in the rest because this is going to be a post we're posting with the body and the amount in it with total value so let's go make this end point so open the side panel go into server API and then we're going to make a new folder called dripe and then inside this stripe folder we're going to have a new file this will be called payment intent dot JS and we need to import stripe we also need to Define our event handler and then open that up like that then because this is a post and we're passing data through the body we need to read body and then put it into a constant body get the stripe object and give it the secret key that we have in our environment file and then all we're going to do is say return a weight stripe payment intents create and then open that and we're going to add three lines and that is going to be that so the amount which is going to be body amount the currency is USD and automatic payment methods which is enabled and that is it that is how we get our payment intent so now we can go back to checkout and continue through the flow now underneath this fetch we just created with the payment intent we're going to add a client secret which is from the res the result of the payment intent so res dot client secret we also want to get our bright elements and put it into this element and if we go up to our variables you can see we've got elements right there and client secret is there as well so if you go back down now we're just going to define a little bit of style so we're going to say VAR style and open this up and the first bit is going to be base font style 18 pixels so the size of the text and then another section which is invalid and the bigger font family Ariel and Sans serif color that and icon color that so that's if there's an error okay now after this style object we're going to add in this so the card and we got elements create card we don't want the postcode so hide postcode set the true and then we're passing that style object that we just made here into there now we are going to mount the card so card.mount hashtag card element and then we want to say card on change function open that up and we want to get the event and the first line is going to be document dot query selector button disabled equals event.mt and the second line we have document query selector card error dot text content equals if event error is true we pass back the error else we pass back nothing okay awesome and lastly at the very end of this function we're going to say is processing dot value is false awesome right save that and let's see if anything is starting to work out let's go into localhost let's give this a refresh and it redirected me the shopping cart let's go back into checkout let's select these and go to checkout no we still don't have anything yet why is that let me just double check actually let me go through this template a sec and double check everything's in it yeah it looks okay let's continue let's do all the functions and then we'll sort out whatever's broken at the end so next in this pay function then let's add in if there's a current address and the current address data is empty we want to show error we're going to pass this to our show error function which will be down there and then we just return so we exit and if there is an address we're going to say is processing value equals true so we're going to continue and then under that we want to say let result and then stripe confirm card payment passing the client secret that we added where is it right there that we got from our payment intent this line the Fetch and this payment method card we're going to pass the card object which again if we go up is there that is the card object and then under that we're going to say if result error draw error again this is our show error function and is processing we need to set back the false so the spinner stops else we're going to say await create order so this is the successful part so if result error if it isn't an error then we're going to create the order and we get the payment intent id and we pass this to the create order function which we're going to make in a minute and after that is done we clear the cart clear the checkout and then navigate to the success page awesome right create order and this is pretty straightforward it's just an API endpoint so if I add this in we're going to say await use Fetch and the endpoint is API Prisma create order and I'm going to open him up the method is post because we're sending data and the body is going to be that so we're passing the user ID the new stripe ID that was created from this payment all of the address details so name address ZIP code city and Country and all of the products associated with that order and if we go into this let's go to the side panel what is this API Prisma create order if we go into this API and create order we can see we've got body products there so We're looping through and we're adding each product ID to an order item that has the order ID on it so This Is How We join the order and the order items together so they're Associated by an ID so it's a one-to-many relationship awesome let's go back to checkout now that create order function is done last one show error and that is it so this is pretty straightforward first line is going to be document dot query selector card error and this card error if we scroll up you can see it right there ID card error all of this and scroll back down and if there is an error we just say error message dot text content and then we're adding our little message to that and then after four seconds we are going to set added back to nothing so four thousand milliseconds is four seconds awesome save it and let's go and take a look in our page we still don't have this running maybe I'm gonna do the same as it did before I'm going to go in the terminal I'm going to stop this open a new tab close the old one do you want to terminate running processes in this tab yes terminate and then I'm just going to say npm run Dev so we recompile everything let's go back in our browser that is loading okay let's go into our checkout let's select some items go to checkout and there it is there we go awesome right let's see if we can make a payment that should actually work so I'm going to put in the test card which is four two four two four two four two four two four three four two and then the month 12 2024 and then I'll say one two three and let's place order and I think it works we haven't made our success page yet that's very easy but let's go and do the stripe dashboard uh let's go in payment yes there it is there is a successful payment of 1 695.98 awesome and if we go into Super Bass so let's go back go to uh table editor I think yeah and then we go in orders there it is user ID bright ID and we got name address ZIP code City Country and created ads so that is successful let's have a look at the order item should have two items in this yes there we go two items associated with order number one which we just created right there order ID one awesome that is working all right so all we have to do now is create the success page display the orders we've made in the my orders page and then uh we can host our application on netlify so let's quickly go and create through new pages so first let's do a new file success Dot View and we're going to v-base this setup get rid of style don't need that we need to import main layout and let's just copy this and paste it into the div main layout and this page is super simple just a div opening we're going to add an ID of success page and the class is mt4 Max width 1200 pixels MX Auto px2 and Min height 50vh now inside that divot open this with a class of BG white with fall P6 Min height 150 pixels now we've got a little div block inside this that's going to look like that so we got class Flex item Center text XL and we've got an icon inside the name is Clarity success standard line the color is that and the size 35 and a little span underneath with payment success and the class is pl4 now finally under this div we've got a P tag that says thank you we've received your payment and the class text SM PL 50 pixels and then save that and all we're going to add in our setup in our script section is the import from pinia like that so get the user store and then underneath a little on mounted and all we're going to do is set is loading defaults after 300 milliseconds save it and the success page is done nice and easy and if we go to the browser quickly and we just ah there we go we can see it payment success I'm actually on the success page already there's no 404 anymore we actually have this page awesome so that is working cool so last one and we need a new page this is going to be a new file this is called orders dot view vbase it get rid of style and then we want to import main layout like that and let's copy this change the div and then inside this main layout we're going to say div open it up on the top we're going to add ID orders page and a class mt4 max width 1200 pixels MX Auto px2 and Min height 50vh then inside that divot let's open this up and put a class BG white widthful P6 Min height 150 pixels and then again a div block inside this that looks like that Flex item Center text XL and then icon with the name of carbon delivery the color is that and the size is 35 and little span pl4 with orders now underneath this div through another open it and open this top bit up because we're going to Loop through this we're going to say if orders and orders data loop through orders data and then we're going to spit that out inside this div so let's go down to the script a sec and just get everything that we need so we need to import all the pinia stuff so all the users store stuff like that we also need the logged in user so use super bass user create a variable to hold our orders in and then we're going to say on before Mount we're going to call this API endpoint that we've created so get all orders by user plus the user ID the logged in user and then get all those orders and assign them to this orders variable and then lastly we want to say on minded open this up and then say if there is no user navigate to auth and if there is a user just afterwards we want to set is loading to false like that so save that and if we scroll back up to our template we can Now display all the orders inside of this div so first do another div and we're going to add a class border B py1 and then we got a little P tag with drive by D and then the order stripe ID then I'm gonna have a div with a little space and then underneath that div and we're going to do a for Loop so order dot all the item and then we're getting each item and inside this we've got a little next link open this and also open the top bit and now on this we're going to add a class of flex item Center 3 P1 hover underline and hovertex blue 500 and the two so when we click this link we are going to go to items and the actual product Item ID and then inside this we're going to display the actual item image and what it's called and we're going to do that by doing that so we've got an image that is with 40 and then in the source we're passing the product URL so the image and then this is the title and that is it so after this nux link final a bit go down one div open this up and we're going to add in a div with a class P2 and pb5 and this is all the delivery address stuff so we got delivery address and then name address ZIP code city and Country and then from that we're going to go down two divs one two open this and we're gonna have a little VLS and put a class on this that says Flex item Center justify Center and this is you have no order history so you've never made a purchase awesome save it and now now we go into our browser and we go up to the top with accounts and we go in my orders we should actually see our order we just made so let's click or others yes there it is there is our order we add a Macbook and some shoes this was our address and this is our stripe ID right there and we can double check that let's copy the stripe ID copy let's go back into stripe and let's search for it there it is right there succeeded and that is actually that one so yeah this is working perfectly awesome and actually I did forget there's a middleware in this so um if we just quickly open the side panel and we create a new folder called middleware and then inside it we want a new file that is auth.js I'm just going to drop this in because there's not much so it's going to be that we're going to export default Define next root middleware the from and the two and then we've got our logged in user from Super Bass and then we're going to say if there's no user so if a user isn't logged in and the full path is equal to checkout we want to return to the auth page because we want to log in before we go to the checkout page now before I started this project I forgot kind of to refactor this I should have put some of the redirects that I've done in the individual pages into a um a middleware so if you want you can refactor some of the redirect stuff in the pages but I mean it still works so you can leave it but um yeah just I did forget to do that but anyway let's just add in this middleware where it needs to be and the only place I've got this is in uh Pages checkout so if we just scroll up and above all the variables just drop this in as defined page meta middle way auth and then save that yeah again if you want to refactor and maybe take like this stuff here and put it into uh a new middleware there's others on other Pages as well like on auth.view we've got that on a watch effect I mean it does work you can leave it there but if you want to put it into a middleware just give it a refactor right anyway now we are ready to host it on netlify so what we're going to have to do is push this project to a GitHub repository so let's go to GitHub and I'm going to go in the top right I'm going to say new repository and then say AliExpress clone two I'm gonna put two because I've already got an AliExpress clone and then description and all that we don't really need it I'm going to put this as private you'll probably want to put it as public if you want to show people your work and they're going to say create repository and now we have to go through the these steps so if I just zoom in a little bit and I put this over the side like that let's go back into our code close the side panel open up the terminal right first we want to say get a net after that get add all then I'm going to copy and paste this in because I'm lazy so get commit M first message put that in then git Branch M main I'm going to call it Master because I like it more and then copy that and we're going to paste this in so get remote ad origin and the repository we want it so mine is going to be AliExpress clone 2 and then we're going to get push to origin and mine is not main it's master so push and that looks like it's been successful so if I refresh this yeah there is our project awesome very good right now let's go into netlify so netlify.com and I'm going to log in because I already have an account and you can see the old site that I've put right there but we want a new site and I think what I'll actually do is just delete the old site so let's see how to delete that for the site settings a scroll at the bottom there we go delete this site I'll copy that paste it into there delete and that is gone awesome now let's import from git GitHub and I only have one repository in this which is the old one I think I have to configure netlify to allow other domains yeah so this repository access if I go select repositories and AliExpress clone 2 let's add that in and I might as well remove the old one and then save that okay awesome now let's go into that and the owner is me Branch master and base directory I think I can leave that as it is build command is fine and the publish directory is disk I think that's fine so let's deploy site site deploying in progress and we can see production deploys it's building let's go inside and another lock go a deploy log and that is running through now it's deploying site and deploy success okay once let's get started let's click that it says on this there's a 500 let's go into this and there is our endpoint at the top let's click that base URL is required okay so we just need to add our environment variables so let's go and netify again and watch this site settings uh environment variables add a variable add a single variable okay let's add them in so go into our code go on the side panel end and let's get the stripe Keys let's copy that first one go back in this example key and then let's get the value copy that paste it in then create now let's add another now the secret key copy that paste it in and then let's get the actual value put that down the bottom in there create variable there's two now we need our super base URL so add a variable like that and let's get the actual URL so let's copy that and paste that in there create a variable now let's get the key copy add a single variable paste that in and then copy this massive key copy paste it in create so there's four one left database URL copy that add a variable paste that in and then let's grab all of this copy and then paste it in create awesome and now if we scroll to the top and go back to uh site overview let's go back into that and then what is this options clear cache and retry with latest Branch commit let's click that that is now rebuilding when we go in and actually see what it's doing so let's have a look at the deploy log and that is going through and there we go finished processing build request right there so now if we scroll up and let's go back and then click our endpoint nearly what is this let's refresh let's have a look in our respect window console nothing Network let's have a look in there let's refresh um what is this get all products there's a 500 and we have a little message here what is this Prisma has detected that this project was built on netlify CI which caches dependencies this leads to an outdated Prisma client because prisoners Auto generation isn't triggered to fix this make sure to run Prisma generate command during the build process okay and then it gives us a little URL at the end let's have a look at that uh let's scroll down what does this say netify's UI build script field in the build command build and deploy okay so we need to add MPX Prisma generate let's go back into this where's the site overview let's go into this so site overview site settings build and deploy and we'll be looking for build settings there's build settings build command that's what we're looking for edit settings so in this we need to add MPX Prisma generate and npm run build let's try that let's save and now let's scroll to the top and then site overview let's go back into our site options clear cache and retry with latest Branch command let's try it that is starting up when we click on that to see what's going on I'm looking the deploy log that is going through and I can see there that it's installed Prisma in this section so that looks like it's worked and there we go finish processing let's go back to our site close the side inspect and let's refresh oh there we go look at it there's all our items amazing so now we go on account log in this appears do all of you working and if we log in now remember we need to change change our domains inside our providers because it's set to localhost so if we do that if we go back into Google we're in credentials I think we need to go into web client and you can see there we go localhost we don't want that we want our new domain so we're going to take this copy it go back into Google and the second one we can delete and this first one we're going to change to our new domain name so now let's save that okay we also need to do that in GitHub so let's go back to GitHub and we can see it there home page URL localhost 3000 we want to change that for our netlify endpoint now let's update application let's just double check yeah that is saved awesome right let's go back to our page refresh and let's see if this has worked let's go Google okay let's log in no it hasn't worked yet it's still as localhost so let's go back and give this a refresh right now we're back in our netify domain maybe if we try GitHub let's try that now that also redirects to localhost as well why is that oh because we have to change it in um Super Bass okay so let's go into Super Bass settings what's this API oh no sorry actually it's authentication URL configuration and there it is see site URL we don't want that we want to go back to our netify URL so let's grab that copy it go back to Super Bass and then paste that in there like that and then save it now let's give it a try go back to this let's give it a refresh first and then go to account login Google I'll log in with one of these and there we go we've been redirected back to our netlify site account we are logged in you can see it there because it says sign out let's go to my orders we can see we've got our orders there awesome so now let's try and add something to our cart this loader is low loading that shouldn't be doing that we'll fix that in a minute let's have a search does that work yeah or if I go back to nothing okay let's go back to the home page yeah this loader is a little bit messed up it doesn't matter for now so we know now that our search bar is working let's add one of these to our cart so add to cart that is working we can see one there so another one oil olive oil add to cart let's go to cart and let's select both of these check out we have our delivery address already let's add a card number we're gonna add the dummy one four three four two month 12 24 and then CVC one two three place order payment successful Let's do an account my orders and we've got a little barrel of oil awesome let's try another one let's do brown leather bag add to cart and then let's do another one school box add that to cart we have two again select both check out and now if we try and place order without a cards your card number is incomplete so let's add that in 12 24 123 place order payment successful my orders and there we go there is our orders brown leather bag and school box awesome so it looks like this is working let's sign out a sec okay we've signed out awesome let's go back to the main page and let's actually just sign out to SEC so sign out okay and then let's go back to login register and let's try GitHub this time so let's press GitHub yeah awesome account my orders beautiful so GitHub login is working and let me try and fix this loading icon because that is really annoying me okay in main layout what I'm just going to do is say on minded and in this I'm just gonna put it's searching value to true so when the component loads it doesn't show the loading icon so let's save that and if we open our terminal and we then push this so get add all get commit and I'll just say update and then enter and then get Posh okay that is pushed and if we go into netlify where is netifier so many tabs open there we go and we go back into the main section we can see now that that is building let's open that and that is now deploying again okay finished processing build let's go back to our site and let's refresh and there we go now you can see that that has stopped very good because that was really annoying me so now let's do it again go to AliExpress we've got all of our products here let's pick another one what's this this Guitar let's pick that add to cart now let's search let's say for a t see what comes up dinner table lovely add the card let's add one more let's put in Carl again old car add to cart now we have three items in our cart let's go there let's see if we can delete one let's delete the dinner table yep that is gone now let's add add guitar and old car and we're gonna go to check out and there we go now let's try and place this order so add a card number put in four two four two and then 12 24 1 2 3 place order payment successful let's go to my orders and we're missing one item from there what is he doing now let me go in the code go and check out let's have a look because it's clearing out maybe it's clearing out and it's a waiting okay okay you might have to do some refactoring with this so for now I'm just going to copy this and you probably shouldn't do this in production because you'll get some results that you don't want but I'm just going to put it in the set timeout for now just so it delays long enough to save it but um yeah you shouldn't do this in production just to let you know but let's save that I am going to push this again so get ad get permit update and then get push and that should send through to our netify deploy let's go back to the main section okay we can see that is building let's go in that deploy log and that is finished so let's go back into the app back to the front give it a refresh and let's add some things into our cart so let's add these shoes add to cart let's find the car old car add to cart and then get the oil and then add that to cart so we have three items let's go select all of them check out now let's put in our card details so all the photos like that and then 12 24 1 2 3 place order payment successful let's go to account my orders and there we go now we have the orders okay so you will have to do some slight refactoring for this because in some instances the cart gets cleared out before all the orders get put through so you're gonna have to return from the API a response that says the orders are complete and you can continue with clearing out the card so I'll leave that for you to do because if you've gone through all of this you'll have a good understanding how this works anyway but yeah that is pretty much all of it done we have all our products we can search for a product we can sign in and out we have all of our orders we can go into our cart section there's no items in there at the moment let's add this broken car add the cart go into checkout got all that in there we have to select and then go to checkout we have validation to place order your card number is incomplete and if you don't have a delivery address it will say you need to have a delivery address so this is pretty much done and quickly as a final check if I change to full camera we can see now I've got it on the phone so it is working you can scroll through all that and then let's press the little menu oh beautiful because sign in and register let's sign in Google and then I'll pick the top one awesome that is logged in now if I pick anything and then we add this to cart that is added let's go back into the menu we got one in cart let's go into it we need to select it so select it check out and then we need to add our card details our quickly add that in okay I've added that in so now let's place order awesome payment successful go into the menu my orders and there is our order the old book we beautiful awesome so that is all working

Channel: John Weeks Dev

Views: 39,236

Keywords: vue js, vue 3, laravel, laravel sanctum, laravel spa authentication, laravel authentication, laravel api, laravel api tutorial, tailwind css tutorial, axios, axios interceptors, pinia nuxt 3, pinia vue 3, pinia vue 3 authentication, php, javascript, intervention image, intervention image laravel, tiktok clone, tiktok clone app, file upload in php, build a tiktok clone, linktree, linktree clone, camera javascript, digitalocean, hosting, javascript camera, nuxt 3, nuxt js, vue, nuxt

Id: dVcCRFVhz74

Length: 158min 27sec (9507 seconds)

Published: Mon May 01 2023