🔴 Let’s build GOOGLE SHOPPING with NEXT.JS 13! (Scrape Google w/ Oxylabs, React, TypeScript, Tremor)

[Music] welcome back to the channel it's your boy Sunny AKA Papa react and you know how we do it Google shopping this is a sick Club next year 13.4 all the latest and greatest bits of tech only for you guys because you know I'm always trying to push the boundaries always trying to teach you the latest stuff and always trying to make it easy for you to pick up your coding journey and just run with it so let me know what you're watching from right now if you're watching the replay make sure you smash that like button subscribe we're about to give a demo of the entire application already got comments flying then we've got Sydney Australia India UK Sri Lanka India Denver uh Kali oh this is it that's what I'm talking about guys welcome to the stream Tanzania in the house that's what I'm saying Papa Farm let's see a demo of today's build the Google shopping hello are you ready for this you ready wait for it ah check it out guys welcome to the Google Shopping Club here we have an awesome app and guys this is using so much Tech under the hood so I'm gonna really try and break this one down because I haven't done a lot of what we're doing today inside of a build before right so firstly you know how it is always mobile responsive always good stuff let's go ahead and type in a search so I'm going to type in a MacBook Pro 16 inch first thing to notice this right here when I hit quick when I hit them search you see searching right now boom we've got skeleton loaders what I'm going to show you how to do that and then you can see we got a dynamic search results and guys no joke that scraped Google that fast through the power of voxy labs more on that in a second but look at this guys we have all the results coming in notice how even the dynamic filters came in so this was all dynamically pulled in let's try another search let's do iPhone 14 pro Max boom searching oh my God that was already cached that's crazy right let's go ahead and do something like a Macbook uh M2 boom searching oh now it's loading it so we've got a nice little skeleton loader pretty sick we haven't done that in a build before and then just to prove a point to you guys look how it's different now look how everything on the side change so let's go ahead and click into a result boom let's go ahead and touch into this one and look at that like it's blazing fast and this is what I want to like showcase today how you can build incredibly fast websites you using incredibly powerful bits of tech such as oxy labs and go ahead and you know combine that all together to build incredible apps like this here we have a beautiful app so you guys can see it fully responsive everything looks great and I didn't just finish there we've also got filters we can filter our search we can do high to low Min price Max price all that good stuff but the main important impressive thing right here is that this is pulling from the actual Google shopping website so this is the actual Google shopping website and I want to prove a point here if we were to go ahead and take this ID right now and go ahead and pop it inside of our own website boom this is literally scraping that page like it's doing it right now scrape the page and it went ahead and popped it in here that's crazy powerful guys and I'm going to show you how you can do exactly that this is something you want to add to your portfolio to Showcase that you can use amazing bits of text such as oxylabs and combine them with xjs Cutting Edge technology and get this out onto your portfolio it shows a lot of different skills and honestly it's so cool what's behind this build we have lots and lots of other things to look forward to we have typescript Towing CSS Tremor the cell we're going to deploy it obviously and all that good stuff but before we jump into this I want to give you a quick demonstration first things first I mentioned before if you're just tuning in because I can see so many people flying in right now make sure you hit the Subscribe button and like the video so I can drop more of these guys I have so much new stuff even server actions I have a new video dropping out this week your boy is trying to drop pick up the frequency with the videos I'm coming in hot I just need your support with smashing that like button now let's dive into what makes this entire thing possible and just to Showcase something to you this is literally real data being pulled in from the Google API and you're probably wondering but why am I I want to do that maybe I could just use the API itself well in some cases you want to scrape data from websites and it's not always a possibility to do that you know using something like a python script or something like that because what tends to happen is they get blocked right they simply get blocked this is where proxy services such as oxy Labs come in absolutely clutch so obso Labs is an amazing service that they're actually working with us today to make this entire thing happen they're an industry-leading web scraping solution and they have the world's largest ethical proxy Network they're the only ones who actually propagate ethically and responsibly scraped so that's something which is quite important for a lot of you I know because I get loads of comments from my way okay so they have 24 7 support so actually when I was building this they reached out a couple of times I actually reached out a couple of times and they helped me out so fast okay so we're going to dive into a couple of things there's no additional fees everything's upfront you know it works the way it is and it's something I want to mention what is a proxy scraping platform what is that right so essentially think of it this way you've got thousands and thousands of computers they call this a proxy Network and what they're doing is essentially mimicking a user going onto a page and then they've built out apis which are basically scraping the data from complex Pages think Amazon think Google think booking.com all these really important websites that we used in our day-to-day life sometimes we need data from them right and it scrapes it ethically with a service such as oxy labs diving into it they've got tons of different things I would definitely recommend you jump off toxicity Labs give them a look and your boys hooked you up with a free trial first link is in the description all you have to do is sign up to that go ahead get your account ready oh Frank what is up good to see you here Papa van special team member there we go man OD in the house and it's so easy to use honestly this is by far the damn easiest scraping solution I have ever used okay and they have it doesn't just end there they have incredible documentation you can see over here they've got a ton of different proxies so they've got search engine results scrapers they've got web scraper apis and they've even got an e-commerce grouper API which is what we're using today so this is something which is really really gonna help us out now if you do get stuck at any point check out their documentation in fact today we are you going to be using the e-commerce scraper API and as you can see they support lots and lots of popular websites including Google shopping which is what we're going to be using now for the shopping search you see remember that page that we were first on so let's go back over to the home page let's type in like monitors over 500 these are some quick searches and as you can see here monitors over 500 dollars here for example all of this data that you're seeing right here this will be utilizing the shopping search right so this will be using the shopping search API and what's amazing about this is that they've literally created an easy to use API that we're going to go ahead and connect to we're going to create our own API endpoints as well so this is a full stack build so you're going to learn a lot of front-end but you're also going to learn back-end stuff which a lot is very important to a lot of you okay so we're going to go ahead and connect to their API pull the data from the shopping search and then when we click into an individual product we're going to go ahead and use the Shopping product right so this in this case you can actually go ahead for you look here for yourself and you can see there's code examples lots of different languages are supported including node.js there you go right so if you ever get stuck you can feel free to follow along and check out the documentation okay now it's worth mentioning to save ourselves a little bit of time and space I've not pulled the images here instead what I've done is when you click into it it goes ahead and showcases and pulls the images and so forth right so that's why I've done it in this way but yeah I'm going to demonstrate all of this to you so it's actually pretty damn easy a lot of you are like what that's crazy that's so cool and by the way guys this is using next year's 13.4 at the time of watching this video so if you are thinking you know I'm not sure when I'm gonna actually be able to or maybe I'm on you know an extra 13.6 by the time you're watching this I don't know whatever is out at the time you're watching this then don't worry this works it supports remember the main thing here is I'm teaching you a lot of fundamentals the new app router we're covering we're covering how to go ahead and build out Dynamic routes all that good stuff all of it is going to be covered in this build so get excited get ready it's going to be a lot of fun right so uh yeah somebody says does it bypass rate limitations Yes actually that's literally what proxy servers are pretty damn good at doing okay now um it's definitely worth mentioning there's tons of different ways to integrate it so we're actually using something called a row time synchronous ball and what this means is we're basically making a async awake cool right and then uh we're basically fetching the data so we're waiting in real time for a response to come back but they have tons of others they actually have asynchronous methods such as a push pull they have proxy-like integration options so tons and tons of different things to go ahead and get you set up but enough talk right let's just get into the damn build right let's do the thing right and remember if you do get stuck at any point you can go ahead and check out any of the free content on our channel so you know this is literally what this channel is for to help you build out your skill set and if you do want to go ahead and elevate your skill set to that extra extra level head over to popereact.com forward slash course and check out our zero to full stack hero Flagship of course I literally put my heart and soul into this thing every single thing that you see on the live streams times it by 10 that is in the course right so times it by 10 and honestly the coaching course weekly coaching calls module content every single week I push into this course it's literally evolving every single week and think about it this course has been out now for quite a while and I have been adding to it literally every single week oh I try to every single week right think about how much content is in this course right now so this is something which I really want to sort of showcase before we get started because if a lot of you do get stuck a lot of you feel like my projects are too intense too hard definitely won't go ahead and check out properyout.com see for yourself check out the video you've got our students inside literally they love it a lot of our students are watching right now as well and if you want to find out even more then yeah this is the page to visit and if you haven't already we've got loads of new people enjoying the new University of code every single day we send you out coding problems and solutions to your inbox so whatever you're looking whatever you're into we've got you covered right that's popular.com University of code all the links and stuff like that is in the description so feel free to check it another one oh wow we've got a donation company thank you so much I appreciate you dude right without further Ado guys let's go go ahead and jump into this right now so remember if you do get stuck at any point Feel Free by the way just I just want to mention this right when you watch these videos try and watch it and actually enjoy it right so watch it enjoy the content rather than trying to follow along with me and you know you might get stuck and then you think I'm done I I don't want to do this anymore the reason being is honestly the whole the whole journey should be fun so get enjoyment from it enjoy the video and then afterwards you can watch the replay follow along if you get stuck you can join there at full stack her out you see what I mean all this good stuff like don't stress you will get that in the end and I've got your back the proper fam is here to help you out so let's dive into this right let's do this create next app so this is actually our app uh like I mentioned we're going to be using next year's 13.4 and we're going to dive into a bit of coding now right so first thing I want you to do and it's worth mentioning that we are going to be using react server components we're going to be using nested Roots uh inside of here the simplified data fetching I will show you how to basically do caching all that good stuff and I'm actually going to a dedicated video on server actions and on caching so you guys have asked me a lot of questions I am going to go ahead and help you out a lot with that I know you guys are enjoying the podcast but I'm coming back with the coding content as well right let's go ahead and kill it some of those brights he says your channel is a lifesaver thank you so much a live server okay I guess it's Lifesaver right so we're going to use the create next app to go ahead and get Kickstart things off and I'm gonna actually go ahead and restart some of the music we've got some new songs on the playlist now if you want access to the place all of you guys come to the website and ask for the playlist so you guys can actually go ahead and check it out for yourself um on the website all you need to do is literally go to popularout.com at the bottom put your email in or in the description it's there and you can go ahead and get sorted out yeah now I do want to mention before we get started the service that I mentioned previously was a uh well it is oxylabs and it's going to be what we're going to be using inside of our build now I do want to mention the first link in the description gives you a free trial so make sure you go ahead and benefit from that it gives you a free trial to go ahead and get started and you can see your boys hooked you up with Papa fam 20. so all you need to do is literally sign up create an account and you get your free trial okay so I forgot to show my screen all we need to do is go ahead head over to the first link in the description and you'll see papa fam 20 click try out create an account and you're good to go right your email your username password everything gets literally sent to you via email right and then I'll show you how to access it all inside once further right good stuff whoa we got Apple a demo oh what's up albo he's a OG member in the house uh this is sick we've got loads of family members in the house this is cool Jack says love that you don't watch screen projects others are too afraid nah we don't we don't shy away I take the challenge on Sheehan says sunny big fan what's up the daily says I missed you I missed you guys too we're gonna absolutely crush it today right first things first let's get started create next app boom are you guys ready so this is how I would recommend you start your apps this is going to give us a starter template MPX create next app at latest this is going to give us the latest version of it you can use all these other services I'm just going to keep it very straightforward if you don't have MPX you probably need to install node okay so I'm going to try a different sort of 10 Pace today so let me know if the pace is good if the pace needs to pick up if the pace is slow all that good stuff right now I want you to open up your terminal and I like to go ahead and put things into um perspective by just put things a bit neatly I put into my documents builds um and then I go ahead and I do MPX create next app latest now you don't even need to put a title here you can just literally hit enter right and what this will do is it will go ahead and get us set up so let's go ahead and do this and you can see is it okay to proceed yes so hit the enter key and then you'll get a few prompts so what is your project name so in this case I'm going to type in oxylabs Google shopping clone YouTube Right call it whatever you want it's completely fine right Canal says oxnard's trial is for seven days yes so it's enough to go ahead get started what I would recommend is that if you want to put this on your project or your portfolio and you know you just want to leverage the seven days go ahead sign up see what the service is like create a video recording of your entire app put that on your portfolio that way you get the best of both worlds and if you love the service you can continue to stay on with oxy Labs that way we all win right Mr Frank yo ten dollar donation I love you man enjoy the process don't get frustrated Papa fam strong that's what I'm talking about Frank love you man honestly the dude is always in our stream supporting us thank you so much and it's so true honestly like all of these coding tutorials everything you can get for string don't stress out okay just take your time this is why we have a community called the papa fam which helps us overcome this literally you cannot get stuck with the community that's why we've built this thing that's why you should join zero to full sack hero right so join typescript there we go yes yes Lynn tell in CSS yes Source directory no I'm proud to yes customize the import aliases no we're going to keep it as it is right the new Alias is a pretty cool as well right so in this case this will set up our project in the meantime you can literally see for yourself that this goes ahead and does it and if you get stuck at all and there's something worth mentioning they changed the next JS documentation recently so if you see here using Pages router you want to make sure you're using the app router okay so next year has 12 and all that good stuff is over here next year is 13 now uses the app Brewer so you want to make sure when you're looking at the docs don't get it mixed up right just don't accidentally be doing things in pages when you're working with Nexus 13. what about 10 donation that's crazy man we literally already got like 30 in donations wow we haven't even started thank you so much dude I appreciate you that's my food after it's done handled sushi on the sushi on Apple I appreciate you guys man all right so at that point we should have everything set up let's go back perfect right so we're gonna go ahead and do CD oxy labs and then we're going to say Google shopping clone YouTube okay Dash YouTube right and then you can see I've got this over here right so then I'm going to do code dot like so and that will open up vs code in the perfect setup right now let's go ahead and Chuck that out of the way so get rid of that and then I'm going to just prepare my screens a little bit okay now what I'm going to do is I'm gonna actually pretend as if we've got a design team and we've got a couple of designs and we need to go ahead and build it according to spec right so the way I like to do this is I like to just screenshot usually I do it before the build but screw it I'll do it right now with you guys instead and uh oh I haven't got access to that okay where's my all right let me quickly get access to my my shortcut doesn't work okay that's fine anyway we've got this I can run it on a separate server that's fine so we're going to go ahead and build this out so heading back over to my build yeah you can see the welcome right this is what you're going to start with this is your next yes start a template Giancarlo says yo honey how is it going I'm going good dude thank you so much and we have the new app photo okay so pay attention now is this a good screen size I can make it a bit bigger I can make it a bit smaller let me know right so in this case what I want you to do is command J and I want you to go to Output now you want to close the second this one close the debug and you shouldn't have your terminal command B to hide the sidebar and I want you to do mpm run Dev now before you do that check your package dock if you have a yarn lock then probably it's better you should be doing yarn run Dev but I'm using npms or package lock okay so npm run Dev hit enter now this is not going to work for me so I have because I have to cancel my old running um you know my old service I'm going to cancel that right now so npm run Dev like so and you can see we've got the localhost 3000 running now what I want you to do is command J to hide that command B to pull this up and I want you to go to page.tsx and you should see we've got a bunch of stuff here so what we should have done there is that we've actually started our application so if I refresh our localhost 3000 this is what you will see right so give it a second just to load you will see this a star template that gets us set up right so this is the way I want you guys to start boom we just smashed over 200 likes already let's go proper fam smash that like button if you're excited for today's build let's keep going strong right so what we need to do is everything inside the main block I want you to take it all the way down and just get rid of it right just delete it and then we're going to go to the image block get rid of that right and then this is a little trick for us basically centering a div right that's a funny running joke and if you don't know how to do it definitely practice that right definitely play around with Xbox 4G we're going to get rid of that as well I'm not going to type in H1 let's build a Google shopping clone with oxy labs boom okay so let's go ahead and do that head back over here and you should see this but you're probably wondering why the hell is the background black that's because we've got some default styling so command B globals.css we want to go ahead and keep the top because that's importing and setting up they've already set up Tailwind for us so this is completely fine Johnson delami says I'm back and I'm back I've been a while I'm motivated return stronger strength thanks thank you for sharing your skills honey I appreciate you did delete all of this go back and then I want you to go into your layout.tsx this is where basically everything is going to get rendered I was going to make it one dash molar I think that's okay as well right and then I'm going to get rid of this I don't care about the font right now metadata you can customize to your heart's content and we're going to do this right so the way to think of it is everything in the page.tsx or in your route is basically popped into the children right here okay so this is basically your layout file so you can do a lot of things like you can put your header and all that good stuff Jimmy one problem what is up dude good to see you in the house this is what I'm talking about yeah look at that the likes are flying in this is crazy this is absolutely awesome so as you can see now that's where actually the page loads in so this is where this is basically gets injected right so what I like to do firstly is just sometimes like make your life easier put a main tag here and let's just pop in the children yeah oops there we go all right so you've got the main like so and then go to your page and then make this a div right that's sometimes a little bit cleaner you can do it however you want there's no set rule there right so there you go let's build a Google shopping clone with oxylabs so first steps first I want to go ahead and create the nice header that you guys saw in the beginning so let's do that because that's the most visually appealing thing it gets us the bit most like bang for our buck to get started with it right so we're going to build a beautiful looking header so first thing I want you to do is go into your components uh go into your app go to the package.json level create a new folder called components okay now let me go ahead and just go to music up a little bit because I know you guys like some of this right Deepak yo what's up smooth Reflex on goes oh yo this what's up guys I love you guys you guys are all saying hi Sunny what's up all right good to see everyone in there so we're gonna go to the components and then I'm going to create a new file called header.tsx and I'm going to use something called a react snippet so rfce and if you're wondering how I do this I literally say in every single video because it's so damn cool I'm going to say es7 in our extensions and you should actually go ahead and install the es7 react Redux the Snippets the one with 8 million every time I literally making videos like another million people downloaded that right so let's go ahead and do this and then you can do rfce boom and I'm going to get rid of this because we don't need to import react anymore now the header I'm actually going to make it a client-side component so a quick little lesson every single um uh page.tsx or anything every single component inside the app folder by default even in the components folder finder photo is actually known as something called a server component this means that it's rendered on the server so essentially it's going to be rendered beforehand on the server prepared so that way it speeds things up and then it's actually just the HTML CSS is dunked onto the client okay but sometimes we need interactivity and in this case we are the header I want it to be interactive so I'm going to make the interactive um I'm going to make the header interactive but and the way we do this is we convert it to a client component okay so the client component is going to be we basically put the directive use client okay so that makes it a client component we're going to change this to a header tag nicely and then we're going to go ahead and get things set up okay so first things first I want to um I want a Google logo on the top left okay so on the top left I'm going to go ahead and pop in a image I'm going to use a nexjs image so this is the image tag and then I've got the source which is going to refer to a major life easy don't worry guys I've shortened a URL this is going to be the Google URL and then the Out Tag is going to be the logo and then this is going to be the width and height now any you know pictures that you end up using all that good stuff remember we have no affiliation with Google this is entirely educational video yeah just just have to do that these days all right so we've got the source out with height and then I'm going to import it so go into your image tag control spacebar to go ahead and do autocomplete there you go boom hit save and there we go so nice someone says hey Sonny I just completed a bootcamp and at a stage where I need to make more projects your clones tour is awesome I love learning new stuff if you've created a boot camp or you know you want to go ahead and get more membership then definitely check out something like zero to full stack here honestly this is perfect if you're in the beginner stage or if you're in you're past the boot camp and you want to have that continuous coaching mentorship and that kind of stuff check it out paparia.com forward slash course I definitely you won't regret it you just won't regret it right so we've got this the image tag right now and then what I want you to do is put in a class name and I'm going to do object contain this keeps the aspect ratio regardless of the width and height because sometimes if you don't have object container you can skew it okay now if you're wondering how I'm getting these Auto completes is because I actually have the Tailwind extension installed okay so you may not have this installed in which case you're not going to see what I'm seeing so you need to install the Tailwind CSS intellisense extension okay so go ahead do that and I'm going to also give this a margin right of 10 so that way when we're set up we can do this okay so that's all good uh good now we're going to go ahead and see if that did anything or if it just broke everything else right so where's my how is my code so boom here we are so if I refresh you'll get an error right so let's go ahead and save oh wait it's because we're not pulling in so go to your page in fact actually we're going to put in the layout so under at the top of the layout I want it in every single page so that's why I'm putting it in the layout folder and there you go and you can use client components in your layout folder of course right so now if we do this we should get this error that means you've done something right trust me okay now the reason why we might use a image tag is because we want to optimize the images right so you can check them out the documentation for the next image tag or you can actually check out a video I dropped on the channel if you're watching the replay it'll be somewhere around the video Jay you need to plug that uh and then yeah we're basically going to go ahead and show you how to do it so the first thing you need to do is actually white list the hostname of the image that you're pulling from the reason why you need to do this if you don't whitelist it think about it your app can get easily abused because every single like let's imagine you allow users to add images and it was an image tag it's going to use so much computation about this if someone was spamming images into your apps you have to basically say this domain is fine to go ahead and white list images so in this case I go ahead and do images in our next config I type in domains and I white list the proper react domain right and then we hit save now it does restart the server but I just it just doesn't always do it right so I'm going to do Ctrl C to cancel it npm1. Dev to go ahead and kick Psy off again okay and then we're gonna go ahead and close that okay cool this is good all right now we're gonna refresh and what we should see if we did everything well is a nice little Google clone at the top of our screen there we go all right we've got the Google clone that's perfect so that's a that's a start right we're almost finished I'm joking all right we're good we still got a while um so now we're gonna go to the next config we've got the header here and I want to make this a clickable image right so first thing I want to do is oh wow Torrance has got my first job learning from you being a software engineer for three years now thank you Jay screenshot that thank you so much for sharing that with me I love and appreciate when people do that and I'm so glad we can help you out at the bobber farm right to make this a clickable image we basically add surround it in a link tag so we import it from next link cut that away surround the image tag and then you basically want to go ahead and give it a href and this is just going to be the route that you're pushing towards in this case four slash okay what's really cool about this as well is that now it actually supports the statically typed routes I believe is called I can't remember the exact name anyway the point is is that if you're using your next link tags it will actually tell you if you're you if you have that route supported yet or not so if you try and go to a link that doesn't exist that actually sort of you know screams at you so it's pretty cool and it's actually a pretty cool little Edition that they're doing in xjs best of best is what's up sonny we miss you I'm actually here every single week right Natasha says how does one begin with development you go to zero tool stack hero or you can use YouTube right so honestly is both ways but if you want to accelerate you know where to go right um I'm gonna try and up the music because this is a bit this is a bit quiet what is this right there we go that's about all right so image tag and then underneath the link I'm going to go ahead and pop in a div and this is going to be for the form okay so the form I'm going to go ahead and pop in a bunch of different stuff so first thing I'm gonna do is actually have um one second I've actually changed this out oh wow actually I completely forgot to remove something I've still got the same thing I had previously in there so I need to just double check one thing and then we can get started off okay all right so we're actually going to be using the Tremor library to do a lot of The Styling today so I'll show you how we do that so I want you to go to trema.so right and in this case you can just go to tremor.so the react library to build dashboards fast right we're not going to be using it for dashboards we're going to be using it for the beautiful components it has inside of it so npm install trimmer react boom copy that go back to your app Come on B to hide that command J to pull this up slide over another terminal you can do that or you can just go ahead and press the plus to have a second terminal full screen and then you can do npm install trimmer react make sure you're in the right directory I am okay violin says hey Cindy I love you Birds they're amazing also saw your podcast videos I've learned in Channel and dude they're really inspiring great vid thank you so much I appreciate you man all right that's so cool oh wow during another job look at that Jay oh I think it's the same guy I have a screenshot that that's so cool kushta says I owe you my career dude got my first react job only because your awesome projects always stay best they screenshot these this is so cool smash the live button for that that's absolutely amazing what that's so cool so we've got Tremor installed now now Tremor there's a little bit of setup you need to do so go to get started and we're not going to do this we just go to next.js and that's fine you go down you see we've already done this but the next step is pretty simple you just need to go to the Tailwind config and add in this this is basically going to compile the Tremor module so go to your Tailwind config you can either go command b or you do command p and you type in tailwind and you start typing in that's a faster way of doing it we're going to pop it in like so go back to the documentation go over here and then you need to go into the towing config and add in a bunch of things so in the theme what I recommend is you just grab the entire theme object so take this entire thing down to the uh to the ending and then go to the plugins because we also need that so copy that right go back to your code and the theme that's currently in here we don't really care about and even the plugin so go from the plugin to the theme delete it and then paste that in and then hit save okay so that's basically going to pop in the theme and obviously you can change this out right right now I'm just using the Tremor theme that they're giving us right from the get-go so this is basically something you can easily customize and change it up as you want right then you want to go ahead and run now they do use a hero icons I'm not going to use versions one zero six I'm going to use the latest instead of that I'm going to go to heroicons.com and I'm going to go to the documentation hero icons is a really great way of popping documentation icons into your app so you're going to go to your icons and then you want to pop in npm install here icons react oops okay there we go and this is going to install it into our project so command J second terminal boom install it like so and now we have it set up okay so now we can use Tremor inside of our apps that's good cool next up what the hell just happened oh my God pricey with 50 Australian dollar donation he goes sunny I love you brother I'm a college student and you really helped me learn how to code you the man bro what the hell thank you so much man that is that's crazy I appreciate the hell out of you guys uh the support today is nuts what this is crazy this is absolutely crazy I'm almost at 300 lives keep smashing that live button let's get this video to a thousand that's how we do it that's absolutely nuts oh my God right so from this div right this is gonna be um okay so I'm trying to think how we're gonna arrange this up so this is gonna be where we have all of the different okay so firstly we'll start off with the form this will be our form and this form will basically be responsible for all of the um the input basically so at the top remember we had where you can basically search all that good stuff we're gonna have uh this be that form point so uh I'm gonna have everything that we have in here that's fine and I want to have inside of the form a div okay so inside the form one of div and then another div and then I'm gonna have a magnifying glass icon okay so I'm gonna go ahead and pop this in I'll show you how to import this all right so magnifying glass icon and this magnifying glass icon is going to be imported from the hero icons Library okay so we're importing it from the solid variant you can also get the outline variant but I want the solid all right so we're going to go ahead and pop this in boom we have the magnifying glass icon now at this point you should just test it see if you're actually getting a magnifying glass if you get that good okay don't freak out if you don't just take your time okay so in this case that's fine and then we're going to have a input as well next to it so I'm going to have input like so okay now for this input I'm going to have a placeholder okay the placeholder is going to be search dot dot and we're also going to be using the form data itself so we have to give this a name for this photo we're going to call this one search term that's great and then also going to style this up a little bit saying that they shouldn't have an outline when you click on it and it should take up the majority of the space that it's in now I've given it Flex one but the parent isn't or isn't Flex yet so we're going to go to the div and I basically want to style this together so if we look at it originally oh it looks fine now you see how they're stacked up all right so we've got the search thing here but we've also got this on top now the reason why this is because by default things are block which means a stack up and uses a full width instead we want to change this container to become a flex container and naturally you'll see this will go into a row okay and then I'm actually going to make life a little bit easier and pop this over here there we go okay and then what I want to do is I'm going to go ahead and say items should be centrally aligned so that way they Center it on each other you see how it just slightly moved there we're going to give it a space between each other of two so you'll see the magnifying glass pushed away background of white you can't tell right now but that is a background if we do it red for example I'll show you it will become Blazing Red right we want it to become a white background and then we're going to go ahead and say Shadow X after a large around the corners off because that's the way Google does it border of zero and then padding X of 6 padding y of four hit save and then wait for it so look at that already what already crazy right it looks so much better already all right and then when I get to a big screen you see how it's just huge right I don't want that to happen on a big screen I basically want to give that a Max width constraint once it gets on a mobile on a mobile view I want it to be like you know Max width but on a big screen I don't want that to happen Okay so what you do is you use something called Break points in Tailwind um oh someone said it's better to use Gap when you're flexing you can yeah you can use Gap Gap is not supported on all the browser zones there's something to know right I just want to you know it's supported most of the browsers that I use anyway but I because I do use gaap and in fact we're going to be using Gap today uh you can use guys it's actually better for grid as well to use Gap right um but in this case keep it there right there I'm trying to be supportive of every browser right so um everything here is mobile first so this is all designed for the mobile view and then what you do is you add in break points to say on a medium screen and above I want to implement for example a Max width of 5xl you can see that gives a Max width to 64 ram so if I hit save now you'll see that we have a Max width Pops in only on the medium screen so you'll see that follow width follow it follow it on a medium screen and above boom Max width okay so this is something to remember now what I want to do is I also want to go ahead and uh Flex Oneness because I want this to take up the full width of this parent container in this case we've got this one here and this one I'm going to center it out so this is going to be a flex uh firstly I just want to show you the purpose of why we're going to do this because over here we're going to have a search button component okay so we're gonna have a flex button and this is going to be items centrally aligned with a gap of two all right so I'm doing a bit of both width for having X of four and flex one and again the form itself will have some styling around it as well right I can't actually no we don't need Flex one here and that's fine right so at this point boom that looks a bit about right that looks okay for now I'll do and you can see that if I was to fill that box up it takes up the majority of that room that input phone so that's fine for now okay so next thing the surrounding div up a level from the form I want to give that a Max width constraint so I'm going to say items should be centrally Ally actually no we don't need that right we'll say width full by mobile view I don't say on a medium screen it should be Max width of 2XL right so now we should see a further constraints that's better that's a lot cleaner actually that's what I wanted right so you should never actually grow past that in fact you could even you know question this one if you want to keep that or not all right because at this point to be honest this one actually come into play so yeah you see that it doesn't come into play because our parents running I must change that afterwards right so at this point now we're going to create the search button so search button is going to be a separate component and the reason for this is because I want to show you something called a transition state so we've got the search button here and I'm going to go ahead and create a component for the search button.tsx boom RFC that and make the component go up over here and then inside of our search button I'm going to Simply Mary's very very simply just make this a button it's also going to be a client component so in this case we're going to have a user client yeah okay and then this is simply going to say searching okay so search uh or search right so for now and then back over here import the button like so yes I've imported at the top and now you can see we've got our search so let's start this out so it looks a little bit nicer than what it is right now so I'll show you how we do this we say class name BG blue 500 and when we hover over it I want it to be slightly darker background and following these same sort of rules you know we're going to go ahead and achieve the same design by adding in disabled States as well so I'm going to pop in my Styles here the text white from Bold all that good stuff and then I'm also adding a disabled state so when it's disabled a passage should be 50 percent disabled will also have a cursor not allowed and I'll show you how we do that okay so that's already looking a bit clean all right so that looks kind of cool right so now what I want to do is use something called a pending state so as you see inside of our header we have a form right so a form right here now this form I basically when I'm submitting it I want this to change to a pending State okay so this will change the appending state so I'm going to go ahead and say const I'm going to destructure pending and then I'm going to use the user form status right and this is actually experimental right so I'm going to use the use form status so I'm going to go ahead and actually save ourselves by aliasing this right oops no uh renaming it as use form stairs but this is an experimental feature and what this will do is it will give me the pending state so when we submit the form it's going to be a little bit of a delay and then you can kind of you'll see this will be we can render the UI basically if it's pending or not so I can basically say pending um it's going to say searching right so pending will go ahead and say searching okay otherwise if it's not pending I want to go ahead and show a magnifying glass icon next to it okay so I'm going to go ahead and pop this in at the top right here so magnifying glass icon and I want this to be something like this so get rid of that boom so let's see for ourselves now um refresh and why are we freaking out here use form status it's not a function uh it is a function what is happening let's do react on uh we will be pushing this into the papa Gap repo yes for sure all right um in fact okay so I'm using client what the hell is going on so let me just make sure oh thank you jayash thing lovely donation he goes I'm a proud software developer engineer today you inspire millions of people like me to build because self-confident crazy Tech and builds I'm forever a fan and part of the fan hashtag Papa fam I love that thank you so much for that comment and the donation guy I think that's what we're about man what that is awesome in this case I just want to go ahead and npm uh run Dev right so not implemented I'm not curious oh actually maybe this is from the experimental oh okay ah ah I know what I did I know what I did all right so I'm gonna show you something it kind of overarches into all right so this is kind of overarching into the territory of um server action so I started building this for Server actions then I changed my mind uh a little bit into it the reason why we've got this experimental right here is because I will show you how to get that anyway and we can use it I'll show you the way I would do it and I'll create another video on how you can actually get server actions implemented right so go to next config and at the time that you're building this this couldn't be out of experimental right now but go to experimental and we're going to enable server actions right so server actions true okay so go ahead and do that and then restart your server that's why we're not getting it yeah so there we go boom and it should say you have enabled experimental features server actions boom all right now if we refresh we should I believe have that all right so let's go here yeah there you go that's the reason why we haven't we didn't have it before so this is actually part of the server actions uh uh thing he wants to screenshot that yeah I love that I'm gonna make a t-shirt with just screenshot that Jay that's big either use form stairs and this is going to be pretty handy so when we submit the form it will go ahead and actually have something there right so uh and that's the reason why I'm gonna be using the action here as well so you can go ahead watch my server actions video afterwards and then add to this and refactor it if you want all right so this is good for now I'm happy with that that's kind of you know that's fine for now so go back to the header and then we're gonna go ahead and finish off the header we'll get things done in there all right so inside of our header we've got the search button down now I'm gonna basically I need to have the ability to submit this form but inside of it I need to go ahead and have a bunch of different things like the also the ability to select number of pages sort from high to low minimum price maximum price and so forth right I didn't demo that in the beginning but we are going to allow that feature as well so first thing I need to do is outside of that div right so outside of this div it's still inside the form it's very important it's inside the form I'm going to start using something called a search select field okay so I need to import a bunch of things from Tremor so let's go ahead and pop it in I'm gonna pop in a bunch of things from trema I don't like this song let me get rid of that all right let's let's go down and then uh underneath my yeah underneath just above the form I'm gonna say I want to have a div bonavidev and inside that div I'm going to say search select right and this search select is going to wrap a something called a search select item okay now in this case I just want to have 100 pages I want to have you you should have the ability to say I want to select from page zero oh zero or from one to 99 that's my developer brain kicking in right so there's a little trick here if you want to render out a search um from zero to 100 or something or sorry a list from zero to 100 I'll show you firstly what we're going to be using is this one right here just to make give you some context this is the one that I'm doing search select right so here so you can actually type in as well in order to implement this from 0 to 100 we can do something like this we can say uh put a jsx for the brackets do a array and then do dot dot dot and then we can say all right so basically what I'm doing is I'm spreading a array so I'm spreading an array of 100 and then I'm saying dot right so I'm map through my array oh no outside the array sorry map through the array and then what what we typically do here is I don't really care about that number right so I can so a little syntax that we typically have is underscore for a value we don't really care about right so that's basically just each item I item itself and I is the index right so with that bit we're now going to basically pop out a search select item and it's going to have the key and the value and so forth right so in this case why is it erroring and I'll show you why because it's saying type element is missing blah blah blah right so the reason being is we haven't set this up correctly at all right the way we do this is we need to go to the key the key is fine as a number but the value needs to be a string so this one we're actually going to go ahead and I don't want to start from zero I want to start from one so I'm going to say I plus one two string okay and then for here I'm going to say this one is actually going to be something pages and again it's going to be uh I plus one two string like so all right and then what we need to do is close out our brackets why is this freaking out there we go so now what we're doing is we're mapping through an array do you just recommend the university pop or just land online learn online guys honestly 909 you've got my free content you've got all this free content and you've got zero to full stack here at Papa react.com so our course will teach you everything all right so you've got the search select items so now let's go back to our app and you can see look at that boom I have a hundred different pages right so that looks pretty cool and I'm gonna just style this out a little bit and I'm gonna give it a class a name and a placeholder inside of this so I'm going to say class name and placeholder and now if I was to refresh you should see number of pages and yeah that looks a bit cleaner and then I'm also going to have on value change but we'll assign that afterwards okay so the next step is for this I'm gonna go ahead and actually have um yes that's our first filter basically done number of pages right now I'm going to repeat this process but for a few different things I'm going to do a repair now for the um sorting then for the Min price and Max price right so for the Sorting I'm basically gonna firstly have a constant at the top and this is going to be called sort by map so this is just going to be an object like so as an object with key value Pairs and these are keys are basically corresponding to the um if we basically pass in the following we pass in sort by R into Google in the URL that will sort by the default value if we sort by RV Now sort by review by P will be by Price PD will be so basically these are query params that we're eventually going to be using so we're going to grab that we're going to go down here and we're going to use that to map through the same thing right so we're going to go ahead and first you have a select field this one's not not going to be a search select because I don't want to be able to type in and then I'm going to have object dot entries right so object dot entries and then sort by map map through all the key value pairs and then basically we're going to go ahead and pop in these select items let's go ahead and pop these in like so yeah hit save and now you can see we've got wait for it we've got the select here and you can see look default buy review my price and by low to high and high to low and when you click it it's going to be assigned the key right so you see that value the value is assigned the key so basically when actually the the text will be this one and then the value itself will be there be a little bit confusing the way I just wanted that but because it's opening here but yeah you get the point okay so that way we've got that done now I'm going to style that a little bit so the AC gets me a little bit bunged up I don't know if you can hear that so a quick little water break actually make sure you smash that button if we uh if you're enjoying this [Music] something else I've done the University of graduate with the company it's mostly Theory you still need to self-teacher for Universal practical project exactly 100 and that's honestly you need constant growth that's why we have the zero to full stack here of course you need constant mentorship some you need to always be landing I'm still learning to this day all right so everyone who says you know just the university route it's not the only way and even then it was the best investment oops I can hear uh one of our members and and it's because of this video there we go all right so let's exit that okay so we've got this next statement let's go around someone goes I like your hairstyle thank you uh so we've got this select statement done you guys are loving the music I can tell there you go and then the next one is pretty simple we're gonna have a search select for the next two and these are going to be for different values so I've actually just hard coded this one in and I'll show you what I'm actually popping in so I'm gonna pop the first set of values in and I'll explain it so this right here basically gives a value of you know empty value 100 250 500 750 900 or a thousand plus all right and this is going to be like for the the dollars amount right so the minimum amount and here we're basically going to go ahead and say if I is equal to zero so if it's the first value then it should say no minimum otherwise it would show a dollar sign with the First with the basically the value to string right with the dollar sign in front of it okay and then I'm gonna give this a placeholder and basically say Min price and so forth so fairly straightforward I'll show you how it works so if we go back to our app Min price and you can see that no minimum 159 000 a thousand dollars right so you can obviously set these up the way you want have as many different values you want you know even put this in a constant elsewhere outside all that good stuff it's completely up to you all right I'm gonna do the final thing the exact same thing but for a Max now okay so I'll do the same thing for a search select over here so we'll say search select boom like so pop this in and I'll do the same little trick that we just did pop that in as well these values are going to be the same but in this case the plate holder will simply say Max price right and it will say no Max or maximum amount because we're going to keep it consistent right so that's got the no Max moment and in this case no maximum and up to a certain amount so that way we've got our four different things right and as you can see that looks a bit ugly right now so we're going to make use make use a grid to get that looking pretty good and then we're going to create pieces of state and track what the user has typed in and then we're going to basically you know do our extra stuff after that so with that said um the final step actually after which we haven't done yet is we need to have an avatar right so I'm going to use a little package um outside so just outside just to sort of before I forget this bit another div and this will have an avatar of the user right so right now it's a dummy it's just you know a little Avatar in fact we're gonna make this super easy I'm using something called react Avatar you can simply install it by going to your zsh or your server sorry and having an npm install react Avatar you import it into your project we go to the top of your project boom pop it in command J to hide the terminal go back down and basically this Avatar is kind of cool because you can just might say it's a round Avatar of certain size and in this case if I just gave it 70 Sangha it will come up with like an SS so you'll see in a second now that SS right so it's kind of cool and you can also use things like Facebook links and all this good stuff so if I let Facebook ID Google ID and all this other stuff Skype ID and it will basically pull your picture in so that Avatar is kind of cool right um something to definitely look up [Music] I have used Azure I've worked with Microsoft on a video that is literally on YouTube channel so definitely check that out Giancarlo um but I also think AWS I will be making more content very soon okay so that's pretty cool now on a small screen I want to hide it so hidden on mobile view by default on a large screen I want to show it and I wanted to use up the maximum space that it has because I want to push this to the end of the screen okay so in this case right now on a small screen it's not there but you can see it's pushed all the way over there when it is there all right so let's get this looking good because this looks like crap right now all right so first things first this is by default dark mode because I'm actually using dark mode in my system settings to override that what you've got to do is you go to your Tailwind config right so because I don't want it to just naturally think I'm I want dark mode right now and you simply add in a dark mode class and this basically means that you will Define when you want to add in dark mode so in this case if I do this you'll see that this will toggle and it will change now to light mode right so that's what was happening um my drop down has a massive icon I'm not sure what you did wrong there to be honest uh try refresh because sometimes it can just be a little bug in system yeah but let's go back to my header and I want to go ahead and make this UI look a lot nicer so at the top of the header we're going to give this a bunch of styling so firstly we're going to say it's a flexbox and by default is flex column so nothing will really change here the UI because naturally it's still in a column view okay but what I want to do is I want to Center everything on a mobile view so I want to say item center right so in this case you should see things like the Google pop into the center it looks a bit cleaner right next thing you know when we're on a medium screen I want to change to a row right someone thinks to be spread out in a row and I want it also to be items aligned at the start and on medium screen medium screen should also have a space between the x-axis of six and then I want to give it a bunch of styling in a second so let's go ahead and do that and on the medium screen now you can see it goes into a row so notice how the uh that goes into a row so these two children will come into a row as opposed to a column right and you see how that's pushed over there so we're already getting the kind of design that we've won we need to give our padding X of 2 adding y of ten uh padding on the bottom of you know six this was me being so lazy honestly you could have just done padding top and padding bottom five okay all right and then on the bigger screen I want to do a padding all around of 10 and uh I'm going to change the only the bottom value to a five there we go hit save boom and now you can see that we have a little bit more breathing room around it all right and over here that looks a lot more cleaner now the only thing is this looks like crap all right so let's get that done um so I want to go ahead and make that form actually spaced out so that way we can actually breathe right so before we have our search select everything happens here right in the first search that so let's go up to here uh oh thank you so much Iron Man because videos up to four hours teaching others on the University so much hard work which means you're really doing this to make an impact honestly I am I really just want to help as many people as possible on this planet become developers and also boom we hit over 300 license I'm talking about keep smashing out loud button if you enjoyed this video Jello thank you so much he dropped five donation pln I'm not sure what currency but thank you so much all right Super Chat from Angelo that's awesome man for him so on the class name I'm going to go and say that this is a grid by default we're going to have a grid Columns of two so by default on a mobile view and it changes to two columns you see that so now we've got two columns I want to give it a gap of two so you'll see that everything spaces out a little bit more that's nicer I want to give it a padding of force that way it's got some Breathing Room behind it that looks a lot better on a medium screen I want to actually change it to a grid columns four that means that on the media screen they'll all be in line okay I want to give it a Max width of large and on a medium screen I'm going to give it a Max width none Max width of none all right so in this case it will be constrained here to a Max with there you go MX Auto to center it so now you'll see that it's off to left if as soon as MX Auto is Center zip and I want to Center them everything on the vertical axis okay pretty cool and now you'll see look oh oh that's cool that's cool there you go all right so in this case look at that clean right so that's looking great hello world right if I enter you see it just goes ahead and it sends me over to search term which I didn't even do I don't think all right so in this case that's fine we've got our little things now we need to track what the user selects so how do I keep this in a piece of state right very easy actually we just use state right so I'll show you how we do this so go up to the top we need to prepare four pieces of state so the way we do that is we say const let's do our first one by saying the pages set to pages and we say equals user State now if you do get confused at any point about you know you stay any of that good stuff with react we have the entire react Basics 101 course inside of zero to put that girl be sure to check it out we also have the you stay tutorial on YouTube for free so you can actually go ahead and feel free to check that out as well yeah uh let's go ahead and says oh uh yes we got this Pages now to connect this up I'll show you how we do it and then we'll run through the rest very quickly afterwards so heading down to where we select our Pages where we have this we have on value change this gives us a value and an arrow function so it's basically a callback function and what I want to do is I want to get that value and I want to set the pages to that value simple as that now when the user selects the page for example if I click on this and I click on four pages that's stored inside of our state so now I can refer to this Pages variable to get that value right so it's pretty much as simple as that right that's how you connect it so I'm going to do that the same thing for three more pieces of State let's go ahead and do that right now boom we've got sort by Min price Max price and then we've got a set of functions here let's go ahead and connect it to the rest of the things so in this case we've got our select over here I'll select we're going to have on value change it's going to be set sort by there we go and then on our search select we're going to have on value change assetment price and our search select here we're going to have on value change set max price now if you're wondering how did he do that how he didn't even type anything that's co-pilot okay quick little water break before we carry on absolutely crushing it today the energy is awesome guys all right let's go carry on strong so we've got that looking pretty good now we've got everything stored in the state so the next thing that I naturally want to do is basically all I want to do now is when I type in and I hit enter I want to go ahead and combine these uh you know these values or basically if you added any of these and I want to send the user to a proper URL so that way we can go ahead and do the next step which is a search page right so let's do that right now so first things first I need the router because I'm going to be redirecting the user somewhere else afterwards so let's go ahead and get our router and Naruto will allow us to send the user elsewhere because we're using a client because our component so that way we can use to use router and now inside of our form let's go down here next video was not mounted what um go to next okay so don't do this don't do what I just did use router should be imported from next navigation easy mistake to make okay I can happen with the autocom Auto Imports so that's probably going to happen to a lot of you so don't mess up there all right so next thing you want you to do is inside the form so typically we do that on submit or on click but right now we're doing a kind of mix with we're kind of this is what you would be doing if you did server actions but I didn't go the whole way in this build with server actions I made a separate video of four server actions that will be coming out this week so enjoy that use this afterwards but I'm going to show you how you do it with the actions here so I've got this I've got the form data that is actually submitted when the um uh you submit that form now when we do this the reason why I'm using action here as well is because if you remember inside of the search button we actually had something that was listening to the state of the form this is connected to this action property right so when you do it when you submit it knows what to do okay so um someone says hello Papa I'm just joined in please just accepts great ready yes it does yeah you can use it square right so firstly we need to get a bunch of terms or we need to get the data from here so what I'm going to do is I'm going to get the data from the form data right so here I'm going to say const search term equals formdata dot get search term and you're probably wondering where is that but remember the input field here it's got it right there so that's how we get it okay that's good and then I basically want to have some defensive coding so if you haven't entered any search term I want to stop everything I don't want you to submit or do anything at that point okay now next step I want to say if you have the pages right so if you've set a page in the state then I'm doing it you typically would have to do this but if it's a one line of code you can just do it straight off the bat then I'm going to say params now before we do this I need to actually have a string of params now this is going to be for our URL that we send the user off to so we're going to call this URL search params so I'm going to say if pages params.set and then I'm basically going to say pages and then I pass in Pages Dot tostring and I'll show you exactly what this does in a second okay So eventually basically this will build out a URL something like this so imagine if we redirect the user to forward slash search it will be something nice it'll be Pages oops sorry Pages equals um like 10 for example right that's what we're essentially if the pages exist create that add that to you and this part right here is the URL search params so we're basically doing conditional rendering of that right so I'm basically going to do the same thing to the sort by and Min price A Min and Max price okay and this is what is going to be inside of the URL okay so I'm not using um camo casing inside the URL I'm just using underscore casing okay and then after that I've got my URL so then what I can do is I can say router dot push I'm going to push the user to forward slash search forward slash and in fact I want to use a string interpolation so I'm going to change these to back ticks and I'm going to do our little nested interpolation name with a search tab and then we're basically going to do question mark params oops uh jsx where is a params to string and don't let that do that yep there we go right now what this will do is it will send the user to that URL and I'll show you right now in a second what's going to happen after that so if we do that I will show you what happens so if I go ahead and type in something like Hello uh world and I'm going to do for example two pages uh sort by high to low minimum price 100 maximum price a thousand such oh firstly look at that oh it done it right it searched and then you see what it sent me to it it sent me to a set I'm going to copy this and enlarge it so you guys can see right so firstly you see how the nice little rendering happened but you see what I did there I typed in hello world so it basically passed that through to hello world then it basically constructed this based on what I had selected so pages to sort by PD which is priced uh um you know uh descending Min price 100 Max price a thousand nice cool yeah so at this point someone says can I show my package Jason as well yes there you go that's my package.json file in case you're looking at versioning that kind of thing all right so at that point now this works now the reason why it didn't didn't like send us anywhere in it uh is because we don't have that page built but if I type in for example MacBook and I only did like for example by price now you'll see it just has MacBook sort by a PD so it's kind of good right because now we can go ahead and actually create that endpoint and then have all the logic to start the fetching from oxylabs which is the actual cool part right that we're going to get to so that's pretty cool that's uh that's that part done right head is done right so see it wasn't as hard as we thought next up let's go to page.tsx now this is the home page we don't really care about this for now for now I don't really care I just want to kind of make that like we can we can do something cool with that afterwards uh in fact I want to do the search term mix right so we send the user to four slash search so the way it works in xjs is you have your app and this is your forward slash this is your home sort of directory so this resembles your route so page the TSX resembly root now if I want to have a forward slash search I basically say search to resemble the forward slash search and then I have a page.tsx inside of here and now this will be support a you know forward slash search but I don't want the user to actually go to the search URL I want them to go to a something like this a forward slash oops okay work on it yeah four slash search and then I want a wild card so this could be something like it could be MacBook it could be iPad it could be zero to full stack hero all right whatever you want to go ahead and join you can go ahead and do it right but in this case we need something called a wild card so I basically create another folder with square brackets and we basically pop in the term that is basically in that's like the syntax to say that that is a wild card it can be any value and then I do page.tsx okay so rfce and then we've got this and then I'm going to go ahead and start building out this page now this page is a server component so we're not going to convert this to a uh anything else so in this case I'm going to change this to a search page right and then welcome to the search results page now let's go ahead and check if it works so if we type in MacBook Pro you'll see inside of the URL it will take me to see especially it says searching which is kind of cool right so it'll basically figure it out and then you see it says search search MacBook Pro and it says welcome to the search results page right and notice how when I click on this I'm linked around right so this is what's cool about this the the header is not re-rendering you see how it's just rooting me so it's only streaming in the page element itself which is awesome right so that's pretty cool but let's do something nice now so the search page will eventually render out something called the results list okay and this results list will basically be all of the different results on the page right but instead what we actually first need to do is take whatever we have here so notice how we have the MacBook Pro we have the uh sort by R right now you're probably wondering but he didn't select sort my well actually inside the header what the hell is that that's a flying but hey if you're really wondering I actually set the default sort by value to R right so you can actually do that yourself that way I'm always basically saying use the default value uh if nothing is selected right so in this point we are freaked me out so bad mom um so in this case we've got the page.tsx at the time almost have 400 likes as well guys let's go awesome stuff guys right so for this I'm gonna go ahead and actually get the param so now what I want to do is we have four slash MacBook Pro so how do I get this and how do I get the search params like sort by Min price all of that stuff right well it's actually super straightforward and easy what we do is firstly I'm going to create some type definitions we get the props it comes through as props okay so we say search params and I'm going to create a search params type definition so in a second but for now I'll just do any and then we have params and the term is inside of there okay and the term is it's called time because time is there right so here we get props now I want to show you something as this is rendered on the server this will come up on our server logs so if I was to console log the props and we go to our server logs can you see how look the params term comes in and then we've got the search params right so this is how it comes through so it's a good little lesson for everyone right so we're going to go ahead and pass this in the prop type definition and then I'm going to destructure the search params and the params themselves right and I'm going to do a double D structure I'm gonna get rid of that I'm gonna get the term out as well so we've got the search params and um okay now the first thing I want to do is if there is no term I want to redirect the user two the home screen right redirect use it to your home screen and you see how we get that from the next navigation so you can do redirects on server components that's completely fine so now if there is no uh why is props not defined where have I done props I haven't done that yep that's fine so now if I go ahead and you know try to go to forward slash search it will say four four not fun well actually that's because we will never be able to get that that's fine anyway yeah so anyway the point is I'm protecting ourselves there now next step is I want to basically do a fetch call to fetch from our API we haven't created this API yet okay so we're going to go ahead and fetch from my API and this API call we'll go ahead and we'll build that out and that's going to be the part which is going to go ahead and scrape from oxylabs okay so let's go ahead and build out our API course so what we're actually going to build is an API call on our side that will go ahead and connect to the oxylabs API over here and this will allow us to scrape information from Google okay so I'm actually going to go to uh I'm gonna show you how we can create an API endpoint so you can actually use the new route.ts file to actually create an API endpoint anywhere um but it really depends on if you need the post request if you need the get request otherwise if I do a get request here it's just going to come up as the as the main thing which we don't want to do so the way that we can do this is I'm going to keep life simple and create an API folder you don't have to actually create an API folder anymore but I'm just gonna you know do it explicitly to show you so I'm going to create an API folder and it's on my API photo I'm going to have a search and again this is the same routing structure so this would just be forward slash API forward slash search and then inside of here we're using the new root.ts file right route root whatever it is right and then we can go ahead and pop in like so right so you can have your new route and you can for those of you wondering actually put this next to this uh if you if you're just using a post request right you can actually do that obviously your route would change so it wouldn't be API Force after that should just be search term but you can if you really wanted to you can do that right we're going to import a few things that we might need like so and I'm also going to have a typings definition file because I want to have a few typings of my own so typing is definition file one of which is the search programs right so search for amps we're going to go ahead and pop in now inside of my um where was it inside of my page these search params themselves remember we had it here initially so I'm just going to change this to search params and import that from my typings file so now we've got type protection okay and if you look at this it's saying that that all of these things might be there except sort by sort by will be there because I set a default value on it all right now inside of our post request we're basically going to go ahead and pause uh handle this so I need to do the following I'm gonna go ahead and pull the body of the request the way it works is on this page on this page when I type in MacBook Pro hit submit and I go ahead and go to a certain thing when this page loads up I have access to the MacBook Pro and I have access to all the search params when I do I'm going to make a a fetch request a post fetch request and I'm going to send this information in the post body which means that I need to go ahead and get the post body data outside the way you get the body of the post inside of next year's 13 apis in the root the new root dot here syntax is you go ahead and do the following you get the search term you get the pages and you get the rest of the params and you await it from your request.json right so this will give me the information I need on this side now the search term a search param sorry search Rams we're going to go ahead and actually sort of you know pass this like so right so I'm basically saying all of the rest of the prams that come through are going to be the um the search params and you could even include Pages now I'm just making life a little bit easier here when I do this right um so what's next I'm going to say if there was no search term oops if there was no search term a fly is not having it today right then what I'm going to do is I'm going to say return next response and I basically return at 400 saying you're missing the search term so this is basically building out an API so you can see here um oh that's awesome thank you so much you completed the slack clone nice right so next response we're basically saying the next call would be that you would return a 400 saying missing search term okay and now that's basically protecting our API endpoint well so after that we can say const filters right so filters now what I'm going to do here is just current just for the beginning just going to say is that a type of any so it's just an array we can handle this afterwards but I'm going to have an array of filters and we're basically going to go ahead and handle this accordingly so I'll show you what we're going to do and then it'll make a bit more sense so all of the search problems that come through so remember the sort by the Min price all that kind of stuff someone says bro the music is lit thank you right so all of that good stuff we're gonna go and say object dot entries and then inside of here I'm going to go through my search params and for every single key value pair I want to handle it accordingly okay so let's do some magic in there so firstly I want to say if the value if there is a value uh and if that key sorry is either Max price or it's a Min price then what I'm going to do is say I'm going to do a little check and I'll basically want to see that if the value is over 1 000 plus this is weekly typed checking I guess right because we're doing a string check but I'm basically saying that if any of the max price or Min price was over a thousand then it should simply just not add that filter because that filter doesn't really need to be there if you've said that it has no minimum or no maximum right well in this case the minimum I guess it would be right so minimum a thousand should be there if in this case no if you don't set a minimum here then there will be no minimum so either if it's no minimum or a thousand it's actually the same right so we're saying they should be well it's not really a thousand plus okay so maybe we don't do that okay we could actually say this instead let's say if it's this else if the Min price okay we don't need to worry about it right that's completely fine for now in fact what I would do is for the minimum price we can actually change this logic a little bit to make it a little bit better I just realized something so in the header I want you to go over to where you have your Min and just change it to a thousand minimum because that should be a fixed value not a plus that makes a bit more sense okay and then if it's Max price 1000 plus you just don't need to include it because there's no Max after that point right so filters.push okay so after that this will basically stop it from being added if it's a thousand and then we say filters.push and I basically want to push in the key value pair so I'm pushing the key itself and that's basically just you know shorthand for this and then the value I'm going to go ahead and push in um so if the key is sort by sort by then I'm gonna pop in the value otherwise I will go ahead and actually pass the number right reason being is like for example if I passed in if one of the filters was sort by that's fine makes you give the value and add that to the filter list if it's a um a price I need to convert a string to a number so that's why I'm doing it here right so that's actually just going to Loop through and that's basically preparing all my filters all right so now I've got literally a list of filters which allows me to do it on okay so now we do the fun part we actually send a request over to oxylab so what I need you to do now is go ahead the first link in the description gives you a free trial to oxylab so your boys hooked you up you get a free trial you can go and test out your services then what you can do is head over to the dashboard and inside the dashboard here okay let me log back in so inside the dashboard you'll get access to all of the things that you're going to need now what I need you to do is you're either going to get the ACT oh sorry you're going to get access to it either inside of your email so you'll get your username password sent over to you or you'll actually get um you get access to it over here so I'll show you where you can find it so it'll either be in your email and you can see it's also got this really nice dashboard to see all your usage and that good stuff but and you can see on the left you've got my products now I want you to go over to the e-commerce scraper API and go to users and you'll see in my situation my username is Ecom Papa react right and here you can also change your password so if you couldn't find your password you can actually change it there get another password okay now take note of this because we're going to need to set this up accordingly so what I'm going to want you to do is go to your we need to create an environment file so let's go ahead and create an environment file right now so I'm going to go ahead into my code right here and at the bottom I'm going to say dot env.local and here I'll say oxylabs this is such a Vibe this song this is called the Rooftop by Gregory David so nice right the username and this one is going to be Ecom Papa react now the next one I'm going to say is oxidabs password and the password you can get in two ways like I mentioned oops sorry I'm going to go back like I mentioned your password you can either go and change your password get that or you can get your password from your email that they send out to you right so typically it gets sent out I got mine sent out to me um the minute you sign up it'll go ahead and get sent out to you uh whoa that's awesome one Early Access thank you sonny for helping me get my first job as a full stack developer that's so crazy screenshot all of these is absolutely amazing thank you so much almost at 400 likes congratulations one as well right so I've actually got my password here so I'm going to go ahead and paste in my password and I'm going to close the file okay so I'm pasting in my password I've saved the file and then I've closed it so now I have my environment variables configured and we can go ahead and resume what we were doing so heading back over to root.ts we can go ahead and see we had outside of this I'm going to do a fetch course so we're going to do contr response equals await fetch okay now here what I'm going to do is basically make a real a query to the oxylabs database right so what I'm actually going to do to help us out a little bit is give me one second I'm just gonna go ahead and make life a little bit easier so I can demo this a bit more right so if you go over to documentation you will see that down here you have your example of how you do these queries so you can see for yourself they actually make it so easy for you right you've got the body of the request the fetch request itself in fact this is exactly the one that we want and you can see it's a post request we stringify the body and the body includes a bunch of things and then you basically pass in your username and password and the way it is it's using something called basic authentication the way you do basic authentication is you set the authorization header value to basic and then you basically have a space and then you create a buffer from your username and password and the base64 encoder okay so it sounds all crazy but it's really not right they don't worry about it it's actually not that hard to do okay so in this case we do a fetch we basically pop it in there we set the method to post we set the headers so let's go ahead and do that right now the headers and then we say the content type is application Json and then we set the authorization header so let's do that right now so we say author oops authorization authorization and then what I want you to do here is I'm going to do back ticks I type in basic space and then I'm going to do a little bit of interpolation so I'll say buffer from there's a few ways you can do this I'm gonna use a buffer right buffer from and then I'm going to say process Dot environment and then we'll say oxy Labs username environment looks like username and then we'll say Plus all right and then we have a little colon and then oxylab's password so oops sorry get rid of that get rid of that um yep pop that round there you go so it'll be buffer from processities Name colon oxylabs password okay and then after the buffer we're going to say two string and then you basically specify that you want to be a base64 encoded string okay so this line right here so take your time with that and you'll you'll get that no problem right you get that right now the next thing is you can handle your caching so obviously we're using xjs so you can actually do caching all that good stuff now for this demonstration I'm gonna actually cover caching in xjs in a separate video but for this demonstration to avoid you accidentally caching things and then getting super confused as to why it's not loading I'm gonna save you a little bit of grief and just make sure that it's never caching right by basically setting a value of no cash right or no store so in this case we'll do no store you can do either right no so no Clash there is a difference but I'm gonna go into it right okay separate video on all of this but this means that it's basically in the server side render every time a response comes in it's not going to use the cash to fetch value right so in this case next up I'm going to do the body as a request now I'm going to stringify a body and this is going to have all the contents inside of it so you can see over here we had the Google Shopping product and like and stuff I'm going to firstly go to the shopping search because we're not on the Shopping product yet and then you can see we've got the Shopping product domain com we've got the crew which is the search term pages and then you've got the context being the key value pairs okay so I want to do the exact same thing and in fact I'm just going to pop it in like so and I'll show you how we do it Okay so we've got the sauce we've got the domain search term which is coming through from our body of the request we've got the number of pages and if that doesn't exist it will default to one so that's basically saying or one and then you pass it through and this is very important this pass through pass through means that basically once oxy Labs have scraped the data we can basically they do an awesome job here of returning structured data so here or is it pass pause yeah we're past data this basically allows oxy Labs do the hard work right they actually go ahead and scrape it really fast firstly if bloody fast and secondly it will actually go ahead and uh reformat all that data so you don't just get raw HTML it's going to format all the data and then return it to you in a really nice Json view so that way you can go ahead and do whatever you need to do Baja what is up I see OG in the house good to see man all right so in this case we've got the context looking great next up I'm going to hit save and now we've got the response right so after this response I'm going to go ahead and pass that so const data equals a weight response and then I'm going to go ahead and get the page results right so in this case let me just go ahead and get the page result so I'm going to say that we're gonna basically have our page results uh page result like so equals data dot results right so this data has a resource objects that comes back and we need to create this type definition now this part I'm going to show you what actually comes back and then I'll show you how we go ahead and do create those type definitions right so firstly the last step here would have been to do your next response uh dot Json I'm going to return back the page results as the part of the Json body right so let's go ahead and show you firstly what comes back it's a console log data like so now if I go into the page we should actually trigger this off if we do it correctly so uh before I go ahead and create these type definitions I want to basically hit this endpoint and hit this route so we can actually test it see what's coming back and then we can do something with it and I'll show you how we'll do that now right um we can do that okay so basically I'll explain it so when we get this back from oxylabs basically what comes back from here you'll get output example here so this is okay we can do we can just look at this so this is exactly what's going to come back so they give you a perfect example of what's going to come back right an example so you have your filters your content and then you go down and you see it gets quite long right you've got quite a lot of different results to come back in fact they're really important one I want you to pay attention to is the organic the organic includes all of the different items you see like the price the actual item title the price itself is the currency the merchant if it's got a link to click away from all that goes on the product ID all of this stuff comes back from the uh the database right so what I need you to do now is actually go ahead and uh follow what I'm doing so go to typings.d.ts and I've actually done the hard work for you here so I haven't included every single type definition here but I've done enough to get you past the way you need to get to right so we need to do page result there we go right so the page result that came back this is how it looks we've got the content created that updated that page you are our job ID status code and password type the content itself is quite a big object that comes back that looks something like this and I basically introspect this I looked at the response and I created type definitions from it to save you a bit of time so the content you can see is this data type then we've got the string number and a results array and this results array I'm going to go ahead and show you how it comes back so we've got paid results and now the paid results I'm not going to be using that so I've just set it to any array right now you can really like kind of look at what comes back from it build out your own adaptive Insurance that's fine uh oh we got sahib singing that's what's up dude good to see you man and we got the filters now filter and organic those two are we're going to create type definitions for and then you've got your search information okay so filter is fairly straightforward this is just going to be key value pairs like so name and value right and value is a type that we're going to create ourselves right so you can do this like so uh Angelo says suddenly you are the best channel for on web development I'm doing every build you've done so far I've learned more from you than other courses did I love that thank you so much screenshot that Jay that is amazing thank you Angelo I appreciate you dude that's so awesome to hear man and you can see here we've got the organic data uh type definition as well so I'm going to go ahead and create that so I've already like I said I console logged it I checked it all out and I basically built these type distributions for you okay so that's pretty perfect at the moment okay so we're gonna go ahead and do this I told James to be a quick build I don't think it will be all right so in this case we've got the page result I'm going to import it for my typings great so now we have our post request done so this is our post request looks pretty great and we can go ahead and get this done so what I want to do now is head over to our search page and we can do the fetch call right and then we can actually see if we get anything back all right so let's go to our page.tsx and I'm gonna do the French Quarter here first things first on luconst response equals await and we've got a top level away so we need to do an async and we can only do this because we're in a server component if you convert it to a client component you cannot do a top level or weight like this right so in this case we do a weight and we do fetch and then basically I'm going to have a function which helps us get the URL so I'm actually going to create a helper function called get fetch URL because when you're doing server component stuff sometimes you can make very silly mistakes with like I've done in the past um so I'm going to go ahead and create a lib folder and inside of here I'm going to call this getfetchurro.ts and this is just going to be a helper function and the whole point of this is basically it's a function which basically takes a rule and it just checks if you're in the production environment it will use the vasel URI now when you deploy to the cell this will just be the URL that you deployed to so automatically it pulls that from the cell deployments right otherwise it will be a local host and then it's forward slash root so this is just like a shorthand to basically prevent you from wearing this out every time all right so basically built our little helper function we'll say get fetch URL get fetch URL and then I pass in the API search right so here I'll say uh passing API forward slash search as API Force that's because this API forward slash search okay and then we basically need to pass in the second argument which is the body right so this is a post request and then the body we're going to stringify some information now firstly I'm gonna send in the uh the following so I'm going to send in the search term which is the term that comes in here so we basically structure that here and then I'm also going to spread out the props search param so I've actually sort of saved us to hustle here I can just do search Brands right so this will be all your filters like the min max all that good stuff right uh nice hey Sunny love you from Israel what's up dude good to see you in the house and then that will basically do the full round trip so now we've created API endpoint we've gone ahead and when we land on this page we make a call to our own API endpoint that API endpoint connects to oxylabs does all the scraping comes back and then now we're gonna go ahead and pass that Json so we're going to say cons data equals await response to Json and now I'm going to log it out so firstly I want to show you that that actually comes back okay um and what you can actually do here is you can get this as your data almost here as uh page result array and then I can import this like this and this means that the data is actually our page result so in fact I'm going to rename our data to results so basically get the response to Json and Par basically assume that it says as page result right and I'm confident in that because I've checked it out before okay so now I can construct the results and let's see what happens guys so this is the moment of truth right so if I was to show you on this screen how it works so let's type in iPhone Pro Max and let's just do three pages sort by high to low Min price 100 Max price 250 right and then I'm gonna go open this up and I'm going to command K to hide this all now if I search we will hit a page so you see this will take us to oh sorry I just ruined it right so iPhone promise now I hit search right there we go let's search searching and now you will see they found the following so look at this guys I remember I console logged the response and this is a server component well if we actually have a look at this you can see that this is the entire response look at this this is the content the page results and if we look inside of it look page results and inside they've got the results which and these are all the individual items that are actually showing out so this will return I think I did what I do I did three pages of results so you can see the first page of results scroll down second page results third page results this it scraped Google that I can't tell you how far that script Google that fast all right oxylab is fast at scraping and then we got the status code of 200. and it has the job ID and all that kind of stuff if you want to debug on oxy lab site right so our post request works that's great now we basically pass the results and term into a new object called results list which we haven't created yet I'm gonna pass in the results and I'm gonna pass in the term and then we're going to go ahead and render out on the screen right so um what's it called no so Sama says if you put forward API search you can't actually do that trick when you're using server components it needs a absolute it needs you can't use relative URLs when you're using server components you can't actually do that little trick right so I know what you're talking about but that doesn't work unless because when you're on a client component you're relative to your browser so it already knows the uh the base URL but when you're in a server component you need to give it the the full URL right there's a way of doing it beyond that as well but yeah you can't do that little trick so results list let's go over here components I'm going to create a new component called resultslist.ts oh TSX sorry dot TSX there we go boom and we're gonna close this out rfce boom okay guys we're almost at 400 like smash that like button if you're enjoying this video right now it helps this video reach a lot more people and that's all you want right so now the next step is results so let's go ahead and show this out results list so firstly I've got the props that come in so we actually defined the props previously so I'm going to destructure the results and term we're going to give it the props type definition we're going to create that type of definition here we're going to pull in our page result cool right and then I also I'm going to have a link inside of this page which means I need the next link tag okay now we have all of the results and we can safely access them because we have our type definitions right so now I've got a div so I'm actually going to split this into two areas the sidebar which is the dynamic values and that's all we're all going to have all the filters on the side right so remember I said it fetches all the different filters and then we're going to have the main body right now if I show you the actual Google website so let's go ahead and pop this over here now again like we had before if I show you a Google search you'll notice that if I was to go back to for example Google shopping right and I was to type in for example like a MacBook Pro or something like this so let's just go ahead and type in MacBook Pro you'll see that we have the following so obviously I'm in Dubai so you see everything in durhams but you see all these filters it actually scrapes all of this in oxylabs when we do it right so what I'm actually going to do here is I'm going to create a sidebar which is going to represent this side and then we've got the main body which is this part here okay so let's go ahead and do it remember if you want when you are signing up to oxidabs make sure you do that by hitting the first link in the description that's how you get the free trial okay so we're gonna have a div here and then we're gonna have the results dot map and I'm going to firstly map through all the different sort of page results so page results and then we've also got the index we actually need the index we can ignore that for now and we're going to return now here I've got a div and for every single div you should be or whenever you're mapping through you should have a sort of you know page result um so in this case we could do a job ID in fact I think Joe bidet is going to be individual for this I'm not sure I think it may be I don't know okay if that's not unique then worst case we can use the index but it will tell us anyway if it's not okay so once we've done that this will be for each individual page uh no no it won't be the page it'll be for the page results yeah it will be for the page results so this will be for each page right um so remember when we fetch three pages of scripts three pages of things so I'm mapping through those pages and then I will be going ahead and doing the next thing so we've got a div inside of here which is that this is going to have a space y of two so everything inside of here will be spaced up and then I'll have the page result Dot and you see this is my type definitions that we had earlier so content dot results uh dot filters and filters may be undefined so we want to carefully access it now for every single filter I want to render out the following I just want to have a div right with a P tag inside with a filter dot name right so in this case we've got the filter name and then I'm going to have a uh then I'm going to have a link to click that filter all right so if I show you this actually in to put things into context let's go back to our page let's import this and let's go to our actual page right here so you can see look at that oh it actually works look iPhone Pro Max these are all the filter names that get pulled from Google right so what I can do now is go into our resource list and underneath the P tag I actually want to have a clickable link okay so I want to have the filter.values.map and for every single value under it so these are actually the headings if you think of it these are like the headings show only and then it will have options underneath it like uh red blue yellow for different colors and so forth so this one I want it to be a um link okay and this link will have the value Dot and you see URL value so it'll be value here but the href here would actually be a link to Google itself so it'll be https forward slash www.google.com we're going to throw the user over to their actual Google website once they click that filter right so value dot URL right so if we do that now you'll see that we'll have if we do this look at this and obviously firstly I didn't make a mistake here this div should always have a key right so in this case um the filter dot uh name dot values um okay so in this case I don't really care too much I'm just going to get another bad practice that's fine for now right uh so we're gonna do P tag last name filter so this one do font bold and then to make this clear for you to see I'm going to give this the best styling I'm just going to say border around the corners out around the large uh on a medium screen I want to be a little bit different around it large fully and then padding of five all right so let's go ahead and do that and um yeah let's see how that looks so over here now you can see that buy on Google on sale and so forth now these are all stacked up next to each other which doesn't look good I don't like that in fact uh what I want to do instead is also this is a link tag so you have to be careful disable the prefetch otherwise that's going to try and pre-fetch all these pages when they're rendered right you'll really want to be careful with that don't do that by default right um so what we can do to prevent this is put it all in a div and now they'll stack up in a uh we can do it a few ways actually we can do last name Flex Flex column and these will be stacked up as a Flexcon there you go look at that boom right I want to show you if I click on for example up to uh five to nine dollars you'll see it actually took me to Google I I done double double search so we don't want to do that let's do here value URL so let's do for example T-Mobile so you see now it takes me to the actual Google T-Mobile look at that so it's actually real URLs being scraped in that's working facade what is up dude good to see you oh suck that's awesome man because I made the total of six full stack applications thank you so much for your content maybe we can meet in the future possibly dude I want to meet a lot of our students uh so awesome to meet you man right so that's the the results uh the filter's actually done right so the sidebar is done and as you can see here guys that is basically gonna look like it's flush on the uh mobile view and on the bigger view it's a rounded corner so we're going to start out afterwards but firstly the main body now the surrounding div let's make this flex and I'm gonna do a margin on on the medium screen number of padding extra five I don't want to touch the sides in this case you should be able to see a little bit there you go so Flex makes it you know not use up the full space that's better and look at that yeah surrounded Corners disappear that's what I wanted that's better um I do want them on that side that's why I actually yeah so around it here we are here rounded sorry I was wondering if you still stay rounded but in that case yeah perfect so the only rounds on the sides and that's flat on the end and then we've gone medium screen it runs all over perfect hey look at that yeah great cool so now we want to go ahead and render out the main results so the main body so this is going to be a div and this div is going to have results so results dot map and every single Different Page results remember we always get the page result first and then we map through so page result I map through and in here we have a div this div is going to be the key and this key is going to be page result dot yeah job ID we can do and then I want to have this will be yeah Salma good good catch yeah it was that one rounded yep so the class name here is going to be grid and on the uh I'll tell you what we'll start that afterwards actually because I want to show you the effect that we're doing there so if we are on the first item right so what am I trying to do oh yeah so the first item is actually going to be like the title in this right so uh how can I explain this one so here we are okay so first time it's fine so based on we say if we're on the first Loop through so that basically the page result the first page I want to have a horizontal line which spans the entire thing and then I'm basically gonna just pop in a very simple bit of styling here so I'm going to save us a little bit of time because this one is just purely presentational so this chunk here I just pasted in all that's doing is it's saying that it's going to span two columns in a grid span 3 or span four based on the different sizes and it basically takes up shop on Google search results for the page and it's showing results for wherever I typed in okay now that doesn't make sense with the span yet because we haven't given the outer plus out of styling so in fact let's just do that right so it's give the parent a overall styling actually well no it's not this one it's this one yeah we're gonna say it's a grid we're gonna say grid columns one uh on a medium screen it's going to be grid columns too so as the screen gets bigger we're basically allowing for more columns to show and this will be grid columns three and extra large would be grid columns four and so forth five the great columns four and then a gap of three on every one okay now you'll see look search results for page one two and three because I searched for you know three different pages of results yeah three pages of results so you scrape three pages and then it's got the results there now I need to populate those results so underneath that div we're gonna go ahead and map through all the organic results right so we're gonna say pageresult dot content right content now here I want to safely access these so results Dot organic so here oh thank you for that Sunny is in Flow State here's a coffee on me I appreciate you dude that's awesome I almost have 400 likes as well let's keep on going guys almost at 50 pounds of chat Revenue that's crazy man thank you so much we've got the organic all right so here we've got organic and organic is where we have all the items themselves that's what comes back from the uh oxylabs API then we map through it and then I'm gonna have the link tag so each individual page basically a link tag the href I'm gonna do in a second the key is going to be the item position so item or in this case yeah item we don't care about I this one's gonna be item dot POS my SS position basically and then we are going to have the pre-fetch disabled because we don't want to prefetch all of these Pages oops refresh disabled um uh and then yeah I'll sort the href in a second I actually want to just show you what actually shows in there so we're gonna have a div of the P tag item dot title yep and then outside of this we'll have a div with um the 2p tag so P times two Emmett little trick nice and then we're going to say item dot price string with the item dot currency so it'll be like you know 200 Dirhams or 200 and then we'll say item Dot merchant.name will be underneath there and uh yeah we'll start that out in a second right but let's give it the href for now so the href now the href is is a an interesting one because some of these scraped URLs actually have a Google shopping URL which means that there is a Google shopping page and some actually have an external URLs which means that when Google shopping shows you results some of those results actually will send you to an external page and some will send you to a Google shopping page for the ones that are basically going to send us off to an external page I'll make it italic so we know that we okay that's gonna send us elsewhere but I actually want to handle the ones which send us to a Google shopping page and we're going to create the Google shopping page and scrape based off that as well so all this is honestly massively attack teaching lesson right so you guys can showcase your skills and put this on your portfolio and that's going to really help you out when you're sort of you know have job interviews Arc and stuff so if the item URL includes this so this is basically I had a look at the URLs that come back if it includes url url um no no sorry url url equals then that means they basically will send uh it has an external URL okay so if it has this then I'm basically going to go ahead and send them to I'll show you how we did something send to external URL if that's the case so basically we're going to say split the UR the URL get that value that's after this which is one because it will be zero would be this first part but split it get that value and then basically send them off yeah so it'll be this and we can safely access this by doing this right that's how you optional chain them or I'm going to say send to the internal URL okay and in fact what I actually want to do is I want to remove any of the query params Estonia in the house what's up man in fact here I'm going to say remove any of the query params and send to a Google shopping page right so the way I do this is I say item split I basically do question mark and I get the first query param because basically the way it will be is it'll be something like this it'll be forward slash shopping um and then it'll be like four slash and it'll be some random ID and that is the one that I care about right so I'm basically sending the user to that right to be Google shopping and then it sends them off to that so that will basically send the user up there oh look at that Janae thank you because I see you live again what is up dude thank you so much and we got Malaysia in the house crazy the energy today is sick all right so in this case we've got all of this looking good all right nprs all right so now with this style out so the link the class name link we're gonna go ahead and say um border we'll say border um rounded to excel Flex Flex column uh and I want to do hover Shadow oh I love this song Shadow large transitions when you hover over it has this nice little duration of 200 duration 200 where the shadow comes in all that kind of stuff easy and ease out is a nice little UI I think and I'm gonna basically have a conditional render here which says only if if it's got a basically external URI then I want to basically have the uh be italic Okay so where's my thing where to get rid of this girl just curious all right if the item URL includes what we used earlier as an identifier then it will become italic okay so that will help us out a little bit so let's pop that there for a sec and let's pop that there to make our code a little bit neater there we go and just like that you can see look we've got this doesn't look great at the moment but you can see all the italic ones will send us to another website so if I click on this one for example I get sent off to some zabi I mean right now that's not that doesn't work but you know this Verizon the total by Verizon and so forth so some of these obviously they're getting blocked because I'm coming in on the live stream localhost or something right but the point is is that that's where those external URLs are however these ones it's sending me local forward shopping for product with the product ID so that's what I care about right so the ones that aren't italic are internal ones so they're non-italics those we're going to build Pages for okay Matt G says fluster is essential exactly man honestly it's huge right so here we say border B padding of five and then we say Flex one because this is a flex container I believe yeah it is and this item title I'm gonna go ahead and say is text and I've got the nice little uh Google blue uh yeah Google blue so this one I'm gonna go ahead and pop in a Dynamic Color here so this one here and then for the pita the div over here I'm going to say planning X of five padding y of two and not italic right because I've made the entire container italic right if it is so in this case it will not be italic if it's where I want and it will say uh font light and this P tag will be text and it will be that blue that we just had right there this one here boom get rid of that and I want it to be a font semi board all right all right after all of that you'll see that we have this that looks a lot cleaner right the only thing we're missing is a little bit of padding on the outside so the padding on the outside I missed here it's practice guys that's all it is um so the main body where I had it here so here right so padding X of five to space it from the sides margin D so when I get to a larger screen I want to be padding a 10 or PP you know it should be Pa 10 and then on a larger screen I actually want to remove the padding on the top uh space out all of the things inside so basically space the um or the the children underneath it in the main of with the value of five and a flex one because basically if I don't do Flex one I'll show you what happens right it's not going to actually use the full width by default right so I actually want to force it to use a full width even though it looks like it is it's not right so Flex one right so now that is actually perfect so you see how it changes from column the only thing with messed up here is this is using upper Max so you see that right there we can we can we need to fix that but either way it's getting there okay right so the filters so the only thing that screws that up is that container should have maybe a Max width so you can actually go ahead and customize this as much as you want for that sidebar um oh yeah so class name on the sidebar this set it to a width of 36 and on medium screen I'm more forgiving we can give it a width of 64. right now you'll see that boom it pops it in and then that will just wrap around right and you can obviously just space it out with space y if you want right but now look at that look at that so we've got these clickable buttons and we've got data being scripts let's try this out again let's do MacBook Pro 16 inch boom hit enter search so it's searching we you know right now we haven't implemented a loading screen with skeleton loaders we will do that in a second but look at that perfect so we've got our search screen banging that looks great right now jo400 likes let's go guys I love it the energy today is popping you guys are awesome thank you so much if we go down you'll also see that when the page 2 results come in so if I do for example 14 inch number of pages let's do two pages and I do search now you'll see everything is based off of that URL right so it's searching and obviously I want I want to show a UI update here so I'll actually fix that in a second um so here I didn't get anything interesting let's have a look why didn't I get anything maybe I've got a little glitch just do iPhone 14 pro Max let's do two pages and we have to debug that maybe I've cached it actually that's probably why yes I think it is I think that's why yep here's why so I cashed the iPhone the previous results so if I go down page two there you go yeah so what I want you to do is the reason why that happened before is because if we go to our page so with the search term yeah right now this is caching yeah this is caching um old values so basically if you already found this um if you've already made this fetch call as this is a server component it will cache that fetch call all right now I basically want to make sure that it revalidates that cache every x amount of time right so you can do either you know like uh even say your own way or you in this case we can simply add in this revalidate property and this says basically every five minutes it will go ahead and re-validate that page if you want to be more aggressive you can say every minute so every 60 seconds revalidate that page but so that's kind of a handy thing to have so example if I was to do another search for this with two pages so imagine I went on to a different one and hit search can you see how boom it didn't need to load right but if I went ahead and did for example uh iPhone 14 pro Max with three pages right that we haven't cached yet so you see that's not cash so it's caching based on this URL right so if I go ahead and search that now see how this is delay right so you have to find that new page where it finds it it makes the fetch request and then the minute it loads this it will cache so wait for it it'll come back so that's actually fetched back so now we've got three pages of results so you'll see the third page is down here and now if I was to take this URL go over here boom instant because it's cached so in five minutes that cash will invalidate and next person you fetch is it it will have to refetch so you see that that's the benefit of the caching part of next year's right so hopefully that you learned less than that now the only thing I don't like is how we've got this little delay here so if I'd happen iPhone Pro one page for example Max price which is 8750 search you see this this is horrible right the user's sitting here they're like I don't see anything I hate this thing I don't like this app right so you can see also our filter worked um sometimes you might see this and you'll be like what the hell that doesn't that's not Max price was actually shipping right that's probably why the shipping cost on top of it that I'm not showing is actually costing it more than um that okay so it's probably like 750 plus a crazy ridiculous amount of shipping from that that company right so at this point now I want to show a skeleton loader now you're probably wondering what is that right skeleton node is very popular little Trend that goes around it was a kind of a good way of showing something on the screen when the user is actually loading so what we can do is we can utilize the loading pages so loading.tsx now this uh file structure is partn xjs uh 13. so it's something which is not you know it's not like I've been making this up this is completely from next year's 13. you can look at the documentation yourself if you'd like but in this case this is going to be representative of the loading page right so what the hell loading page there you go right so in this case if we do if I just put this in right now what will happen is if I just typed in loading results because we're in this point right if I put a loading at the top it'll be a global load up but because I'm putting it here if any blocking action happens for a blocking I mean an async or weight for example so this is a blocking action this will essentially trigger the loading state so let's give this a try and show you right so if I went to for example let's just type in a uh iPad Pro enter boom loading results look at that guys so now it shows loading results and then boom you get the UI so what you can do now is you can either have spinners that kind of stuff but you know we've seen that in a few of my builds before I thought yeah let me show you how actually they do it in the proper way of doing it so you can use something called a react skeleton loader right so react skeleton loader now this is a pretty cool library and the way they show here is basically they say don't create you know um entire divs that replace it don't make dedicated skeleton screens but in xjs we kind of are creating an entire screen for it so this is where I will be creating a dedicated screen first I'm going to encounter intuitive but it's fine for now right so npm install yarn react skeleton right it's gonna unloader so in this case I'm going to go to my SSH pop it in like so install the racked loading skeleton and what this essentially does is you see look that is really nice so we saw something like that and then it pops in that's pretty cool right so I'm going to upgrade this loading screen now to make it exactly that the way we use this little skeleton load is we need to just pop in the two Imports including the CSS and then we can simply load it right so this is a server component so we're going to have a bunch of cool stuff here so it's going to be a div and instead of this we're simply going to go ahead and have another div inside of it and then we're going to have the sidebar so I'm basically replicating the build the the main page so we have the sidebar and then the main body now I'm not going to spend too long here because I want to show you basically what I've done right so I'm basically going to create a map through an array of four different things and I've given it a set width and height and you notice how this is the same sort of style as what I gave in the previous page right so remember if we look over into the results list remember width of the width of 36 and on bigger screen 64. I'm doing the same thing but I'm looping through only four imaginary skeletons right with a H1 and it's gonna and I'm using a similar um also called I'm using a very similar style to the previous results list right so this is exactly a similar style to the results list in fact this one should be a P tag yeah and then you do skeleton and skeleton count will basically have the number of lines that you'll show and here I'm just randomizing it so it'll be uh you could be two lines five lines and so forth so it gives the user a little bit of dynamic element to it okay so in this case that's cool and then if I put in the main body I'm actually going to save us a little bit of hassle here you can feel free to pause the video and actually look at each individual thing that I've done here but I want to save us a little bit of time so we can jump into the juicy stuff so we're basically going to go ahead and do the exact same grid column layout and you see loading results from Google scraping results from Ox Labs again the same exact simple layout here but I've simplified it a lot and I've just said show 10 results and have a skeleton order with a break and have another skeleton loader right um yes jash says we can also conditional render skeleton in the same component uh you can but it doesn't work when you're doing this uh loading screen separately right it won't load in this way unless you create it inside your component and then you have a piece of state which triggers your loading right now because we have an xgs loading screen uh dedicated for this we can't do that right but if you have a piece of state which is determining your load then you can do that right so anyone who's wondering that yes you're right but you need a piece to say or something to tell you or tell your component that it's loading then you can do that and it prevents you from duplicating divs right I hope that helps yeah perfect man right so now we've actually implemented that so now if we've asked to go ahead and do something like uh let's just type in um I'm running out of ideas for uh things it's the iPad Air or iPad Air in the case oh okay almost there almost there look at that we didn't get that layout all right all right so it looks a bit dodgy so it's because of this div right so the way we fix this to go to surrounding their flex and then on a medium screen paneling X of five that's all we needed to do let's say if I do iPad Air um 256 gigabyte look at that aha nice so it shows 10 and you see how they randomly you know got the things here sd512 so that two four four so it gives a little bit of dynamical elements but that's pretty cool now that's a lot more better than sort of you know giving the user another screen so it's instantly going to show the screen gives them a little bit of loading State users are more likely to stay on that screen right they're more likely to be like oh it's actually loading something right it's actually going to show me something right so it really kind of um changes the entire thing so if I do two TV see what I mean now like your users are always it's just loading I'll wait yeah but before they would not wait right I'm telling you they're very impatient right so now remember and the caching this combined with caching so if I do one TB now boom instant if I do two TV boom instant look at that oh look instant right because it's under that five minute revalidate window so it's already got cash value so if somebody goes there boom it will just deliver the the entire search term so this means if loads of people are searching for iPad Air with one terabyte they're just going to get the cash value and then after five minutes the next user will revalidate the cash and everyone else after that will get the same cash value and so forth so it prevents you from spamming your oxy lab server and it prevents you from running through your course it's really cool all right um so it's not like a debounce no it's uh it's a caching uh approach right so now we need to basically build the page when I click this we go through to the Shopping product page so we need to create a shopping forward slash product four slash wildcard uh page okay so it's following the same logic as earlier we're gonna do the exact same thing and now that you're aware of how I do that it should be a little bit clearer to follow me with this so at the top level let's go ahead and expand it up we're going to create a new folder called shopping and then we're going to have another folder inside there called Product I know there's shorthands for this but I'm just trying to show you individually right then we have ID which is a wild card and then we have page.tsx and this will be our shopping page okay so this one right here we're going to go ahead and call this the product page so this one here and of course the product page get rid of this and yeah this is going to be a server rendered page right so again the caching rules will apply so I'm going to go ahead and set our revalidate period here to 300 which is five minutes I'm gonna do a bunch of imports to save us a bit of time right now at the top so we've got our impulse like so product data we haven't yet set up so I'll show you when we do that right and then this product page will have props now remember the props will include the dynamic ID so in this case we're an ID so we can actually get the props back and we only always need all the props we can actually save ourselves a bit of time we can go ahead and actually uh write the type definition file here and then we've got the props which are assigned to that and then I can just save us a bit of Hassle and destructure the props like so we've got the params and inside we've got the ID okay so now I've destructured it from Nigeria great Vibes on you I thank you so much dude I appreciate you almost at 500 likes right uh give me one second so at this point now we've got the product page so uh we need to basically go ahead and make a fetch call so I'm going to go ahead and create a API endpoint so again remember what we done previously we're doing the exact same thing but we're gonna go ahead and make a endpoint uh called API Shopping product ID right so now inside of our API I'm going to create a new root so in this one I'm going to click on API create a folder and then I'm going to go ahead and say um one second I'm going to create a folder and inside it here I'm going to call that shopping right and then we're gonna have inside of shopping it's gonna be product and then ID right so shopping and again you can actually have it there but this is a get request so you can't have it if you have root.ts here it would actually override it so you don't do that right so that's why you have to be careful with the get request with the root.ts so we have shopping and then we have product and then we have ID and then inside there we have a root dot TS right the reason being is if you land on this page it technically counts as a get request and if you like if you do a get request in here you typically have two competing get requests that makes sense right um now at this point we've got uh we're gonna make a get request okay so first things first we need to go ahead and make create or get requests so boom like so this is how you do a get request this is the syntax forward.ts um okay so Zhang says in next whenever we fetch an API do we go through API route first no you don't have to anymore with the root.ts I've just done it in this build to demonstrate something but you don't have to actually have an API folder you just have to do root.ts and it can be anywhere so it's actually like seamlessly integrated in xjs13 now all right so I hope that helps so at this point with The Gap we've got two uh arguments that come through we've got the request and we've got the params and the programs ID right so the get request actually includes a few more things so I'm going to go ahead and destructure it right now so this is actually coming in as a type here so I don't want to do I'm saying just let's just call this uh type um Rams and let's just pop in the params like so yeah that should help us out a little bit and okay what have I done here there we go yeah and then that would be params yes okay oh my God my brain just froze okay all right so we're good now we've got the param so the params come through here uh we pull the ID out we end up we're not actually going to use the request here but I'm just showing you where it comes through now first things first I want to check if the ID exists so same Principle as last time if there is no ID we're gonna do next response we get that from next server and we'll say missing product ID with a status of 400 so that way we're protecting our endpoint against that next up we're going to say const response equals a weight Fetch and now we're going to do a query over to the following so remember oxylabs have that amazing documentation which showed us all the examples for the URL inside the shopping search well we just simply need to go to Shopping product now because we're on the product page go to node.js and you can see we've got the exact same example here so you can use this as your context to see and then you can actually get your structured output data here which I've actually saved you time and built our type definitions for okay so a weight dot fetch we have the queries here then I've got the mouse then I've got the method post method post and then I've got the headers so headers content type application Json the authorization header is going to be the exact same as what I previously did in the other one which was authorization then we have our buffer okay so remember basic authentication we have our username plus password with the column between and we base64 encode it that's how we do authentication here for the this because that's not what they accept right and then after the headers we have the Cache no store because I'm just saving you the hassle of accidentally cashing something being a little bit confused and wondering what the hell is going on right so in this case we're making sure that every API request doesn't use the same value I would recommend that you do not do this by the way I'm just doing this in this demo so that way you're always getting the latest value but I will be creating a video on nexjs caching which will show you the different caching rules and how to use them and that will help you do this correctly the reason why I'm doing no store right now is because I want you to basically give you a Fresh Value every time right so then we do body and then we do Jason stringify and inside the body I'm going to go ahead and pass in the following the source is going to be Google shopping basket domain query and pass so boom like so and this comes from if you see here look Source domain query is going to be the product ID and we've got that from the actual um the here so you see there we go there which is great and then we're also going to pass in pass equals true and that's very important because we want to actually pass in the past we want it to basically give us structured data back right no that's great I wanted them pass the results so in this case I get my results back and then I want to check if the results are zero I want to return a no products found right or no product was found with a 404 all right and if it was all found and everything was okay then I'm basically going to go ahead and get the first product from the results and give it the product data typing definition and I'm actually going to go ahead and type that out now to save you a bit of time remember I showed you where you can get the example response from they give it to you here output example they've got a really nice structured output result and again this happens when you do pass true so I've actually saved you a lot of hassle here and I basically built these type definitions for you the product data looks like this and again I'm not included everything I've only included the things that we're basically going to be using okay the product content here I'm going to go ahead and now this one's a bit of a juicy big one right so this one I've actually gone ahead and broke down quite a lot and I'm gonna show you the screen and I'm gonna go ahead and and basically yeah you can pause it at whatever point you want and the code is going to be in GitHub repo as well so product content we have a bunch of different things inside of it so specifications reviews we have the pricing we have specifications here as well right so I spent well I've got two specifications interesting I don't think I meant to do that yeah I don't think I meant to do that item okay um yeah one of these I do not need section tile section tile okay anyway yeah get rid of that so yeah that's what you need you can basically uh save that for yourself uh pause the video and get the type of definition and then what we do is we import it like so and then we're going to return oops sorry we're going to return the next response and we're going to return it in the form of Json data right so we're going to return the product data as the Json arguments now we have our get request set so let's go back to our page and this is where we do our fetch to go ahead and pull that information so the way we do it is we have our helpful handy function so we firstly do a top level async because we're in a server component we await fetch we get the fetch URL which we've already imported from my helper function remember this one then we do API Shopping product and this is the wild card that we're going to be passing in once we have that back we're going to get the product data and pass it as product data right so we're going to need to go ahead and import that typings so remember I told you we'll do it and we did it right so that's good and then I guess next what we do is we basically go ahead and show if there was no so for some reason if it came back with a response defensive programming statement we're going to say if there was no product data content pricing right so component day I might come back and then it's it's technically not faulty right so in this case I'm going to check for a specific property if that does not exist for example if the pricing doesn't exist anywhere then what I'm going to do is I'm going to say not found and this is basically a um a nice little uh function from next navigation and this will return the user to a 404 page okay so uh almost at 500 likes let's go guys absolutely nuts right so that will return us to a 404 page and we will create a 404 page and I'll show you how you get off to us right so that's cool uh and now let's actually build this page out so at the top level for this div we're going to have a little bit of styling we're going to say a padding of 12 planning on the top of zero it's a little shorthand rather than wrapping left top right bottom lock and stuff and then we've got a H1 and this will be the product data dot content dot title and this one will be a 2XL so text will be 2XL hit save and I want to show you now an example of this next to it so let's go to our app and let's refresh so now it should if we've done this correctly is making an API request the get request to our endpoint and oh we got an error let's see what we did wrong so this is debugging time so Shopping product we have our URL oh no okay just need a solid refresh all right and you can see that it actually fetched it back because we got some data back so that means it did work right I would know if it didn't work if because we were getting nothing back at that point right and what's really cool by the way about this is that say for example if you hit your cached page remember earlier we hit cached page so for example if I type in here look at that it shows you now if you hit the cache or not right which is really really nice right and in this case it revalidated because it had been more than five minutes but that's actually so cool that it shows you that now inside of the terminal in this case I went back to the page and as it had been less than five minutes it hit the page which is perfect I said expect it's actually behaving the exact way that we want it right so remember that because it has been under five minutes it didn't have to rebuild it right Wicked now the next step is a few little tricks a few little things like that so what I'm going to do is I'm gonna I kind of want to go ahead and jump through a bit faster Kalyan says uh don't have much time but just dropping by a quick live Sunny cheers from Bulgaria which is out there thank you so much dude I appreciate you thank you for tuning in right at this point I want to have stars right so we they returned something called the property or the reviews right so if the reviews exist so content dot reviews then what I'm gonna do is I'm gonna go ahead and return a div and inside that div I'm basically going to go ahead and render out the Stars which it has and then I'm going to do a a function which will basically or this little calculation which would show me the opposite of what it has so for example if it has four stars I'll render out four stars and then I'll render out one gray Star by doing five minus how many stars it has okay and I'll show you that in a sec right so I'm gonna render this out right now and I'll explain it to you so here what this is doing is this first top half will render the actual stars and the reason why it does it is because it says uh we're spreading an array and we're basically doing I'm creating an array from a product data content reviews rating okay so this is a number that comes back right so what I'm doing is I'm creating a blank array and I'm mapping through it so that's a little trick so we've got a number for example five here so I create an array from five and I map through it five times yeah to create uh yellow five yellow stars now if this was four star you would see four and then what I've done is I've done the inverse so I basically created an array from five minus the ratings so basically if it was four star then it would be five minus four and you would have one gray star and that way you always get five stars or you'll get like three stars with two gray if it's a three star product and so forth because I always want to show five stars but I only want to color in the ones which are actually present so if you've got a rating of three then it will do it so far and I've rounded up to the nearest Value okay so that's how we do that and then we've got uh individual section so now we're going to start building out the individual actual page so something similar to this so if I was to click on um like for example a shopping page um let me go ahead and just go into this page show me the shopping page here was it oh nice taking me to the actual uh pages it's not going to take me to a shopping business okay so it's actually taking me to the shopping page that's fine um that's okay uh what you can do for now is I can showcase it to you yeah as we just bought it right so I'm going to create a section and this section is going to be uh responsible for a bunch of different things right so we're gonna have a few different sections the first one is gonna have you're gonna have to bear with me on this one because it can get a little bit nested right so this section we've got a div inside of it inside of this div another diving side of it and here I've got an image tag and the image tag here I'm doing an image tag because it can be a dynamic value from that we're pulling pulling in which means I don't trust it right um so we've got product data dot content which is seeing him live is a different vibe to enjoy that's awesome man content dot images and I'm going to get the first image right so full size zero this is all from the database frame uh from the response so I'm going to show an image there cool and you can see look an iPad pops out way nice right let's go ahead and start that out a little bit so class name uh oops class name and this one is going to have a rose span so in fact before we dive any further I just want to start styling out the top half so we're gonna say Flex gap of four this div is going to be a um on the medium screen padding of 10 on a Mini screen padding left of zero um because I don't want padding otherwise and then we say MX Auto to Center and on the section this is going to be Flex Flex column um and it's going to have just realizing something I changed something Flex column and then we'll say on the large screen Flex row margin top of five and on the median screen we can get rid of our margin top okay so here image this image tag um height of 80 width of 80 and on around the corners and contain it boom all right so I'll make it a lot more smaller more manageable to deal with there we go that's a little bit nicer okay the next one is I'm going to create a div and this is going to have all the smaller pictures in now I haven't got the option to click in view it you can feel free to add that yourself what I'm simply doing instead is I'm gonna go ahead and get the next two images here okay so the next two images are going to be showed there so I wanna firstly before I pop this in so here I'm gonna go to the images get the second and third image so slicing one and three means getting the second and third image and then we map through them and we show it on the screen now I basically worked these values out to the sizing right so in that case you should see two smaller images now popping in next to it in just a second unless this doesn't have images so if I do MacBook Pro I would Pro 16 inch let's find the MacBook Pro and you can see that it's pretty cool you can actually use this app right and in this case it's going to load or right now we haven't got there we go all right so I didn't have an image before so in this case that it loads up those images great and then here I'm going to say Flex Flex column and justify between so justify between and look at that so right now you see how it's spaced it out and then we get this perfect looking uh sort of section now right so that's great for the time being for this div right so we're actually in this div yep so that's that part next up I need to have the actual images under it so I want to have images under it for like if it's got like you know a bunch of different ones I want it to be a scrollable uh container as well right so this is going to be a div and then I'm going to map through the rest of the images so here I'm gonna go ahead and basically pop in from this so it's going to be the first second and third are shown here and then third onwards I'm going to map out underneath so I basically do that by saying full size slice three which means from the third onwards uh map out these images so now let's go ahead and show and you see it Maps them here so these two images and obviously when you're mapping through images you should really give it a key so in this case image oh um oh no okay um oh no I guess we're just showing images there sorry for now all right so here class name uh this was gonna be flexed Space X of six uh overflow y of water because what I'm all I'm doing here is I'm gonna say a uh a value so if it's if it's on a small screen it goes past like you know 20 images um then it will basically just have a scroll bar and on a medium screen I'm going to give it a width of 30 Ram right so you should see now I will go in a row there we go perfect right so this is that's going to be scrollable if it goes past this it'll cut off here and then it'd be scrollable and right now I haven't got any logic where if you click it it expands you can add in a gallery or any kind of like you know thing like that that's completely up to you all right so after that right we're gonna go ahead and go outside this div and then we've got another div right so this div is going to be for the product details all of that stuff right so this one is gonna have styling of Paddington of this to space it away a little bit then we're gonna have a div and inside that div I'm going to start by basically oh my God yes the proper fan is going in nice all right so at this point I'm gonna have all of the different details now I I basically don't want to run through this individually but I'll show you but okay so what we'll do is we'll say inside this div if you have the product details right so obviously I'm just protecting ourselves a little bit right then I'm going to render out a fragment with a bunch of different things because you can't put siblings next to each other so I'm gonna pop this in so the product details so if we go ahead and put this in you'll see now that product details and obviously in the um section I actually started accordingly so you can see where's it here Flex Trucks Gone large flexural all right so by default is flex column and then it goes Flex row over here right so that's it and then we've got the H3 so at this point I've just got loads of other data so I've got the pricing so I'll pop in the pricing here and then we've got the um the rest of it here so I'm actually going to just pop this in and you can feel free honestly this bit's not that great or special to look at so it's just a div with some information in I'm saying if the pricing exists basically show you know if there's more pricing options show that there's plus more pricing options show the the price breakdown and show the uh details which is the description okay and just like that we have this here which is not the description base like the delivery options okay so that basically gives us that um which is good now for the next step which was we've got our surrounding div I get I'm getting buried in div sound I'm getting lost um so after this one I need to have right so yeah I'm gonna have a horizontal row and I'm gonna have a this is gonna have styling on the margin wire five [Music] so there will be a line yeah there we go so it'll be a nice little line and I'm gonna have a product A P tag with the description and this is going to be the entire thing so there you go and now we'll have a longer description so that the thermal architecture might be blur has been completely redesigned that's it yeah there we go and that in itself will push it to make up most use all that room now you can actually just force it to use that room by giving that div a flex one here so Flex one and now if I got rid of this notice how it should just use up the entire space yeah there you go that's what you wanted to ideally do in the beginning so you set that to flex one and then that way it makes sure they always uses that space accordingly and then it doesn't just rely on the description and now boom you have to do that that looks good description is great and then I've got the highlights now the product highlights they may or may not exist and be there so if they do exist then I will show them on the screen and the way I've done that is simple I've simply got a conditional saying if they exist then pop in this div I've got a H3 tag with a horizontal row to separate like a line and then I've got an unordered list and I mapped through all the individual highlights if there exist so optional chaining to protect ourselves and then it pops out the highlights and then to style it I've just done list disk and this will basically show each individual Point as a little dot you'll see now in a second that will re-render in so if I go ahead and save that in refresh Maybe unless they haven't got any highlights here maybe [Applause] so maybe this one doesn't have any highlights yeah so let's do something like iPhone 14 pro and look how nice this is right you can actually use the app now and then if the iPhone 28 okay that's not a good one let's do this one for the details product highlights so remember if it if it exists then it will show the product highlights right so that's how I've done it M so that looks great and then after that the next section I want to have another section yeah so section and then here I have a horizontal line oops and this horizontal will be margin y of 10. um says bro it's so cool ah thank you man here we'll have the review so underneath all of this I will have the review and the reason why I done this section is to basically because I don't want this to I want the review bit to be under this entire block here I don't want to be a part of this logic where it's like you know the flex row and all that that's what we've already done that in that section the next one should sit underneath it so that's why I've separated into section section and then we're just going to Simply say if there is a reviews then I will go ahead and show it otherwise don't show reviews right so I'll show you how we do this now and I'll pop it in and then we can break it down so I'm gonna go ahead and push it in here and explain it so I've just popped it in here and all we've done is we basically said if there are reviews then have a react fragment so that react fragment goes from here to here and we'd have a H3 tag simple just saying reviews with some information H4 will say top review with some styling and then we get the top review and we basically present it accordingly like this right so top review will have the P tag which is the review Author says and then the H5 is the review title right and then we have the div itself and what I've done here is I've passed in remember that star rating I basically said like the same logic for that so if it's a five star review it will basically create an array of five and then we'll map through so it'll be five stars and then we've got a P tag with uh quotes with the text inside of it and if there is no review or if there is no top review right then what I will do is I will go ahead and just say no reviews yet okay so let's hit save and let's see for ourselves what we get ah look at that there is a review so we see it boom nice and this one says maybe skip this one right so maybe I mean some people gave it five star the top review in this case top review remember doesn't always necessarily mean the best one it means just whatever was featured by Google on that page so whatever is Google whatever Google's algorithm was that's what it was featured on that page City MacBook Pro 16 inch for example all right let's just click on like this one for example and then you see that review great if you need intel MacBook Pro so you see it's actually pulling in correctly like so and in this case you've got the tax two more prices free delivery this and product highlights right so looking pretty good right and then underneath that section we will have the specifications now specifications are going to be for the product data so in this case I was doing product data um if this specification remember I'm doing a lot of this conditionally so I'm saying if this exists then do this so in this case I'll say if this exists then I want to render out a section and this section will basically have a horizontal row with the titles saying specifications boom so like so so in this case does this one have it let's see if it has it yep it has specifications and then specifications are basically map through and the whole point here is I'm trying to demonstrate um someone says I'll add images in the search results so it depends on what comes back from your scraper right so if you want to add that in then it doesn't isn't supported by a script which is you have to look into the dark side documentation and actually scrape for the images as well okay so here what you can do is afterwards you can render out through the specifications and the whole point that I'm trying to make here is that whenever we handle Dynamic data you can handle it in this fashion where if something exists you know I go through and I basically it's not about handling the data type right so in this case there's a specifications array possibly so if there's a specifications array possibly map through the entire thing and then them and then basically position it out so that way it's conditionally rendering this entire item based on if it's there so in this case the standing screen 16 inches Max screen resolution processor Ram hard drive and so forth so if there are specifications it will show in this nice little view here alright so you can feel free pause it copy that bit right so the whole point is you see my point there wasn't no real benefit to me showing you typed out right so in this case we've got that and this will actually just stack up accordingly so if I go ahead and do iPhone Pro and you can see let's just load it up again and see whatever the result is from Google and obviously you can you can sort it so if I do high to low search and now I will search and then this will basically go ahead and do high to low so we should see high products there you go as to a high price product here click on this and then let's just scrape the shopping page result and then you can see like one star buyer beware with pre-owned funds right so in this case it's from eBay I assume from what I saw yeah it was from eBay so you can see it's a bit of a dodgy one and then you always can still shop simply Electronics so maybe this is a better one let's just click that for a second have a look you can see even our filtering logic works really nice look at that really cool right and this if it has more specifications it comes up accordingly right that's the way I started out cool so I guess the next step that we haven't done is two things one we need to do the loading the skeleton unloaded for this page and then we need to do the home page which is this one right so two things and then we're pretty much golden to deploy and also a not found page so what happens if I go to the for example 999 right so if I go to this page or that might actually exist so if I make up some page if I go to product four slash something something here so that it gets a 404 pages does not it cannot be fun and it looks so weird and stuff right so in this case I'm going to create a not fan page custom one so what I do is I go to The Shopping product ID and here all right firstly I need a wall break I haven't had one in so long Francis says how do you make the page render the artifact Alliance while it was loading that was a very nice feature uh Francis you're a perfect timing we're about to do that right now um so that's a skeleton photo they actually recommend you don't create a skeleton an entire page for it but because we're doing a loading.tsx file approach that's why we're doing an entire page for it but yeah ideally you would want it based on a piece of State inside that component and then you would conditionally render the H1 or the skeleton node so that's how you would kind of do it so if you want to do a 404 for this route we just simply do not found TSX it's as simple as that you do rfce and then you change this to not found and now I kid you not this is literally it so now if I go to example some gibberish product that does not exist you will now see that they'll say it will take a Steeler not found all right so this is literally how you do custom 404s in this case I've just made a little very simple page you can feel free to customize this one yourself I've gone ahead and says whoops it looks like the product cannot be found and now if we go to this page refresh whoops it looks like the product cannot be found right so feel free to mess around with that yourself go as far as you want but that's just how you do not found pages okay so uh Next Step let's do the skeleton loader for this page so uh here I'm going to do loading dot TSX boom rfce like so put it in amazing for the pace right now as well all right so we go here loading loading so loading page now for the loading page we this one's pretty more more simpler uh simple I'd say so again I've just replicated a build like a page here so first things first it's a server component I'm gonna pull in the uh dependency on the skeleton uh protects that you're amazing I appreciate you dude thank you so much so for this div I'm gonna go ahead and have a padding of five and on the larger screens a padding at 12. so hit save um why not just say loading uh just to get rid of this error so okay I mean it's fine yeah uh yeah when you're doing this hot reloading thing you're sometimes commentaries just refresh and then see if you still get an error right that's the main you need to sometimes do that because you're you're forcing a lot of hot reloads right so first things first I'm gonna just put in two skeleton notice and then I'm gonna go ahead and have a div and I basically already done the hard work for you I basically drew it out in the skeleton loaders uh roughly how it will look and I basically came to this right so this is again I know that the documentation for react skeleton loader says that you should conditionally render it as part of the component but because we're using loading the TSX files this is why I'm essentially drawing a look-alike myself but ideally if you have a piece of state or you can make your component you know uh depend conditionally render a skeleton loader I would recommend you do it that way right but it's just I know it says that I'm doing it this way all right so this will look something like this okay so I've saved you a bit of hassle set the width and Heights and so forth all right so you can feel free to copy this and do it yourself but if I show you this value right now let's try this out so we're going to go to for example iPhone give me a product guys I need a different product right um let me do something which is totally different let's do sunglasses right so sunglasses um and then we search and then let's see what comes back so we've got blue tinted glasses blah blah all right so Prada this one sunglasses hot click it and look at that oh look it's loading now and wait for it boom hey that is fake look at that clean send me the used one oh no it's Myra it's not very happy all right and someone says Jace is easy so you can say easy now and you see like searching look it's so it's nice all these little features actually improve the UI of the app show that something's happening so you've got for example these are some cheap users these must be fake so now you've got like his own profiles to click on something like this and now you see it's loading the page out and then it pops in right so you can see this is pretty cool right I knew I was gonna say right so this is something that I was saying and you can see like it just works out of the box now so uh everything works really nice and again let's try on stress test this app so MacBook Pro uh someone says commandante Grinder coffee let's do it so um command that's how you know I listen to you a lot too well let's try that right so there's a coffee that one of our subscribers one just said in the chat let's see what comes up so you can see Commander Trail Master coffee grinder click it boom and if this is right you let me know is that correct is that your is that your product because if it is look at that so cool all right and uh yeah you can see for yourself that yeah it works right and um so pretty damn cool right and I literally showed that live using something that one of our subscribers literally commented so you can see it works for yourself right um now the next step is let's do the home page the homepage I've just basically made it a nice like playable kind of demo thing um so what I did to help you guys out is I actually sort of you know I I thought about it and I thought okay if this is on your portfolio and you just want to showcase it someone yeah I would recommend that you know you maybe have something like um something pretty easy for them to just go ahead and mess around with right so what I did was is I created a sort of clickable box of options which are predefined searches so what we're going to do is go back to the home page uh add a bit of styling in so we're going to center a bit of text and then um and then so one says yep that product was right nice uh will we get a link to the video or GitHub Broski yeah so the video is going to go live straight off this is then it's going to go back up on YouTube and then the actual um the build is going to be uploaded to get a repo straight after this is done so you guys can feel free to go ahead get the repo or join zero to full stack hero which includes the repo and yeah and if you haven't already remember don't forget to check out zertfullstack hero if any of this is too confusing popular.com course check out all right so we're gonna carry on building this out now for this one what I did was is I have a H1 and H2 very simple loader at the top boom welcome to Google shopping get started by clicking one of the example search items all right so simple and then what I did was is I had a div with a bunch of styling inside of it so I basically just set up a grid for the div so you guys can feel free to copy that out so it's a grid and it gets bigger the amount of columns as you get onto a bigger screen and then what I do is I map through a bunch of searches okay so what I've done here is I basically just made a bunch of different predefined searches so in this case I'm going to go ahead and show you what I did so if I go ahead and just go to the top and I basically have a few different searches so I could create a you know this could be a constant you could just say searches and I've just got ID one two three four five and these are all different things so monitors over 500 monitors sort by relevance or you know the default sorry and then Min price 500 iPhone 14 pro Max uh I've also given it a color different ones so backgrounds and all that kind of stuff tablets under 300 tablets sort by Max 300 and so forth so basically you just put the URL that you want to send them off to right and then it's just an array so in this case we've got the array and then I want to map through that array and present out what I have on the screen right so that part is the simple part here we basically go ahead and we map through so we say searches [Music] don't map through and for every single search an a tag and you can even do a link if you wanted so we could do a link and disable the pre-fetch but I don't want to prefetch all those pages otherwise you're going to stress your server out a little bit and then you've got the key which is the ID href the class name just a bunch of styles right and then the search term itself now let's go ahead and give that a try oh look at that nice and look at that so we've got five different things here and if I was to go ahead and click on for example airpods Pro you can see look it's triggers an airpods Pro search obviously that didn't clear the state that's fine if we go back here and you can see our that's cached so you have to be careful there yeah like that's cached value so you won't see that and when you actually deploy that but it only monitors over 500 loading results from Google and monitors at 500 so showing results for monitors and these are all 500. the problem are over 500 yeah so Min price 500 there you go back to Google uh tablets under 300 and you could even go ahead and if you wanted to add in like the max price here and stuff you have access to them so you can definitely do that [Music] and look at that guys yeah absolutely awesome stuff under 300 letters there you go that's probably with the tax and shipping but yeah that's absolutely awesome and if we click into it you guys see for yourself it goes ahead and loads out accordingly right so we have something to show so absolutely a banger of a build and that has that song dropped in nearly at 500 likes that was awesome I'm gonna go ahead and showcase uh everything that we essentially did right now and I just want to show you as well the API that we built so if I go to four slash API for Shopping product with the ID you will see the actual API endpoint that we built so as I mentioned full stack builds guys look at that that is the API endpoint that we built so that data is literally what we're fetching when we land on the Shopping product page right so that is literally showcasing to you that it has an actual live API endpoint behind it right remember that little trick I told you about with the Stars as well perfect works great right so as you can see now all of this was made possible by oxylab so oxylabs as I mentioned before residential proxies allows us to scrape amazing sites like Google the documentation is so helpful it allowed this entire process to be effortless right we're able to go and do it and the one thing that impressed me the most about oxy Labs was honestly it was just fast right for the fact that it's actually scraping raw data off of that web page that's really impressively fast right it done it in real time there was a lot a lot a lot of different requests to be through its way and honestly for a little little code we were able to get a massive output from it so I thought that was absolutely really really cool and I was really actually quite impressed with what they were able to give back and as you can see this was a great little demonstration of how you can present it so this is something I definitely recommend you put on your project or your portfolio sorry deploy it and then yeah you can actually go ahead and create a little video of it pop it up on your portfolio and showcase it and that's a talking point for when you're Landing your jobs right remember use the first thing in the description for oxy labs to go ahead and get a free trial okay now let's go ahead and deploy this thing all right so the point is always the easy fun part that I like to talk about so first thing I want you to do is install the Versa CLI I've actually went ahead and done this so for sales CLI I've already installed it so you can do that I don't need to do that then what you need to do is go over to your application and then I'm going to Simply go into a second terminal here pop this open and I just want to double check that I'm logged into the correct account so I'm going to do the cell login I think I'm already logged in but I can never be sure so I'm going to continue so I typed in Versa login uh in the the the uh the the URL and then my which account was it oh god um my personal account okay and I'm doing a quick login give me one second guys I have 2fa all that good stuff so I'm quickly logging in right now okay there we go all right so at this point I've gone ahead and logged in so I done Versa login and then I selected GitHub I logged into my account and now I do the cell to deploy it so I basically won't go ahead and you simply type in the cell that's literally what you type in to deploy this app because we've set it up with xjs um so set up and deploy yes right uh sunny sunny teams and YouTube I'm just gonna do my personal Sunny Sangha and then a link to existing project nope what is your project name keep it the same code is located keep it the exact same now this will fail I'm going to tell you right now this will fail the reason why this will fail is because we don't have the environment variable cell but I'll show you how we do it so I want to modify these things nope I'm completely fine with that and then you'll see this inspect now the reason why I do this is because it's honestly in a really easy way to go ahead and set this up so what I'd like to do is Click open this will open up yourvisell.com in dashboard then what I want you to do is head over to the settings right so oh I've actually logged into the wrong account so let me quickly log into my correct account and I'll be right back right so I'm always logging in on uh in and out of our team accounts as well so I need to log into the correct account and now we can see um auxilabs yeah so now in the correct account we can see this right so head over to the settings go to the environment variables and here is the magic point right so what I want you to do now is go over to your code go to your end local and click uh you thought slip you thought so click your environment local file and I'm just going to hide mine for a second yeah so you should see this in fact right so I'm I've hit my password obviously but basically copy this so literally you command a copy it with your password intact right so I'm going to go ahead and do that right now so I'm going to go ahead and copy that and then what I want you to do is go back over to that screen and click this and quite literally paste it right so I'm going to go ahead and do it right now so control command V Ctrl V whatever you're using I'm gonna go ahead and paste it and it quite literally I'm going to hide my key for a second and then I'll undo it so you can see what it does it literally pops it in okay so I'm gonna put this back and then I'm gonna click on make sure these are taken click on save all right so I'm going to pop that in and I'm clicked on Save now I've uploaded my environment variables so in this case oxylab username and password now you can do it on the CLI I just prefer this this is an easy way to do it hey Sony the build and place is sick thank you Matt G I appreciate you dude so now we've actually gone ahead and uploaded that you can see our build failed naturally because it didn't have the correct environment variables now I can do is I can simply go ahead and save the cell right and if I do the cell and pool you can even pull it back so if I do the sell now it will go ahead and deploy with those new environment variables if I click on this link we should be able to get taken to a deployment uh here and we can actually see for ourselves this in action right now I will be able to actually go ahead and share this with you guys on a live stream and then I'll take it down as soon as the live is built I will take this down afterwards of course because not the video the actual the little the the deployed version of the build because obviously it's going to spam through a quarter and I want to respect the quote that we've been given from the guys who wrote oxlabs but let's go ahead and it's building out this C for ourselves I haven't actually deployed this one yet so this is live right so we're gonna see how it goes if I head into a little road map we'll debug it live as well that's all good right now it's worth mentioning as I mentioned before if you get stuck at any point check out zero to full stack hero this is our Flagship course honestly we go through all of this stuff we have weekly coaching calls so you've got access to me success coaches you've got everyone in the community just there to help each other out lots and lots of modules that I'm constantly adding into whether it's react native whether it's react whether it's web 3 whether it's graphql whatever it is even project management scrum agile all that good stuff we teach it inside the course you can have a sneak peek of a lesson here for example look for yourself and what I'd really recommend is that honestly just check out for yourself our students right so these are some of our students what they say you can see if the honestly my favorite thing is the video right we built this from actual students the vibe inside the proper fam see for yourself and then join us the difference between the platinum and diamond is Diamond you simply get more coaching calls and you get access to more higher tiered products that we're going to be releasing soon so that includes a new 100 coding problems pack you heard it here first right so a lot of new stuff is coming um so definitely check it out zero to full stack hero first thing in description yeah and I will see you inside right we've got we've got nearly over a thousand students which is absolutely incredible right missing key prop okay so this is a few little issues we have so we need to go ahead and fix missing key prop in our term loading okay so this is fine we can easily debug these so in our loading so uh what you can actually do to to build it locally is do the cell build and then this will build uh locally so you can do for sale pool yes that's fine uh yep and then they'll pull the environment variables and it will try and build it here and then it'll show us where those error errors were but in this case I can just run through so we can do search term loading so let's do loading search term a little bit live debugging for your video map so where we have our Maps we haven't got keys okay so there's a problem so in this case let's just put a key in this case this is I this is a dummy one anyway and then here we have item I Dev key I and so forth okay that's fine and the next one was missing key prop in real GSX and results list so results list um we have the map which was here we have got a key that this was very bad of me by the way yeah whenever you map through you should always have keys do not not have keys right it's very bad practice not to have a key right so here was the other one I have got a key there I have got a key there I have got a key there here I do not have a key so key let's do value as value right that's fine okay um in fact for this one I'm not sure because you could actually end up with the same value so I just want to play it safe and do it yeah okay now um escaped characters oh that one that one always irritates me escaped characters um oh okay escaped characters where have I got my non-escape characters search for which is this page I think it's talking about this anyway let's see um so it was on line 53 in here so around 53 so it was showing results for okay let's just do it for now um You can escape the characters with this for now I'm just gonna keep it super simple change to a dash and then just check if this works you can do a vessel build here so if this is how you can basically test for yourself from finding their bugs and errors in your own code um oh that will also need Escape character here so I need to cancel that build and it was also for the product ID page and there's a few things that we had missing so image tag that's fine um key prop we've done uh 159 and 167 159 159 where is it all right um yeah so here for the product reviews obviously you can escape those um and 157 no reviews yet and you can escape that but I'm just gonna quickly I just want to kind of get past that right you guys can do that yourself boom let's help build cool [Music] we're so close guys nearly at 500 likes as well absolutely awesome build let's see for ourselves and you guys can see like this is quite a handy thing to know if you do run into that you can do vessel build locally uh see if the build goes through and then you can go ahead and just you know get past that final step yourself for a product here we actually have a missing Q prop in product as well okay that's not very good um so I'm up here I have a map here I do not yeah I do I do I do not um but now that's okay typically you will when you're mapping through things you will have some kind of identifier uh in this case it's okay I'm just doing a very simple you shouldn't really do that I shouldn't really do that um size three let's just do I in this case I just want to kind of deploy and then here we've got the Highlight itself that can be actually the um map so what else we got it so key has that as a key that has a key that has a key that has a key that is key that's the key that's key and yeah okay cool here we go why is uh why is key a mandatory because basically when you re um render in react a key is the only thing that tells you react what to actually go ahead and what change for example if you have a list of a thousand different things inside of a inside of any component and you don't have a key react has no idea what one item is different from another right it just thinks that everything's exact same so it basically re-rendered the entire thousand items that's so bad right when you have a key everything is individually identifiable so it says okay none of these things change only like three new rows that got added so only re-render in the three new rows but you don't need to re-render in these other 999 000 rows so you see there's a massive optimization there so that's something that you shouldn't skip over okay uh hey Cindy can you give us the music playlist for sure dude it's in the description um you can actually go ahead and just head up to popular.com as well at the bottom you'll see it there you just pop in your email now we'll send it over to you all right it's actually in the description of the YouTube video so now what I want to do is I'm going to go ahead and type in the cell so it passed the build step so now the deployment should work so Jay popped in the chat as well so now we upload it we inspect the build and this is the one that will win this one will succeed because we've actually done of a sailboat locally which means that this will actually pass on the uh yeah on the actual thing then we can actually go ahead and see for ourselves if it's done and then if we do all of that we are gold right everything is working the way that we want in there and it's just great right so just to explain as well uh today we use Nexus 13.4 we use tremor for the some of the cool components the select libraries in particular we use a skeleton loader which was something we never done before in a build to actually show you what is happening uh as the uii is updating we did touch into the server actions experimental stuff but we didn't use server actions like I said I'm actually creating a separate video on it we've actually shot it recorded it it's all done that's going to be releasing sometime this week as well and then we used one of the many apis that oxylabs offers it was an e-commerce scraper API to incredibly simply go ahead and actually pull data and it was simple because oxylab made it simple it was actually a really nice process working with them we created our own API backends and then yeah we went ahead and just pulled the data from oxid Labs which will scrape in Google and rendered it out onto a beautiful looking UI so the whole thing was just clean as hell um that is not what I was going to show you yeah there we go this is because I've cut it running locally this is basically shut off here kind of what you want to find uh yeah I basically I've completely shot something down here um that's because I gave it a dummy thing let's go back to the course 3000 and let's just see our deployment status [Music] okay so I've completely like just destroyed this for whatever reason okay oh look at that look oh in the meantime we'll be messing around with local stuff this deployed so I'm gonna go ahead and share visit this right now and we can see it for ourselves so before I share this link I'm gonna go ahead and do it myself so I'm saying MacBook Pro 16 inch boom search for that let's have a look and we can see okay so I'm sorry okay so something happened with that so we can actually go and see but firstly it deployed which is awesome uh but naturally as any Dev will experience sometimes it happens right failed to pass URL from oxylabs okay so what happened here was we actually didn't give in the correct URL so this near we need to pass in HTTPS that's why um so API forward slash search so that is actually coming from our um are fetch call so this is where we have our get help of fetch thing that's basically making that call that's what's happening so basically we go to our get fetch URL and here so this is what's happening so hey uh of the cell URL is actually the problem here so this one we can basically do something like this https four slash forward slash and then that should get us past what we are doing so at this point you could just do um for so let's just redeploy let's just read the play all right um so yeah live debugging you guys want to see it I'm doing it uh this is the the the the reality of live coding but yeah I want to show you how we get past it so that should do it to be honest um https you should get us past the reason being is because right now we're trying to hit this endpoint and um the API does not exist here like as in the end of the day that is not an existing thing so if we were to go here https like so now that will exist right but as in obviously it's not you know that's a get request to it we didn't have a get reconstrating a search a post request so let's give it a try now let's go back here you make it look too easy how long do you spend this video perhaps uh honestly I prep for a while right so obviously I have to prep these live streams beforehand otherwise it would be ridiculously crazy long um but yeah it takes time naturally right so that deployed let's go ahead and check it out now and see what happens so let's see MacBook Pro searching okay okay did I do it did I fix it is it done is it done or is it gonna scream at me okay we got closer we got closer and then something happened so let's have like logs host API search error let's have this function and we did not get our error back let me have luck so the reason being was oh it timed out okay so this is something which is actually pretty common so the reason being is if you get into this era and I'm actually glad I showed you this um so what happened here was as it's a serverless function it went over 10 seconds right because obviously it has to fetch and this is something that you're gonna find will happen with any kind of you know like a scraper or any kind of API process which will take a little bit of time so for example if I typed in iPhone here searching this is taking more like three seconds four seconds five seconds six seconds seven seconds eight seconds nine seconds ten so once it hits past 10 seconds it will basically time out unless you have a paid plan on um on your the cell right so that's something which is is a little bit hidden but it doesn't tell you that or very clearly but this is where you spot that so here so 10 seconds timed out right so what you would have to do at this point is simply and this will work that means that it does work it just doesn't uh it's because we timed out so pretty much you can have you know in this case the dashboard because we've done that but create a team and you can deploy it to that team and you just need to Simply add a card to it you don't actually get billed right but you can pretty much add a card to it and then you can um while you're in Hobby you only have 10 second time limit for serverless Action so all you need to do upgrade your plan out of hobby for the cell um run it and then you'll get past this hurdle trust me I've done lots of production builds that is literally what the problem is and you'll get past it so with that said that is the issue that we were facing and um yeah we were able to deploy okay so um it does work and I think it's very handy to actually come past this part which was something which I missed initially but yeah the vessel URL gives us the domain we actually have to append https to it still right thank you so much dude I appreciate you and just like that we're about to break past 500 likes as the video ends out with that said let's come up to uh do a nice little beautiful demonstration of the entire build to wrap this up right so I'm gonna do this with a bit of nice music behind us as well and um yeah so what did we do today we went ahead and built out a built out a Google shopping clone this was a basically able to scrape Google um for the search results using oxylabs if we type in for example MacBook Pro 16 inch it would search this was using that new use form status I showed you how to use client components server components a manager says no way this is live there you go and then we use react skeleton loaders to get that beautiful loading UI we also have support for all the different filters like Pages sort Min price Max price and then it loads up these Dynamic side filters and these actually link to your raw values right so these actually take us to the actual Google websites to you and see for yourself these are real all right so if you want to go to this oh there we go nice all right so in this case if we go to for example a Walmart link click it this will actually take us to our own Google shopping uh page right so in this case I'll click it again react skeleton loader as it loads from the back again boom it loads in we get the reviews we get the specifications everything loads in everything is mobile responsive looks damn beautiful right looks really really clean and then we've got this nice little user area where we can basically play with these little dummy searches if I click on airpods Pro loads it up and there you go right and we also learned about caching different techniques that you can use in this case we're caching based on a revalidated strategy so every five minutes but up until five minutes it will serve the cached version of that URL and this means that it will cache the URL based on what filters were actually appended to it as well so if you basically set a Min price of 200 at Max price of 500 that exact URL will get cached so the next person who does that if it's within the revalidation period of five minutes we'll reset they will get the cash version and then after five minutes they'll get the new version uh server side rendered and that'll get cash for another five minutes and so forth right so hopefully that helps you out all right mouthful but it's so cool all right um so let's see um Menard says thank you so much brother because you're teaching as well I'm currently working as a software engineer and esteemed us-based company Jay screenshot that that is awesome debugging with Jesus said love from Kenya sunny and Jay great content thank you Chavi says youthful every time to prevent the problems with production or what can you explain please you deploy because you want your app in production that's the thing we don't want our our projects to sit on our local machine we want to actually push it out to the world so that way people can use it employer you know you want your app to be live and that's what we do and we deploy it we push it live right so remember if you want to deploy this app you have to go ahead and upgrade your vessel plan otherwise the 10 second timer will probably bite you like it did with us right but otherwise you can see for yourself it does actually work right so remember this code will be available on the GitHub proper GitHub repo the link to that is in the description so keep saying yo what's up man thank you for the donation it was great build brother learn so much new stuff I appreciate you man uh sahib is one hell of an awesome designer and he's working with us right now as well so really really appreciate that guy yeah guys you saw it here for yourself today absolutely awesome build uh and again yeah we learned all about next year's 13.4 oxylabs typescript Tailwind CSS Tremor and the cell and yeah it was a really really fun build overall right so you guys can see that it's just cool right definitely one to add to your portfolio and as always I want to get I was past 500 likes before this video ends uh someone says please build a full-time application also in the upcoming time yep I will definitely do that hello from Indonesia oxy Labs yo oxlabs in themselves are in the chat guys thanks for the awesome live Sunny uh thank you guys for helping us out and yeah thank you for providing an awesome service it was so damn fast to scrape that right so honestly no joke so damn fast to scrape real Google look at that real time oxylabs is doing its magic behind the scenes at scraping and boom we have the data in front of us so awesome stuff right with that said guys I hope you enjoyed this video I have a new plan to be releasing content on this channel which is basically going to impress and love like you're gonna love it right so I've been essentially we're dropping a lot more coding content on this channel all I need you to do is smash that like button hit subscribe and hit the little bell notification icon so that way when I drop those coding videos on this channel you're gonna go ahead and see all of that stuff right so make sure you go ahead and uh yeah check it for yourself um what was I saying yeah so make sure you go ahead as reading the comments as well I kind of went a bit brain foggy yeah make sure you subscribe and as I mentioned before we're going to be dropping one to two coding videos per week on top of hitting live stream so live streams will always be coming out on this channel but I want to be dropping a lot more concentrated content which is really straight to the point for example server actions will be coming out soon and we also have an xjs caching right so those kind of videos that I think you can go to revise and then you can come to these practice so that way this channel is just Untouchable in terms of what you can actually practice learn from and all that stuff stuff but anyway none of this would be possible without you guys so I appreciate and love each and every one of you as always you know how we do it we gotta leave this the only way we know it thank you so much guys for tuning in to the stream cheers girls hit that like button great products thank you oxylabs for making this possible today and yeah this was something to add to your uh your entire portfolio and if you do want to carry on with this kind of energy this kind of you know mentality you want to have constant mentorship every single week then zero to full stack hero is the place to go ahead and check it out right Christian says funny rock throws his hairstyle just says teasers here really really excited now yeah 100 Edward said next year's cashing yes I have a video coming on it very shortly guys so as always it's your boy Papa react and as I will see you in the next video I hope you enjoyed this one and yes go practice it peace [Music] absolutely beautiful though look at this guys a little demonstration of the app one more time as we sign out I can't leave when the drops about to happen you gotta see for yourself beautiful stuff really nice mobile responsive all that good stuff hey Roxy love you bro got my job amazing stuff Jay screenshot that huge Sonny's on fire Augustine The Freshman says congrats Papa amazing amazing stuff thank you so much guys see you in the next one peace oh okay that totally flopped see you there guys peace

Channel: Sonny Sangha

Views: 15,225

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

Id: -8VCUUBHBKc

Length: 193min 1sec (11581 seconds)

Published: Tue Jul 04 2023