🔴 Let’s build Walmart with NEXT.JS 14! (Intercepting & Parallel Routes, Oxylabs, Shadcn, Zustand)

what is going on Papa fam it's your boy Papa react and I am back with a banger the Walmart clone nextjs 14 today and we're doing two things which I've never done on the channel before next js14 parallel routes and intercepting routes so this is some this is some complex stuff going on right now guys let me know where you're watching from right now I can see you guys blowing up the chat right now we're going to go ahead and dive into a demo in just a second somebody goes I'm just just here for zand that's all good dude we've got react nextjs oxy laabs Shad CN typescript zand to CSS and obviously we're going to be deploying to Vel so tons of stuff to learn in today's video let me know where you're watching from right now and we're going to go ahead and jump into a quick demo of the application that you're going to build today my goal is 2 hours we're going to go ahead and crush this one paple fans in World Wide levels let's go ahead and jump into today's video the Walmart 2.0 clone thank you guys check it out boom here we go fully responsive oh there we go sier Leon Pakistan AB Czech Republic India Sri Lanka UK America what's up guys good to see you in the house let's go ahead and Dive Right In we just hit 100 viewers live right now which is sick welcome to the stream this is the Walmart 2.0 clone so first things first we've got oh look at this Mr Frank is in the house can't wait for sunny Martin rjs there we go it's going to be your next JS dude but look at this guys we've got a fully responsive clown now I want to show a couple of really big things in this right so first things first we are scraping data live data from the actual Walmart website right we're using oxy laab to do it so if I go ahead and click into shop wardrobe you can see it scraping from the oxy laab server so this is absolutely incredible you're going to learn how to build your own web scraper deploy it and go ahead and do the exact same thing so this is actually scraping data so look at that guys actually went ahead and scraped the data you saw the loading state so next js4 we're doing all the latest and greatest stuff and let's go ahead and click into one for example so if I go ahead and click into this right now no idea what that is but if we click it you firstly saw there was a loading indicator if we go ahead and click into another product with all the information there we go look at this guys we've got beautiful carousels look at this just absolutely stunning and I want to show you something look at this lovely table so we're utilizing a bunch of different components from Shaden so you're going to learn how to do all of those things and of course as I always do it is fully responsive you can see here for yourself now here's the interesting part we have intercepting and parallel Roots if you don't know what that is um it's a really really cool Concept in next year so not only has your boy gone ahead and helped you out with the dynamic add to carart button so look what happens when I click add to car boom I can add items to my cart and I can go ahead and remove them and it's all Dynamic so you're going to learn how to do all of this it's persistent so even if I refresh you will see that I still have three items in my basket if I go up to the top I've got five items I added a couple before if I go ahead and click this now boom now I want to show you something now this notice how the URL changed to for/ basket now if I this is called a soft trans a soft navigation now if I was to refresh or directly go to the basket page let's go ahead and refresh look what happens we hit this page so if I was to ever share this link with anyone and hit the for/ basket page they see this however if you're navigating the website you want to click on the basket and go back see how we've got the same route handling two different interactions that's so powerful guys so if you know sometimes you don't want to throw them outside of a different window so now we're going to go ahead and show you how you can go ahead and do this and you see how it's seamlessly layers on top absolutely incredible stuff right I'm going to show you how to do all of this how to go ahead and you know handle the basket functionality anything get rid of things perfectly summs it all up and of course we can go ahead and search for items as well if we type in Adidas for example this will great results for Adidas and of course in this build I've utilized all of the best caching techniques all of the greatest things that we can go ahead and use in XJ is being used in this build so I'm going to go ahead and break it down a little bit more for you guys so you can get an idea of how this done firstly this is not possible without the guy overall oxy laabs so thanks to our sponsor today oxy laabs for this integration so in this case they're handling all the SP all of the scraping and if you don't know who Ox laabs are they're actually offering 30% off right now and they are literally the industry leading web scraping solution and and they have the world's largest ethical proxy Pole now all that means essentially is it's just a bunch of computers which pretend they're humans they go ahead and scrape websites and they basically provide an API that makes the whole thing so easy to go ahead and access they are the only ones who ethically propagate and scrape data responsibly they have the biggest proxy pool that I've ever come across they've got over 100 million different proxies that they use to go ahead and scrape data for you they've got 24/7 customer support and honestly I've used them a bunch whenever I get stuck they go ahead and sort me out right they've got a ton of different options for scrapers they've got the e-commerce scraper API which is what we're using us today to scrape things like Walmart and it actually returns structured data so we don't get this nasty HTML document that we don't we then have to manually go ahead and figure out what's going on it gives it all back structured so it makes it so simple they've got a bunch of others called the Ser API web scrape API and even have a real estate API so lots of stuff to go ahead and use here a few things I want to mention you can gather data from some of the top 50 online marketplaces for example here we have Amazon AliExpress Best Buy eBay Etsy Google shopping Home Depot and the list goes on and on and on they have Global coverage no matter where you are in the world you can go ahead and use it right now and you can retrieve that high quality data in not minutes but seconds so you saw how when I went ahead and refreshed it it went ahead and searched for it and that was so fast if I refresh as well you can go ahead and see yourself it's going to scrape the results right now I'm doing a nextjs developer mode render so it's not caching but as you can see it works perfectly as I want it right so if you're interested in going ahead and saying up your own scraper then head over to the first link in the description to get yourself 30% off all you need to use is the promo code proxy 30 claim your deal and get started with oxy laabs today okay so I'm going to dive through how to use them how to get everything done and we're going to go ahead and Crush today's Bo guys we just hit over 200 people tuning in I'm going to go ahead and quickly address some of the comments in the section right now we've got uh sier Leon we've got Gaza we've got loads of people in the house Kenya Iran UK Egypt in the house Nairobi Kenya loads of in the house it's absolutely awesome and welcome to the stream everyone Frank is always an OG here so guys this is absolutely incredible I'm going to answer a couple of questions as we get in we've got arum beautiful hello how you doing and yeah guys we're going to absolutely smash it today so first thing as I mentioned we've got nextjs parallel routs now you probably don't even know what the hell this is because it's fairly new and there's a lot of things that you need to learn about to before you get this working so I'm going to go ahead and break it down extremely simple but effectively you can go ahead and render sub parts of the page in the same directory or the same URL so I'm going to make it so easy to understand this by the end of this video but you're going to be able to go into your workplace and show them that you can use parallel roots and intercepting Roots which give you the functionality that I showed you earlier which is this functionality so you can go ahead and not I want you to observe the URL here if we go ahead and click the basket boom it changed the for/ basket and then you can go ahead and see it right here but if I was to refresh you can now see the basket here so the same URL two different types of functionality I don't think you understand how powerful that is so we're going to go ahead and build all of that out and I'm going to make sure at the end of this video you're going to be like mind blown I'm going to do that in every single build from now on okay so so without further Ado I think we should jump into it I'm going to have a quick little water break before we jump into this someone goes Sunny please do a multivendor e-commerce platform with next js14 done I've already got that in the pipeline and yeah guys we've got so much fun content coming I've got literally huge collaborations with Microsoft and a bunch of other people coming so your boy is coming out with some fire content so do not worry guys I'm going to go ahead and jump into it right now so first things first I want you to go ahead and set up your desktop now as I mentioned in all of my builds if any of this is you know overly confusing if any of this becomes across like I don't know or I'm too dumb to do any of this firstly no you're not right you're perfectly in the right place if you need support or you want to you don't have the developer skill to understand what the hell is going on then that's why we've created zero to full stack hero you can go to the second link in the description Pap a react /our and we will literally take you from zero skill all the way up until getting your first job and helping you go senior past that point so no joke we've completely tailor made this for students to absolutely succeed from zero all the way to being a full stack hero right so literally means you Landing your first job you becoming Junior mid senior devs and absolutely crushing it we've got students who are absolutely killing it in our community go ahead and chat to some we've got Gwen in the in the chat right now so all of us Papa fans literally tune in to our videos as well but I highly recommend you at least go check it out check out the video for yourself see some of our students and join in if you find anything in today's video hard because we cover all of this stuff including intercepting and parallel rootes before I even touch it on YouTube so there's so many things that we go ahead and cover so keep on going so as I mentioned before guys you can sign up free for oxylabs as well so make sure you get this signed up so we can go ahead and start the build together this is live somebody asked right so first things first I want you to open up what so open up your War browser or terminal it really does not matter and I want you to go ahead and do the following so I'm going to go ahead and use I always like to CD into my documents my builds folder and uh right now yes we are getting started with the build I'm going to go ahead and change the music up as well cuz we want to get a little bit more focused kind of bring the energy down so that way we can get into a bit of a flow State and we can go ahead and code now I am using something called create next oops I'm going to use create next app latest and as you can see I use this a bunch we're gonna say Walmart clone and I'm going to call it YouTube okay now what I want to pay attention to is create next app at latest this will use the latest template available from next CHS to go ahead and build our project out okay so this means that we basically will go ahead and answer a couple of questions in the terminal and then it will give us a perfect starter template so this is why I I always start my projects with this and it goes ahead and helps us out somebody says what's the IDE name this is just WP so it's basically just a fancy terminal okay now I'm going to hit enter and you're going to get a bunch of different questions so the first question we're going to get is would you like to use typescript yes everything here actually I'm going to hit enter Because I want the defaults for the entire setup okay so all of this is good right now I'm reading some of your chat in the meantime somebody goes I really love your project series love from India thank you so much we've actually got a lot of new series coming um so that way we can go ahead and break it down into some smaller videos as well because I know that a lot of you want to see smaller more broken down videos and more concise sort of breakdown so yeah you do not need this terminal by the way the warp terminal you can use the regular terminal and Windows you can use whatever you need to use okay so at this point we've also got a massive amount of viewers tuning in today so smash the like button if you're watching And subscribe if you haven't already because this is going to absolutely help the video push out to as many people as possible let's go ahead and go into our Walmart clone so CD wmart clone and I want to do- YouTube there we go and I'm going to type in code dot now a lot of you always ask me or drop a comment in the in the sort of comment section saying Sunny the code dot doesn't work for me okay so if that code dot does not work for you I need you to do is go into your vs code go ahead and do control command shift p and I want you to type in code okay and what you'll see is install code insiders Command impath right now you'll see install code command in paath I use the beta version hence mine is code insiders right but once you do that you just have to close your terminal restart your terminal and that's how you do it okay so at this point we've got everything working here now I do want to mention a quick little breakdown of this this is not as simple as it looks guys this is actually actually a full grid UI so right here I just kind of briefly ran over that whoa Frank goes intercepting roots and parallel roots are absolutely magical and will make your next J skills Skyrocket pay close attention Papa Fam thank you so much for the $5 donation Frank I appreciate you always so you can see this little grid here and notice how this grid absolutely changes and also how it's spanning different levels so you see how this is a different size this is a different size but it's still using up the full length even this right here how do you do that I'm going to teach you how to do it all today and I'm going to teach you how to make it full responsive so look at that how the images resize everything you know that these are the sort of things which you could spend ages on and I'm going to sell them for you in like a few minutes today so it's going to make it so easy you're absolutely going to love this after we're done with it okay now what I've done is I've taken a project approach now what I mean by this is what I'm going to do is I'm going to cut my Local Host right now so I've cut it so I've not got anything running okay and imagine we were we had a design team and the design team came to us and said okay here's our designs so we've got our first design our loading screen our second design for the results we've got the basket we've also got the basket um you know the popup with the parallel intercepting routs so in this case what I'm now going to do is go ahead and build from these designs the reason why I do this is because I want you to go ahead and understand how it works in the production environment this is what we do in Z full stacko so I want you to get an ideal like for like situation so we know how to go ahead and build from the examples that a designer might give us whether it's figma whether it's sketch whatever it is that's how we go ahead and work okay so first things first we're going to start up our template app so Marios yo what's up you go hi there Papa fam long time seeing you tonight truly missed out on truly missed all of us thank you so much D I appreciate you so we're going to do command J output hide this one hide that one and here you're going to go ahead and type in mpm run Dev okay and this will start up your clone on Local Host 3000 you can see I'm using next CH 14.1 so obviously as I mentioned earlier this is an xjs 14 clone okay so we got the latest and greatest stuff today to make sure that you're always ahead of the curve okay so now what I need you to do guys we got a good amount of viewers this is good right so I want you to go into your page. TSX and this is where we're going to get everything started off now I'm going to prepare my window so you guys can actually see what's going on so I'm going to go ahead and take my local host from this window pop it over there I'm going to go ahead and Chuck it there now I'm going to restart my server there we go as I'm going to go to the page sorry and you should get this this is a great starting template right so in this case we don't want to do that this is a great starting template so at this point command B and I want you to go ahead I'm going to make my text a little bit bigger so you guys can understand what's going on and here I'm going to go ahead and delete everything from Main downwards so we've only got Main and then inside of main I'm going to get rid of the class name get rid of the image and I'm simply going to type in H1 let's build a Walmart clone okay and as you can see let's build a Walmart clone now you can see it's black the background I don't want a black background so if we go to the layout. TSX file I just want to hint here that everything from the children is actually whoa is Shan meta thank you for the donation he goes thank you for all the hard work sunny I landed interviews after watching your videos thank you so much lots of love from fad harana India J screenshot that that is absolutely awesome and we've also got Morocco in the house thank you for the donation uh meta I really really appreciate you as you can see here we've got the layout Farm now I want to showcase something the layout file in next year's 13 upward basically is responsible for whatever is positioned in beneath it so let's consider this children element and this is important because it's going to basically lay the foundation for the parallel Roots part later on so you can see right here if I go ahead and just full screen this basically imagine this is our root layout okay so everything is based off of this layout now we're going to go ahead and imagine that this children element right here is rendered so I'm going to get my squiggly line is is rendering our page. TSX so basically imagine that the children get just gets replaced with whatever is inside the return statement in page. TSX okay so that's all we're going to essentially go ahead and do oh I've got this the noise coming in there we go and uh yes so we've got the page. TSX basically being popped in here so you can basically put things like a header in here and so forth and it will always get rendered out with the layout okay so this is just setting the tone for things now in here you can also mess with the metadata so here we can change the title of our page to Walmart 2.0 clone okay and so forth and you can see for example if I was to go to my website now the title of the page has changed you can change your metadata like that and I also want you to go ahead and check out the global CSS now this is actually where the black background and everything is getting affected so I want to delete all of that keep the Tailwind classes so in the template that we actually used to set up the project Tailwind was automatically installed now Tailwind if you don't know what it is simply allows us to write CSS really fast and effectively and it makes you making responsive websites a lot easier by use of something called utility classes and it includes break points so basically what does this all mean it means that we can write a simple little statement for example text- r-500 and it basically gives us a red bit of text with the 500 and the 500 can depict on how light or dark it can be so if it's 100 all the way to 900 you basically get the lightest color at 100 to the darkest shade at 900 and everything in between so that will go ahead and translate to CSS and basically just makes us able to write our CSS a lot faster Okay so what you need that I haven't mentioned yet as well if you go to your extensions make sure you install the tail1 CSS intellisense extension here okay this is very important this will give you all these little Auto completes you see this PG red blah blah blah right so it allows you to basically go ahead and get that nice intense so somebody said why don't use butn instead of know because I'm trying to make it honestly as easily accessible to many people as possible now if you are enjoying this stream already remember do not forget to like this video if you're watching right now I'm going to pause it like the video right now and comment it down below and then let's go okay let's carry on cuz how many people are watching they not like the videos right so in this case let's jump back into it so we got the page now what I like to do in any of my builds if you know I like to go ahead and actually Mark things out so first things first inside the layout I'm going to create a header because that's what we basically have in our design over here this header component okay so this header is my first pull of focus so let's go ahead and do that to get warmed up so I want to go ahead and close my app inside the package Json level I'm going to create a folder called components now everything by default in xjs 13 up so in this case we're obviously in xjs 14 is a server component so we're also going to learn about server components there and how they work now inside of the components folder it's no different everything is a server component off the bat we're going to type in header. TSX okay and then in here I'm going to use something called a snippet now Snippets if you don't have them go to the extension Marketplace and type in react Redux I think it's react Redux your Snippets yeah and you want to get this one es7 react Redux Snippets I swear to God I am the reason why this is 10 million downloads because I've told so many people to download this thing okay so in this case I remember when I first started it was like a million downloads but download this extension is really good okay now once you have it you can do this RFC boom and then you basically get your template written out for you for the function so I'm going to go ahead and close this out so you guys can see our folder structure as well and we're going to delete that as well okay now in this case this just renders a plain header we head over to our page again so this page right here and and sorry the layout and now what I'm going to do is I'm going to basically import my component here just like so and I'm going to dool space bar and you can see we import our components header now as you can see the header is uh is basically pulled into it now the good thing about this is the header as you can see like this is going to get rendered every time because it's part of the root layout so we will never have to worry about where does the header get lay um rendered and so forth right it will always get rendered out now because it's part of the layout the children will will just simply get rendered in based on which screen we're in okay so that's great now we're going to go ahead and customize our header the way we need to it firstly for SEO purposes we're going to change our syntax to be header that way you know web scrapers know that we're actually using a header and before I dive any further we're going to go ahead and install something called Shad Cen so Shad Cen is responsible for a lot of the beautiful designs and again we do cover this in Zer to4 stack hero but I want you to go to Shaden um ui. shen.com and you will get to this page now it's not a component Library it's basically a collection of reusable components you can copy and paste into your apps and they make it so effective and easy to go ahead and do this again smash that like button if you're enjoying the content and you're learning something new first things first head over to installation and we are using nextjs so we're going to Simply click that now we've already set up our project so now all you need to do is MPX shadan latest and nit you want to copy that head down back over to your project and now as you can see I've got my server running on one so I like to go ahead and create a split terminal to have the next sort of you know screen I'll close this up a bit and I basically just keep that one very small so I can see if an error happens in my server but I can go ahead and run any other command over on this side and I always find that helps me out a little bit with sort of you know making sure that I don't make a mistake on um on on what I'm doing so I can always see if an error goes wrong now they will ask us a bunch of questions I'm going to keep all of the defaults you can feel free to customize it as you wish and yes you will get errors as it's installing it's completely fine okay so that's great we've done that now now you can go ahead and carry on with dark mode a few extra things but we're not going to focus too much on that I'm going to Simply show you how we can for example pull in let's say a button component so everything is based off the CDN so MPX Shad TN latest add button copy that head over to our terminal and go ahead and pop that in like so okay now once you pop that in you will be able to see the following it just says done so we can do command and for example if I want that button now inside of my header we can simply import it but you see what really happened is it simply went ahead and in made a UI folder and added the button to my library and why I love this so much is because it's not abstracted away from us like it's not some hidden component that I can never really customize or understand what's going on everything is built from tailn CSS and it simply shows me so you can customize it to your heart's contempt because all it's essentially done is effectively copied and pasted the code into our project so you can really just look at it and mess around with it and do whatever you want to do with it you can see all the variants and everything that is supported and so forth but we're going to keep it simple for now I'm just going to go ahead and demonstrate that if I was to Simply put a button and I can import from UI button so you see how it's coming from UI button and we simply say for example signin you can see I get the beautiful signin button at the top okay so I'm demonstrating this that way we can move faster after this and if I type in variant now you will now see I got a bunch of different variants such as outline we've got ghost I've even got ghost which is quite a cool one and you can see we've got a few different things even secondary and we even have destructive for like a warning so this is why it's really handy to use something like shadzi and it really speeds up our development process and it's going to help us get this build done as fast as possible okay and I really do recommend it in production apps as well it's great okay so first things first we're going to go ahead and pop in our let's go ahead and just get our designs back up we're going to get our Walmart you know um Logo put up okay so let's do this okay so Manish says can you show your package Jason at the end of the stream if you remind me at the end of the stream I will definitely do so in fact I will show you right now there you go you can see it for yourself that's the dependencies that we have you can pause the video see for yourself that's a very good question as well right so let's do that right now because I know some of you might have different versions and so forth so we're going to actually wrap that image inside of something called a nextjs link tag okay so this is going to have the link inside of it and it's simply going to go to the homepage when you click it okay so this would just say go home for example and when I click it it will simply root me home I'm already on the homepage so it doesn't do anything okay now inside of here we're going to use something called a image nextjs image tag okay not a normal image tag but an xjs image tag because it optimiz it basically optimizes the rendering of that now inside of here we're going to give it a couple of values in this case I've already helped us out a little bit Link Stop opy right.com XSI this is a basically a short URL for the Walmart logo and then here you can see this is basically just not I don't know why it says that it's just a logo uh and then width and height of 150 I don't want to keep it that big okay now if I go ahead and hit save we should get an error there you go now the reason why we get an error firstly if you don't understand the image component I have a beautiful video explaining the whole thing it will probably be somewhere around the screen now so Jay can add that in once it's going to go ahead and get um dropped on this like once this video is released basically it will go ahead and get added very shortly afterwards but you can go ahead and head over to my channel and uh check out the image component s literally just said please create a video for the image component I already have one on the channel simply type in next JS image component Sunny s on YouTube and you will find it okay now in this case we're going to go ahead and show you so the image component tries to optimize the images whenever we use them so it has a very nice like optimization step now the problem is you have to basically say what is safe and what is not safe so we have to actually add in the domain that we basically say okay these domains are safe and these ones are not now if you ever forget what's going on it will come up with an error and I simply want you to click on the error right here okay and it will take you to this page and it will actually give you the code that you require so if you head over to your next config you'll go to this screen I simply need you to go inside here and add in the images remote patterns so I'm going to go ahead and copy that now now for the remote patterns in our case we don't care about too much the pth name or the port instead we're just going to copy and change these two values over here to become links. rea.com and this will need a refresh of the server so as you can see here it says found a change in nextjs config restarting the server to apply the changes and if we go back to our page now and we refresh we should see that a Walmart logo is successfully rendered on the page okay so in that case Oops I did not get a nice logo uh I think I've actually put the wrong logo in maybe um let me just go ahead and double check what I've done there and we have the first part of debugging I always love this part okay so what we're going to do is I'm going to go ahead and get that logo for us I just want to see if I've actually got this logo up yeah I have got a logo there so a bit strange um in fact what we can do sometimes is we can go ahead and clear our cache let's see boom and uh okay bad request for the image that's interesting let's go ahead and do a uh K cash Network okay that's fine so what we'll do is for now I'm going to just carry on with the build and we can pull that image when I get it back afterwards in fact it should come in if it doesn't come in I can simply get another Walmart logo absolutely fine not an issue um but in this case that's cool for now uh we can change that afterwards to fix it okay so I can get another one J if you can get me a Walmart logo that would be absolutely amazing I'm going to drop you a link and you can go ahead and share me a a shortened links ata.com link of a new logo which matches that one thank you right it has to be a transparent background okay so what we're going to do is we're going to carry on so basically I assume that this is that link okay and I'm going to go ahead and style it accordingly and then I'll change the link afterwards to fix it now I'm going to go ahead and actually Center that link uh actually what we'll do is we'll we'll handle this one afterwards because I want to show you the effect that I do but afterwards we're going to go ahead and build out the form so this form right here so the Search Everything form that you see right here okay what's going on with that that's very strange okay um yeah there we go so this form right here that you see we're going to build that so over at this point we're going to type in form and we don't want the action that's not what we want what I want to do now is I want to have a input field and a button so an input field and a button and yes you can absolutely use uh whatever you like in terms of uh you can use Shad CM buttons If you want here but I'm going to go ahead and custom style this we're actually only going to use a search logo that's the only thing I care about really here and I will show you so we're importing so when you created when you actually set up um Shaden it actually set up lucd react which is a icon Library so I've gone ahead and imported a bunch of icons and you can see here these are the icons that we were eventually be using one of the which is called search now this one simply going to go ahead and pop it like in like so I'm going to style it accordingly so I'm going to pop in class name and here I'm just going to say PX of four so one minute let me sorry rounded four I'm going to give it a height and width of um height of 10 sorry and I'm just going to pop it in in for now so you can see it there you go so you can see right now very like hard to see but I'm going to actually make this a bit easier I'm going to give this a placeholder called Search Everything search search everything okay great um Jay you've given me without the actual Walmart so you need to fix that please okay so in this case search everything there dot dot dot okay so in this case now we've got to search everything and uh in the form I'm going to style it so it's a bit Central so in this case we're going to say flex and you can see it goes in line I want to do item Center when it gets bigger and then I'm going to say BG white BG white and then I'm going to say rounded full W4 to make it a full width and I'm going to say Flex one as well because Flex one because I'm going to make this overall container to be a flex container and then I want this to use up as much space as it possibly can okay and then inside the input fil build I need to basically say that that then needs to expand its space so over here I need to say Flex one like this okay perfect and now you can see it uses up as majority of space it can as opposed to this one now I've got a Walmart logo so I'm going to go back here and Swap this one out boom like so and let's see if that one worked as well there we go okay so I've got my Walmart logo fixed thank you so much Jay perfect right so we've got the Walmart logo great we've got the Search Everything great okay now everything's a bit squished up so we're going to fix that as well but for the we're going to go ahead and say background and I actually want to use a Walmart color now we can't just use Walmart color because it's not set up obviously it's not by default there so what I can actually do here is if I go over here and I type in in my tailing config you'll see that we've got this extend and I highly recommend you do this step after you set up Shad CN because Shad CN actually modifies this file so we actually need to go ahead and do that okay now we're about to hit 200 likes as well keep smashing that like button let's get it to 1,000 for this video guys so at this point on the um extend what I want to do is I want to go to my Tailwind so I'm already in Tailwind sorry and inside of colors I'm going to Simply pop in Walmart okay Walmart like so and I've got my color code here for Walmart which I'm going to go and pop in in a second like this and what's so cool about this guys is what I've just done is I've extended the uh t intellisense for tailn CSS and now when I type in like text wmart or BG wmart it will go ahead and work the way we expect it so if I Ty in you see Walmart perfect and I go ahead and do this bam look at that guys now Jay I do actually need the uh Walmart logo with a white background if possible so if you can get me a white background that would be amazing okay um for the text itself so it has to be white text okay so if you can do that in the meantime that will help me out a lot so in this case now you can guys can see imagine the Walmart logo is there it's going to be a white background like that and then we're going to going to basically handle things so for the input field I've got the following so give me one second I'm going to say padding on the x-axis cuz you can see it's touching the Side Bar I don't like it padding X of four there we go and I'm going to go ahead and say rounded on the left side four outline none right now the outline when I basically type in so when I go ahead and do this you can see there we go now there's no blue outline ring which is annoying so once we've got that there you go and then we're going to say placeholder I want to make the placeholder text a bit smaller so placeholder text small there we go boom now you can see the placeholder text gets a little bit smaller which looks a bit cleaner and neater now for this button I'm going to style it a little bit different I'm simply going to go ahead and say oops I'm not going to put it there I'm going to put in the search button itself rounded height there we go and then I'm going to say padding X of two width of 10 okay so there you go you can see it's it's a little bit more padded out nicely and I'm just going to make my screen a little bit bigger as well I can't actually see anything and then we're going to say background yellow and I'm going to give it a cursor pointer so in this case background yellow and per cursor pointer there we go boom and as you can see that's a lot cleaner so that is a lot more on par with our design I don't believe I've actually done uh the placeholder correctly if we do this as extra small yeah you can see it gets a bit smaller so we did do it correctly there we go now that's great I want to pad out the um header a little bit more cuz it's just very hard to see what's going on we're actually going to say padding X on the xaxis of 10 and padding on the y axis of 7 and that will give us a lot more Breathing Room you can see there you go okay now also the logo as which is touching this is not ideal so we're going to say space between our x uh items so space between the X items of five and as you can see it just pushes apart our items so this actually helps us out a lot okay so somebody goes you're looking at already written code in the other screen and typing 100% % I am I am definitely doing that because you can't believe you can't expect a streamer to be building it on a live stream from scratch and try and get it done in two hours so chill my dude Marios got a go I'll be sure to check it out thank you so much dude and badija stay in your lane dude okay so at this point uh we're going to go ahead and actually I'll handle the responsiveness afterwards of that as well um one second I'm going to go Okay so at this point uh we need to Jay it needs to be a white background please like the text needs to be white thank you all right so after that we're going to go ahead and add in the department services and all of this stuff as well um so after the form here and also I'm going to make this a type submit button okay there we go now strangely as well it's a bit annoying that my original logo was not working uh so if we try it one more time yeah you can see it's not working it's very strange okay which is absolutely fine we can do it afterwards so after that inside outside the form we're going to have a div and inside the div we're going to have a few link so I'm going to pop quickly pop in an example of what we're going to do here so that way we can save a bit of time so we've got a link which just simply goes to the homepage for now I'm not going to set it up just actually go to a Department's page but you can see these are these are hidden on a phone so as you can see these are mobile first rules so if I was to get rid of this rule right now and just say Flex okay you can see it's always there right it's always actually on the uh on the screen now even on a small screen it's there so if you want to go ahead and make it responsive you can actually go ahead and do the following you say hidden cuz everything will by default applied to mobile first and then what you can go ahead and do is set up a break point so on a um extra large device and above I want it to be uh flexed so I want it to show so now you can see it's hidden and then when it hits an extra large screen only then will it pop in okay so you see how that works right so that's called Break points and that helps us out a lot okay now the top you can see when we actually had that it's not actually straight everything's not aligned so what we're actually going to do is make it centrally aligned by saying items Center and now you can see everything is centrally aligned okay so this is how you want to do it you really don't want to go ahead and do things like that um so at this point boom we're going to go ahead and do I love the pap fam absolutely awesome the defense jumps in um so that's great and then we've got a few more so I've got one which is the services so it's go and pop this in we got another one which is services so there you go and actually right now they're all going to be stacked up on top of each other and I'm going to have uh the third one as well for my item so again nothing special happening here it's just going to be for the same things over and over again same thing for the account and then I've got one more for the basket as well right now I'm going to pause on the basket but right now you can see look I've basically set up a little bit of a different rule so I always want to show the um reorder my items and the sign in accordingly um so in this case you can see but they're all just stacked up it doesn't look nice right so basically the surrounding div that I basically put these containers in if I put make that Flex you see they're automatically put into a row so that's a lot nicer I'm going to do space on the x-axis of five padding of five uh I'm going to do a padding bottom of zero and you can see everything starts to get a bit more space now that does not look like I want it um and on the medium screen and above I'm doing padding of zero Okay the reason why I will show you in a second is because let's go back here so I've actually screwed this up a little bit one second so we actually want it to be one second yeah so let's keep it like this for now that's absolutely fine yeah that's good for now and basically on a mobile view I actually want to have it so this drops underneath right I want to have it so this drops underneath and uh basically there we go yeah so it needs to drop underneath so this basically will be a bit more responsive and so forth so let's go ahead and do that um Jay where is that image at it's taking so long to get that image okay so at this point now we're going to go ahead and change it at the top of my file so I'm going to say Flex column by default on a mobile okay so Flex column now you see that is what I wanted I want it to be Flex column by default yeah then um what we actually want to do here is for the above link so for this link right here I want to give it a margin bottom of five when it's on a mobile view but when it gets to a medium screen or above I'm want to remove the margin okay so that way we get rid of that margin once it goes onto a bigger screen okay um okay one second guys yes so that's perfect so at this point now we can go ahead and you see it's not it's not uh changing back into the full screen view so I need to go ahead and say when I hit the medium screen Flex row okay so there we go that's much better perfect so you can see how we tend to do things like this right we're going to do the same principle for the bottom uh div over here so for the bottom div we're going to go ahead and do this we're going to say um I've done it a bit different on my screen but I'm actually going to change it a little bit cuz I don't like the way I've done it I'm going to say margin top of five on a mobile view and then on the medium screen and above we simply remove the margin top so same principle here and as you can see now as we go into a bigger screen there we go and you see how the departments and services simply is hidden what I would recommend in a production build is all you have to Simply go ahead and do is go and um basically create a sidebar so a slide out sidebar that's the optimal way to go ahead and get that done yeah perfect stuff okay perfect stuff and then we've got the final thing which is going to be the basket okay so for the basket I'm simply going to copy this again except this time I'm going to have a shopping cart here so shopping SP C size 20 and instead of the uh you know saying a sign in here this for now I'm just going to go ahead and say uh like for example no items and then we're going to have a total here which is going to be static for now I'm just going to say something like $0 right perfect now you can see no items 0 so that's perfect for now great okay so that's what you want to do initially uh in big in the beginning we've got this right here so you can see um it's going to be the logo and then we've got everything looking great and then this right here so I actually want to go ahead and have it when I type in and hit enter it takes me to the for/ search screen so what we're going to do is whenever you need interactivity inside of a server component you need to go ahead and introduce State now the problem is with server components you don't have a window object because it's rendered on the server so when you're doing any sort of you know interactive work you need to go ahead and actually convert it to a client component so I'll show you how to do that right now so we're actually going to convert this header to a client component by saying use client at the top of the file okay that's perfect and then what we're going to do is now this is being rendered on the client not the server okay uh perfect stuff code dude says that's amazing stuff great stuff um also Jay mod the chat please all right and then that's perfect okay cool uh also the chat yeah you need to relax a little bit there you go okay so that's perfect um okay so I want to do I've converted to a client component and then I'm going to go ahead and create a piece of State actually rather than a piece of State even you can use something called a um you can either use a reference to point to the form over here or we can simply use the submit form to go ahead and get the typing uh the the text everything there as well so at this point I want to go ahead and create a handle submit function for the form okay so at this point form for the form I'm going to go and say on submit and we're going to do the following I'm going to say handle submit okay and I'm going to create a handle submit function over here so I'm going to say const handle submit and this is going to be an arrow function now with any submit function you actually have a handle that gets passed in so you get something called an event so we're going to short hand this to e and then basically the way to get this event if you don't know what it is and I show this sometimes in my builds is if you create an arrow here and you hover over it it will actually show you a form event HTML form elements you copy that you can get rid of this very nice little trick you pop it in here and you simply import the form event and there we get the perfect type definitions Zafar says is this live or Premier it's live absolutely live okay so at this point what I want you to do is I'm going to say e. prevent default so this actually stops the page from refreshing because we're now going to tell the web browser how to handle this interactive element okay so that's perfect and then we're going to go ahead and get the input so why don't I when here I can go ahead and type in the input somebody says why not convert just the search form into client rather than the whole top bar yes you can 100% do that I would 100% recommend you do that as I mentioned before there's so many ways to work this way I'm trying to do just a demo to my the best of my ability for the time given but yes I would recommend you just convert the search component very good question thank you for saying it okay um okay uh Jay you need to short on that link I did not realize that it would be so difficult to get J to handle that it's it's incredible okay so at this point now if I want to go ahead and type in I need to get the input and I need to get the basically whatever value I put in here so again you can use ref you can use a state uh in this instance I'm actually going to use something called e so e do current Target so current Target do input. value now here the input itself is from the form that we submitted right so in this one here but I actually need to go ahead and give that form a name so that way it knows where to get it from so if we go to our form here and I say name is input this needs to correlate to whatever I'm doing there okay so in this case okay I'm just going to do it myself because it's j taking way too long dude so in this case I've got an imga right I'm going to go ahead and short on this link um over here so boom I'm actually going to go ahead and copy this right now give me one second guys I'm doing a shortened URL and okay so I can't actually create the link at the moment which is interesting so at this point now what I'm actually going to do I'm going to Simply allow for imga to basically be popped into it so at this yeah some reason it's not letting me do a new link so I'm basically just I've created a link over there and this is going to complain so I'm going to Wi wh list this imga is fine we can just debug this and handle this accordingly we're going to go to our next config and I'm going to land in the following I'm going say protocall for the host name I'm going to give this one imga there you go refresh my server and there you go perfect stuff okay and now we should be able to see that pop in so we've got Walmart at the top Happy Days okay so this point it's all good okay Andre says don't be mean struggling I'm the one on the live stream I'm trying to do the the build as well so I was just asking for a very simple task okay so at this point anyway we need to root the user to the appropriate location okay so I'm going to go ahead and say const I need a router basically and I get the router from the next rout so this case you have to be very careful here okay so when you want to go ahead and get the router to direct the user to a different page make sure you do it from next navigation okay there we go next navigation now here once we've got this we say say router do push SL and we say search and I'm simply going to append a query program with Q being the input okay so we got Q being the input so in this case if I go ahead and do this you can see if I type in for example Adidas and I hit enter now so when I hit enter you should see in the search bar it will go ahead and take me to for/ search with the Q Addidas and obviously we haven't build that page yet yeah so so this case uh right now you can go and do that and you can see it takes me to Qs if I type in test uh okay so why is it why is it white okay so in this case if I go back over there and I go to my text and I'm going to say text black there we go boom uh it shouldn't be here we go okay some reason it was making it text black so now you can see it works perfectly so if we are in the home screen and I type in for example computer it will take me to search computer okay and then we can build that screen as we need to later perfect stuff now the only other thing we need to do is the basket okay so for the final link down below I'm going to go ahead and say here where we have the basket I'm just going to say take me to for/ basket page and I'll handle all of the core interactivity afterwards for now if I click on for/ basket you see how it takes me just to the basket page okay so that is the header done okay so the header is perfect there we're almost about to smash 200 likes as well make sure you smash that like button let's go ahead and uh have a quick little W break okay now with that we're going to change the music a little bit cuz I'm not feeling this a bit I'm going to go ahead and find some of my old tracks again all of this is inside of the uh description you can actually get the playlist by signing up to our newsletter right for free yeah so inside of the page. TSX app okay so the first things first now we're going to build this now this grid right here I'm going to show you how we do it so I'm going to go into my um let's do it right here give me one second we're going to go into and I'm going to pick the pace up so we've got a nice s of Flow State going on no distractions nothing happening right now we're going to go ahead and actually move forward quickly with this so with the com uh page now here I'm going to basically going to have a main and this is going to have a flex container so it's actually going to be using up the full Flex actually no we're going to do afterwards that's fine I'm going simply going to have a div inside of it and I'm going to have several dra grid options now these this component we're going to build it out and eventually all it's going to have is a title a image itself so if it's going to have a title sweet gifts for left it's going to have an image itself and it's going to have a class name okay so all of these things are going to go ahead and be present and then we can go ahead and basically render out each image like so okay so I've actually gone ahead and done this very simply so I'm going to go ahead and pop it into the screen and you can feel free at this point so I'm going to cycle through and you can pause the video and just see the differences now the only differences you need to be aware of are the title and image are obviously different for each different thing and the class name so the class name is going to be for the different colors that you see BG pink BG yellow and so forth and how many columns and rows are being spanned right and also if it's going to be of a specific height right so in this case some of them are different heights and so forth so I just want you to take note of that and that's how essentially we're going to customize the different views and I'm going to create this component right now for us so inside of components I'm going to create the component grid option. TSX okay and we're going to do RFC my RFC somebody goes it looks like a masonary yes 100% dude it does that's why it's something that I've always see people wanting to build but they're not ideally sure how to build it now there were three props we passed in the title the class name and the image okay and then we've got the props the props come in here now we can either write a type different definition up here for the prop so which we can do now as well or you can do it in line it's completely your preference in this case I'm going to say title is string the class name is actually optional so you don't have to pass it in and then we've got an image which is going to be optional and it's going to be a string as well Okay so we've got this now so this now accepts the three and we're destructuring to go ahead and get the values out now very simply these are not going to be divs these are going to be link components like so and they're going to Simply take us to the following hre okay so in this case the hre is going to have the path name so it's going to have a path name I'll show you a I like to show a couple of ways how you can render things here so we got a path name and the query pram is actually going to be or so we're going to append Q so just like we did a search before but it's just going to be for the title okay so basically if I was to click on this it will take us to Q which is search and it will say shop wardrobe as the query that we'll enter right so you can either do this or you can do it like like a you know string interpolation to go ahead and do it either way just showing you different ways how you can do the same thing okay about to smash 200 likes guys let's keep on going absolutely awesome stuff now for here we're going to go ahead and change this to H2 and we're going to say title boom like so and as you can see it's not defined yet so if I go into my page and I import the component now we should be able to see there we go very great go back over to grid option I'll close that off and then I'm simply going to say if you did pass in an image okay only if you passed in an image should we render that image like so okay so I'm going to say I'm going to render out the image like this and we're going to say Source J if you can check out what's going on with rebrandly that would help me out a lot okay and then we're going we have to give image tags a o tag as well so I'm going to give that the title and we're going to say layout is going to be actually fill okay so right now we actually need to import the next image component okay and uh I'm going to say object fit is contain actually to be honest with you for now it's just that's actually obsolete right you don't actually need to do that you can actually say class name and we can say object cover here instead um so we can say opacity is going to be 20 as well cuz you see I've got this nice little opaque effect for the image at the background okay so opacity is 20 and it's going to be rounded on the corners okay now if we go ahead and refresh you can see boom all those images are flying in okay so you don't want it to look like this and the reason why it looks like this right now is because layout fill is going to be relative to the entire page so it's going to try and fill up the image for the entire page and what we want to do is tell it to be relative to the component the parent component that it's inside of so very easy to do that we simply say relative and once you do that it will now be relative to its parent container right so that's a very handy thing if you didn't know that's actually a huge sort of um you know thing to go ahead and look at now somebody says can you recommend me a course to learn web development yes 100% if you head over to papa.com I have a course which takes you all the way up until smashing it with your first job from zero scale so you can go ahead and check it out it's the second link in the description we teach you everything go ahead check out our video here we've got all of our students lots of our students giving testimonials of you know their success within the pap F why they love it and why it's the best community on the planet so go ahead and check that out for yourself okay now inside of here what I've actually done is we're actually going to use when we install Shad CN they included something called CN now all this does is it tell and it does is tell and merge so basically it merges class names together okay thank you ysh she goes I love the Disney plus CL amazing stuff and what I'm going to do here guys is I'm going to just simply import that CN function and what you can do here is you can just pass in anything that you want to combine okay so the first thing I want to do is I want to pass in relative and you see how it's the same thing okay but what I can do is I can actually then go ahead and combine the second argument which is the class name so the if you passed in a class name it would basically apply these and then it would overwrite any of the following rules with the class name that you passed in so it's like a precedent so every argument has a higher precedent than the previous okay so now if we go ahead and hit refresh that's okay and then what I want to do is actually style it so I'm going to say grid option and this is not a class that exists we're going to create a custom Tailwind class called grid option so how do we do that head over to our uh we need to go to our Styles so it's going to be inside of our uh if you go to layout. TSX you'll see globals yes it's in global. CSS now here is where I'm going to create a custom style okay now the way we do it is we say inside the components layer so at layer components and we basically say uh we say what the style is we say grid option and now we can start styling it but we have to use the apply directive before we type anything so if I say rounded medium you should be able to actually see the corners starting to round because cuz it's applying this custom uh class to everything inside you see if I do padding of five uh right now we actually haven't got anything if I say colum span okay so I actually need to say firstly height four and it's not applying this stuff so let's go to our grid option I need to hit save and now you can see what I'm trying to do y there we go that's actually much better okay now before I apply any of this I need to go ahead and prepare the grid to actually accept the things I'm trying to do so I'm actually going to show you what The Styling is here firstly so I'm going to say everything by default is column span one which isn't going to apply because we haven't set it to be a grid view yet okay and then I'm going to say give it a couple of things like hover selections so for example when you hover over it you see how it's changing the hover opacity and also there'll be a tiny little border on it as well which we can't see at the moment as well because again I haven't set things up correctly so back over in page. TSX where we render out the entire grid this is where it will all come together so what I need you to do is go ahead and we're going to basically give it a grid layout okay so let's go ahead and type in Grid and you'll see boom straight off the bat it will set everything up to be a grid column one so it's actually one column and we're saying like it should span two and so forth right so now what I can do is I can say okay on a mobile view I want it to always be grid columns one okay and you can see now that this is only breaking if I say something like you know column span two which is taking up two columns and so forth right but then on a um basically you see this little Gap here you can fix that by saying grid flow uh and then you basically want to say row dense so if it is ever space on a row it will basically populate it by basically filling it up with something else so if I go ahead and get rid of that you can see it it finds another one that it's basically can go ahead and pop it in there and then it fills it accordingly so glid flow row dense okay and if you hover over it you can actually see what it's it's doing um sorry no if you hover over you can see look it's just setting the rowse property okay boom we just flew over 200 likes absolutely awesome stuff thank you so much guys keep smashing that like button and we're going to keep on growing on this channel so if we hit a medium break point we're going to say grid columns four okay now what you'll see is as we get bigger look at that ooh lovely absolutely beautiful design and you can see what's happening here right so I've actually set all the grid stuff what you can do is you can definitely go ahead and by the way guys before I mentioned all the code is available is sunny trending in South Africa amazing stuff I love that right let's break 300 likes with that so guys if you can notice that when I go ahead and expand this it changed from a one column to a four column setup right so it's actually if you look at it 1 2 3 4 but you can see here you can see the fourth column here but because I'm spanning different things and doing different things so in this case this is spanning across two columns right this one is spanning across two columns and two rows and if we go ahead and correlate that inside of our code here you'll see look spanning across two columns and two rows right so match day this one right here is two columns two rows and you can see for Shop toys this will be two columns you see column span two and so forth so that's how we're getting that view and obviously on a mobile view it looks great as well so this is really a beautiful design and it's a really nice way of working with things when you want to go ahead and build something like this inside of your app now as you can see see everything's kind of bunched together so if we want to give it a bit of space we want you know the computer to figure out that side we just say gap of six right if we do a gap of six now now it's basically you know spaced it all out and then we want the side margin to also be six and then you get this perfect layout now look at that guys absolutely perfect that's what we want okay now if I go ahead and get rid of this and I click on shop wardrobe for example you see how right now it's just taking me to Q shop wardrobe that's because I made the mistake there if youve inside a grid option it actually need needed to be for/ search okay so if I now click here you'll see shop wardrobe will take me to search with a queue and it's the same thing as typing something in here so basically these will direct us to a search as well absolutely great Tino what is up dude absolutely awesome to see you in the house he goes looking fresh I appreciate you dude uh the retention today absolutely awesome guys you guys are sticking through and through it really really nice to see okay so I also want to change the text here to look a little bit more interesting okay so let's go ahead and do that right now and say text should be XL so let me go back here and say text should be extra large and the font should be bold boom Manish goes his builds are fresh as his haircut so I love that thank you so much I will send the love to my barber this should be uh text Xcel as well there we go Sunny does uh Jay somebody asked Jay does Sunny share his vs code exens set up in the course yes 100% I do I share everything in the course I share my entire productivity Suite how I work how I set my business up everything is in that course zero to full stack hero go ahead second link in the description join it I promise you best investment you will ever make okay so at this point now we are going to uh let's see right now yeah that's perfect so we've got this all done now that the way we wanted it so what I want to do next is the search page the search page is going to basically incorporate oxy laabs into it to allow us to search for an item now as you can see when I go into that search page we should see this where it's scraping a page and then it should go ahead and say for example if we clicked on shop wardrobe it should show us all of the Wardrobe items that we have scraped from the real Walmart okay so how the hell do we even begin to do that well I will show you right now and it's actually a lot simpler than you think first up we're going to go into our code and we're going to go into our you know our app directory and we're going to create a new route called search and this is how we do it we create a new folder called uh search there we go who is Barber is I actually shared it on my podcast guys um so if we go into the search page and then we're going to go ahead and create a page called page. TSX So This Is How We Do file based routing in next year's 13 upwards and I'm going to say search page okay I'm going to delete that now as you can see boom we have a search page perfect and because in the layout we went ahead and defined the header you can see nothing else changes except for that so if I tap in search look look at that perfect and you see what it's doing here is it's not rendering the um it's actually not rendering the um the header it just renders this section of the page so it's very efficient with nextjs right now on the search page we need to get the search parameter so if I clicked on shop electronics for example I you see here we've got for/ search and then we've got Q which is our search term and then we've got shop Electronics so how do we get access to that that well remember these are by default server components so what I can actually do here is the props come through so if I console log my props what you'll see is I get the search programs come through here okay okay so I'm just going to hide that for a second you can see look search forams Q shop Electronics again it's on the server to begin with okay so I hope this is making sense to you right now but what we need to do is destructure it so what we do is we basically go ahead and we uh I'm going to go ahead and create our type definitions here for the props and for that we can go ahead and say type props equals and this is basically I don't care about the prams I just want the search prams so here I'm going to say search prams and inside of that we've got Q which is a string boom right perfect and then if we go ahead and destructure this we can now pull out our search prams and do a further n nested destructure to get the que out and now if I say you know Q here we should see if I refresh the page shop Electronics perfect now we can use this in a call to you know uh the back end and handle things that we need to handle accordingly okay so uh oh I just realized I did something silly earlier I completely left a bit like a a testing timeout to to do something so funny okay so at this point now what we need to do is I'm going to go ahead and basically have it here so this is where we would basically say fetch the search results okay now what I want you to do guys is on the in the first link in the description you'll be able to set up your account with oxy laab so go ahead click claim your deal proxy 30 now once you've done that I need you to log into your portal and then we'll be using the documentation to go ahead and begin the scraping process so I'm going to go ahead and log into my dashboard right now so I'm actually heading into the dashboard and you can see right now where we should have access in just a second now I've got access to a bunch of products over here including the e-commerce scraper API so if I click on the e-commerce scraper API and I click on users you can see I've got my username right here now first things first is when you have your username if you go ahead and click you see that little icon over on the right you can change your password so obviously I'm not going to share my password your password will also get emailed to you so the product that you're going to need is the e-commerce scraper API and this is really important to understand that you need this because this is going to allow us to do all the scraping functionality from oxy laab so I'm going to go ahead copy my username so I'm copying that right now boom if you're wondering what that little pop over is I use something grammarly so it's just a plugin ignore it um and then there we go is this even real I was creating LinkedIn clone yes it is real this is very live and very real um destructuring just means you pull apart an object for those who don't understand why I said all right so we've gone ahead and copied that now I'm going to create my um environment variables to safely store the any sort of sensitive information so inside of your folder EMV dolo and this means that we're basically going to store some environment variables here so any you know details that we don't want to leak or anything like that we're going to do like this right so we're going to pop them in here and by default everything is unreadable so in this case if I type in super secret password for example super secret password and that would would be your password so you want to replace that with your own password and as I showed you before you get it from what I told you so you can either change your password over here or you can go ahead and get an email to you when you sign up okay um look at that someone goes I remember BND goes Dan Tina and a from the days of the 5-day build challenges sun's been here since forever honestly that's what I'm telling you guys the community is here to stay that's why it's such a GameChanger community and it really is there with you from your beginning of your journey all the way up until to you're you know you're you're progressing to senior Dev starting your own companies this is why the pup F unbeatable right now I do want to mention as well all of these by default are only readable on the server so if you tried to use any of these environment variables on a client it would not work the only way you could do that is if you typed in nextore but do not do that okay do not do that unless you're absolutely okay with exposing that environment variable they they do this for a reason because you don't want a client you know somebody on their browser to basically go ahead and inspect and see what your password is so in this case I'm going to go ahead and put my password here and close the page so I'm going to hide my screen I'm going to replace this with my actual password so I'm popping my password in and I'm closing my environment file okay so I closed my environment file and now I've got the uh the credentials that I need so now what we're going to do is create a fetch search function so if I go to the documentation and we go to the Walmart section right here so you can see the documentation there is so good their documentation honestly it really does make life easy you can see a bunch of different languages are supported and this really is all we need to go ahead and do right so here you've got the import fetch you got the username blah blah blah I'm in the nodejs example for example so this is honestly what we're going to go ahead and map it from and you can see here pass true the good thing about pass through is it returns something called structured data and it even give you the information so you see here the search page structured output this is exactly what we will get back from the structured output so you can build your type definitions from this as well as the product page so you can see for yourself exactly how it comes back and then use that to build your typescript definitions this again is why I love using oxylabs Okay so we're now going to go ahead head back over to our code and inside the lib folder I'm going to create something called the fetch search function so fetch search. TS file okay so it doesn't need to be X because we're not rendering anything out of it right so fetch search now inside of here we're simply going to have a fetch search function which takes a URL okay now the URL is going to be responsible for what we're actually going to try and scrape from Walmart okay so in this case what basically if we head back over here you can see Walmart actually has the special URL so if I go to the URL on Walmart for example and I actually go and type in something like Adidas you will see that it's it's got a very similar format for/ search uh Q Adidas okay so what we're actually doing is we're basically scraping this page for the information remember how similar my one looked look at this guys for shop wardrobe for example so if I go to shop wardrobe all right let's have a look wait a second and as you can see guys very similar output and very similar loading states to what we have here okay so in this case the Adidas one let's go ahead and uh we're going to go ahead and use this as scrape all right so let's go back to our code uh in fact what I'm going to do is I'm going to pop it back over there so this is where if you're wondering where is he getting all this code from that's where I get it from heading back over to our code we're going to go ahead and firstly get access to our oxy lab's username and password there we go Miracle goes # Papo what's up love Sunny thank you so much gani so that way this is basically remember this is running on the server so it's absolutely safe to do so I'm going to construct a new URL for the search and all this is doing you see the queue we're basically taking our URL as well so that way this URL is essentially going to be for the query parameters so really this is not the URL I think we can rename that to be the um the search term it's better I guess the search term yeah and then inside of the page what we would essentially do here is go ahead and say something along the lines of con results equals await and in uh server components we can do an async top level search and we're going to say await fetch results fetch result and Q is the search term okay now we go into our fetch search oh I like this one this a tune if you guys know this this is this is like one of the old school things all right so we got new URL and let's go ahead and do the fetch now so we're going to prepare the body of our request so if I go back over here you can see the body of the results absolutely the same I'm going to pret like basically uh access the United States version so imagine the scraper that's going onto the site is actually going it's let him have opportunity I'm not going to fire Jay don't worry I'm not absolutely not firing Jay Jay's awesome right it's just it's completely fine we're good all right so in this casee we got the United States that we're pretending to search from uh so we'll see the US version of the site and then we've got the universal e-commerce and we're going to pass the results okay and then I'm going to do the response now the response is basically from here so I'm basically copying this and using this okay so everything you're about to see being popped in is from that okay like so there we go and in fact here what we can do is um I'm actually not going to do an await here I'm actually just going to go ahead and do a then call so we actually don't need that you can do remember it's either a wait a sync or you can just do then and blah blah blah it's really down to preference here I'm going to go ahead and say when it comes back I'm going to pass the response as a bit of Json and then I'm going to go ahead and get the data out of it okay now from the data I'm going to go ahead and say if there was any results that came back we want to return the results okay so if there are any results I haven't created the type definition yet we're going to access the first set of results because what happens is here is it returns all the script information but the entire listing from the results is actually the first object that gets return back if it found it so that's why we do data. results zero and if any error occurred then we're going to go ahead and catch that result okay so we're going to catch the result like so okay now uh after all of this we're going to return the response at the end we simply return the response okay so very very simple straightforward and then what we're going to do is we're actually going to create a typings file so in this case I'm actually going to create my type definitions to protect ourselves at the top level I'm going to say typings uh actually we're going to say I'm going to create a folder actually called uh typings and inside of here I'm going to have search typings dots okay um search typing. TS boom and then inside of here here we're going to have the search result itself so so you guys can feel free I've actually done you the saved you the hard work and I've created all the typees for you so the reason why I've done this guys is basically I've gone ahead and actually looked at this and reverse engineered it to basically create the type definition so you don't have to worry about it I've actually made it easy Charming animal says would you say that your courses are suitable for a net backend if I want to learn react instead of using MVC 100% yes because I came from a Java background uh even a PHP background with mod view controllers all that stuff so I totally get you dude and I teach it in the way that is easiest in uh when it comes to reac next year so yes head over to the second link in description get the course and it's going to be an absolute win for you right so at this point we're going to go ahead and I've basically built out all the type definitions so you don't have to worry about this right so honestly at this point I'm just going to pop them on the screen so you can go ahead and copy them yourselves but if you're wondering where did you get these from as I mentioned before I reverse engineered the results and I built it for you okay so literally this is what come back and the same with the last bit for the interface for the job again this is optional if you want to have it or not again all this code is available in the GitHub repo which is available in the description I think it's the third link in the description it's available there okay so everything is is over on that side feel free again guys remember if you're watching this and you're enjoying it and you're finding any value smash the like button for the algorithm to push this out to as many people about to hit 300 likes as well okay so at this point we've got the job there we go everything on our search typings is done then we're going to go back to our thing and we're going to do result and we're going to Simply import our typings result and now if I do result dot you see I get all my the way that the data is structured I get it back which is perfect so fetch search is perfect now and we're simply going to export default fetch search that way we can use it somewhere out boom there we go uh you read comments in a quick moment back to building if someone says hi for me that's that's it for the day for me I love that so look at this fetch search let's go back over here so so now if we go to our page our search page we can import it and now this will actually go ahead and fetch the results so let's test this out guys basically if I want to go ahead and hit save now and I type in console log results what we should see here if I hit the refresh button and we're searching for shop Electronics look at this guys boom nice it returned the content the URL and it has a bunch of items inside and we even got the results it scraped it guys let's try something else let's do sweet gifts for Left For Less Valentine's Day coming up there you go right now it's actually scraping and as you can see look sweet gifts for Less a different set of results came up but it's scraping the actual site this is absolutely awesome okay so somebody says what's the extension that makes the code stuck on the top um oh yeah so I forgot to tell you as well when you're using um nextjs 13 anything above do control shift p type in typescript and I want you to click on this select typescript version and click on use workspace based version it's an awesome little hack but it basically allows you to if you ever forget to put things like use client at the top it will go ahead and enforce those rules for you so it's actually a really nice little hack to do okay now with the search page down we can actually go ahead and handle the rendering of the products okay so I'm actually going to go ahead and firstly pop out this so again we're going to Breeze through this part cuz this part's not that interesting right we've got the div we've simply got a H1 a H2 I'm going to access the results object as well so results for the Q which is our search term which we got from our uh our URL and then we can actually say total results look at that oo results for sweets for Less 10,600 results awesome stuff and then we're going to go ahead and render a unordered list okay rendering an unordered list and then inside of it I'm going to map through all of the results okay so here I'm going to say results do content do organic which is where they come through and I'm going to say map for every single product okay we're going to go ahead and basically return something okay so we're going to return a list item and then inside of here I'm going to actually return a product object now every time you map you should always give a key so in this case we're going to say product do product ID is the key but just to prove to you that this is actually there I'm going to go ahead and say something like P tag I'm say product. tile okay now look at that guys boom absolutely awesome you can see that all the products are coming in let's go ahead and try for let's say Shop toys and as you can see when I clicked it it's basically blocking it until it's ready so I'm going to show you how we can do the loading State as well to go ahead and not show that and also notice how if I go back to this one boom instant right and the reason why if I click on shop wardrobe as well now when I go back it's cashed it all so this is why it's so blazing fast with xjs because it's cashing and this kind of stuff like absolutely incredible uh the island man no no no I'm from the UK and I'm from London there we go quick little War break absolutely crushing it guys keep smashing that like button ping go I'm a three third year expert with BPM tool two months into the course I've already went from no idea what's happening to building my own clones Sunny is a good teacher I appreciate you dude J screenshot that that's awesome all right let's keep going so at this point now you can see the cashing beautiful works just as we wanted it and I want to mention as well if you go to fetch search something that I did not show you properly that we can actually go ahead when we make a fetch call in nextjs we can choose to actually set up the caching rules accordingly so over here when we had our fetch we can actually go ahead and type in next and we can handle something like revalidate and this will even do something like next J ISR so if you want to go ahead and revalidate every 60 seconds so every hour for example you can say 60 to 60 and if you want to do every day and what this will do is basically after 1 hour it will B basically pop the cache and it will go ahead and do the same thing again so basically now it's showing us the same results every single time for an hour and then after an hour the next person to go ahead and select that uh that box will basically refetch from oxy laab so what you're doing is you're using the cached information up until an hour has expired and then the next person to come on will fetch a fresh one it will cash it and then every person after that for the next hour will use the cash version and so forth this is called ISR okay and it's actually a really effective approach to optimizing and reducing the number of calls so if you think about it you're not actually exhausting your oxylabs API then because you're only making one call an hour and then you're serving the cach results Game Changer stuff obviously it's is caching based on that search term okay so the URL is uh the the fetch basically query is being fetched so if it's the same uh fetch then of course it'll be uh C from the cach okay so I love this song So now we've got for example we've got this sweet gift for left we need to basically make this look like this okay and obviously we're going to have have a scraping loading page as well so let's go ahead and do that and I've made it so easy for you guys you guys are going to love me right so we're going to go ahead and basically pass in the product here so we're going to say product we're going to create a product component and here I'm going to say product equals and we're simply just going to pass in the entire product so I'm going to go ahead and create this component inside of oh inside of my components folder so inside the components I going say product. TSX RFC create my product and inside of here remember I passed in the product so we're simply going to say product and over here we're going to go ahead and say uh let me just double check what I done so I want to get it right the first time we're going to say product and the actual type definition was organic so uh you can actually feel free to rename it if I go ahead and say product it's actually the organic typing so if I go into my organic typing is this so This is actually where I built it from in the type definitions so this is the product and now we can basically go ahead and pop it into the the the basically build out the product uh John Carlo goes yo Sunny how is it my G what's up dude I don't know if you remember but thanks to you two years ago I got my first row uh and unfortunately that company went bankrupt last year oh damn dude he goes I kept pushing and now I work for a new startup AI startup as a full stack engineer thanks Sun for all the insights and everything Pap fam dude that is what I'm saying man that is awesome Jay screenshot that amazing stuff that's the papa fam is about Gian Carlo I know who you are dude you've been here from day one this is what I'm talking about Papa fam literally is here to stay absolutely killing it really really awesome stuff guys thank you so much that's awesome man and I'm so glad that you managed to get a second job after that guys that's why zero to full that care of this is what it's about this is literally what the team is about head over to the second link in the description jump into our course that is the place to be to go ahead and learn and crush it as a developer okay so next up we're going to build up this product so I'm going to go ahead and change this to a link tag uh this is going to be a link tag as well the actual product itself is going to eventually take the user to the um the product page okay so how I do that is it's going to be the uh for/ product page the query is going to be the URL and then the actual um this is going to be product do URL there we go okay so this will be for/ product and it'll basically build this it'll say URL equals blah blah blah blah blah which is the product URL okay I'm going to go ahead and start the music again from the beginning there we go nice guys let's actually try something different today right so Jay when he edits a lot of the videos actually picks out some tracks I want to listen to his playlist this is kind of a cool different change right so let's just see what Jay's music like and you let me know right I actually really like it as well right so in this case you guys can give Jay a rating here on his music choice okay so in this case we've got the product here so I'm going to go ahead and render it in the images as well so if I go ahead and hit save um and we pull in my product here so product there we go now we should see like product product prod that's perfect right obviously it's not what we want it to say but we're going to go ahead and do this J goes let's go amazing stuff Papa fam is forever I love that that's absolutely it right so here someone says please do a man stack course literally zero to full stack hero covers man it doesn't just cover like one thing it covers man as well honestly okay this is sick all right so in this case we've got the image component Okay so we've got this boom and now here I'm going to go ahead and pop in the image product and so forth so basically check this out boom and now what we should see is it's going to complain because I need to basically Safeguard the Walmart images because obviously we're scraping from Walmart so I need to say that it's okay to to render those images out as well so let's go ahead and do that I'm going to go ahead and pop in the following these ones right here boom there we go head back over refresh the server we'll restart and then we can continue on there we go the sweet gifts for Less you can see we can start seeing some sweets uh I've got the P tag for the actual product itself um so that will be able to pop in in just a second as well so refresh look that we've got the product itself the currency the price um and then I actually want to firstly I want to start styling it as well so it's not kind of crazily flying in so I'm doing Flex Flex column relative if we've got anything absolute inside border I'm going to say round the corners off surrounded MD uh we're going to say height of full ping of five I actually really love this comment uh Baba tund says Sunny's live videos are also Serv as a keeping up with the react xgs ecosystem show in case you didn't know he works with the latest react next year stuff I'm sure you noticed that already dude I love that comment thank you so much for sharing that as well because um that is really really uh that's the truth yes I'm 100% trying to keep up with the ecosystem and I this this is exactly what I do in Zer for stack her by the way so it's all about constantly keeping you at the Forefront of the tech stack so that way you've got that edge at your workplace and you can provide more value as a developer hence pushing yourself in your field or your career right um moli says you would not want your environment variables and password to end up get up how do you handle that you basically create an environment. example file with the keys only and not the values and then when you pull it in you basically would share the values uh if from a trusted team member or use a external service yeah yeah and you would definitely make your environment files uh part of your G ignore so you do not commit or your your environment files ever okay so in this case now boom we've got this okay and then we're going to have the actual I'm going to render through the product badges as well so this is kind of interesting here so I'm actually going to import the badge from Lucid react and anything that has a kind of on sale badge so if I go ahead and type in for example Adidas let's go ahead and search for Adidas and some of these will have a badge so you can see here there's a little badge there but that's not that's not the badge I wanted actually oh J I I like the music dude this is good okay oh so it's not that badge actually it's not from lucd react it's from Shaden so we actually need to use the Shaden badge this one here oh Jay add these to the add these to my playlist this is sick okay here MPX you want to add the badge in over here and then that's the badge that we're using yes I was wondering it looked very strange so you want to pull it in from the UI badge there we go boom and now you can see look in 100 people's cards amazing stuff so look uh reduced price and so forth you see the little badges boom really nice okay oh I think Jay I think Jay's playlist is top in mine you know this is this is good Jay's making a strong comeback on this stream okay next thing you know we've got the product rating so basically what I'm going to do is I'm going to rate through and just check uh and basically just pull out a star rating based on the product rating that comes back so if there is a product rating then I'll render it out so you guys can see here boom you can also do another more extensive check if there's no ratings you can probably hide that I'm going to leave that to you guys but look at this overall absolutely nice right and it changes the grid layout accordingly beautiful stuff now if I click into any of these it will take me to the product page with the URL and you can see the URL we're going to use that eventually to scrape the product page okay so great stuff so now the only problem here is that if I was to go ahead and click something for example shop Sports you see I clicked it and there it blocks it blocks until it's ready and it's loaded the data and then it will show me the data and that's okay but it's not ideal because we want to we want to see something as a user when it's loading firstly guys also smash that like button and we're about to smash 300 likes let's keep going okay so let's go back over to the um I'm going to go into the search page and basically what you can do in xjs 13 and above so in xjs 14 obviously you can add in something called a loading. TSX page and this is what is rendered as a fullback and basically what this is doing is it implicitly will wrap our page. TSX in something called a suspense boundary from react and then basically the contents of the fullback prop is basically what we see inside the loading. TSX page I hope to God that makes sense but that is what it's doing right so here we say RFC and we simply say loading and whenever we have a blocking element on the page for example this await is a blocking element okay it will fall back to loading until it's ready and then it will show the page so this is all done through react suspense boundaries okay so in this case boom if we go over here oh J the the music is very good um so at this point search loading so what I'm going to do here is I've already styled out some loading skeletons right so in this case boom if I go to my Shaden I'm going to go down to skeleton and I need to add in a skeleton loader okay so skeleton load is awesome stuff as well boom I go down here and I pop it in like so so I've added in the skeletons and now I can simply use them where I need it so if I go ahead and hit save firstly that's good and now I'm going to go ahead and pop in the skeleton boom and I've actually done the hard work for you so I actually popped it in and I'll replace what they have here with what I have which is this so all I've done here is a div with a pading a 10 it says scraping results we won't be long and then I've basically just got a I've replicated this view okay so okay let's change that I've replicated this view so for example if I click on shop Electronics you can see like I've essentially just drawn a similar sort of use case where these items will be and you can go really really as far as you want with the extender here now let's go ahead and test this out so I need to basically go ahead and scrape for something new in order to see if this works and remember once it starts blocking we will fall back to our loading screen with that loading. TSX file so let's go ahead and give it a try let's try something like a MacBook Pro hit enter and if we don't see anything yet because okay I've actually done something wrong there let's go ahead and do it from here this page here so in this case let's type in MacBook Pro 16 in hit enter boom look at this guys scraping obviously the the side the the actual Dimension wasn't perfect there but it's almost there it's almost there right so that's that's beautiful guys absolutely incredible right and if we do it again and I type in something like let's go over here to shop Sports okay that's immediate cuz it's already Flash Deals look at this guys amazing stuff right now I believe my Gap here is actually the problem so I've got a massive gap between everything um but you can really feel free to play with it as much as you want but right now I think we're good on that front the whole point is to demonstrate to you how it's basically rendering in the loading like it's loading the results in and then wait for it boom it's ready okay so you can go ahead and really kind of change that out code font says the clear explanation Simplicity that comes with Sun's videos really amazing easy to follow and I recommend to any Dev who's willing to scale up thank you so much dude I appreciate you right so check this out so that's absolutely really really powerful stuff and it really is a game changer for now your users on sitting there on a board loading State and again once it's done it once you see how it's immediate boom like immediate boom like so far imagine your users come on your website and they see this experience like oh my goodness right and then if they see a loading screen okay it's fine they know something's happening at least they're not going to sit there and think the sight's broken and now the next person who comes on goes to shop gadgets and boom cashed like imagine they come on to your website and it's this blazing fast right this is what websites should be like but they're just not built well okay it should be that fast it should be unbelievably quick okay and Link will literally prefetch as well so the link element on uh XJ literally prefetches and it means that when you click it bam it already has the page loaded okay so a lot of good stuff here now this is real data as well yes so this is all pulling in from the actual uh Walmart so next up we have the product page so if I click on to for example let's go to Adidas Adidas and as you can see here let's go ahead and do Adidas okay and now if I go ahead and go into for example this uh t-shirt boom this one right here you can see we go to the product page but we have a 404 so I'm going to show you how we can create this and then we're going to do the basket and then we're golden okay and then we're going to do the intercepting and parallel rout so lots to happen here yeah so we're going to pretty much move pretty quickly uh juliani says sunny do you study when you're not doing live tutorials and courses how do you stay of the latest tech updates so a combination of things I study the latest and stuff that's going on inside of you know the the ecosystem as well as I actually go ahead and teach it inside of weekly coaching calls in Zer to4 stacko so honestly I show you the process of me learning and this is probably the reason why you need to be in a community like Zer second link in the description because I show The Realistic part of The Learning Journey which is most valuable because if I get stuck you see how I overcome it and that's what isn't shown in perfect YouTube tutorials or or you know udem me courses none of that stuff is shown all the you see is the perfect ending you don't see when I get stuck you don't see those things unless you you're in those weekly coaching goals that's where I'm able to dedicate the time honestly three 4 Hour coaching calls every single week where I go ahead and show you okay now we're going to learn this and I'm going to get stuck and I'm going to show you for the next two hours how I would figure this out that's where the ultimate value comes in okay that's why we do what we do and that's why zero s is the ultimate cost to be be a part of okay so perfect stuff now what we're going to do is we're going to create a new product page so let's do a product page for product we're going to have a page. TSX RFC and this is going to be the product page boom hit this and now you can see look it does no longer says a 404 because it loads the product page in perfect stuff now inside the product page we're going to go ahead and do the following so uh over here we actually have the again we remember we passed in the the URL so the same principle we get the URL from the search progams so I'm going to go ahead and do the same thing and you might be wondering you know sometimes I can destructure this and blah blah blah but in this case I like showing you all the options so that way you get a big a mix of the different things but if you're in a company I tend to basically would say stay consistent if you basically was destructuring it here then stick to that right don't don't kind of mix the two but if you want to kind of have it separated out into external props that's fine as well but we've got the URL now and then what we're going to say is we're going to say cons product equal cuse a wait so that means this is a seven component we're going to make it an as synchronous function and we're going to create just like we did for fetch search we're going to say fetch Product Where in this time we're going to pass the URL in now this fetch product you guessed it we're going to create it inside of our lib foldo and we're going to go ahead and say fetch product. TS and this essentially guys is no different to the fetch search except for the response object that will come back okay so very very um sort of similar approach here so if I go to my fetch um product page now boom fetch product we're going to create the signature boom there we go uh I've actually created product typings so again I'm going to prepare you for that so inside of the typings folder we're going to type in product typings and remember what we did last time I showed you what came back from oxy laab so if we go to the product page structured output from these results I was able to basically re build the type script definitions okay so this is awesome Julian says I hope to someday get close to your level with skill I'm a member of the course awesome stuff dude good to see you uh I've been completing a few course in scrimo to have Sol for I know you've teach it as well thank you and yes you will honestly it just takes practice that's all it is takes practice um do not worry okay um let's keep on going so in this case for the product typings I'm going to go ahead and show you the same thing right so I've gone ahead and built these out for you oops no I didn't do that uh I've going ahead and built these out for you so you can really feel free to just copy these and you know pause it as you wish so in this case we've got the product and then I've got the different type definitions and honestly I'm going to copy everything in here all the code is available in the GitHub repo I'm going to scroll through it and you can basically pause the video If you really want to see it for free and you can't be a to get the G reper it's fine okay there you go obviously it's all available in the G REO so I've done the work for you for the typings so let's go back now for the fetch product and let's complete our fetch product step okay so first things first we need to go ahead and prepare ourselves with the username and password and the URL so walmart.com and the URL is actually going to be the one which is scraping from the product page now what I do as a debug step is I actually include a little console log which is scraping and then that way if anything goes wrong you can see exactly where you slipped up on so I know a lot of you might do this for Slash and then it does a for slash because the URL already had a for slash inside of it so sometimes it just helps out to basically root it uh console log it out and then debug your issues okay again we've got the same thing we've got the const body which is this we're scraping from the US and then we're going to go ahead and fetch so all I'm doing here guys the exact same the exact same thing as I did before okay so I'll break it down for you so it's not just one big chunk we've got the response object which is going to go ahead and it's a post request it basically uses the username and password uh with the authorization to go ahead and make sure that we are authorized wise when we when we go to oxy laabs again here as well I'm going to um do next and I'm going to do incremental static regeneration by saying uh that I want this to basically revalidate every oops sorry revalidate okay one second sorry revalidate and necess to say every hour okay so every single hour for the product actually to be honest let's just say every day so 60 Seconds 60 minutes so that gives you an hour times it by 24 this is for one day every day basically refresh the cash every one day okay and that means that basically this is this is what known as ISR okay um and then uh any someone says any reason for using interface and typings yes because interfaces can extend each other so it's it's kind of cleaner put that way um we didn't do it there but yeah it's just so you know and then basically after this I'm just going going to basically pass the then response catch any errors and return the response accordingly so let's do that right now and you can see product content we pull in from product typings so I'm just checking if any results came back exact same thing as we did before except the product content includes this information okay really nice so check this out so at this point we have the fetch product and then we want to Simply go ahead and Export default defet products that way you can go ahead and access this function inside of our page so we do that and now if I go ahead and console log the page the product sorry it will come up inside of here once it fetches it and you want to make sure that this point is working so uh at this point I've clicked on a product so if we go over here I've clicked on the adid Das product and boom I have all the items here so first things first you can see it says scraping so my debug code if I click this now and I click open you'll see right now this is the page from Walmart okay so I want to highlight this this is the page from from wmart so what we did is we basically used this URL to scrape so if you're not getting that and you're not seeing the URL that you generate reaches the actual wmart page then obviously your scraper will not work because it will not be finding the correct page to scrape from okay so you need to make sure it's correct and then obviously afterwards if you've correctly fetched from your fetch product function your product will then go ahead and show all the details and look you can see we've got the images the rating the sellup the different variations including the colors the breadcrumbs the descriptions out of stock free delivery specifications a bunch of cool stuff that we're going to go ahead and build the page from okay so you can see quite nice right quite nice now for the product page we're going to literally start building this thing out so I want to also have a little defensive programming statement I'm going to say if there is no product that was returned we're going to say return and there's something called the not found function in next navigation and this will return a 404 so basically if the product did not exist which could happen say somebody tried to break your website go to you know a fake uh product page then it would simply not find the product because it wouldn't scrape it and then you wouldn't be able to go ahead and you you would see a 404 instead of like some empty page right that's what we want to do control those Corner cases so over here we're going to have a div and this is going to first have the product so I'm going to get my designs up right now our PDP which I like to call it so our product page now I actually haven't got a screenshot of the product page so I'm actually going to Showcase it what I'm going to do is I'm going to start my product on the other uh terminal so this is the actual 3001 I've got it running right now I'm going to go into an actual product and I'm going to take a screenshot of it and we're going to work with this okay so boom there we go great stuff I'm going to um all right I'm going to save this quickly as a screenshot and open it up on my computer so give me one second guys okay good stuff now imagine this is our designs there we go happy days we've got our design there so this is our design that we're going to do we've got our sorry guys you see here this is a design that we've got we've got our pictures on the side a nice scrollable Carousel and then we've got the information over here which has got some tables and all that good stuff at the bottom as well so if I show you actually again on 3001 I've got my actual production one running so in this case boom you can see at the bottom here we should have the add to C all of this stuff as well so I'm going to build all of this right now in our product page okay so what I want to do is firstly I'm going to go ahead and actually have and what I'm going to do actually is just pop this out over here as well boom so this is the production version so you can see this this is what we're trying to get to okay so first things first I want these images on the side to show so I'm going to go ahead and loop through them like so and render them out so product images and then I'm going to import next image and do it like so now as you can see they just simply pop out on the page now obviously I want to go ahead and on on a mobile view I don't actually want to see these because on a mobile view I don't have enough space so on a mobile view they should just be able to go through them but they don't need to have the preview of the other ones so on this side I'm actually going to say hidden on a mobile view by default and only on a large screen I'm going to inline and I want the space between each one to be a four okay so in this case it's hidden on the phone otherwise it's got a space of four okay much nicer and then what we're going to do is we're just going to go ahead and give the second area so after this div we're going to basically use a carousel okay now the carousel it belongs to let's go back over to our Shaden so oops Shaden and I want to go to our Carousel which is over on the C here we are and you can see carousels are nicely uh provided inside it's actually a new feature inside of Shaden so we're going to go ahead and do this and it's based on the Embler Carousel Library if you ever used that you know what I'm talking about so I'm going to go ahead and Pop That in right now add Carousel and it will install everything that we need I want to go ahead and mention as well guys by the way uh who would like to see a video on coding using the Apple Vision Pro just a just a heads up let me know in the comments down below cuz I want to do a video on that okay so there we go boom let's jump back over here here and you can see they've got a lovely little example use case and it's very very simple to go ahead and do this so I'm going to go ahead and do the import statement at the top so import everything that we need Boom at the top uh go over here and simply pop in the Carousel and then we're going to customize it as we need to so that's the first step and you can see the carousel items render in now if we look at this you can actually see that it's there right and that you can see I'm swiping through it I'm swiping back away from it and so forth right so obviously that's not ideal right now what I want to do instead is basically render out the product images themselves instead of the carousel item so where we've got Carousel item I'm going to basically cut this out pop in my product images so I'm looping through everything and where we have our image we have to give it a key obviously in this case you can give it the image as well the image do um that's actually going to be the uh the image itself so in this case I'm just going to use the index which is not ideal but you can go ahead and find a better key if you want um in this case we've got the P1 and then we're just popping in the image right so now you can see look really lovely right absolutely great and you can actually make this loopable as well if you really want to so if I wanted to actually get this you can pass in something called ops and here I can say Loop yeah and loop can be true and now you can actually continuously Loop through right and you can see right now it's kind of taken up the full space of the page as well which is not ideal we'll fix all that in a second but you can see for a glimpse this is good okay so very very simple to get that off the ground I only want to I want to customize this uh this as well though so it doesn't go like huge big right so I've actually done the hard work for us I'm actually going to go ahead and pop this in and I'm not going to explain too much about what the styling is here you can feel free to check yourself but uh I basically got the perfect styling across the different things now so on the small screen you've got a nice little clicker here and these are actually just determined by this Carousel preview and next and then on the large screen I want to use up more space but I want it to align itself self start now that's not going to take effect until the surrounding div is actually a flex container so we can go ahead and apply that now so I'm going to say right now by default we want padding of four so first you have a little bit of padding on the outside on a large screen padding of 10 I want to make this a flex column by default on a mobile view so by default you see uh on mobile is flex column uh however on a large screen it should be Flex row Flex row and the width should be for now if I go onto a now you can see it's Flex row as opposed to stacking so this is great this is actually what we wanted and this is looking much more along par with what we're trying to achieve okay so that's looking good so far so at this point now we've got the Carousel and The Styling is great underneath the carousel I want to have the last bit which is actually the product uh itself so we're going to have the container which is here so imagine the container now is at the bottom here because I've got Flex column for a mobile view and remember Flex Row for the side view so you see how we've done this and it's worth mentioning as well that I did F self start because if I don't do self start and say for example I do self Center you'll see here that this okay so it won't actually take effect there to be honest so it's fine uh but yeah the point stands that Flex row Flex column on mobile view Flex row on a uh smaller view like this so forth okay now let's fill this up with the actual product details so slowly slowly we've got the product title so let's put that in first boom and you can see look on a mobile view comes over there on a smaller view there as well and obviously you can go ahead and actually you know make this bit more generous make this smaller if you need to and so forth for example here it's a little bit constrainted so we could probably go ahead and change this to be for example let's do two fifths um okay so it's actually on the large screen the way it's playing with it a bit more you can really go ahead and mess around with this as much as you want you can say for example um half the screen or even for example if I said one qu and you can see there so if you wanted to make it a bit more like I guess Fair on the on the sort of sizing you could go ahead and size it accordingly right so in this case there you go that's quite cool and then here you know you can really play around with it as much as you want okay but in this case I'm just going to keep it for because for the majority maity of screens it will actually work perfectly here okay now we got the product title and then I'm basically going to pop in product breadcrumbs so this is just going to be the badge so if I pop in the UI component there we go and this is going to be for all the different things like clothing men's clothing men's Shar man's graphic te's we're using the shadsy and badge to go ahead and do this as well okay almost at 300 likes guys smash that like button if you're enjoying this video Okay so we've got this down perfect stuff we've got the div and then next up so so this is an interesting one now if you only do this if you can safely assume that the the the HTML that is going to be rendered on the screen is safe so I wouldn't actually highly recommend this approach but something that um comes back is in the description of the item so in the description of the item you'll notice that it's actually in HTML so I want to render the description using dangerous um dangerously set in HTML so there are better ways to do this however right now for this demo I think it's fine dangerously set in hmail we're rendering that product description but you're trusting The Source here by doing that and as you can see it renders out a list and so forth so just be careful with that because there is a there is like dangers when you do that okay next up we have the product rating very simply we're just going to go ahead and pop in the rating that we had previously as well again you can refactor these into their own reusable components and do the same thing over and over it's honestly up to you we've got the product currency how much it is and then we're going to have the add to C button okay so we need to create the adart BM afterwards and then after that we're going to have a horizontal line and I want to have a table and the table is going to render all of the information about the product so for example table is going to have specifications of all of this stuff so how do we do that okay so um basically uh Bon they says I always use the index as a key when rendering GSX from an array so why is that not a good practice to do that so this is again is the difference of what we try and teach inside Z to for are the good programming principle so with this key basically every single time it rerenders that list it will rerender every item in the list because the key is not unique so for example if I add in 101 element it will rerender the entire list because it basically if the order changed for whatever reason you see the problem there right so everything has to be ideally a unique key value when you're rendering out a list so that way say for example we rendered a th000 items and we introduced one anywhere in that list now it knows Rea react will know if each if each each individual key is unique that it only needs to add in one item if you added in another one and you didn't have unique keys or you didn't include keys at all the only thing that react can do is rerender the entire list so you ideally should be using a unique key as opposed to index because the index will change especially if you insert it in a random point in the list you see all the indexes changed so then it basically says screw it okay render everything because that's all it can do so ideally it's not great practice to do that so you want to make sure every key is a unique value and then it will only R render the one item in the list okay so those things go a long way now we need to go to our Shaden go ahead and install a table so in this case boom we're going to go ahead and pop in a table like so so heading back over here uh kiddo TV says the best program ever I appreciate you dude let's go ahead and add a table here let's go ahead and close this out boom and now over here you've got a bunch of different examples for example here the table import blah blah blah so what I would do is I'll show you how I would do it so I take the table basically pop in the C there and then I would take this and I just reverse Eng generic to how I want it okay so basically take it here uh underneath here before I even put that in I'm going to say H3 specification so I'm going to go ahead and pop in this and now I've actually modified it a bit so basically I've taken the code example that they gave and I've just changed it up so I've changed it up to have a table header specification value and then where they had table rows so in their example they had table row with a bunch of things inside I've just gone ahead and changed it so we've mapped through the specifications and for every single specification it will render a row with the spec key and spec value okay so let's go ahead and do that now and see look at that boom and look at that guys straight off the bat so quick and easy to get a nice table View and just like that so clean okay in fact here I want to do font bold because I want this one to be B look at that oh nice so clean B goes thank you so much Sunny for your workl answer you're absolutely welcome bday I appreciate you it's a very good question as well yeah so look at that guys looking great and just like that we have a PDP a product page right amazing stuff okay so I want to show another thing now what happens when this page is loading okay so remember that same example we had previously so if I got Adidas over here boom and let's say I click on boxing gloves it's freezing because it's blocking it's loading and it's scraping the data and then it shows the page which is good I mean it it works right it's great great for scrapers SEO purposes but I want to show something when it's loading so again what we do is we head over to the page oops don't do that we head over to the uh product page we simply add a loading page that way it will whenever it hits that fullback on the react suspense boundary we can go ahead and render something here so oops I'll do not do what I just did that is horrible do loading and then go J I actually a huge fan of your playlist I will not I will admit you've done well here it's very viby I like it all right so in this case where we have the product yeah so I've actually saved you a bit of work here again we're going to rely on the skeleton here right and then I basically shaped the product page so you can honestly you know pause the video at this point and just kind of you know rebuild what I've shown you here or create your own skeletons or whatnot but this is essentially just shaping I guess is the best word it's just shapes it in a way that looks like the the same product page that we have here so what I will do now is I will click on a product and show you what I've done so you see if I click on body spray for men you see how it looks like a product page and then on a mobile view it it looks like that so that's essentially what I've done okay and you can hyper test this by basically going ahead and doing command uh inspect click on disable cache in the network Tab and then if I refresh you see every time it's going to refetch so now look at that so you can force the fetching to fetching fetch to happen so now boom and it's just a really nice overall view so look now your user will see something it's just so clean okay so overall super super nice and look now your user will look at that and be like okay I guess it's loading something so I'm not going to sit there and think the app's broken it's completely fine so let's do a full stress test now and obviously I'll show you the code again so this is what we just went ahead and popped in so you can feel free to create your own that is what I did the code is available in the pap rupo let's say I typed in a football scraping the results for a football it will show us a loading indicator let's go ahead and say I click on the New Orleans Saints game used for let's do this one cuz it's got a bit more reviews click it boom it's loading information right now it's actually scraping oxy laabs boom it pulls in all the data specifications and there you have it amazing stuff and obviously I haven't done used every single attribute that came back such as you know out of stock and all that kind of stuff like even the variations you know out of stock free delivery you can feel free to add those honestly extend these builds as much as you want I'm just showing an example of where we can go with it so at that Point great right it looks really good now we're missing the functionality of the add to basket page the basket functionality and all that stuff as well so we're going to go ahead and do that right now a quick little water break before we carry on but guys we're doing amazing for time uh we're making great progress and right now we have the following to look forward to we're going to add the add to basket functionality the basket page itself and then I'm going to show you how you can intercept the route and use something called parallel routs to simultaneously render in a a modal popup yeah this is awesome trust me yeah to go ahead and actually do a really cool thing um and I'll show you a little demo of that in just a second okay so let's go check it out so this is the final version by the way so this is going to be the final version and this isn't built yet so you can see we're going to do this where you add to car and basically show your quantity and then it will intercept the basket route and you see what it done there it basically intercepted it and we rendered this model instead and if I click it I can go back and that way it's not interrupting the user's flow however if they went directly to the basket so for example let's say they went directly to the basket page boom they see this page oh lovely right whereas if they're on a page they're browsing and then they click it for example boom okay um I actually want to change it to tube carry on searching you see how that experience is a lot better than just directing them away they have to go back and all this other stuff so we're going to go ahead and that music dropped during the water break I know it's time well okay so let's can on now I'm going to go ahead and do it I'm going to basically incorporate that to basket Bond so we're going to create the add to cart button so inside of my product page where I have this add to cart button I'm going to go ahead and create a add to cart button okay and this add to cart button will simply take a product okay so it will take a product and we're going to pass in the product itself now we need to create this add to cart button so we're going to go to and say add to cart. TSX RFC boom and just like that we're going to go ahead and do it and we're going to basically have the product being passed through and the product is going to be the product type right so it's going to be the product type from product typings there we go okay now this one is basically going to be responsible for adding to you the product now here let's go ahead and pop this in so you render out something which where right now it just says add to call okay okay So eventually this will be you know accessing a piece of state and I will explain how this is going to work now so we have a nextjs application now what we want to do is basically we want to have a something called a global store now you can use lots of things for this you can use react context you can use Redux but one thing that we're going to use today is something called Zan for Global State Management now this is actually so simple to implement and think of it this way here is my app the entire app let's picture it like this all I'm doing is I'm wrapping it with a storage layer and basically in that storage layer we can have several layers so think of an onion and you've got several slices to your onion so we're going to access each slice which is responsible for different parts I'm going to have one slice of our Global store which is accessible throughout my entire application so any point in my app I can access those global stores those different slices and I can pull information and push information which is really powerful because for example we can have a slice in our store for the basket state which will basically keep track of all the items in our basket and we can even make it persistent so I'm going to show you how to do all of that in literally like 5 10 minutes so it's so easy to incorporate so I'll show you how we do it right now so we're going to go ahead and type in zustand and zustand is basically a state management tool which I highly recommend it's really awesome it works really well with xjs so let's go ahead and do it right now boom we're going to install it into our project so let's go and pop it in like so uh over here mpm installs the stand while that's doing its magic we're it's going to say create a store and what I would highly recommend is you type in typescript okay and you'll find a typescript instance over here now the typ SCP instance is the one that I'd recommend because you can actually go ahead and check the it's got a persist call on it and you can also set it up with Redux Dev tools right which is really handy by the way so this actually integrates with Redux Dev tools so if you've got the extension for Redux Dev tools you can inspect the state store you can actually use all the Redux Dev tools the way that we've typically used it in the past as well okay but I'm going to not show the the dev tool part of it okay so with that bit done we're going to create a store so at the top level of my code let's go over here and let's close it so at the package Jon level I'm going to create a store. TS boom and inside of here I'm simply going to go ahead and pop in this example so I'm literally going to take the typescript usage example copy it over just like that now I'm going to go ahead and refactor this all okay so I'm going to go ahead and get rid of that and even here for the dev tools I mean you can feel free to do that I really don't care too much about the dev tool part right now so you can get rid of that but for now we're just going to keep it wrapped so if you do have the dev tools feel free to use it guys um in this case in fact I'm just going to comment this one out okay going to comment that out for now okay so this will work with the Redux Dev tools I highly recommend you play around with it and check it out but this will persist in local storage as well so what does that mean it means that typically your Global store will just disappear but this means that it will basically create like a a cookie which will store your basket contents as you update it so if you came back to the page and refresh you don't lose your basket it's already going to be there on your machine okay now where is this be state I'm going to refactor that and call that the cart state right so in this case we've got one store and we're just going to have one simple thing inside of it now I'm going to have a cart and inside my car I'm going to have a product array now the product we're going to pull from product typings so the car is going to consist of that now we're going to have two functions that are going to work one is going to be the add to C function now what this will do is it will take a product right it'll take a product and it will return nothing and basically that will be responsible for adding something to the C we're also going to have a remove cart function remove from cart function okay then we're going to say use cart store as well so we're refactoring it all the name we're going to go ahead and say shopping cart storage so it's going to be shopping cart storage is the name and then here we've got the actual State itself so this is freaking out because right now we need to basically give the the following functions C add C and remove C so initially the C is going to be an empty array okay then we've got the add to car now add to car is basically going to we have this set function here and we also have a get function as well right that we can pull in so the add to car is essentially going to go ahead and uh this is actually perfect I think state. product yes that's exactly what I wanted so this is actually exactly what my code looks like right now so we're going to the cart to basically the existing state and we're modifying the cart object by basically creating a copy of the existing C uh State and we're basically appending the product to it okay so that's when weever we add to the cart that's what we're doing now the remove to car little bit different okay so the remove from car if you do the approach that it gives here that's not going to that's going to remove every single product which is not what we want so this is why I say don't trust chat GPT blindly or you know um co-pilot blindly it's not always correct so now what we're going to do is when you try and remove a product we're going to first try and find the product by basically getting the C this is the current C in state we're going to go ahead and find an index we're basically looping through and we're checking if the skew so the skew is like the ID of the the item if the skew matches the product that we gave yeah then we've got a index it will basically return the first element where it finds the index right then now that you know the index what you can do is you can basically go ahead and set this state and splice out the existing item in its place so what does this mean we're basically going to say set and then when we tried the set function we're basically going to go ahead and create a new cart okay so a new cart which is a copy of the existing car then we're going to supply out the item to remove so what this does is this directly manipulates the new car object again I cover all of these functions inside of Z to full stack hero I have dedicated videos explaining the splice object and things like that but splice actually manipulates the new cart object and it basically goes to the index where we found the product and it goes ahead and removes one item from that point which will basically splice it out right so it gets rid of it and then what we do is we replace the cart with the existing cart this follows the immutable pattern whereby we're not replacing our store with a you know we're not modifying our store we're just copying the object modifying that copied object and then we're replacing our cart with that C really really much better okay um and if you really want to go a or buy you can go ahead and do the following okay but don't do that all right so in this case now this will basically allow us to add items to the car and remove it remove one of the item from the car so we've got everything that we need to now go ahead and basically use our cart store so how do we consume it from the client well if we go to our ad uh client add to C uh function what we can actually do now is we can actually go ahead and build this out as we need to so we're going to go ahead and make this uh really pretty so first things first is how do I get access to the cart as well as the add to cart function first things first I need to use a hook um a use hook so this means that I need the client I need to convert it to a client component right so you can't use use hooks or anything like that on uh react hooks on a server component so in this case I need to grab the cart and I need to grab the add to cart function from the use cart store so in this case I haven't exported it so if we go back to the store I need to actually go ahead and say export for my uh item here so if I go back to my store I'm going to export this CU we need to use it right so here I'm going to say use cart store and basically here you can see we basically pass in the individual items that we're trying to map to our items here so basically this will give me the start state. card and state. add to card so that's how I go ahead and get the functions that I will need in order to do what I'm about to do okay so now that we've got the functions we can actually go ahead and consume whatever's in the car and basically do whatever we need to do so what I'm going to do is I'm going to go ahead and say um first I'm going to have a little helper function here which will be called how many incart okay so in this case this will be how many incart and basically we already have the product that of the page that we're on okay so this is going to be like a help function which will basically check to see how many of the items is actually exists in our car from the product that we're on so on this page do we already have this in the in the um do we already have this item in the uh in the car and that's what that's very important okay so what you can do here is you can actually console log the car out as well and you can console log how many in the car so here you can say uh how many in car do this and then you you can basically just pop in how many in car and then because this is a client component it's going to console log onto here so array there's nothing in the cart how many in the C zero okay so again helpful things we're going to go ahead and pop this underneath so that way we can go ahead and help ourselves a little bit ignore some of these this is from my own um extensions that I have plugged in so right now you can see add to cart and we've got nothing in the cart from here oops ignore I just did make this a little bit bigger so you guys can see there we go okay now we're going to say if there is nothing in the car okay then I'm going to render out a uh the following so I'm going to render out a remove from cart button a how many in cart and then basically so sorry if there is the item in the cart this obviously we haven't created so I'm going to have a basically like a minus button so imagine like a P with a minus and then here I have a button from Shaden with the handle ad function which I haven't created yet for the on click so we can create that on click Handler right here so I'm going to create the handle function and all this will do is basically it will add to car and it'll pass the product in it says adding to C product so now you can see if I click add to C uh which we haven't done anything yet because it's is just doing a div so right now nothing's in the cart so this will never get rendered okay and also this will never get rendered because we're not even returning it so that's a 4y bit of code we want to basically make sure that we return the jsx there so if we've got items in the car we can go ahead and do that so the next thing is uh what what's up Zan thank you so much um partial pre-rendering be covered yes I am covering um parallel and intercepting roots in a second so now if it is basically if this if there is no item in the car instead I want to render a button which will say add to cart and basically here I will say simply onclick oops onclick okay on click and then I'll say handle add there we go okay nice now you guys can see if I click it boom waha I can keep on adding because we've got that done and you can see how many in cart six and I've got nine items in my cart right now I've got some Adidas stuff and wave Runners wave Runners I'm assuming is this yes Wave Runner is that but we need to create the minus which is the remove from cart product right so I'm going to go ahead and Pop That in create this functionality now so the remove from cart uh item we can go ahead and create right now remove from cart. TSX RFC pop it in like so remove cart and this one is going to be very similar okay so again what we're going to do is we're going to basically pass in a product for it so we're going to pass in the product this is going to be a product of type product so product of type product from our product typings boom okay and then we're going to convert this to a cent component use client like so and then in here we need to get access to it from the used cart store so we're going to do the same mapping that we did previously import the cart store now we've got access to our remove from cart now notice how if it's singular we don't do the array approach that we did a second ago now we just do a singular return like that okay lot cleaner we're going to have a click Handler called const handle remove and this is going to essentially just do the opposite of what we did with the ad okay so it's basally going to say removing from cart and then it will trigger our remove from cart functionality and then instead of rendering this out guys we're going to Simply render a button and this button is going to to do a very simple Act of it's just going to have a minus cuz it's only going to render if it's it's actually ever called I'm going to give it a background of Walmart I'm going to say hover will be oops hover will be background Walmart uh and it's going to be 50% opacity and the on click is simply going to be on click sorry is simply going to just do handle remove and just like that we have a remove from cart button so if I go back now pull this in like that and I'm just going to style also my button I've done the same bit of styling here for that and now guys check this out if I go back over here we don't actually need the P tag there so we can get rid of that boom so just like that right if I go back and hit refresh it's going to go ahead and pull it look at this it's it's fetching goes down we've got six in there remove aha guys and if I check out my inspector you should be able to see let me go ahead and show here if I click on on the remove look removing from cart the product itself and then you can see the actual cart contents how many in cart three remove from cart remove from cart and if we don't have any in the cart add to cart add to cart look at that adding to C boom absolutely awesome right this is exactly what I'm saying this is what you want to do really really clean okay so just like that we have our add to cart functionality booming that's really really beautiful right and that way that's how you make a dynamic one button add to cart solution which some of you might have been wondering in the past how do I do that Sunny how do I have a button this Dynamic like this well that's that's how you do it guys now we need to basically plug that value into our uh header so we can go ahead and pull it in from the header okay so in our header right now we go back to our header and we can go into the top and we can basically get access to our car so you see the whole reason why a Global State Management tool likeo stand is so handy is because we can go ahead and access any of our state at any different component so our basket is a prime example here our cart right so in this case what I can do is I can go ahead and boom use cart store get the cart value itself now I'm going to create a helper function called get cart total and I'm going to go ahead and create that function inside of my lib folder and this is going to be used to basically calculate it's going to be a reduced function just to Simply calculate whatever I have in my basket the contents the amount okay so inside of lib I'm going to go ahead and create a function called get cart total. TS and this function is simply going to be responsible for it's going to take an array of products okay it's going to go ahead and uh so for the array of products we're simply going to go ahead and do uh from the product typings so it's going to take a array of products now I'm going to use something called a reduce function so we're going to get the total and what I'm doing is I'm getting all the products I'm going to do something called a reduce now in a reduce function you basically have two arguments you have whatever it starts with so in this case RS is going to start with a value of zero and then it's going to map through a bunch of times and do something called an accumulator function so in this case what we have is we have our first thing which is an accumulator okay so the first thing is something called an accumulator and the initial value of this accumulator is zero then we have each item that we map through so in this case this is going to be the current product that we're mapping through okay the current product is going to be of type product okay the accumulator is going to be of type number okay now when we map through every time what we can do is we can return the accumulator plus the current product do price okay and just like that now we're basically mapping through and we're basically starting from zero and we're accumulating the overall price okay now because it's a single line bit of code you can actually go ahead and shorthand this to the following like so you can have a direct implicit return like that so very clean you can even go ahead and short hand this by just saying accumulator and you can even get it in a single hand like that so very very straightforward we have our total and then we're going to Simply return a string which says the following I want it to basically go ahead and return always the currency as well as the product currency as well as the total to a fixed decimal place of two so that way we always get it in a currency format now if I go back to my header I can use this I can go ahead and say get cart total passing the cart which is a product array and then I get the total in the form of a string so if I head down to where I have my um here where I have the total amount I can just say total and now just like that look at that guys $117 right and if I go ahead and add items to it you see look boom it's going ahead and accumulating if I go ahead and remove items from it boom it goes ahead and does it accordingly so just like that now we've gone ahead and created a perfect sort of you know way to calculate the cost of things inside of our basket all right so really really awesome stuff the next step is we want to go ahead and actually show how many items are inside of our basket so very very simple we already have access to the cart here so all I'm going to do here is just change it slightly so we say if the cart length is greater than zero we've got a turn operator here which will say the cart length item so it say like you know five items otherwise it will say no items so in this case four items available perfect great stuff right so this works really nice guys the next step now is to go ahead and click this and take us to a basket page where we see all of the products then I will introduce the intercepting route okay to to allow us to do so the next step is we're not going to do this first we're going to assume that when we click it it takes us directly to a checkout like a basket page okay so we'll do that first and then I'll show you how you can do an intercepting route to get that extra functionality then we deploy it then we're gold okay so we're doing really well on timing as well now guys all right so next up I'm also about to smash over a couple hundred lights so keep on going guys absolutely incredible so let's keep on going strong so next thing we're going to do is we're going to go ahead and inside of our app folder we're going to type in basket and we're going to have a page. TSX RFC boom okay so we got the page. TSX and then we've got the basket page like so um so there you go B There Goes reduce is one of my favorite Parts Sun streams he explains it in the most in his videos in the simple form thank you so much cuz the reduce function can be very complicated and you can do some really powerful things with it but it's just never explained well enough in my opinion so definitely thank you I appreciate you for that all right so the basket page here what I've actually done here is first things first I'm going to basically just pop in a shopping cart icon and now this bit is actually super simple so I've not actually done much with the basket page all I've done here is I'm going to pop it in and showcase it so I'm going to show you what I've done so I've just got a div here and ignore this last part okay so right now it's just a shopping cart icon which says your cart review the items in your car and check out when you're ready okay that's all it says and then what I'm doing is I'm rendering in something called a basket component and that basket component is pivotal because it's going to have all the items inside of my basket and a checkout button okay so we're going to create that now So eventually I'm going to be importing that from components basket so go into our components go ahead and create a basket. TSX component RFC boom we now have a basket component okay over here now this will no longer error out we have a basket to to pull in from okay so now we should get rid of that error as well on our basket page there we go know why that's freaking out let's go ahead and do it again there we go okay uh oh I think it's because yeah that's fine doesn't really matter okay we got the basket now so from the basket we can go ahead and do all the logic that we wanted to do so I want to go ahead and grab firstly the cart okay so the cart store so this is going to be a client component because if I don't do this you'll see us ref only works in client components because basically that's just implicitly saying that you know this is you're trying to use a hook here hook requires you know under the hood it's going to have some things which like use refu state so you need to basically convert this to a client component Doom there we go and then say hi to Indonesia I'm a developer of IND Indonesia what's up dude and we even got Ethiopia in the house as well hey POA glad to watch the latest project on the live com wait to start the build with you what's up dude thank you for tuning in right so we got the cart here now I'm going to get the basket total so we've already done that part as well so we can say basket total equals get cart total and we're just going to pass in the cart so boom that's super simple we've already done that and now I want to get a grouped uh I'm going to create a group by sko now what do I mean by this well remember when we basically let's say I add in 10 of the same item into my basket I don't want to show the same item 10 times where I want to show a grouped representation of the item so so in this instance you can see here I can simply it groups it so I haven't got like the same item 20 like 20 different times for example if I go here and I add in this item as well let's go ahead and check it out boom add to cart a bunch of times there we go and I'm going to go to my basket boom and you can see that it's grouped it so if I go over here it's grouped it so it's not showing like you know four rows of the same item how do I do that okay so I show you how we can do that very easily so I'm going to create a um Group by sko right so going to say group grouped so I'm going to create this group by skew helper function so we're going to go to our lib folder create a helper function called Group by sc. TS boom and now inside of here we're going to and remember that takes a product array of products and it's going to return something called a record okay now a record all it is is essentially key value pairs all right so key value Pairs and that's all it's going to return it takes our cart which is basically just an array of products and we're going to use the reduce function once again now the reduce function here is going to be used in a slightly different way so we're going to say reduce and remember the reduce function has firstly an argument and then it basically has whatever let's say whatever uh initial state of your accumulator is so in this case we last time we did a number this time we're actually having an object okay so an object now remember we have the accumulator which is going to be in this case a record so accumulator and this is going to be like you know a record of all of the different key value pairs now the key and value pairs are going to be the object the product ID and then the actual product array itself so I'll show you exactly what I mean by this so we have the accumulator and then we have the current product itself so I'm going to start the music again all right so in this case we got the accumulator and then the product itself and then every single time we Loop through I'm basically going to firstly get the skew okay so in this case I'm getting the skew and then I'm going to check right if the accumulator does not already have this SC SK in its records we're going to add a new array for that right and then I'm going to go ahead and simply push into that array the current product okay so this is what's happening so if you if the product doesn't exist in the accumulator we then go ahead and create a empty uh array inside where so it's got a record with an empty array and then we push the item into it if this if it already existed it would skip that but and just push straight into the product and then we simply return the accumulator okay so now what this will do is it will take a cart and it will basically transfer it into what we need so if I go back to this and I pull in my cart what I will do now is I'll show you a clear representation of this by showing you the cart and then I will show you the group itself so I'll show you the grouped versus the C okay so now let's have a look in the console logs so first if I refresh you can now see okay so this is the overall call okay so if we see here here the car is basically you know a bit of a mess right now we've got four items whereas the grouped has grouped two items you see the two different keys and the first one has got one item in it and the second one has got the same item in three times so now we can basically render these out and say okay we've got three of the same item and one of these items so that's how we do the grouping so you see how reduce function can be extremely powerful so honestly these things are really important to know again I cover all all of these functions inside the zero to full stack C so if you don't understand how to use these functions honestly that's that's the place to be right second link in the description make sure you go check out okay uh send you in the future going to bring back some more re builds I know wor P yes I'm definitely going to be bring bringing back react NE builds I've actually got on my list next so I got you covered dude all we're going to have unordered list inside here um and now first here as well I'm just going to sty these out quickly so this div right here we're going to go ahead and pop in the class name and then this div I'm going to give it a little bit of styling as well this is going to have space Y and then divide yf2 which is just like a little separator there we go boom and then in for each item all I'm going to do is I'm going to map through all of so you can't just map through the groups right because it's a record data type so instead now we got to do object. keys so I'm mapping through all of the keys for the grouped item so it giving me the skew right and then what we do is we do some with it okay so at this point now we have to return something okay so in this case I'm going to get the item itself and basically we can get the item Itself by going ahead and basically uh getting the first item in the array because remember when they're grouped it's going to be the same item repeated several times and I'm actually going to use the cart total on the grouped items as well so we're reusing the get cart total for each individual row of items which is awesome so we're reusing our code as well and then we're simply going to return a list item okay we're going to return a list item and where the key remember you're mapping through so the key should be the sko it's going to be unique so it's a perfect uh key here and let's just type in P for example and let's just type in I don't know just type in sco for example just so for now so you can see something so you see look two items are rendering out perfect stuff and then we can render out the actual you know the nice stuff about this so firstly let's give the list a little bit of styling there we go bit of a bit of nice a look to it if there's an image I'm going to grab the first image and show it so I'm going to go ahead and show it like so we're going to pull in next image so there you go the images will pop in um I've got a div where I basically render out the uh okay this is cool right so I'll show you basically what we're going to do here so I'm going to pop in the code and explain it so here I've got a div and I've got the add to card so I'm importing my add to and this is why it pays so well guys to code effectively really really nicely because you can just reuse a bunch of your codes I've got a div here with a bit of styling and all it's doing is it's clamping so like it basically truncates after two lines I've got line clamp two and what I'm doing is essentially rendering out the title and then description similar to how I did in the product page and then I'm just rendering the add to cut button I don't even have to worry does it work because we know it works because we built that component independently and we build in effective way which is again scalable code right so now you can see here look at this guys I can go ahead and add things to it and you see how everything's rendering look at this absolutely amazing if I remove it boom it's gone if I remove that boom it's gone you can say no items in your basket you can go ahead and feel free to customize as much as you want but if I go ahead and use this app now you can see everything is working the way that we expected to so look it says undefined 0 so we can fix that as well so if we go to our header one thing I would definitely do here in the header is I would make sure if you don't have the um so in this case we've got the total uh I've got zero items here I would say c sorry no items undefined z z okay so that's because we haven't got this where wait wait one second where am I rendering that up it's the shopping cart it's this I believe is doing that no it's not it's this div total yeah we can say no items in basket so here really you could go ahead and do the same thing you could say cart. length so we can go ahead and do um so C do length greater than zero you can say total and then here you can say zero items and you can just pop in a zero there really so no items or you can say uh yeah no items in basket and now if I go down here and you go to add look at that boom perfect okay so add a bunch of things go back up to the top you see we click it boom we go to our basket boom okay now here's the perfect bar so firstly that works flawlessly look at that exactly as I wanted it right so I'm going to go ahead and finish off the baset component with a simple button at the bottom Okay so we've got the now underneath our unordered list I've simply got a button uh all this button does is a checkout button okay so nothing special here really it's just a button with the Shad Cen UI button bit of styling on it and it basically just says checkout now obviously at this point you can Implement stripe checkout do anything you want to do past that point which is you know up to you to go ahead and do but the whole point in this is it just says the checkout now what's cool about this is you see how look even that total undefine zero okay okay so we should go ahead and fix that so I actually believe that a better fix here would have been to go ahead and modify our get cut total here because we've got price. currency to fix zero so here we can actually go ahead and say um if it's product. currency so here we can say product currency and and currency and then what we should say is or we can even do this sorry to be honest else render nothing yeah total is zero it's fine okay uh you can even go ahead and if you know it's going to be at a dollar sign you can go ahead and do this if you wanted for example so I'm going to leave that for you now right now we're doing us so obviously I can leave it like that um and then yeah and do that let's go ahead and pop something in boom boom boom go back to our app now here's the thing that user experience is cool it works but that's traditional right that's how normal apps work we want to be above and beyond we want to do something better than this right so for example ex here I don't want to take the user all the way from the app and then they have to go like you see what I mean like it takes them across the entire page what I want is functionality where we can intercept the route okay so let's let's say for example I'm at this is the production app now so for example let's say I'm here and I go ahead and add a bunch of things to the the product and I want to just quickly check my basket actually you know what I actually don't want these shelves right cool let me carry on shopping that's way better for an experience no so what we can do is we can intercept the route and we can basically introduce something like a model and we can use something called intercepting routs and parallel roots to dynamically push this in and remember it still has the behavior of previously where if you directly go to the basket page you will see this page okay so I'm going to go ahead and show you how we can do that inside of our build right now because right now our build simply takes you over there which is a bit of an annoying thing I work at Walmart as an engineer so I had to stop in to see this whoa that is cool what's up David David look this is what we're going to build right so right now obviously typical websites will take you away from the page when you go to your basket we're going to introduce parallel and intercepting rout so boom rather than taking you away from the page you get a nice little pop up and then you see that look rather than going that and then if I refresh and you go directly to the basket page you will still get the cart page so way better a user experience and think about it guys you can have a slide out you can have anything you want I'm going to show it in the form of a model so yeah really really you can do whatever you want here to make life a little bit easier now I explained intercepting a parallel Roots inside the course in depth but I'm going to go ahead and show you how we can implement it right now inside of our W so we don't have this Behavior okay so let's do it so first things first I'm going to go into the top level and I want to start explaining it a little bit first so what we need to do is we need to firstly have an intercepting route now the intercepting route is going to be positioned in something called a parallel root now the way a parallel root works is basically we render it out uh so if I go to my layout now okay so if I go to my layout so basically what I want you to do is also while you're doing this go to parallel Roots onside in the nextjs documentation and read for yourself all of these things but I Do cover this inside of a coaching C inside 0 to4 SEC here if you want to check that out second link in the description we've just released that coaching core as well so I show you how to do all this right now it's important to know the way it works is if you soft navigate so if I was to let's go to my production Bo if I soft navigate that means if I click so I'm doing a root click that's called a soft navigation versus if I hard navigate so if I went to localhost 30001 basket this is called a hard navigation because it refreshed the page right whereas versus a soft navigation which you're basically routing to so they're the first two principles that we have to understand there's two different things now when you create this these things you basically I'm not going to go into too far details as to how it works I'll create a dedicated video on that but basically inside of our layout folder now we have access to more than one thing so children is implicitly the page. TSX it's always implicitly the page. TSX so we're going to create something called a slot now a slot is going to represent something called a model okay so we're going to go ahead and pop it in here say at model okay so over here now we're going to go ahead and say at model and you see the at sign is basically how we determine slots right so you see this at analytics at team and so forth and then inside of the layout folder you basically pull those through accordingly so you see where we've got attics and that team you can pass those through accordingly so over here now we go ahead and say into our layout file I'm going to have one called modal and then this will basically get pulled in like so here modal okay now what I want to do is I want to position this above my div right so in this case I'm going to say div and this is relatively new inside of um inside of uh what's it called uh nextjs so here I'm going to have a model okay so just like that now we have our model okay now the issue is is that if I refresh and go to my homepage you see firstly we got an error cuz we don't have anything being called for the model okay well actually it's kind of it's accepting it now which is fine but we need to go ahead and actually explain what's going on now so firstly nothing renders with the model so it's not really going to have a problem but one thing I have noticed is that whenever you introduce parallel um parallel or intercept sorry more so when you introduce parallel route which is what we just did so this is known as a parallel route you want to go ahead and restart your server they are very I don't think they've fixed this yet but there is a bit of a bug when it doesn't go ahead and actually correctly render that parallel route so now if I refresh it should break or it should kind of complain yeah there we go we get a 404 the reason why is because it found children so this is why I need you to pay attention Okay so but think about it this way when we load up our homepage it knew what children was because it found the children from paage okay so it knew exactly how to render that now modal it tried to locate this because children it was able to match you see it perfect it found it so we can children is implicitly the page but from modal it went to modal and then it was like hang on nothing's there so basically it doesn't know how to render this page so basically it gives you a 4 or4 so you have to tell it how the hell do you render your page okay so naturally in this instance you can introduce something called a default right so in this case a default and remember what's cool about this as well is at this level at this level the app model doesn't count as a file route so it doesn't actually count as for/ model or anything so it's like an invisible photo okay so if we do RFC now for the default page here I actually don't care I don't want it to do anything right so in this case the model should not render if it's here so what we can do is we can simply say return uh no so return nothing right now you can see my page loads because what happened was if we go back to my previous logic it goes over here uh and basically let's go ahead and do this again so yeah so it found children it found it it mapped it to Page same over here found children mapped it to Page Happy Days okay so it goes then to the model and it says okay how where is the model so it goes to model and it found the default so now it knows what to do and it rendered uh return no so that's fine so it knows that it's it's got a page that exists okay but what's really incredibly powerful here now is we can selectively choose when to render that model into view so here's what we're going to do we're going to use something called intercepting Roots which is this on on on the next next documentation and basically you can intercept so whenever there is a soft navigation as I explained previously whenever we firstly also bam we hit 300 view likes awesome stuff keep smashing the like button guys thank you so much um we so whenever there is a soft navigation what we can actually do here is we can say Okay I want to intercept any for/ basket route okay so what we do is we use this following notation Dot and then we say basket and I will show you over here so if you go down to Convention here this will match segments on the same level this will match segments on one level above two levels above and rout app directory so you can really go ahead and play with it as much as you want but in this case at the top level so this really is the same level because remember as I mentioned this is invisible so technically this is the first level if it was a level up you had do two dots if it was a route You' do three dots so I'm intercepting this basket room now when I intercept this BK basket rout I want to render something so I'm going to render page. TSX now what I can do here guys is I can say basket interception and basically just to test this out to show you how it works I'm going say uh basket here okay oops basket here okay now I want you to see something if I soft navigate now okay so right now there's actually okay this is a bit of it's messing up a little bit if I soft navigate basket here you see how it caught that and it did it right so if I go back to and then you see when I refreshed so let's do that again first things first we're going to fix that in a second cuz I've messed something up so if I go to my layout let me just quickly fix my layout before it drives me crazy Okay the reason being for this is because inside of my page I need to make this Flex one yeah there we go so I want this to take up majority of the room but if I go ahead and soft navigate you see how boom look look at look at the URL guys it did not change so this is what is unbelievably powerful it shows the basket so for/ basket and if I go back can you see how it does that look at that boom so you can now render parallel routs in next to each other based on the route which is so powerful because think about it let's say I did it on this side you can make it slide out whenever you went to your basket so if I click on basket boom slides out I can manipulate my basket and then you can have a x button which just simply does a go back and then it closes it okay so this is really powerful and then what's good about it as well say if I go to the let's say I click on baset and let's say I refresh or I send someone the for/ basket no matter what they will go there but you can have two types of functionality for that route now a soft navigation and a hard navigation which is so so powerful please comment uh inside the live chat right now if you're understanding what I'm saying and kind of getting the vibe here because this is so powerful it's crazy okay so now at this point what I'm going to do is I'm going to instead go ahead and use something called a dialogue so in shadan rather than just making it pop up I'm going to use this dialogue so let's go over to my code and I'm going to install the dialogue so here boom we got the dialogue and now I'm going to go ahead and use the dialogue here okay so I'm going to import the dialogue inside of my basket so there we go so I'm going to pass uh pop it in there and then I'm going to Simply pop in the dialogue example that they have and I'm going to change it based on what we need so there we go boom I'm going to pop in like so now here's the thing M Frank goes my jaw Dro this is such a powerful technique Frank wait until you see what happens after I finished with it right so it's absolutely like this is this is a game changer for Dev Dev work right because now think of like the difference and you don't block the user's journey and send them somewhere else you can do so much powerful stuff with this it's nuts right right but the concept is really kind of one of those things it takes a second to grasp but basically we'll get there so I want this dialogue to remain open when it's in use so whenever this is rendered I want it to remain open okay now when it remains open I also want to do the foll so firstly look at this so you see it's not rendered but when I click on this button oh are you absolutely sure nice okay and you see I can't close it now because it doesn't do anything so how would I close that well remember if I went to this is a nextjs feature absolutely a nextjs feature not a normal react one right so how would I close that well remember all you need to actually do is click back because it's dependent on that route so if I go soft navigate the way I close it is I just go back okay so how can we programmatically do that okay so very simple firstly we're going to change this to a client component we're going to go ahead and say I need the router object so router equals use router okay and then we're going to go ahead and create a function called on dismiss okay and this is going to be a simple function which basically just says router. go back okay simple as uh in fact on T this will be back sorry right do back now all I do is firstly I don't need the dialog trigger because we force the open I can simply say on open change and then basically if it's already open so basically this is a inbuilt function what we can do here is we can say if it's not open then I want to on dismiss and I'm basically triggering out basically I'm overriding the onopen uh change so now what we can do is check this out so he what's up dude if I go ahead and click this now if I click outside look at that look what we've over we've overd the the close functionality to just go back instead so boom just like that guys we have the basket function and now here's the icing on the damn cake right because we coded it in such a way where it's reusable code everything's clean everything's you know the way that it should be built and this is what I preach about writing good code if we go to the dialogue title now we type in basket okay and then here for the dialogue description let's go ahead and build a P tag and say uh contents of your basket okay nice and now you're probably wondering oh we're going to have to build that out and everything oh that's going to be really annoying well actually because we built everything into a basket component boom all I do is that hit save and now guys just like that boom I have a basket component look at that everything from my basket is there and I can just go ahead and manipulate the basket now I do want to change one more thing which is the dialogue content is I'm going to go ahead and pop in a bit of more styling so I'm going to say I want it to be a different size so I want it to be 4 fths of the screen the width should be 4 fths of height sorry width should be full overflow scroll scoll and I want the max width to be 3XL so now boom look at that guys absolutely incredible and now you can go ahead and check out straight from there you don't have to disrupt the flow if they're going ahead and say Adidas for example boom look at this I want to add this product in I go over here I add to car I add to car actually I only want one of those so I'm going to go back modify one carry on Boom unbe like unreal unreal experience like that is that is so good right so look at that now you don't have to mess around with it but remember it's safe for for example someone's like you send them a link or you know in the you want to go back to the point where you go on look at this if you go straight back to the basket what right cuz it's a hard refresh I know Frank is crazy go what in the magic next year is going on right absolutely crazy stuff so now if I go to this computer I go ahead and I want to buy this computer and I'm like look at this so I've got the computer rendering in the images are loading in boom I'm like yeah I actually want two of these computers perfect actually you know what I don't want want any of the after shaves boom I actually don't want the drawer thing over there and screw it let's get three computers boom okay cool uh yeah let's go ahead carry on shopping boom I want to buy something else over there add to C boom boom boom and now okay actually you know what I only need three of those the experience is totally GameChanger and you you you you just like completely like optimize this page to to be such a better user experience and this is honestly the difference between a average Dev and someone who is at the Forefront of the game utilizing the best tech and everything and you can see what we did there the intercepting route was the key to basically saying whenever you try and go to baset on a soft navigation catch that moment and render in something else now the way we were able to render it at the same point and selectively choose where that is rendered is with a parallel route and that's where we intercepted it and we basically were able to do it so absolutely crazy stuff like and I'll show you that right now so again the intercepting route was this this exactly this this here this syntax is basically saying intercept that route and we want to do something with it okay the at model is called a parallel route and we basically render it we're saying render this all the time but the default behavior for any page is nothing don't do anything right but when you hit that view when you hit that route I want you to catch it and basically render out a dialogue okay now you can do so many things with this and honest you can have your you can have as many different things as you want here and you can do really complicated things and I'm going to go ahead and obviously make videos for this because it's absolutely incredibly powerful like you can do still Dynamic wild cards and say intercept two levels up and blah blah blah you can go ahead and do things like tabs I've even shown inside of a coaching call inside a z to full stack hero how you can have tabs sorry in parallel routs so if I go down to the example down below you can show where is it gone they got really nice nice example here of like by the way guys you can even have loading and error States for your model so for example let's say there was a asynchronous element just for this you can have a individual loading an error State based on just adding a loading. TSX or erate and remember what's so cool about it is it will only pre-render that in so think about dashboards right think about tabs think about all those things now and you're really getting somewhere where you're like oh my God this is powerful right uh Mr Frank go thank you so much $5 you can literally make a giant e-commerce site without even having to stock any products with this proxy yeah you really could honestly you actually could uh you actually could yeah Hamed says you're the best teacher ever thank you so much um so says yes using xjs makes easy and yeah react 100% obviously it's about the fundamentals understanding what you're doing understanding truly at a core this is how you can do things BND says this is an outstanding feature this video does highlight it importance in e specifically yeah I can honestly appreciate that as well I think I'm actually going to create a dedicated video on this I have covered this inside the0 to4 again second link in the description GG mock says poam easily the best community in the world hands down Sunny you're easily the best tech YouTuber most amazing teacher and incredible Dev the value you offer oh my God thank you so much that is such a beautiful comment he goes the value you offer in the world is unival Jay can you screenshot that that's such a nice thing to say um thank you so much GG mock I appreciate you massively this is what the community is about thank you thank you so much guys so with that said this has honestly been the Walmart clone I'm going to obviously deploy now as well but Jay screenshot that beautiful comment uh look we've got the asynchronous loading that I've shown you before beautiful loaders we've got the ability to asynchronous load the PDP which is a product page we've got you know responsive we've got different components in play here carousels uh being moved around so look at this like obviously responsive you know image component is being used from next just to hyper optimize that and then look at this C okay what happened there okay that's that's literally part of the description so remember when I said you have to trust what comes back be a bit careful because sometimes they might just throw in you know literally pictures in the HDML but you can see here we go ahead and just let ask do Adidas again I don't know why I'm obsessed with Adidas I've I think I used it so much in the testing that I keep doing it and then obviously we've got the add to cart which is a dynamic button and then and again all of this real time being scraped from oxy Labs really really powerful stuff yeah um one second and then I want to go ahead and click on the basket and then boom intercept it and again look at this scrollable modal beautiful stuff and then you can go ahead and change it look at that guys absolutely phenomenal and you can go ahead and click check out now again why is it so important because you're not and this is the importance I want to stress UI and ux is really important ux meaning the user experience UI meaning the user interface face how it's designed that kind of thing now you us your experience like remember think about it this way if you had to directly take them away from the page you're you're in you're kind of you're very disruptive in the journey so like the minute I clicked that I'm like okay and I and I have to then go back and some users aren't quick on the computer they're just not right whereas in this case if it popped up they could be like oh actually I want to change this blah blah blah and actually cool okay maybe I want to add like three more things and then I want to check out okay boom you see you're reducing the friction to them using your site which means that you're going to get more engagement more use out of this uh Sunny can we just add stripe and charge people a percentage on top to shop at Walmart honestly I think you could I think you I'm not saying it's legal I'm not saying it's legal I'm I have no intention of what you guys end up doing with this Frank but I I guess you could I it's a possibility right you can do whatever you want to do but yeah it's funny right like again the power behind this super super cool so you can really see what your what's capable here now uh yeah let's deploy this app and I'll show you how we can get things kicked off the ground now the first thing I want to do is just run a simple check on my local machine to avoid any issues so what we do here is we go ahead codam what is up dude he goes my dear Sunny how are you I'm doing amazing thank you so much we're going to type mpm run build to create a production build for the apps before we deploy to Vel how's life in Dubai Dubai is doing amazing dude thank you so much we're growing we're doing massive collaborations we have huge things to come and look at this generating static Pages now I want to highlight a few things here you can see look we've got generate static Dynamic Pages the product page is a dynamic page the search page is a dynamic page and then we've got the static basket and so forth but it's really going to be interesting when we deploy this so I'll show you so first thing I want you to do is you need to install the Vel uh CLI tool so go ahead and type in Vel CLI into Google you will see Vel CLI overview and you can install it the following way right however you want to do it uh you deserve it bro thank thank you for the content thank you so much dude I appreciate you honestly really really means a lot so install Vel CLI once you've got that I want you to just simply log into your account if you haven't it will prompt you I've already done the Vel login so I'm not going to do it and then you want to go ahead and set yes now it's going to ask you whether do you want to deploy it to so I have a lot of different teams and things that we do so I'm just going to deploy to my you know free account which is fine link to an existing project no project name I'm happy to keep it the same and keep everything the default everything that we did during setup is fine this will fail out of the box on I show you why so click yes continue continue continue I will I hit enter sorry for no and now this will fail the reason why this will fail is the environment variables are not present so I want you to go ahead click into it it will take you to your Vel click on the top over here and go to settings and go to environment variables now here you have your key value pairs now remember what we did over inside of our build so if I go over to my environment variables and I'm obviously going to hide it because you thought I was about to slip so what I'm going to do here is just just go ahead and show you something so at this point you want to go ahead and copy your environment variables like this right and then you want to go over to this and basically pop it in like so and click save now I'm going to go ahead and actually pop in the actual password and come back in a second so I'm grabbing my actual password I'm going back over to my code over here and then I'm I'm clicking save so I just click save and it said added environment variable successfully so now you can see I've got the two environment variables here you can use versel environment pull to then pull them into a new project somebody asked earlier is that you know is that a possibility yes you can definitely do that if you're part of a team you can pull the environment variables into your project now let's go back over here and we will see that it would have actually failed uh well it says it deployed but really that's not going to work when you actually try to use it because it's going to try and make a oxy laabs scol which will fail so in this case we're going to do for cell again and it's going to redeploy with the environment variables now here's the thing so we've deployed it yes we will be deploying it in a second I'm confident this will deploy this will work however the problem is on Vel you have a free tier right now the free tier gives you Cloud functions absolutely incredible gives you Cloud functions gives you all that capability but the issue is that if a cloud functions execution such as for example when it's scraping so when we use a server component and it has a await fetch that is technically a cloud function that's triggering off when it does that if it exceeds 10 seconds in execution time that is going to be um what's it called that is going to be uh past your free limit so you then have to go ahead and change your uh plan from a free to a from the hobby tier to the pro tier okay so and that way you remove the 10-second barrier and I'll show you what I mean by that so right now we have successfully deployed and I want to highlight one thing as well before you can go ahead and obviously see your build logs but click deployment summary this is the really cool part guys you can see a breakdown of all of your static assets as well as your functions now so the product and search page like I said to you just now they are functions okay and then you've got the ISR functions now ISR the basket functionality the uh the everything is going to be dynamically updating you can obviously change this and manipulate this as you see it fit okay but if we go ahead and click this and go into our sell app obviously this is au authenticated link right now but if I try it out okay so if I click on shop wardrobe it will try to go ahead and scrape now the problem is it will probably come up with a client exception in about oh no it did work because it was quicker than 10 seconds right if I try again over here if it's longer than 10 seconds it will say client exception okay but I guess it's working right now okay because it's not longer than 10 seconds but if your Internet is slow mine's very fast oxy laabs is working pretty quick right now if I try and add to car boom and look at this guys it's actually working perfectly let's try Adidas right the Infamous Adidas Hood hoodies that we're trying but if it does exceed the 10 seconds then just so you know that is why it's failing okay so I want to definitely make that clear to anyone who tries to deploy and is freaking out about why it's not working so say now look at this guys we add in boom if I refresh and go to a hard refresh boom Works absolutely amazing James Goes at work but we'll check it out tonight great energy and Bill pop Fam thank you so much James I appreciate you guys that is the build that is the build absolutely incredible incredible stuff so I'm going to go ahead and do it the only way we know how to before we wrap up but this has been an incredible build in fact okay I'll do it with this one right so guys today we went ahead and built out oh nice I love seeing people progress today we went ahead and built out a Walmart clone fully functional really awesome stuff obviously we didn't have checkout because it's a demo okay but the point of it is is I showed you so many different concepts today we talked about nextjs caching we talked about Shaden the ability to use all these different kinds of components now for example if I clicked on shop wardrobe you see how instant that was because it didn't actually have to connect to oxylabs to scrape the data again because we use something called Next revalidation which means that it only basically bursts our cach after an hour so everyone's getting the cash version until that hour expires then it will make a cold oalabs to scrape the data again right and now if we go into a product over here for example it's scraping because we've never visited this page right now you can see look at these beautiful carousels amazing stuff we even introduced zand into to have Global State Management so you can see Dynamic buttons how you can create something like this reuse that button in something like another component and also again notice my URL so over obviously in this case notice how the URL goes from for slash to for/ basket but then we have this Dynamic model that is popping in and what is happening here is it is going ahead and intercepting our soft navigation to the basket route and it's using a parallel uh parallel route to go ahead and render in a model to basically make the user experience better now again if we were to refresh and do a hard navigation the parallel route would render just the modal instead so this is why it's so damn powerful but honestly this is really Game Changer stuff guys I can't stressed enough how cool this is that it works in this way um and yeah all of this code is available on G hubs and I can understand that this can be quite tricky and complex as I've mentioned before guys don't overwhelm yourself again thank you so much Frank for the donation I appreciate you so much but as I've said before don't overwhelm yourself it really can be a scary thing when you see all these advanced concepts coming into play especially the more and more nextjs evolves this is why we build something like a community where I can guide you weekly as things evolve you're going to feel like sometimes you're left behind if you feel like maybe a month goes by a few few months go by you're going to come back and be like okay I didn't never I've never heard of parallel routs in my life what is that about right this is why you need something which is dynamically evolving you need a community where people can help you out you can ask questions about what we just did for example I've covered this ages ago or like a few weeks ago already inside the coaching course so this is what I mean if you want to be at the Forefront and be at the edge of your you know your field be the best of the best this is why a community like zero to full stack hero is unlike any other okay I highly recommend you join today go ahead and check out for yourself here we've got all of our students we've even got you know absolutely amazing amazing I love I love Frank's comments we've got absolutely amazing students you've got different plan options to go ahead and join with like I said weekly coaching cu's amazing papam community of over a thousand students now we over a th000 students and we've got results guys honestly so many results you can go ahead and check out a sneak peek for your side of some of our sessions we've got tons of coaching calls inside you also go ahead and get a bunch of free ebooks when you go ahead and join as well so you can literally check it out somebody goes 2 months ago all of this was overwhelming but now it's easy peasy Provine I appreciate that comment that's exactly what it's about you can feel free to check out who I am here if you're new to the channel you can see Frank hey what's up Frank is on the homepage himself and a bunch of our people who have absolutely smashed it in the field right so you guys can go ahead and check out for yourself I do recommend by the way if you want to see some like actual results from our students head over to papa.com at the top of the website you can simply go to the uh reviews right hit reviews now on the reviews you will literally see a an unbelievable amount of real world results this is literally what the community is about and you if you don't need me to tell you like these people will literally vouch for the course themselves everyone has succeeded themselves inside a zero to full stack hero this is what it's about guys it's just end less list of results these are nothing but success stories papa.com testimonials this is the place to go ahead and check out for yourself why you should join in second link in the description join something like Papa like um zero to full sa I mean sorry I've been I've been coding for like 3 hours I'm a bit hazy but yeah this is the place you need to be to go ahead and stay at the Forefront of the technology of next year all the good stuff and as we mentioned today as well none of this would have been possible without oxy laab so the first link in the description will get you 30% off the providers so with that said guys this is uh this has been a very very fun build I'm going to go ahead and wrap up now with this with the side of things yeah but thank you so much for tuning in and uh as I mentioned before yeah we cover all this stuff inside of the course we built Walmart today beautiful app shopping results you get the dynamic functionality of everything you know intercepting parallel routes amazing stuff guys and there's a two different concepts just not to get confused right just in case anyone calls me out on that but there you go guys absolutely beautiful app to add to your portfolio for absolutely free all the code is going to be in the papa GitHub repo and yeah it's been an absolute pleasure to teach you once again I have so many builds coming up March I have so many Microsoft collaborations coming up we have so much stuff happening on the channel I'm working with the guys over a cl to basically bring you the best of the best in authentication so many cool videos to come onto your screen very soon and I'm starting a whole new miniseries on different concepts in next year so that way you don't have to binge watch three 4our videos you get 10 minute 20 minute videos at your disposal weekly I'm going to keep it coming guys but this has been your boy Papa rat AKA sunny and I will see you in the next video [Music] peace

Channel: Sonny Sangha

Views: 40,834

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

Id: LWT1LGMmzNk

Length: 182min 37sec (10957 seconds)

Published: Fri Feb 09 2024