🔴 Let’s build Booking.com 2.0 with NEXT.JS 14! (Scrape Data w/ Oxylabs, React, Shadcn, Tailwind, TS)

yo what's going on guys welcome back to another video today we're going to be building a Booking.com clone you're going to learn how to scrape data off of any website the easy and ethical way we're going to be covering this with nextjs 14 so you're going to learn the latest and greatest we've got tons of cool things to go ahead and cover let's dive straight into this one here's a demo of the application we've got booking.com tons of good stuff inside of here let's go ahead and look at a quick demo so let's go ahead and type in London for the location beautiful date picker you can see right here this is actually a Shad CN and we've got the range right here we are using the form components inside of Shad CDN so lots and lots of cool stuff we can actually go ahead and say like two adults one children two rooms and then we're going to click on search now the cool part is actually happening right here so while it goes ahead and loads firstly that's the XG S14 feature right so we've got a beautiful skeleton loader right here that's going to go ahead and load while our code is going ahead and scraping from the booking.com actual website so I'm going to show you you how you can go ahead pull different elements such as the number of reviews the title itself the images and so forth and I'm going to make it so so easy to do this guys so this will go ahead and scrape for us and in the meantime this is actually going to go ahead and use oxylabs residential proxies to do so so this is actually how it's possible but more on them in just a second you can see here once it's gone ahead and successfully scraped the data we will go ahead and list it and obviously your boy doesn't do half measures this is is fully mobile responsive so you can see right here we also have click through links so you can actually go ahead and click on this link and it will take you to the actual booking.com piece of information that we are requesting so you can see it's actually real information this is being scraped off of the booking.com website so this is a really really powerful application that we have right here and it's also a really great demonstration to Showcase to an employer or add to your portfolio for the capabilities that you can use at nextjs you can go ahead and code with things like typescript T in CSS and you can go ahead and Implement things like web scraping capabilities into your applications so lots and lots of things to demonstrate here as you can see here we've got all of the results down below but I think let's go ahead and jump straight in but before we jump in we've got to thank our sponsors of today's video oxylabs oxy laabs are one of the leading leading premium proxy services around the world they have an amazing solution to going ahead and scraping information wherever in the world it may be firstly they have the world's biggest proxy pool with over 100 million ethically sourced proxies they can ensure you 247 customer support I've been using them for a long time now and I can promise you the experience has been effortless and it's been great they really believe that everyone has the access to Big Data and they've made it is simple to do so they got lots of different solutions they've got their residential proxies they've got their web Unblocker share data center proxies whatever you're in the mood for whatever you need they have you covered in fact the four big ones that we're going to be talking about I've actually actually covered one of them in a previous video is actually the different apis that they offer so they have the e-commerce scraper API we actually did this with the Google shopping clone so it's very very powerful API that returns structured information that we can then go ahead and you know put inside of put inside of our website they also have a search engine um scraper API so you can go they also have a search engine scraper API so you can go ahead and actually scrape things like Google Bing all of that good stuff but today my main focus is going to be using the web scraper API now the web scraper API allows us to go ahead and basically go to any website so for example this right here and we're going to I'm going to go ahead and show you how you can actually go ahead and inspect an element for example if I was to select something like this to title and I'm going to show you how you can use something like the data test ID or the class itself to go ahead and actually select this so think of it this way anything on a web page we can go ahead and scrape it I'm going to make it so simple to go Ahad and show you how to do that and we're going to make use of oxylabs to do just that so before we jump in let's talk about oxy labs's fast residential proxies now this is something which I really recommend everyone check out the gist of this is very very simple if you want to scrape data from anywhere in the world you know web pages are going to go ahead and show you the different locations based on where you're viewing from so in this case we jump into like for example Netflix if you're in the USA you're going to see things slightly different from somebody in the UK this is where something like a residential proxy will come in clutch they have the market leading proxy port you can go ahead and see you've got tons and tons of different IPS in different locations Global coverage whether it's Japan whether it's Australia whether it's the United Kingdom they've got you covered the performance is top tier you saw just how fast it was when we actually showed the demo right here and they've got a simple peir you got options from only $15 per gigabyte honestly that's very generous and they've also sorted you out with a free trial so the first link in the description will allow you to go ahead and leverage the free try remember guys there's no commitments you can cancel at any time so what I would recommend is you give this build a try you go ahead and sign up for the free trial and then you see if you enjoy the platform and then from there it's completely up to you like I said there's no commitments you can feel free to cancel or continue based on your heart's desire okay so with that said first link in the description if you want to go ahead and tap into the residential proxies for oxy laabs your boy sorted you out with an affiliate coupon code so first link in the description go ahead and use it it will help me out on the channel and it supports as always and I appreciate you for that and without further Ado I think we should jump in right if at any point you find the coding for today's video is too complicated feel free to head over to papa.com slcse where we have our Flagship course and Community where you can go ahead and learn from absolutely zero to learning your first six-figure job as a developer promise you whether it's your first job whether it's your second job or your third job I'm going to get you to your sixf fig job in our course and community and we've done it so many times now that we know exactly how to keep our developers up to date with the top skills that they need to crush it with their dream developer job so feel free to check out paper.com course link will also be in the description let's go ahead and dive into today's build I also want to demonstrate as well look some beautiful UI components and also completely breezed over it but you can see we also have a burger menu drop down I'm going to show you how to do all of this in today's video Let's dive straight into it so first thing I want you to do is open up warp on your terminal I have a little bit of a cough right now so we're going to try and defeat that but I hope you guys enjoy this new format that we're trying out we're actually testing out to see if you guys can actually if we can go ahead and build content or create content in this way um so it's not necessarily live but we can actually go ahead and have this you know extremely interactive way of going ahead and working so we're going to go ahead and go into our folder and then I want you to go ahead and use the command MPX create next app at latest and we're going to go ahead and not use the Dropbox clone that was actually the last video today we're going to call it booking.com clone so we're just going to say booking clone YouTube hit enter this will go ahead and spin up our app with uh next year 14 so you want to go ahead and say would like to use typescript so we're just going to go ahead and enter all of the defaults are completely fine here now you may get an issue here if your node version is in the incorrect version if it is I will show you how we can go ahead and address that so okay in this situation you can see my current node version is incorrect I like to show this on builds because it can happen so why need to do in this case I'm actually going to go ahead and remove the booking.com clone right here so what we can do is we say remove D recursive and then we're going to go ahead and say remove now the reason why I done this is cu I want to remove this folder and I want to switch my node version and restart the process they require version 18 to get started so I'm going to Simply do MBM if you don't have MBM I highly recommend you get set up with MBM if you want me to make a video on that happy to do so drop a comment I'll show you what it's about but in this case I'm going MVM use 18 and this will switch my version from node version 16 to 18 so you can see if I do MBM LS you'll see all the different node versions perfect okay next up we're going to go ahead and run the previous command again to rebuild it and now we won't have that error so we can go ahead and click yes through all of the defaults and just like that we're good to go okay so once that's done success no error coming in we can go ahead and CD into our booking clone YouTube and then I can do Code full stop to go ahead and open it inside of vs code okay so once we're done with this I can go ahead and close my w browser pull this warp terminal sorry close this out I'm going to make this a little bit bigger for you guys to see and then I like to go is go ahead and set my screen up in a way that you can go ahead and understand and you can just be efficient so I can swipe through so I want you to do the same thing okay now with this in mind I'm also going to go ahead and spin up the app that I currently have on Local Host 3001 so that way I can have both apps open but in order to do that I need to cut my previous app and I'm going to go here do command J I want you to click on output and I'm going to go ahead and in here I want you to typ type in mpm runev okay so mpm runev this will start up our application and we should get okay so in this case if you get this error this is actually because the node version is not set by default so if I type in MVM LS we should be up we're on version 16 we need to be on version 18 here or above so MVM use 18 you can go ahead and set your defaults but this is really important because you some of you will run into these issues whether you're coding by yourself or in production I think it's very handy for you to actually see this these steps so once that's done we're now going to do mpm run Dev and we'll get past that problem so you can see there we go and we can see it spawn up on 3,000 now what I will do is I'll run the previous app that I had to Showcase you on 3001 so on 3000 now if we go to my local host we should see the next there we go that's perfect right now what I'm going to do is I'm going to go ahead and pull this over here as well so we can get a nice little demonstration side by side as we're coding okay so that's what we want to have and I've also opened up the previous app on 3001 so we have a reference of what we're going to go ahead and build right so in this case that looks perfect that's exactly what we want to get to okay so command J to hide our terminal let's go into app and we're going to get started straight away by hitting page. TSX now over here I simply want to go down to Main and I want to clear out everything and I'm just going to type in H1 booking.com clone okay very simple and we're going to go ahead and delete that now this is always how I like to start my apps off so head out into layout. JS uh DSX sorry and I I want you to go ahead and you can rename this to really whatever you want to call it you can say the metadata could be for example booking.com clone right again this is purely for educational purposes whatever you do with this tutorial is at your own risk so let's go ahead and get rid of all of this I don't really care about all that I want to keep my code super simple for today's video there we go and then I want you to click into global. CSS and we're going to remove all of the default styling except for pulling in the tail one utility classes that I want you to keep as is because that's what we need okay great stuff we're looking good okay now the only thing I do want to change is right now it's automatically flexing us into the center so this is why this is Central want to get rid of that so we have a clean canvas this is exactly where we want to start from okay now with this in mind I'm going to need a few dependencies today so all of these beautiful UI elements you're seeing right here including this lovely drop down that we have over here all of this is part of Shaden so we're actually going to go ahead and install Shaden by heading over to shen.com so ui. shen.com click on the installation and click on nextjs we're going to click that and here you can see we've already done the first step we're going to then go ahead and init okay now what I highly recommend you do is two things you split your terminal that's how I like to work I'm going to check my node version is correct on this separate terminal you can see that's on 16 so what I actually want to do is MVM use 18 to ensure it's coherent command K to clear my terminal and I'm simply going to paste in that command of initializing Shad cm into our project now you want to go ahead and say Yes default I'm happy with the default styling the colors everything be in its own way um this one okay we could have done TSX that's completely fine go through that's all good okay now once that's done you may Wonder oh okay we've got two different configuration files in this case I don't actually care too much about correcting this I'm going to just go ahead and get rid of the typescript file we're good with just the Javascript file okay you can go ahead and refactor this if you want to keep the typescript one um but we're not too fast in today's build okay so once that's done we have Shaden at course up into our app so the next thing I want you to do is go ahead and you can go ahead and really set up the fonts and things like that in this case we don't really care too much about that we're just going to go ahead and get started with the build process so what I want to do now is I want to head over to our our app and we're actually going to sort of start kind of draft out how we're going to build it I always do this whenever I start any kind of build and I think it's always a helpful step right so the first things first is we actually have a header component so I always like to start with this it's kind of like a warm-up to getting things ready and off the ground so first thing I want to do is I'm just going to go ahead and pull up my layout now here in the layout. TSX is where I actually want to go ahead and put the header because I want this to be across every single page so what I'm going to do is I'm going to type in header here this is how I like to work if you've seen any of my builds you will notice that I do this a lot now if you enjoying this build remember please like comment and subscribe it helps push this video out to as many developers as possible and it's going to help me keep on bringing this out for you absolutely free Okay so let's dive into our first component we're going to go over here and head into components and I'm simply going to add in a new file called header. TSX right and I'm using Snippets here so RFC if you're wondering Sunny how the hell did you just do that well all you need to do to get that is actually go ahead I'm going to make the text a little bit bigger is go ahead and into your extensions type in es7 and you will see a beautiful snippet extension over here like so this is the one you want click enable and you'll get exactly what I just had there cool with that done we have our header now with our header I do want to go ahead and start things off uh pretty easily pretty quickly uh in fact what I want to do is show you the way I've done this is I've actually got a few little drop downs now I did get inspiration from this from Shaden but I will go ahead and show you how we can go ahead and just do ourselves so I'm going to go ahead and break this down step by step so firstly change this to a header simple we're going to you know for SEO purposes that way web crawlers know exactly what we're looking at we're going to go ahead and give this a background of the Blue from booking.com I'm going to go ahead and say um let's go ahead and get this bit cleaner there we go that's the background color of booking.com and I'm just going to go ahead and pop this in so we can start seeing this on our page so we're going to Simply do control space bar and import it like so and now you can see I've got my header Popp in okay so it's a very good starting point and we can go ahead and start building things up now here I've got a nav and then inside of my nav I'm going to do a few things now some stuff I'm going to jump through a little bit quicker because I don't feel that there's a big emphasis on these parts you can feel free to actually look over at the documentation inside of things like Shaden so if you really wanted to go to look through this you can go ahead and you dive through all of these different components yourself but in this case I'm just going to show you how we've gone ahead and built these out and you can feel free to pause it or get the entire code over at our Papa GitHub Reaper okay so for the nav component I'm going to go ahead and pop in the following so we've got a little bit of styling here we're going ahead and applying a flex box to centralize it when we need it and then inside of the nav we've going to have a div now inside this div this is going to be representative of this part so the booking.com section okay so all we've got here is a clickable link and this is going to be a nextjs link tag component like so and it simply goes to our homepage very bit Min minimal bit of styling and then this is for a server render only so the reason why you have things like this is because when it does a server render of this component because this is a server component at the moment which it will be converted to we actually are going to convert this to a client component but in the event that it's ever read on the server this will be seen and then that obviously gives our web cers a little bit more context a little bit more meaning so that way they can go ahead and index it and push our website up on SE rankings then we've got a picture now this picture is simply the booking.com logo okay so it's just like that now if I click this it will actually take me back to the home screen okay so that's how we've gone ahead and done that and then where we had our nav I'm actually going to go ahead and Surround this uh link tag inside of a div like so okay so we're simply just going to ahead and apply Flex now we it will use up the maximum space it can on a bigger screen okay with that bit done down we're going to move over to the next thing and the next one we're going to go ahead and have a side button menu okay so for the side button menu this is going to be for the burger menu so we call that a burger menu when you have this sort of layout where this little thre line sort of uh component right so so this is called a burger menu pops out and then on mobile devices it allows us to have things like a navigation menu but something which works a lot better on a phone okay so what we're going to do is we're going to have a piece of state which resembles if that's open or not we're going to pop that in over here and we're simply going to go ahead and import our react state so now we got the mobile menu open set mobile open there we go now with that in we're simply going to have a button which is going to be hidden on the bigger screens okay so I'm going to go ahead and pop this in right now so uh you want to go ahead and do it underneath this div and it's going to look something like this now this means Remember Everything by default is mobile first so this is actually flexed by default and then on a large screen it applies the hidden RW okay so that's how these work these are break points on a large screen it will hide now we've simply got a button it's simply a type of button bit of styling on it and when we click it it's just going to set the mobile open to um mobile menu open to True okay then obviously we're going to conditionally render that burger menu and so forth on that and this is how you go ahead and address this thing now if you want to go ahead and import this we actually need to install something called hero icons so I'm actually going to go ahead and save us a step here so if you go ahead and open up your terminal and do mpm Install hero icons hero icons react and then what we can do is we actually can go actually uh import these icons inside now the icon that I'm looking for here I'm actually going to go ahead and pull in at the top manually to Showcase because we are going to use something called x mark icon afterwards to close it okay so with that done now we can go ahead and hit save and you can see on a burger on the big screen it's gone but on smaller screens it's now visible okay and when we click it we're actually setting the piece of State cool now with that done we can go ahead and continue on the top now here what I want to mention as well is we actually have a few different options we have stays flights car rentals attractions flight and hotel now a few of these are easy so a lot of this stuff is pretty easy flights car rentals but this is called a popover now now a popover inside the Shaden if you head over to Shaden you can go down to the p and we should see popover now this is essentially what we we have here so essentially what we've done here is we've sort of changed it up to look like this so what I'm going to do firstly is I'm going to go ahead and install it into our project so if we go ahead and do that command J pull this open and then we've got that this will go ahead and add it into our uh directory so in this case now it's installing the popover and what you'll notice is if we go into here now we have the popover component so that's something I really like about Shaden there's a lot of transparency as to what the code is actually doing so there's no like sort of higher abstraction it makes a lot more sense okay now at this point you can really go ahead and clearly just kind of you know copy this out and and adjust it if you want I've saved you all that Hassle and I'm going to go ahead and show you our code beforehand so you can feel free to copy this out as you need to okay so first things first is we've got the popover group so let's pop this in place and what I'm going to do is I'm going to slowly expand it like so so that way makes a little bit more sense okay and we're going to make sure you don't do it from Radix we going to do it from our own Library like so okay now this is freaking out because the children is not okay we haven't actually imported this correctly I'm going to show you how we can import this the correct way so what I want you to do is actually pull this in from headless UI there you go so we need to install headless UI react okay so in this case I'm going to type in mpmi at head UI for/ react and that will go ahead and install the dependency that we need headless UI is actually a really awesome Library it's very good for building accessible good components that's the easiest way of doing it accessible meaning the way you use your keyboard shortcuts will go ahead and correctly navigate across your components so in this case we got the popover that we needed from here great and then we're going to go ahead and build out the rest of the popover so we're going to Simply have a popover itself so I'm going to go ahead and pop this in like so and then we're going to go ahead and have a closing tag and then we're going to pull this in and inside of our popover we're going to go ahead and verely have a button now this button is going to resemble for stays so in this case here stays and we've got a simple Chevron down icon so I'm going to go ahead and pop this in right now very simply but and for the Chevron down icon we are going to go ahead and actually I'm going to pull in a couple of more icons these are the solid variants you see here we had an outline variant here I've got a few different icons one of which sh run down so we're going to go ahead and import those hit save come back and what we should be able to see now is it's not up yet we haven't actually got the entire thing set up but we will get there so in this case hit save and I just want to check now where is this okay there it is so you see stays that's perfect that's what we want and obviously it's conditionally rendering it's hidden on the mobile view but on the large screen it's Flex which means it comes in line so you see that great stuff okay now what we need to do is after the popover button we're going to have something called a transition and the transition is going to go ahead and include the panel in which we go ahead and see so this right here so the transition you see there's a beautiful little transition there okay so what we're going to do is outside or actually inside the popover but outside the button we're going to say transition okay now this transition I hope this makes a lot of sense because what we're doing is we're slowly filling out it's going to be a fragment so you basically can give it like what should it render out what HTML element should this become so we're going to say it's a fragment and in order to make that work we have to import it from react so that way react knows what the hell we're talking about and then you can put in your transition rules so these are basically simple transition rules using ta and CSS okay now while that's done we've got the popover panel now the panel is essentially what you're seeing here that comes out on the screen so I've actually made our life a little bit easy here I've gone ahead and included all the styling so you can go and pop it in and as we mentioned before we're going to add the closing tag as well so we've got a bit of styling here if we go ahead and do this right now we can actually see if it's in check or not so right now it hasn't got any contents inside which is why we can't actually see anything happening okay now rather than listing out all of these different options one by one what I'm going to do is I'm going to show you an array so what we're going to we're actually going to create an array at the top so let's go to our top of our bile and we're going to create an array of products so we're going to say con products equals an array and inside this array we're going to have a couple of different objects and these are all going to resemble the different options on that drop down so we've got book of stay get a better understanding of your traffic blah blah blah book of flight speak directly in this you can feel free to you know change this around whatever you desire change it around and we've got some icons associated with them yeah then we're also going to have calls to action so as you can notice down here we've got two calls to action C demo booking and contact support so I'm going to go ahead and pop these in as well and then these These are going to come quite handy in just a second okay so let's head back down to our popover panel inside of here now we can go ahead and we're going to map through first things first before we map through we're going to have a container that surrounds everything this container is going to have a class name we're going to say it's a padding of four because I don't want it to touch I don't want it to touch too much of the side so you see a a little padding of four around very simply and then inside of here what we're going to do is we're going to map through all the products so simply put we map through all of our products like so and inside we're going to go ahead and actually render out a div for each one so we're going to pop a div out I'm going to make this full screen so you can actually see this a little bit simpler okay so we got a div and if we just put a P tag saying hello and you just crect cor whatever is going wrong here there you go that's an easy way of doing it then you can go ahead and obiously modify as much as you want now when whenever you're mapping through anything you should tend to use something with an ID right so in this case item. name will suffice but if you can't you can absolutely you can use the index itself for the key but always include a key this is how react typically rerenders just make sure your key is unique in this case we know it's Unique right here because the names are all unique but if you have an ID it's the that's the correct time to use it it has to be a custom like kind of a unique ID now first things first we're going to render out the icon on the left right so here rather than P hello that's great and all but we want to have an icon so we in item. icon and that will go ahead and actually render out the home icon paper airplane or chat bubble so if we go ahead and do that right now hit save I'm just want to show you this in action now so if we go here and we click it you can see I've actually got a nice little popup coming up right so this is already pretty great okay now if we go ahead and continue on we've got the item icon now outside of that div I'm going to have a flex box and I'm simply going to pop in three different bits of text here so let's go ahead and pop this in and you can see right here we' got an anger tag with a HF and we've got the item name itself and then we got the item description so very simple things here to pop in let's go ahead and pop this out over here and we do this and you can see Booker stay bookerly contact our support team okay so so far looking quite nice now after that we've got the div so we can actually exit after this point so we can head outside of our div and we're going to have a final div here this one is going to be for the cuse to action now what we're going to do here is we're actually going to use a um a grid we're going to use a grid here so what I'm typically going to do is say grid a grid column of two and we're going to have a divider in between the x-axis okay then we're going to map through all of the C to actions we had two which was like contact support and all that good stuff going to map through pop out an a tag it's just going to show the icon with the item name so if I show you this now in action we can see here we have those two c action there and obviously right now it's thrown off the screen which is fine for now uh we're going to correct that in just a second okay so just like that now we've got that popup working the way we wanted it right very simply after that we've just got four h refs afterwards right so this part is very simple you can go ahead and put these out into your own kind of you know you can really pop them out wherever you want right now I'm simply going to go ahead and pop them here so we've got flights car rentals you can pop this that into a separate array is what I was trying to say and then with their appropriate HFS right now I'm not coding that up because it's just a demo but if you want to go ahead and do that feel free to absolutely go ahead and do that right and then at the end of all of that we're going to have a login button okay now the login button very straightforward as well it's going to take up the remainder of the space hence why we have a flex one on a large screen so let's go ahead and have a look how this looks so there you go this is how we go ahead and get our UI looking perfect right so if I show you actually what we had here it's because if you look at the overall container surrounding the popover group here this is where we have it on a large screen it becomes a flex box and then inside you see popover group encapsulates all of the other things as well okay so this is how we get this nice little you know layout so now you can see it works perfectly the way we expected the only thing that we haven't got now is obviously when it goes to a small screen this burger menu we click it and it sets a piece of state but nothing is rendered as a result of that so we want to go ahead and fix that that and we're actually going to use something called a dialogue here so if I go over to my popover you can see dialogue is this we get a nice little popover right now we're actually going to use this in a way whereby it represents this so if I was to go ahead and show you the actual big build we click it and you see how we've got a nice little dialog pop over really nice okay now let's go ahead and implement this inside of our app first things first we're going to go ahead and click on this right here so MPX shadan uh in fact actually no we are not going to use this we're going to use headless uh UI for this I I've got that a little bit mixed up okay so after let's go ahead and get back to where we're at after the nav we're going to go ahead and have a dialogue okay now the dialogue is going to go ahead and we're going to do the same approach that we've done previously we have to determine what is it going to render out as well in this case we're going to say it's actually going to be a div okay it's going to be uh hidden on large screens and it it's determined to be open if based on the mobile menu opens piece of State and then when you click it it's going to go ahead and set mobile menu open if we close it I mean okay so that's perfect we're going to have a little line so if you go ahead and I'm going to have this open for reference so you guys can see if I click this right now we're going to have an inser line here so let's go ahead and pop this in so we go fix line and then we're going to have something called a dialogue panel this is where all the contents is going to be inside of right so here let's go ahead and pop this in like so so we're going to say dialogue uh panel there we go boom like so and inside of here we're just going to include a bit of styling I'm going to make life easy for you I'm actually going to pop in The Styling like so right you can feel free to go ahead and contemplate that yourself but right now it's actually open so if I refreshed you can see it's not open by default when I click this look at that it's got this nice bit of styling okay and obviously when you have the default behavior on a mobile view you see how it takes up the entire width as it gets bigger that's the kind of behavior that we want okay that's exactly the kind of behavior that we want so now at this point we're going to go ahead and have a div and inside this div we're going to Simply have the close menu button with the icon itself right so I'm going to pop this on the screen right now and show you what this essentially resembles but this will essentially resemble your company name can go here so in this case we could just say booking.com and this is a server render only so only show on the server renders for the web scrapers to take benefit of this will be the logo itself and if we actually show you what we just added there if I hit save now you can see there a top Top Line now you're want you to pay attention to the button the button is simply a x mark icon the server Ender only says close menu and here you can see it's actually going to trigger the piece of state right so that's how we go ahead and get this burger icon so if you ever wondered how do I open create Burger menu icons that's how you do it okay there's lots of ways you can do it but this is a really great way of doing it with headless UI now once we're done on that front we're going to have another div here this div is going to go ahead and use the flow rout state if you want to go ahead and click over this you can see it uses flow route you can feel free to dive into that if you want itach inside of Z to full stack Cur you can feel free to check that out if you're interested but inside of here we're going to have a another two nested divs now I'm going to show you at a high level how we're going to uh address this right so the first thing we're going to do is we're going to have our two divs inside of it so if we hit save we're going to have one div and two div okay and let's go ahead and pop these out like so so we've simply got a bit of styling applied and if I do ahead and say P tag hello you will see now this is the first sort of like item that we will see and eventually what this will become is something like this so you can go ahead and see stays flights but look at this we've even got the click down for the drop down right so the we're actually going to call that one a disclosure and I'll show you how we do that okay so here we're going to have something called a disclosure okay so I'm going to go ahead and pop this in disclosure and you'll notice how we need to import this from Material uh headless UI sorry so you see here disclosure is all from headless UI Okay so we've got our disclosure where is it where's it gone where am I at okay and then we're going to do our closing tag so let's go ahead back here closing tag like so okay now inside of here you get something called a render prop now this basically gives us a value of a piece of State in in a given time so in this case our render prop resembles the open State okay and we also get I believe the closed State as well but in this case all I care about is the open State now in inside of here we're going to have a react fragment so it's just going to be uh some children elements inside and then I've got a button which will resemble the drop down okay so in this case what I will do is I will show you the button itself so we going have a disclosure button so here and we've got this utility class now if what we can do is we can do control space bar and typically class names is actually included inside of our lib folder I believe so it's actually CN what we're going to do here is we're going to rename this to CN and and import it and that's just going to allow us to go ahead and combine several classes in this case it just makes it simple if the state is open it's going to combine this class with our base styling here and this is a button which resembles the stays okay now if I show you this look what it's doing it's got the open and close Behavior but we haven't got anything underneath it okay so this is going to be the disclosure panel so disclosure button is for that part and then the disclosure panel is for the actual contents beneath it so what we're going to do here pop this in and all we're doing here is we're getting all the products and the Cs to action we're mapping through them and then we're going ahead and showing it out on the screen so if I go ahead and hit save now you'll see if we hit refresh P this open you'll see the panel is open and closed based on the disclosure button okay so that's how we go ahead and get this nice little effect going on right here so that gives us the bit that we needed there and then afterwards fairly straightforward to get the flights car rentals attractions flight hotels little divider very hard to see with a login underneath it okay so let's go ahead and do the same thing under there let's do after the disclosure down here we're simply going to have a bunch of a tags to make life easy and we're going to close out our div so let's go ahead and pop the a tags in right now and again what I would highly recommend at this point is you could just simply refactor right so here we got the a tags moving all the way down to flights and hotels with a bit of styling applied to all of them you could easily also add this as a custom Tailwind class utility class and then go ahead and clean your code a little bit more as well again these demos you know you can take them as far as you want I promise you just feel free to to have that creative freedom and actually take my tutorial add on to it okay then we've got the login button at the end okay so very simple bit of coding there right now you can see here that is how we've got our two bits of styling and then of course you can actually go ahead and refactor it and actually extract the sort of mobile component out into its own component if you're wanting to so that way you've got a NE neater bit of code right but in this casee it's not too too too bad it's not the craziest longest bit of code but I would probably in a production build separate this out into its own different component but with that bit done we've got the nice little header component done so that's looking pretty good right we can click on stays look at that it looks really nice and we get a nice burger menu icon and with a nice little drop down okay so that's how we're going to address the header now with the header done we should get into the juicy stuff so let's go back to our page and I'm going to start building things out a bit more of the interesting the juicy stuff okay so this is our first bit so we've got the header down I want to get this find your next day search low prices and I'm really focused on this search form because this is where we begin our scraping Journey okay so we're going to click on find your next day now over here I want I want you to do is go over to this and we're going to go ahead and we've got the main booking.com clone now here I want to say section instead CU it gives us no relevance what I had previously and then we're going to have a H2 and a H3 with the headings okay so just like this now you can see that nothing is showing on the screen at the moment because we've got text white okay so first things first I want to have a background color here of the blue for the booking.com uh styling now in this case you could do it on the layout if you really wanted to I want granular control of how I'm coloring the page so this is why I've decided to do it this way now here you can see it's always going to push to the side I want to have it with a Max width constraint so that way it's never going past the kind of boundaries that I want so in this case I want have a Max width of like that I want it to be perfectly centered every time so the way that we do this is we simply add in a Max width I'm going to use 7xl the largest possible one and then we Center it with MX Auto and now what you'll find is look at that it applies the max width raw and It Centers it okay and you still feel like it's touching the side too close here so I'm going to do a padding of six and there you go look at that just like that we have a really nice kind of header looking section next up we have the next section this section will be respond responsible for the search form so we're actually going to build a search form here we're going to call it here so search form like so and what I actually want to do here you'll notice that this is slightly going into the next section the way we perform this trick is we simply go ahead and we do a negative margin bottom so I want to have a margin four all around okay I to have a margin top of zero I going to have a margin bottom of a negative value so that way it starts to creep into the next section to give us that nice little effect so imin bottom of 14 padding X on this two and I'm going say on the large screen we're going have slightly bit more padding of four now you can't really see anything here because I haven't done anything yet with that form but eventually that form will be this right here okay that's great now the final part is underneath this section we're just going to have like kind of a dummy section here right for trending destinations so that way you can see how we would go ahead and Implement that area so we're going to have a section underneath here and I'm simply going to go ahead and put a little bit of styling to this so you can feel free to style this however you want this is more a a make our demo look pretty sort of uh area Okay so this is really something which you can go ahead and expand on in your own time take it as far as you really want right now I've just added trending destinations very simply and then underneath the div we're going to have a simple uh div and then we're going to map through some trending data and what I've done is I've taken the liberty of adding in trending data ourselves in fact what I'm going to do is I'm actually going to include all of this code for uh for free inside of the description so I'm going to push this in a public reer you'll have access to all this code it's going to help you out very easy and you can feel free to add that onto your portfolios okay so what I want you to do now is we're going to create a data folder so we're going to have a bit of dummy data here so we're going to go ahead and obviously you can uh take this even further really go ahead and um pull this from a row database and so forth and we're going to call this trendings okay now inside of trendings I'm going to have a bit of dummy data right right here which looks something like this we're going to export con trending data and we've got an array of different objects now you can see here it's just got different IDs with different titles locations and descriptions okay and we're going to go ahead and save this go back to our code and I'm actually going to import this and actually use this to go ahead and render out what we need so here I'm going to say export import trending data go down to this over here and I'm going to map through and say trending data. map for every single item so in this case for every single item we can go ahead and pop out the following and then very simply I've just got a div with an image right so image bit of uh sort of styling rules apply I don't want it to shrink that image as well so in this case I've added shrink zero and we've got a set height and width and a few other areas now you can see I've got cursor um cursor pointer to go ahead and resemble a clickable element right now we haven't set anything to be actually like click through so it doesn't take me anywhere but in this case it will do overflow XC so in this case you can see I can click it and and I can scroll through in a horizontal way which is quite nice right we've got this nice little scroll bar as well if you're on desktop or you can simply swipe your finger across now that looks pretty good right in this case I like it's pretty clean uh in fact one thing I want to highlight here is when you have this kind of design element or you're kind of figuring out what your design is this kind of overarching rounded top area is always a nice little addition I always find SES do it it just looks really clean right and that way youve got this kind of like look how it Blends into the background so you've got this like background with the four white foreground it adds like a layer of Dimension to your app and I always find that those small design tweaks really go a long way sometimes okay so now what we're going to do is focus on the search form which is actually one of the main parts here we're going to go ahead and build the search form right there okay so let's go ahead and do that right now now if you are enjoying this build make sure you like the video let me know if this is more of your theme like you know you like these instead of the actual live streams where we go ahead and have the same similar setup but it's a lot more of a calm noninterrupted flow let me know about smashing the light Buton leave in a comment okay so we're going to go into our comments now uh components sorry and we're going to type in search form. TSX okay RFC boom just like so and now here this is where I need you to pay very very close attention this is actually more of a bigger uh form component that we're actually going to build now what have I done here so you want to head over to Shaden go over to your form now as you can see here forms are tricky but they actually make it super easy to go ahead and do it and we are going to be using something called Zod to go ahead and correctly allow the values that only we want inside of our forms okay so what I want you to do is go down to installation MPX Shaden at latest ad form once you've done that we're simply going to go back over here uh let's go ahead and pop that in our terminal like so we're going to add that form and you can see right here it will go ahead and install it so first things first you want to create a form schema all right so the form schema again I've made your life easy do not worry guys we can go over here so that's already added we can go down to search form and I want you to go to the top of the file outside the render and you can import z uh all Z from Zod right now I've actually gone ahead and done the liberty of creating the form schema for us so we've basically got a form schema and we're defining an object and all it is is essentially think of it as a near kind of like a typescript style syntax but really what you're doing is you're just setting the validation rules and then basically you're saying if this validation isn't met how how and what message should I show as a result of that now let's give you an example of that well the dates when we have the date picker object it's going to have a from and to inside of an object but the more interesting area right here is for example the adult so in the real example you can see here if we actually had for example like minus 30 right or for example like I need to fix that but in this case if we try to submit the form you can see string must contain at least two characters then if I start typing typing as soon as I hit the two you see how it it went ahead and corrected that right so in this case this is something which is typically quite tricky in a in a form right and you have to go ahead and check all these annoying things well what we can actually do here is we can simply go ahead and actually add it in ourselves so I've done that where we have the location and by default the rule was it must be two characters but if you want to customize that message all you have to do add a comma and simply say must have must be two characters or more and then just to show you I'm going to write at papam there we go and check this out okay so obviously actually won't show cuz that's not the live one yeah but that that will be the message that will pop up if you weren't going to if it wasn't two characters okay otherwise I have the default which is quite cool okay so in this case now we've got our form schema and we're going to attach this to an actual form now you can go ahead and do things like you know a server component here but we're going to need a bit of client interactivity so we're going to convert this into a client component right then we're going to need a couple of things first things first we're going to need the rout to object because we're going to eventually redirect the user to the search page right so next navigation we're going to get the router that's going to allow us to go ahead and move somewhere else okay then we're going to go ahead and create something called a form and this is going to use the use form Hook from a react hook form now inside of here what I want you to do is firstly we need to give it a template to make sure that it's pulling the correct form schema and actually referencing against so we're going to say Zed infer type of form schema okay so this is a generic template we're going to be using and then we're going to go ahead and pass in a parentheses with an object as an argument now here what we do is we need a few things the first really important one is called the resol and we're going to pull in something called Zod resolver okay now I want you to go ahead and pull it in like following so as we just did there so at the top here Zod resolver like that now here this is basically going to ensure that whatever value we submit to our form it actually goes ahead and checks against those things I showed you previously okay so that's the first thing the second thing is we need to pass in something called default values and now this is simply going to go ahead and match against all the fields that we have so you can see here if I do my intelligence control space bar you can see it pops in all of the things from our schema so I'm actually going to make this very simple and all I'm going to do is the default values are just going to be fairly straightforward values right so we've got location dates adult children rooms and you're probably wondering hang on a minute why is he doing a string because in a form field uh right now it's actually checking against the string value again rather than number even if your input field is of type number okay so just something extra to be aware of now the final step is we're going to have a submit form okay so this will be more so for when we submit the form and this is going to look something like this it's going to have values and this is going to be exactly against the type that we previously set up so you can see right here like so uh Z invert type of schema so the values that we submit our when we submit our form it will submit the exact form schema and then it it's really nice because it won't actually trigger this on submit if these aren't met okay so for example if you don't have enough characters you've specified and so forth okay now the next step is fairly straightforward what I want you to do is if you ever get confused at this point you can see that's the step that we just did but I want you to go ahead and really look at this area here this example build your form so I want you to basically whenever you get start or whenever you're doing your own build I always teach this because it's more important to understand how to do this yourself as opposed to just watching my tutorial and copying it okay so I want you to go ahead and copy the relevant Imports so in this case I'm going to go ahead and copy the relevant Imports that I'm going to need so in this case it's actually going to be all of the above so let's go ahead and pop in all of these and we haven't actually installed the button and input so I'll show you how we can do that as well so command J oh sorry not yet we're going to go to the top we're going to pull it in now you can see it tells us we've already installed the button but we haven't installed the input okay so this one fairly straightforward I'll show you how you do it you just go to your input you go down here copy that command for the installation go ahead and simply paste it in like so that will add the input you'll get rid of that error very easy okay so this era will now be gone great now we've got the components that we need to go ahead and build out the rest of the form okay so heading back down over to our search form we can now see here now what you can do is I would suggest you basically reverse engineer the form itself so if we go down to the actual form you will see a nice beautiful example where is it one if you go down here you can see the code here but you've got examples of different ways of using a form so if I was to click on the input form example and we clicked on code you can see how they've gone ahead and set up the forms you see this where you pass it in so this is how I will go ahead and build something from scratch and you can notice how we use their form component and then we Nest our own form in inside of it okay so if you're wondering how did he figure all this out that's how he did it so we're going to go ahead and first you have our form we're going to pass in the form itself and then we're going to go ahead and actually pass in a form object right so we're going to do the same approach we did earlier we have our form object like so and you can see look at this what we the one thing I want to pay attention to is on submit we do form. handle submit then we pass in our Handler okay so form. handle submit you don't just pass directly on submit you have to pass it in that way okay and that way it attaches all of the checks all of the submission things that we basically basically it's like a wrapper so that way if your any of those fields aren't validated the correct way it will prevent it from actually submitting which is exactly what you want okay then the next step is the different fields so let's start off with the first field which is the location okay so firstly I'm going to surround everything inside of a div okay so each individual element I'm going to have surround in a div so let's go ahead and do that now you can see we're using a grid with four and I basically applied a few different styling constraints and you can really mess around with this as much as you want right but for each field we have something called the FM fied okay and this is a self-closed component and inside of here we basically first you have to connect to something called the control now this is basically which form are we connected to right now well the actual form is this one and what we say is we just say form. control very simply okay then we have to give it a name and this is going to be the name when we submit it it's going to be the name which is passed through as the object so we're going to say location for this one right then we have something called the render okay the render is basically rendering out the form itself right so it's in that form field so what we have here is a you know our jsx and then we get something called a render prop okay we have a render prop which we can parentheses return so this is called an implicit return and then here we basically get something called the field okay and you get a few other things as well if you're interested you can go ahead and get the film state or the for form State as well so if you want to access to the other areas you can also do that okay then we're going to use some of the predefined form components okay so in this case form item is the main form itself we have a label we have the bed double icon I'm going to import that at the top right from luced react so I'm actually using a library this is actually by default installed when you install Shad CN and then we have the form message itself now form message is basically remember that validation eror where it says you need to characters or more that's that's essentially where you're going to have that okay and uh soorry form item surrounds everything the actual input is here with form control now the input placeholder we've simply got as London UK and then you pass in the field content itself so just like that if we go to our uh application now and we go to our search form I'm going to start putting it on the screen so we can say search form like so and I'm going to do a self close component and we're going to pull it in now from here you can see look we've got London and that looks great that's exactly how we wanted it looks perfect and if I was to hit enter now you can see string must contain at least two characters that is coming from the actual um form message okay so if I was to shift this underneath you'll see if I went ahead and entered you see that very great right but I want it on top it's got a nice little effect here where it basically looks like it's kind of stuck to the top but I like the way this looks yeah hence I designed it that way right so at that point that's all good we're going to have the next area which is going to be another div so I'm going to pop this in like so boom I'm going to go ahead and hide that for a second let's go ahead and push this in and this one is going to be for the date picker now date Pickers can be a little bit tricky right so all I would recommend is for the date picker go ahead look at a bunch of different examples on chadan um in this case you we're looking at the date range picker so in this case date picker here and then you can go ahead and see they've got lots of different examples for example a date range and so forth I've gone ahead and simplified this for you so that way if you ever need need to go ahead and connect it to your own form you can just simply come back to this tutorial at any point and remember how did he do that and I will show you how he did it okay so we have the form fill first and remember we have to connect it to the control so very simply we do form control and then we're going to go ahead and say name is date so when we submit it it's going to be very simple and then we have the render object okay so the render object let's go ahead and pop this in like so this is going to render out something like that and then we have the actual item itself so first things first we have the form item okay so form item like so now first thing I would recommend is you just save it so that way we can start using prettyy to make it a bit easier and we're just going to slowly put things in where they need to be so the first things first the form label and the form message very straightforward and then we're also going to start using a popover right so in this case this is actually known as a popover okay so for the popover first things first I want to in import everything that I might need so I'm I'm going to pull this from our popover itself like so yeah and if you haven't installed this you get an error at this point head over to Shaden simply run the pop over install command and it will work okay now inside inside of here we've got the popover itself so in this case what I want you to do is we're going to do the same approach that we've done before so it makes sense we're going to have a pop over we're going to expand it like this now inside that popover we're going to have a popover trigger and this first one is going to be for the actual uh dates of the itself so in this case let's have the pop of trigger let's pull this in and we hit pass in as child right then we have something called form control now this is essentially going to basically be for this element when I click it and it triggers the popover okay and then we have another area called popover content which we'll cover in a second but here I'm going to go ahead and pop it in and I'll explain what it does so in this case if we go down here pop this in I want you to pay attention firstly we're going to inport our format command from date um which one did we use actually format we used the helper function from date FNS so we're going to pop that in like so and if you don't have this installed you may need to install date FNS I think I did install this um correctly last time so if you go to the date picker let's go to date picker uh and we actually need a few things here so let's go to the install part date picker where is it gone so here it's a pop yeah so it's a mixture of popover and calendar we've already got the popover so let's go to calendar and let's pop this in and this will actually install the library that we're after so that should fix our import situation okay so now what we should have is day FNS is automatically installed there you go great yeah now here if I show you what's going on I want you to pay attention to the form control everything here firstly we have a button the button has you know a few things we have the variant of outline uh here we're going ahead and we're just basically essentially saying if you haven't selected a from value it's going to mute the foreground the calendar icon is there as well and then if you've selected a from and to Value it will show the from and to Value so it will show the relevant dates you've selected so in this case it will show these right here and then the calendar icon is right there you can see calendar icon okay otherwise it will just show the from value and then if you don't have any value selected it will say select your date that's exactly the behavior that we want so if I refresh you see select your dates I click one it shows one I click two it has the dash with the second right so that's exactly what you're seeing here shows one it shows two when we select both and this is based on this tary condition okay so very very simple stuff looks really nice okay so we're doing very well for pacing so far now the main thing really is if I was to show you this build so far let's go here for a second and you can see how I've got my dates but I don't have the popover right so I'm clicking it not nothing is happening that's because we've got the popover trigger we don't have the popover content okay so this is the more important part really is where the actual calendar comes in so here we say popover content okay now inside of the popover content oops sorry pop over content okay don't do what I just did um yep there we go like so uh inside of here we're going to have a calendar and the calendar I'm going to pop in like so let's pop the calendar in we need to import it from UI calendar and also I'm going to give this a little bit of styling saying a width of Auto and a padding of zero and we're going to say a line at the start okay now the calendar we're going to say it's initially focused on so when you click it it will focus the calendar and then the mode is the important part so this is for a range now you can see here we've got single range multiple in this case a range is what we want because we want this behavior of if I click backwards you see how it's always selecting the beginning and uh ending day and if I select something before the beginning day it goes ahead and selects that accordingly then we got the selected which is filled. value now as we're going ahead and looping through this way this is case this is how you go ahead and set basically ensure that you've selected it the right way now all this is actually doing is consisting of an object of from and two okay so fi do value it has from and to inside of it then we have default month Now the default month we go ahead and say it starts off with default which is fill. value. from and this is got a value inside of it because we set it here so initially it's undefined but otherwise it will go ahead and show the value we started with now here we want to show two months if I show three months for example here I just want to make a very obvious change here so if we click this you can see we actually have three months on the screen right so three months on the screen so you can actually have as many months as you want showing on the screen but in this case I think the balance here is two so if we click this you see it's always like a everyone's used to seeing two calendar uh months pop up right and it also handles Collision you see on the mobile view it will handle where to show this calendar and so forth okay so that's always nice and then we saying disabled we've disabled anything which has a date previous to now because you don't want people to be like can I get a hotel room uh yesterday doesn't make any sense so we don't want to we don't want to have given the option so we're saying if the date is less than basically yesterday and then this right here set hours means you're basically setting the hours to the beginning of the day from yesterday if we don't do that they can still select yesterday so you don't want to do that okay and then onselect basically is how we map when you select the value to make sure that it keeps up today on the piece of state so that in itself is how you do the calendar object right so that is how we go ahead and actually have a beautiful popup calendar in the way that we expected so I want you to then go outside the div and we're going to proceed on now that's actually the hardest part that calendar bought then we've got adults children rooms and such which is fairly easy especially after doing that that that what we just did there is really not too much of an issue now all these three buttons adults children room I'm going to have in a div because I want to be surrounded like so right so these four actually are going to be in a div so the way we do this is we're going to have a div with a little bit of styling and then we're going to have the four buttons inside of this diff so let's go ahead and pop them in now this one is fairly straightforward so after understanding the first one I don't need to repeat it I'm just going to go ahead and pop in and show you what we're doing here so first things first flex one on each of the individual buttons cuz I want them to eventually spread out evenly this one we connect to form control the uh attribute I want it to be called as adults then we render the item itself it's just a simple input with of type number okay now after you've done that we're simply going to have the same thing for children so we're basically going to go ahead and do the exact same thing for children and we're going to do the exact same thing for the number of rooms so fairly straightforward just like so now you can see here these are all number Fields but they actually get pass through as data type string okay believe it or not so that's why we had that earlier okay cool that looks really great and you can see right here looks really nice okay now you could go ahead and actually extend this to be full width as well in this case I'm going to leave it but you can actually go ahead and customize that as well to be for it and width full and you can do something along the lines of in this case where would I have done that I done it I believe it would have been here so width four Flex one no um I've done it because of grid so here we can actually have it with for grid blah blah blah Center Gap FX One Max uh okay I will update the code base to show you this afterwards I don't want to spend too much time here on this but I just want to check something yeah that's that was for that completely fine it was more so for the actual for form control so here here we had it with yeah so I actually can do this as width full if you really want to yeah there you go that's exactly what I was after now what we what I actually want to do there is I want it to be width full by default and then on the large screen it's that so width four on a mobile and as we hit the large screen it's going to be a minimum of that that's how we do it right there you go perfect okay so that's how you want to do it so that looks really nice in my opinion it's nice when you got the full flow width there on a mobile but as it gets bigger you have that minimum set width that we want okay so really nice little bit of live coding even on one of these videos that's how I think that's the best way sometimes Perfect videos aren't realistic I'm telling you it just doesn't make any sense it's good when you see a bit of back and forth with me on the coding side of things just to figure out where things are it makes it feel sane okay so next up we've got this div right here so this div I'm going to go ahead and be this is responsible for the button right so all you need to care about is the button is type submit and you basically go ahead and put it wherever the hell you want it so in this case there we have it right now I want to pay attention to something now if I was to go ahead and click search firstly the dates are undefined we can go ahead and correct that we're getting rid of form description I don't care about that we can go ahead and correct that by having dates here now here we have a date and it's we can think it's required or is it read only no so I think what we can do here is we can actually have um we'll come back to this actually I want to have it so we have it as prams required error so required error we can say please select a check-in date so let's go ahead and do that for this one and let's do the same thing yeah so I want to just try something out quickly now let's go ahead and pop that in like so going to have the same required for this one but please s a check out date okay now let's give this a try if I do this boom undefined okay so it's not really giving us what I kind of wanted there I think more so I will come back to this afterwards at the end of the build but basically you would add your validation rules here um um but you get the gist of it right that's how we're essentially doing it okay now it's fine we'll come back to that so at this point now we can put our we've got our location and what I want to really emphasize here is when we submit really if I console log values here we should see that if I was to go in ahead and do a control you know inspect here so I go into my console and ignore this this is from a actual U extension that I have plugged in so it's actually something like a it's password manager that pops up you won't see that um if you go ahead and right click inspect you'll find this I'm on Chrome right now just for reference but if I go ahead and try and hit enter right you're going to see nothing gets put here right but if I type in for example London I select a bunch of dates so in this case like so and then I put in like for example two children one room and so forth and I hit search now you'll see the name that we went ahead and had inside of our code so let's go ahead and show you here so the name of each form field so for example date goes ahead and corresponds to the key that we have here and then inside we've got the fields that you just selected so in this case Perfect Look December 20th to 23rd perfect adults to Children one location London rooms one so this is perfect this is exactly what we want to have so that way now we can redirect the user to the search page with the correct information so that's perfect I think we're doing really great so far um if you're still with me make sure you smash that like button remember this will be time stamped so I hope there's tons of value that you're finding right now in this video okay so with that done now what we're actually going to say is onsubmit this is where the magic is going to happen so I want to do one thing I want to personally get a few different things like I want to get the day month and year for the check-in the day month and year for the checkout and then I want to structure it in a way that booking.com would expect it because what we're trying to do here is we're trying to go ahead and actually get the exact URL for booking.com their search so what I've done is I've gone to the booking.com website and I've actually taken URL so if we were to go to booking.com website for example the search results here you can see there's a bunch of different params here so if we were to go ahead and copy this one right now and I go into my code I will show you what I'm talking about so let's go ahead and just paste this out you'll see firstly ignore all the there there's tons of extra stuff here but there's a few areas I want to pay attention to for example there is SS is so SS stands for the location then we have a few additional things such as here number of rooms one group children group adults uh check out and check in so check out you can see the date is the year month day year month day right and so forth so what I've done here is I've reverse engine it so we can basically get the URL and I'm going to recreate that URL in the way that we need it so I'll show you how we do this so first things first inside of values we get all of the different things and we've got type safe access to it Okay so we've got everything that we need and then what I'm going to do is I'm going to basically construct it as I need it so I'm going to get the checkin checkout uh month year and day with the following bit of code so in this case boom I get the check-in month from this this is how you get the check in um month day so this would be like if if we selected February it would be 02 if this would be sorry if I said the 2 of December this would be 02 for the 2 this would be 12 for December and then the year will be 2023 if I selected this year and so forth and I done the same for checkout then what I'm doing is I'm reconstructing it as they had it so remember they had the year they had the month then they had the day so I think that's an American thing to do that um but if they expect it that way we're going to build it that way right then next up we we've got the URL now this is the URL from book.com so this is how you get to the search results page but then they have a bunch of different things like appended to it so they have like SS like I mentioned is location and then you have another pram such as the group adults which basically resembles how many adults in your group so for example nine and so forth but instead of doing it this way that's ugly I don't want to do it that way we basically use the special URL search programs function so we say URL search prams do set and then we basically pass in our values and I'm going to do the same thing for each and every single one of them so now we've constructed our URL with the correct parameters on it okay then what I'm going to do is once I've got that I'm going to say router. push so I'm going to redirect the user on our own site I'm doing back ticks for string interpolation here and I say for/ search and then I'm going to go ahead and append a URL so in this case we were passing in one thing and I'm simply going to go ahead and say url. href okay so what this is doing is I'm passing this through now there's a reason why I'm doing it this way you could do it in a way where you set Global state with something like just stand but in next JS there's a benefit to actually going ahead and passing it through the parameters or the the sort of URL because you can then cash that page based on that uro so say two people in 1 hour went ahead and searched for the same same London trips right so they went ahead and searched for London the same dates the same number of adults what you can actually do is you can say we only want to refresh that every hour the results right because it could be somewh somewhat computationally expensive and then what we can do is that URL is essentially the key towards that page so that page would be cashed for an hour so everyone who made the exact same search would get the exact same value in the hour and then after the hour it would refresh those results that's really powerful and if you think about it it may not make a big deal when you've got one two three users but when you've got millions of users active on that every single day imagine if everyone's trying to book the same place the quota that you will save by Simply Having a cash value big big deal right and I'm going to show you how we can do that okay quick little water break before we continue on but we're doing amazing for time okay so next up we're going to go ahead and redirect the user so let's give that a try and we can see if it works we type in London we'll type in the dates so let's go ahead and pop in for example 4th to the 7th two adults and we click on search now you can see it took me to search and you can see in the URL we've got that perfect constructed URL that I spoke about okay that's great so what I want you to now do is we need to create a search page so in nextjs 13 onwards in the app router uh we using 14 today but in the app the way it works is you simply Define your page with the folder directory layout so we say for/ search and inside we use the page. TSX to resemble a page there so we say RFC and we can call this the search page okay uh and then what we can do is now what you'll see is the search page pops up okay now the next step that I want you to pay attention to is inside of our uh this is actually a server component for now what we can do is we can say props and what I always like to do is I say conso log the props and what you'll see here is the search progams come through so remember what I just showed told you the search primes perfectly get pushed through here which I really like right so this is exactly what we kind of wanted so the search primes are coming through just the way that we expected them so what I want you to do now is we're going to go ahead and build out our search page the way that we need to so first things first I'm going to go ahead and actually create a type definition for the props so we're going to go ahead and call uh create a props type definition and this one is going to be type props equals and we're going to say search prams Okay so we're going to access the search prams there's also the pro uh prams but we don't pass anything really at the moment so we don't need to care about that I'm going to create a new type called search prams and I'm going to Define that here so we're going to say search prams like so search prams and inside of search prams we're simply going to have the following pop in okay so I'm going to go ahead and have the following information now I think I've actually changed it since then uh right now we only pass in the URL group adults um SS we're not even using so URL check in check out number of rooms uh Source we do not actually use for now we simplified it so we have basically you just want to correlate this so we have the URL the group AD I'm just going to make it so I can see this in line the number of rooms then we have the checkin and check out perfect okay so you see it lines up perfectly and then what you can do is you can destructure here to go ahead and get the search prams out and we can go ahead and just list it out so that way when we come to our page boom there we go that's our that's the the data that we have Okay so now that we've got that data first thing I want to do if you reach the for/ search page without this URL query pram I'm actually going to say that you're not allowed here basically it's a 404 so we're going to say if there is no search prams do URL then we're going to return the not found next navigation argument okay so what this does is uh you don't even have to return it you can just go ahead and execute it but what it will do is it will return a 404 so you see how I'm not getting that right now but if I went to forward SL sorry Lo Local Host for/ search by itself now you can see boom we don't get that because we haven't reached this point in a valid manner we should have the URL search pram because that's what this page will be dependent on so I don't want to do anything until I have that okay so next up we're going to say const results equals and this is where we have our benefit of a server component so server components allow us to do async we at the top level right so we're going to say async await and then we're going to say fetch results and I'm going to pass in the search prams as a argument here and you're probably wondering okay well this doesn't make any sense cuz we don't have any results well firstly when we get those results back I'll do a simple check and I'll say no results okay but here the fetch results is the the the interesting part so we're going to go into our lib and we're going to create a helper function called Fetch results so inside of our lib which is our utilities essentially we're going to say fetch results. TS okay now what I want you to do here this is going to be where the magic of scraping happens okay this where we tap into oxy laabs we get everything working the way that we expect it to so what I want you to do is firstly head over to oxy laabs there will be a link the first link in the description will be your free trial link what I need you to do is click that you'll reach the oxy laabs page and then what you will do is you'll go ahead and register with that link okay so once you register with that link you'll get free access to some of the products right so one we're using today is the web scraper API now what you'll do is you'll get an email Emil after registering with your username and your password and then what you need you to do is take note of that username and password then you can get access to the entire dashboard I'm just going to log into my dashboard and I will show you something what you should see all right so in this case once you're over at the dashboard you'll see something like this so you'll see a nice overview on the left hand side you'll see my products and then you'll see the web scraper API after you've activated your trial and as you can see here you get a nice little demonstration of what you have and you have your users and so forth right so in this case my username would be web Sunny stream okay you would want to go ahead and copy your username and what I need you to do here is go over to your code and we're going to before we carry on with fetch results we're going to go ahead and do click on the package Json level Dov dolal okay so EMV dolal and I need you to add in two things I need you to add in an oxylabs username and a oxylabs password okay now for the first one we're going to go ahead and use the username that we just had right there which you saw on my screen and this was web Sunny stream for the oxylabs password as I mentioned you will get an email with your password inside of it so what I want you to do is simply go ahead and copy that password and you're going to put it in this field right here okay so imagine your password is AB bcde e f you would go ahead and do this hit save and close it I'm going to put in my password there right now so that way I'm going to hide the screen so you can't see see that so I'm popping in my password I'm saving it and I'm closing that file so now I've set up my correct environment variables so we can use them where we need to so heading back to fetch results it's also worth mentioning if you do ever need to reset your password just go down here click on the helper and simply ask them for a little bit of support they are absolutely amazing at giv support I promise you I needed to reset my password once it was so easy it was so quick um so I definitely want you to go and check that out okay you've also got example of scrapers and the documentation is where you really want to click on if you get stuck all right so they have great documentation here you can see we're actually using the other domains web scraper API and this is why we're going to have the same thing Universal source and we're actually going to make use of something called the custom passer so I want you to go down here and you'll see this custom passer logic this is essentially what I have basically based everything off of um so you basically go ahead and be able to click into this and you can go ahead and see the results for yourself so the custom passor is actually where you want to go ahead and look for things my computer's being a bit weird right now that's completely fine let's jump back into the build okay so heading back over to our app for fetch results right so in Fetch results this is where we're going to essentially go ahead and get the the rest of the things that we need done so we're going to say export async function fetch results okay and here I'm going to I passed in the search pram so we're going to go and say search prrams now you can noce I haven't got the search prams here so we go back to here we're actually going to export this so that way we can go ahead and use it over here as well and this is important because it enforces that type safety and we know that we can code comfortably without messing things up okay so first things first I want to extract my username and password now it's worth mentioning this will work because my environment variables here will work because I am on a server render I called this at a server component which which means that it's actually safe to use my environment variables if I made this a client component I need to stress this point it will not be available there my compon my environment variables will literally say undefined unless you put next public and do not do this for the love of God do not do this unless you are absolutely sure that you don't care if that key can get leaked okay so this is something why this is why the decision is there to do it this way we're going to import this as well so we can see it but don't make that mistake please right so you don't want to leak things that you shouldn't be out there if you can if you leak your keys people will start you know messing around with it okay so remember that URL that we spoke about that comes through here this would be the base it would just be the starting point of the URL so it would actually be just this part and I believe sometimes it appends the SS as well right so it'll be just that point now then what I want you to do is we're actually going to go ahead and loop through to reconstruct the URL okay so what I've actually done here here is I've created a nice little helper function that can make this a little bit easier so you can see We're looping through all the keys of the search pram so this will be like you know search prams checkin check out group ults and for every single one and basically I'm not going to append it if it's either the URL or the location however I'm basically going to go ahead and get the value and what I'm doing here is a type Safe Way of checking the value so I'm saying go through and check the value and we're we're ensuring that it's basically a key of A type search pram so it's one of these keys and then what I'm doing is I'm appending it now what we get out of this is a final URL so I'm going to show you exactly step by step what this means and you'll see exactly for yourself what is happening so if I simply hit save here and I was going to go ahead and go back to my page and let's just say I was to go ahead and do this for now right now just at this point alone okay what we can see is if I go ahead and I refresh so let's go back I'm going to clear this I just want to emphasize a point let's type in Manchester let's go ahead and select some dat for St the 6th to the 9th let's go ahead and do one and two children and click search now you see we get scraping URL and this is booking.com search results Manchester group adult blah blah blah I'm going to click that now and I will show you the page that it actually is built out and you will see what we're doing here so you see this right we actually got a A list of properties here right so what we're essentially going to do now is scrape this with oxy laabs to go ahead and pull this data and the reason why this is so powerful is because you can do this in any capacity for any website and I'm going to show you how simple it is right now with the use of oxylabs okay so at this point what we're going to do head back over and we're going to go ahead and do the following so I hope that makes sense as well I think I demonstrated that pretty well there so you can see the scraping URL and I'm logging it out to keep it very simple so you understand what we're doing now here's the interesting part now what I want you to do is if you go over to the oxylabs documentation you will see an example of a request and you'll see here look Source your Universal the URL itself which is the actual H ref that I just showed you then we have the different following things so here what I want to do is I'm going to go ahead and say const body equals the following all right so first things first I'm going to say the source is universal so I'm just going to pop in a few things here um so we're going to say Source Universal URL HF passes true it will basically try to structure there if it can in this case it doesn't have that with universal and we're going to render out HTML now the interesting part this is where the key moment is is it something called passing instructions now this is basically how we tell oxy laabs how to go ahead and basically read this page and pull the information that we want from it so this is a really crucial step here okay so what I need you to do now is understand how we can go ahead and Traverse this page and pull the different relevant things from it so what we're going to do is firstly I'm going to go ahead and Define uh sort of what we're asking for the first easy thing is I'm going to go ahead and say total listings so I want to get this part here in an object so let just start with that right the way we do that is we pop in the following we say total listings then we have a functions and then we basically pass in an array of the selections that we want to do now you can go ahead and select data in a couple of different ways if I click on the custom passer I'm not sure why it's not loading the custom passer right now um it's actually a very great example that they show here uh it may be on this page to be fair so in this case I think we've got the key we got the value it's not showing me the actual strange it's only happening right now I was actually just on that page not too long ago um but yeah the the custom passer works really okay so we could try ourselves here getting started there you go custom pass and passing instructions example there we go all right so in this case let's say you want to go ahead and grab that from a page you can rightclick it and you can use for example X paath now if you're not wonder if you're not sure what an X paath is it's actually a very handy selector so in this case let's have a look at this so I want to select this right so we can go ahead and click inspect now if you already got this open you can click this little button here and you can select the different properties now you'll see this okay now a few things to knowe you want to select something which is ideally not going to change right so in this case we've got in this case what we ended up deciding to go with is the um I actually went with the H1 text for the top H so this was actually the only H1 on the page right it was actually the sort of main thing so what we did was we just simply went ahead and selected it with the following rule so we can use Simple CSS selectors or you can use hate uh XO so you go copy you can see X path or full X path so if you just copied the X path here I'll show you what you actually get back as a result so if you did it this way you would get something like this now that's fine you could use that but you see it gets bit nested right in this case I'm saying find the first H1 and get the text inside of it right the text is actually a helper function that the guys over oxylabs have added in and and it allows us to get the text inside that point so that will work for the total listings and that will basically place it inside of an object that which comes back that looks like this okay now the more interesting part is the listings themselves so this is going to be somewhat of an array so in this case we're basically going to go through and I want to select a bunch of different things here so a bunch of different attributes here so let's go ahead and say like this is going to return an array of all of these so I want to basically build out something like that right so what I do is I say a listings and what I'm going to do is I'm going to basically pass in pass in sorry let's go ahead and move this a little bit this way so I've gone ahead and done the selections for you okay so first things first is we want to go ahead and actually pass in the uh array so in this case we've got um I'm going to go ahead and select the function which is the container itself and then I'm going to go ahead and actually select each of the individual items so in this case we I'm not actually sure we're using this but I'm going to keep it there for now I'll show you what it presents afterwards um but the main one is really the items okay so the individual items in this case and this is notice how this will actually be let me go ahead and pop this into the items themselves okay and again you can look at their documentation and see exactly how they're doing it you can see here look number of results you can go ahead and just Traverse through and all that good stuff right so you can feel free to read this out yourself they're passing instruction examples as well so you can actually see for yourself how you would get like a list of different things out so really really awesome stuff I've made it really easy for you you can just go ahead and copy this from from what you want to do but let's say the first one I want to get the title so I want to get this right here okay so in this case what we can do is we can basically just go ahead and inspect that so we right click we click on inspect and the key thing is that I'm looking for is ideally something like a data test ID because these are used for automation testing inside of a company so those are unlikely to change right so in this case or we can use classes if we can't refer to that but in this case I'll show you both so you can use both so in this case data do Dash do data- test ID title okay so in this in this instance what we can do is we can say title so here I'm going to show you right now so we say title and then we basically give the uh um let's go ahead and do this say title we pass in the functions and the main selector is called xath one but and if you there's actually a very nice breakdown here of how you can go ahead and select each one so you see X path X path one works the same way as it's returns only the first value if more than one value is selected by the provided XO so in this case we only care about the first thing that we find well then we're saying go to that point right so you go to the div where you have that point so you see the div where we have data D test ID is title and get the text from it so you see what we're doing here yeah and what we're doing is it's then going to form it's going to with toox laab how to scrape it and how to get the relevant information okay now there's lots of different things you can do so for example the description here I've gone ahead and got the one-bedroom Suite with kitchenette for example so I've actually gone ahead and done that for you as well so inside of the same items container we're going to pass a description in in this case I've targeted H4 with a CL inside of it and you can really go into as many granular levels as possible so in this case for the booking metadata this one was a little bit more interesting it was this one three nights two adults one child but it was nested to a degree so what I did was I simply used two selectors I used go to the div that contains this class and then once you found that go to the div that contains another class within it and then find the text so basically you're traversing through the HTML elements and you're basically selecting the information that you want and you can really build this out however you wish and it was not difficult to do so now if you want something like the hre so for example let's say I want the link not the text but I want the link itself all you need to do find the element for example I said find the a a tag so the anchor tag that contains a specific class and then at HF to get the attributes you can say at URL at href and so forth okay I'll show you another example we have the price over here so underneath the link we can have the price and then I also want to do the URL okay so the URL is actually the image right so in this case you can see uh find the image in that in that container and and notice how it's going through the property card container so each individual one is going to be for each individual row that we saw right that's why it's traversing through each of these individual rows that's why it's items right so it's going to group them together like that okay so in this case you've got the image and then add Source all right so it's not just text it's not just at HF it's at source as well and it's also any other attribute that you want to go aad and tag into then we've got rating word which is basically if it's superb if it's good if it's not not so I've basically done this bit for you okay uh the rating and then I'm also going to do the rating count so we've got two more here the rating and the rating count I've added in okay so I've done the hard work here of finding the selectors but that's how you can do it it's very very simple now once you've got this basically this body this request right you can go down to the bottom of the request and all you need to do now is pass that over to oxylabs and they will basically do all the magic and scrape it for you and again they use they have IPS like all around the world to allow you to ethically do this in a way that works right so in this case we're going to go ahead and now form our uh fetch accordingly so we're going to say const response equals await fetch okay now here I'm going to pass in the um real time sort of oxylabs API course so in this case this is the end point that we want to go ahead and connect to and then we're going to pass in a method of post so it's a post request that we're passing through and then we're going to basically stringify the body so B body uh Jason stringify the body so in this case I'm just stringifying everything that we just had at the top and then basically I want to also cat this so remember I mentioned before let's say two people made the same exact search they want to go to London they want to go from December 1st to December 5th and they have the same children number of rooms everything rather than constantly stressing that quot right rather than constantly making the same API call to the back end let's just assume that for 1 hour it's okay if the same results appear for that person that then let's say somebody else came along 20 minutes later and one search for the exact same thing it's okay to show the same search results and then every hour I want it to generate a new response so we want to cash it for an hour change it up I can show you how to do that very simply all we do is inside of our fetch request right this is part of next sh 13 14 caching so in this case we just simply pass in next next and there's lots of ways to do this we're going to use the next revalidation Rule and I'm just going to put 60 times by 60 and this means that we're going to basically every hour we're going to refresh this okay so we're going to say every 1 hour this should be so cash for 1 hour basically cash for 1 hour okay and if you want to do it for like 24 uh for for one day you do that 24 and so forth okay my cough is definitely kicking and then what we have is we have to pass in a authorization header and this is basically how it knows whose account are you making this from okay so what we do here is we simply pass in our header with content type application Json like so and the main thing here is something called authorization so we're going to pass in authorization so we can actually get rid of this as well sorry guys and this one I want you to go ahead and do the following I say we're going to say basic space and then we're going to say plus buffer from and all we need to do here is a bit of string interpolation and we're basically going to build out our responses so we say buffer from usame colon password to string Bas 64 and that's how we essentially pass in what we what we need uh to oxy laabs to ensure that they know which account and that way they can basically go ahead and say yes you have access to this oxy laab service go ahead and let the scrapers do their magic if you get a response here of saying unauthorized it either means that your free trial has ended you do not have an active subscription or you need to go ahead and like I said upgrade one of your plans so that way you have that specific product that you can use but remember you do get a free trial it's the first link in the description make sure you check it out okay so in this case we have the headers once the header comes back I want to go ahead and pass it okay okay so I'm actually going to go ahead and I've got my headers here like so after we have the fetch call I want to go ahead and say do then I'm basically going to get the response. Json so I'm going to format it like so I'm going say response. Json and then I'm actually going to go ahead and get the results and Stitch them together in the way that I expect so basically we'll get the results back like so so after we pass the Jason back we're going to say get the data so this will after you do the first call the second one's going to be the data then we're going to say if the data. results. length is zero then we should just return cuz it didn't find any data otherwise we're going to go ahead and access the First Data argument which is actually going to be the list of results that we wanted and then we're going to go ahead and you know cast it to this type right so what I'm actually going to do here is create a file which resemble all of which resembles all of our types I'm going to call this typings dots okay so for typings Dots we're going to have the result which comes back now remember we actually went ahead and specified it in a specific pick way we went ahead and said that we've got the content and then we had the listings and total listings now remember we actually did this here if you remember carefully it was listings and it was total listings okay so the data will come back in this approach now this will return a you know another array of items and what I'm going to do is I'm going to Define what comes back there and I've already know because we actually defined it in this way we've got the URL title all these things as well if we go here you can actually say that this is actually corresponding so we got the item the title description booking metat and so forth same thing I've done here okay so I've done the same approach here oops sorry completely what did I do that okay yeah so we've done the same thing there now with that in mind we've got everything the way we want it so we can now go ahead and import our result type okay just like that and then if there was ever an error at any point we can simply go ahead and catch that error like so okay so don't do what I just did catch the error like so okay now once you've done that that we're simply going to return the response back okay so once we've done this now fetch result is basically achieved what it needed to achieve so we can go back to our search page oops okay what is happening we can go back to our search page and now here we can say if there's no results okay good and you can see here if I click into this you see how we it could either be void result or undefined so basically I'm doing a little check here to prevent that then if I do console log results here if we highlight over this you see it's basically doing a defensive program so we're always assuming that it's valid here so let's give this a try and see if it works right so first things first remember it will take a little bit it's an asynchronous action so if I type in something like let's just say Birmingham in the UK and I go ahead and say like you know 18th to 22nd adults two children one such okay so right now you can see there's a bit of a delay and you're probably wondering well nothing happened well actually it is happening it's scraping for that URL so you see Birmingham group adults 2 group children one number of rooms and so forth and right now it's doing an asynchronous action which is basically going ahead and finding the data it's not updating the UI in the way that we would want it because there's like a block there's a pause and the reason why there's a pause here is because if we go to the search page it's awaiting the fetch results this is blocking right now until it Returns the results so you can see the results came back I then went ahead and did a console log on the results and you can see content listing okay I want you to pay attention to this total listings actually found it so Birmingham 597 properties found and then it's got the listings inside here so it's actually done what we wanted it to do and let's just prove this is a rid point so 597 if I click on the actual link for the actual page that it found we will see 598 so literally in that Split Second it added one okay but 59 second 97 is the one that we we wanted so it would have scraped this and then it would have these results so very good so far okay so now we need to go ahead and render out the UI for this but I can show you how to address that loading issue that we had previously so before I demonstrate how to show it here we're going to add a loading screen okay and this is where nextjs 14 comes in absolutely clutch and I'll show you exactly how we can go ahead and implement this so for whatever Point uh we can do it so let's go ahead and pop it here let's go into our app I'm going to add a a general loader at the top level loading. TSX you can add this at a more granular level inside of the search as well but I'm going to keep it simple now and just say loading results okay so it doesn't really matter too much here this loading. TSX is a predefined um it's like a page. TSX it's one of those ones which are reserved for the use of nextjs 14 so that way if we have any blocking statements such as async await uh on a server component and we are waiting a value to come back in this case the scraping data it will fall back to this page that way you don't get that halt on the page right we want to see something as a user users get bored so easily these days we have to keep them entertained right so let's go back to the Shad CD and uh the shadan and let's go to skeleton here I want you to go ahead and do npx Shad sh there we go boom and go back here command J and I want you to pop it in like so so just like that okay that will add in this skeleton noers and you see this is exactly what we're trying to go for here now I've made this super easy for you I've actually gone ahead and just buil this out so you can go ahead and copy this and what I've done here is I've essentially styled it in the way that we would expect to see it roughly so first things first this is a section that we're going to be showing uh and then going to have a simple div which says something like sit tight while we scan the market for the best deals and then I've got a little blue ball that's basically just going to go ahead and bounce no no funny jokes guys it's yes no funny jok okay so we got a little little ball there that's just going to scan uh the the the thing there right if you made it to that point good lad lad girl whatever all right so at this point we've got this now I'm just going to go ahead and render out a bunch of different skeletons which look like the results that we're going to expect I'm going to use a little trick here with an array map right so I'm going to show you how we do it so we say uh create an array of 10 right now uh that's how we that's a nice little trick I'm going map through them all and basically just show a skeleton with an image on the left and you know the body on the right and make it with four now let's see what happens okay so so let's go ahead and do this again so we're going to go ahead and say something like um let's go ahead and give it a try so we'll do something like let's just say Dubai and select your dates let's select our dates we can go ahead and do like uh let's just say January the 1st to January the 5th okay and then we've got adults to Children two rooms to such nice look at that guys now we've got a load out where it's saying sit tight we're just scanning the market for the best deals and now what's really good about this is that it's basically I can show you this in a real time effect What's Happening Here is it's blocking here so this is a server component while which is making asynchronous uh call here and while it's blocking it will fall back to our loading. TSX this is really awesome and this is what I need you to understand when you're using xgs this is a core thing and this core powerful thing that you should be implementing once it came back you can see it rendered out the rest of the page right and as we can see down here we we would have got the actual results inside of our uh inside of our terminal so this is still server rendering it's amazingly powerful and bearing mind now if I was to hit the refresh button you can see look at that it didn't load it didn't load again right it did not load again and the reason why it didn't load again is because it cashed which is sick that's exactly what we wanted it cashes for 1 hour now and then after 1 hour it will do the fresh load so anyone else who searches for that exact same booking will get the results immediately which is amazing it's a good user experience if you want to stress test this you simply go open open up your inspector go to network say click on disable cash and then refresh and now you're forcing it to have no cash every time so after an hour the next person who comes on the page will see this but if you if you did have cashing so which which what we expect the one the maybe one person will see this and then after that it'll be cash for the next hour so anyone else who makes that exact same search will get the immediate immediate immediate result which is exactly what we want that's sick right so great great stuff now we've got the search page so let's go ahead and build out the search page and then we're going to deploy this thing and we've got it ourselves in for a great treat right so let's go ahead and carry on so we're going to build out a section here so section like so and the really nice thing about honestly when you build things correctly it's so easy with type safety to code pretty fast okay so in this case what I've done here is I've simply popped out a div for our styling and you notice there I haven't gone too much into styling aspect of things if you really want to know and level up your styling game you can simply join us at papa.com course we have an awesome sale on right now as well so make sure you leverage that and you can go ahead and see for yourself we teach all of this every single thing that has been taught today including the styling everything you'll feel like a bloody expert by joining this course and Community I promise you this community is what it's about this is what we do okay everything is made to simplify the things that may be confusing you right now okay but let's carry on so we've got the trip results let's go ahead and Pop That in so you can see your trip results very straightforward and easy for the h2 tag we're going to go ahead and pop in saying dates of your trip and you can see we've got the dates right so fairly straightforward you can feel free to you know refactor that change up as much as you want and then I want to show the absolutely the results that come back okay so after that we're going to go ahead and say horizontal line and you can see Dubai 1,689 properties were found okay so our scraping is worked you can see it's pretty impressive okay so after that we're going to have after that under underneath the H3 we're going to have another div now inside this div this is where we're going to render out everything that we expect so in this case I'm going to say we're going to have a space between all of these separate results with something like this margin top of five there we go and then we're going to go ahead and basically map through all the results so I'm going to say results dot content so if I show you this it'll be content dot listings. map right and then for we for each individual one we've got an item we've also got the index and we're going to map through like so okay then in this case just to start it off we're going to have a div with a key and the key in this case should be like you know item. ID in this case I don't have a perfect ID here so I'm going to go ahead and use I but ideally you would want to be using something which is absolutely unique so you can do a combination of you know in this case item. link or item. price that would also work in this case just keep it simple I'm using I someone's going to shout me for that I understand the the the the different things that come with that okay but this is demo it's okay sure the main purpose is I'm trying to show you the the how what we're doing here so you can see that look at that we've got that many results right now now it's worth mentioning it is trimming the number of results that came back you can go ahead and actually you know investigate yourself and you can use something like offset at the end of the booking.com URL to go ahead and get the second page you can say offset 20 equal 25 as a parameter when you do your search and add in pagination if you want again you can feel free to go ahead and extend these builds as much as you want but I'm showing you how to do it for the first set of results okay so that's great now we're going to pop in an image for this one as well so inside this div we're going to go ahead and pop in an image with the item URL and you can see boom look at that guys absolutely beautiful right and then we've also going to have a div now this div is going to have a lot of information inside of it such as let's go ahead and pop it I just want to do a demo search here so let's just say London like so I let that app go ahead and load that's the main app uh so I can show you the actual results uh and inside of here we're going to have a div like so and inside this div we're going to go ahead and have um a the item title and description so first things first the item title and description so this is going to be our next link tag so let's go and pop that in like so and you can see look at that o look at that SLS Dubai and these are actually yeah this is correct I recognize these hotels in Dubai this is great Okay so we've got all these things looking great and then we're going to have the actual ratings so you'll notice how in this we have the actual ratings good new two weeks and so forth and the prices so let's go a and do that and it's also worth mentioning that those you links are actually clickable so if I was to click on the S LS to buy a Hotel and Residences you'll see it goes ahead and takes me I did a command click to open up in a new tab you'll see it actually takes me to that real booking which is amazing right so in this case it's definitely working the way we expected it's scanning the results and you can see the actual results are being pulled from which is uh book.com which is absolutely amazing um let's go ahead and pop in the next div so we're going to have another container here to house the sort of pricing the rating that kind of stuff and inside of that we're going to have our first div which is going to include the rating and a nice way of demonstrating it so in this case I'll pop this in and you'll see I've just added in a div which surround this entire thing and the first div is going to be just a combination of the rating word as well as the rating count okay and then the second P tag is simply a blue barx which just resembles the actual rating itself and what we've done here is we've said if it doesn't exist simply fall back to na okay in that case look at that we're pulling those and this is actually coming from the real uh search itself okay then we're going to go ahead and have the metadata which is underneath the div so if we go underneath this div pop the metadata in like so and you can see we've got the pricing just like that right so right now this is looking great look at that we've got everything working the way we expect it you can also go ahead and make this very even more responsive by just having it rather than a flex row you can have a flex column but it keeps just the title and then the price this can all come underneath but for now I think it's pretty good I think it's pretty nice right so there you go look at that guys absolutely beautiful let's give it a four test run through so let's go to London and also you noticed how it was loading in that splits transition right so firstly if I go back to that URL notice how it's instant that's amazing right that's exactly what we wanted but you see how there a loading indicator sometimes when we navigate back right if you don't want to have that you simply pop the loader inside of the search. TSX and now what will happen is you'll see the loader only for that page okay so let's go ahead and give it a try now so if we go ahead and say London and let's do like for example Christmas time so 25th to 28 29th you're flying on Christmas there and you can see now we still get the loader but the loader will not apply to the higher levels so when we navigate back we shouldn't see the loader which is actually what we wanted okay okay and then you can have a generic loader to fall back on at the top level if you really want we're doing really well right now I hope you're find a value in this if you are destroy that like button and subscribe right so look at this sit tight we're just scanning the market for the best deals I really like the little anime little ball that bounces up up and down as well pretty cool um there you go great yeah look at that guys absolutely awesome if I go back now you see we don't have the loaded there which is great that's exactly I wanted and look at that we can go ahead and we can just map through look at that absolutely clean super fast guys look my de buy results are still cashed everything's there if I refresh this page absolutely same thing really really beautiful sort of layout and response and also it's Al making the most of the next revalidation so your cashing is working exactly as you want it imagine users now are searching for the exact same trip like you know someone wants this trip they've got four nights two at those perfect then you can go ahead and they can go ahead and see it and it's super quick so this is why you want to understand how to use this stuff the correct way so next up we are going to go ahead and deploy this so it's worth mentioning that this was all made possible again through the use of the oxy laabs sort of services right so the proxies from oxylabs made this entire thing possible the web scraper in particular it was an absolute like amazing pleasure to be able to do it this way and it's also worth mention you saw how easy it was to pick in bits of information from our search so I could honestly go through and really grab every single thing if I wanted to and it would ethically scrape it and we can even select the correct locations and everything like that because they have residential proxy so really really beautiful service to be able to use this right so now we're going to go ahead and deploy this and then we're going to get uh everything up from and we're going to wrap up I guess yeah we're going to finish this right so again this code will be on the GitHub repo um and I'm actually going to include this code for free so it's actually going to be in a public repo as well so you can feel free to clone it add your keys into everything that you need and basically move from there so what I'm actually going to do right now you'll have an environment. example file you just need to copy it rename it to local and get everything up and running so in this case let's go ahead and continue on so I'm going to deploy now so I'm going to type in Vel okay and it will say would you like to deploy so I've already installed the Vel CLI if you haven't already simply Google Vel CLI for instructions on how to it's very easy going to go ahead and hit Y and I'm going to choose my own team so if you are not logged in it will ask ask you to log in link to an existing project no project name I'm happy with the defaults I'm happy with all of these defaults and it will upload now this will fail because there are two environment variables so you click enter on that bar there are two environment variables which haven't been accounted for so I'll show you how to do this the easiest way where it gives you an inspect link you command click it click open now what I want you to do is go ahead and go to your booking clone YouTube click on settings and then I want you to go to go to your your environment variables just like so and here you have your environment variables so what I want you to do now is you want to go into your I'm going to go ahead and show you this in the best way I can so I want you to go into environment local and I'm going to hide my screen for a second you almost thought I slipped there right but in this case I'm going to go ahead and say for example let's just say this was my keys right so something like this I want you to copy copy it like so go over to the cell and I want you to paste it okay so you should have something this but with ual key there and then I want you to click on save so I'm going to go ahead and replace this with my actual correct values now so and then I'm going to click save so I'm going to undo what I just did I'm going to copy I'm going to go back I'm going to go into my my stuff that I did and I'm going to remove them and I'm going to paste okay so at this point now I'm clicking save on Vel that I just showed you and once you've done that guys you will see that it will save in so I can show you the value here web stream and this will be the password that you got email to you when you signed up to oxy laabs now that that's done we need to redeploy okay so why I can't stress this enough that that first one would have failed so in this case we're going to go ahead and say Vel and now it will go ahead and deploy and then I want you to inspect now again this could fail for other reasons right so it could definitely fail right now when we're going to see ourselves and we can fix those issues and come by it and so forth okay so in this case it's going to go ahead and install the dependencies also look how smooth that is really nice from Vel um so once this is done we can go ahead and test it and that'll be up and then obviously you can access from wherever in the world right so as I'm mentioning while this is going ahead and doing his thing if you are found any of this stuff today you know tricky then definitely feel free to check out paper.com course we have an awesome sale on right now it's worth mentioning this because I know and I appreciate it can be stressful it can be tiring it can be kind of you know scary when you're learning out all this stuff like xjs 13 14 what's the difference with all this stuff why did we switch from the page rout to the app rout this is why you need a mentor in a lot of these situations this why I've designed a community and a course like Zero to fullstack Hero to go ahead and help you with weekly coaching calls all the stuff that you need to go ahead and succeed so definitely visit the page check out for yourself what we've got to offer and if you really want to see you know the Real Results that we get for our students head over to prop.com at the top click on reviews and see for yourself these are real people the real results and everything that goes alongside it right said all of our students have got an amazing results and you can see for yourself exactly why you would want to join such a community it's honestly something that's always going to be with you always going to be growing with you and no matter how far you get in your development Journey it always helps to have one a mentor and two a community that helps you get through any debugging problems you may have and it's also important to stay up to date with the latest and greatest information Tech all that stuff that's why we have weekly coaching course what other Dynamic course exists like this guys and they get added to new content every week so absolutely amazing stuff right let's dive in so we do have an issue aha so I have some simple things to go ahead and fix so obviously you can optimize your image tags but the simple thing is I just need to escape a bloody character okay so in my loading right so right now I'm not going to go too in depth with this where I have where just scanning I'm just going to get rid of that for now you can go ahead and Escape that but I don't want to spend too long doing this we're just going to type in Vel again and in fact I'm going to deploy straight to production so Vel prod okay so by default it deploys to uh preview because can see now it will try to deploy straight to our production URL with that in mind we should go ahead and that should now go ahead and do it thing but a few things to mention here remember I mentioned we actually Ed the web scraper API today you will have if you click on users your username is here very important to mention that and if you want your access to your your your password that'll get emailed out to you as well remember you do get a free trial with oxy laab so make sure the first link in the description you want to go ahead and make sure you leverage that the best you can let's go ahead and check on the state of our build and hope that hopefully we get through the correct way it's always these small teething issues and I promise you it will happen it's completely fine it compiled successfully this time so it's all good and in just a second we will get some confetti and it will be a great day because we would have deployed our booking.com clone and again yeah you would have learned something new today how to scrape data from any website period right so hope you enjoyed this kind of style of format of recording as opposed to direct live stream I think it's actually a pretty cool thing I think I'm going to be doing this a hell of a lot more now because I think it works really well uh in this case yeah you can go ahead and don't don't ignore these by the way guys yeah with image tags and things like that if you can go ahead and use the next image tag to optimize your images do so obviously today we are doing it only to a certain degree but there you go it's deployed and it's assigning the domains but in this case I can just check on this right now let's click into it and it's going to go ahead and show us boom let's give it a nice try let's type in something like uh Washington Washington let's go ahead and SE select some dates like so let's do two children let's do one uh two adults one children two rooms and let's click on search and let's see what happens here oh sit tight we're just scanning the market for the best deals this is working that's great that's what I love to see I'm I'm going to have to take down the URL after this goes up on YouTube otherwise you guys are going to go crazy and we get an error okay so in this case if you get this it's fine we're going to debug it right live right now and see what went on right but in this case it could be the fact that we have some calls or something like that but let's go ahead and check out our logs and we can see for ourselves right so you can see going task time okay so this is something which I want to actually it's very easy fix okay so when you're dealing with Vel you basically have access to Cloud functions now when we have an async A away something like the server component where it was making that fetch results call it went over 10 seconds now 10 seconds is a sweet spot where Vel says okay you've got a lot of free things however if you want to have functions which take a little bit longer than 10 seconds you have to upgrade your plan so in order to go ahead and allow this to work all you would need to do is upgrade your plan from Hobby to the next tier upwards okay so in order to do that all you simply do is head over to your account and you just need to go ahead and update your account details right so in this case I'm just going to go ahead and show you where you can do that um and then you can go ahead and do it for yourself so you can go to your plan I'm trying to see that if I can show you I don't want to go ahead and mess things up one second let's go ahead and click on view more this where can I show you this okay well the main thing is okay yeah here you are yeah so you simply need to go ahead and upgrade your plan right so you can go ahead and upgrade it to Pro if you have over 10 seconds and that kind of thing but it's worth mentioning this because you might be wondering I made it to the end of the tutorial and it didn't work anything which takes over 10 seconds no matter which project you're doing will have the same constraint okay so it's worth mentioning that however here's my advice build this app out make a screen recording of this app add it to your portfolio add the code to a public repo where you can show your employers just how amazing the thing that is that you built so that way you get a demo of the thing that you need you get an addition to your portfolio so you can land your dream job as a developer and then you can join Papa fam and be a part of all of this you're already a part of Pap if you're here so absolutely thank you to you but that is what I would recommend okay and it's also worth mentioned now you have the ability to scrape any website you need to in an ethical way VIA oxylabs and you can do it using next js14 thank you so much guys I hope to God you've enjoyed this build this has been the booking.com clone we've done some amazing things today I'm just going to show you one more time the demonstration of the application we've got this beautiful header that we talked about earlier using headless UI absolutely stunning visuals here using Shad Cen and we can go ahead and you know we've got this beautiful form component we can click search we have a nice loading um sort of placeholder a skeleton placeholder while we wait for our you know information to load we're using next js14 in the way that it should be used by using the revalidation rules so that way we can cach our data every single hour so that way we don't have to you know rapidly go through our quots and rapidly go through the things that we need this actually helps your quots go a much longer way as well so it's worth mentioning guys that this is something you want to do uh I just want to show you as well while that's happening you can see the actual code for that was in Fetch results it was all to do with the fetch API so that main magic happened here you can also do it at the top by export you can do it at the top of the actual um not fetch results page but the search page results there's a way you can do this by saying simply uh export const revalidate I believe it is and then you can put like 60 * 60 for 12 hours and so forth there's a few highlevel parameters you can do like that which will do the entire page to that degree right now if I refresh you can see it's cached beautiful stuff and these are all clickable through to the actual booking.com website itself right so this is definitely working it's definitely working the way we expect it and it's mobile responsive as always guys it's your boy Papa react AKA Sunny we learned so much today we learned about next js14 we learned about how to scrape any site on the planet with in an ethical way using oxy laabs and we used so many cool bits Tech Shad Cen Tailwind we built a responsive beautiful website and we built a responsive beautiful navbar remember guys drop a comment down below if you want more videos like this drop an idea for the next build and as always enjoy keep learning and if you haven't already considered consider joining us inside zero to4 full stack hero over at papa.com as always guys it's an absolute pleasure to be your mentor and your teacher and I will see you in the next one peace

Channel: Sonny Sangha

Views: 37,485

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

Id: SnJ6EmCWA_Y

Length: 119min 47sec (7187 seconds)

Published: Fri Dec 01 2023