🔴 Let's build Airbnb 2.0 with NEXT.JS! (ReactJS, Tailwind CSS, Mapbox, Calendar & Date Picker)

yo what is going on guys welcome to the Airbnb 2.0 build in today's video You're gonna build an incredible Airbnb clone for your portfolio this is going to be a next JS app and we're going to build the entire thing in just five hours so starting things off the features of today's app so as you can see we're gonna build a beautiful UI ux experience in today's video we're gonna have beautiful carousels Dynamic loading bars when you change Pages all the good stuff you're gonna learn today we're gonna have a search functionality for all of the listings all of the results from that search are going to be server side rendered into your app using next.js's SSR features I'm also going to teach you how to have a really nice date and calendar picker inside of your app you're going to need this throughout loads of apps that you build in your career when we demonstrate all of your listings on the Airbnb app you're actually going to get a nice map box experience that I'm going to go ahead and show you how to implement and once all of this is said and done I'm going to show you how to deploy this app over over onto the cell the platform for next JS so let's jump into the tech stack of today's video starting things off with the react.js if you want to learn and polish your skills with react this is the build for you you're going to learn how to implement techniques such as server-side rendering to better improve your SEO performance and your users overall experience on top of this I'm going to introduce you to the world of Tailwind CSS so if you haven't used Tailwind TSS this is where you can begin it's a perfect way to style and build out responsive websites in a fun enjoyable way as a developer we're also going to use mapbox to power all of the maps functionality inside of today's build and as I mentioned previously the calendar and date picker functionality is included in today's video so it's a perfect staple when you have to build out these features in any future build so without further Ado let's jump into today's video if you are enjoying these videos make sure to like comment and subscribe to let us know that you want to see more of this kind of content coming out in the future as always Papa farm this your boy Sunny enjoyed today's build check this out guys Airbnb it is a sick responsive completely responsive build right we have Airbnb right here you see everything's got this nice animation to it super slick right this is actually using server side rendering so these pages are extremely fast to load this is completely responsive let me remind you check that out Boom the whole thing responds look at that Banner look how gorgeous that Banner is guys and this is the fun part when you go ahead and start typing in the search bar let's go ahead and say London wow look at that UI right user interface check that out we have an amazing user experience here you can go ahead and select a date this is using react state so if you want to learn all about you know react State and props and how all that works this is the place where you're going to learn it we have an awesome looking calendar here and you can even you know look at these buttons wow look at that yesterday today this week all this stuff is it's just sick right you can click how many guests they say three guests right you know we're gonna have a party and let's go ahead and click such now when I click search watch the top over here right we're gonna have this really really nice kind of Animation where it shows the loading state so if I go ahead and click this boom did you see that that's server side rendering the page so it's actually preparing that page beforehand on a server then delivering it and in the meantime the user is seeing a loading progress bar these pictures are lazy loaded onto the screen so you have this very nice Performance website so you see as you scroll down only then will it go ahead and pull the pictures in which is what you want right and then if you check if we look in a bit closer look at that wow all right and guys did you notice something special it says the exact data that we ended earlier London three guests with the day even over here we have it you guys are going to learn how to do all of this and how you can go ahead and incorporate it inside of things like you know the URL we're gonna do all of this and it's going to be completely easy for you guys to go ahead and follow but this is what we're going to be building and did you notice the map the main event check this map out guys completely you know interactive map you can zoom in and you can even click on these look you've actually got the different rooms are coming in and look at that five-star apartment spacious oh nice right and all of this information is being pulled in from an API right so I'm going to teach you guys all about how to make your first react application how to server-side render it with nextgs how to make it responsive AKA when we resize it you're going to see things change for example you shouldn't see a map on a small screen it doesn't make sense but on a big screen you should see a map right you should be able to make the most of that let me get this thing ready and let me prep this out oh I'm excited guys I'm excited we're going to be building this the front end right here Airbnb we've got the search bar at the top become a host a bunch of nice icons we've got this beautiful banner at the top which actually has a nice little responsive resizing element to it and then we've got this explore nearby so you can see this is going to make use of some CSS grid we've got some Flex spots going on Tailwind CSS all this stuff we're gonna go ahead and start off by setting up our project with next JS okay so the guys over at next Jason Tailwind I don't know if they've collabed or whatever it is but they've actually made it extremely easy for us to set up our project to get started with this stuff so what we're going to do is we're going to open up a terminal if you're on Mac or bash or command prompt or whatever you use on Windows we're going to open those up first okay so what we're going to do right now is I'm going to open up my terminal so I'm going to pull this open and we're going to go ahead and get this thing started it's going to be a very chilled out jam session of a coding set like sort of not tutorial but it's going to be a code with me Vibe okay and don't worry if you if you fall back or you know you need to kind of speed up just take your time I'm gonna get into this I'm gonna enjoy this right so I'm gonna go ahead and do it on my desktop right here and what we're going to do right now is you can go ahead and actually type in on Google Tailwind next JS and you can actually see straight away you'll see install Tailwind CSS with next shares and this is going to be the page you reach and this is tail Insight so this is actually we're going to be using something called MPX create next app now if you try and use MPX and you haven't already installed node then you're going to need to install node so to do that all you need to go ahead and do is go to node and literally download it and it's a JavaScript runtime environment built on Chrome's V8 JavaScript engine basically allows you to run JavaScript on your computer so you need to install that to get started with this okay the next thing I'll say is actually install Visual Studio code so visual studio code you want to make sure you've got this because we're going to be using that to actually do our coding right so to get started we're back at this link we're going to copy this top portion all the way up until my project because I don't actually want my project in fact to make it easy let's copy it all now let's break this down we're using MPX which is basically a way of executing a package from this kind of global remote repos or project or whatever they call them basically this is a package that someone has made from next which allows us to go ahead and initialize our app dash e means set it up with a template which is called with Tailwind CSS so it's actually going to do all the sort of heavy lifting and prep work for us in the beginning and then this is going to be the name of our project so to do this what we do is we simply paste this in we change the name of this to Airbnb I'm going to go ahead and say YouTube then we hit enter this will go ahead and prepare the code for what we need to do so let's go ahead and click on y enter and this is going to go ahead and initialize a app for us okay so this is going to create a Nexus app in our directory so I would recommend always kind of keeping your photo structure kind of clean you know make sure that you actually have all your builds in a place that you can locate after I've spoken to people and they kind of throw it in like these nested photos somewhere dark and deep make it accessible because it's gonna help you out later on and I would really recommend that you do keep these at hand keep them in a nice photo in this case once we are done we're going to go ahead and do CD to go into that folder that we just created and I'm going to go ahead and type in cdfbmb YouTube enter and now I'm inside of my folder okay once we're done with this I'm gonna go ahead and hit code dot now what that means is open up a visual studio code in this folder so if I do that it will load up a visual studio code in that exact specified folder now if it said code is not recognized then all you need to do is go ahead and click yes I trust the authors this is me uh and they can ignore that ignore that what we're going to do here is do command shift p and type in code and you can see here it says show command install code command in path do that and then you'll be able to do that command that I just did here so it'll open up otherwise you open up visual studio code and press command o oh come on yeah oh and then you're going to be able to go ahead and open up the folder that way there's two ways of doing it whether you find easier okay we've got Visual Studio code open this is where we're gonna do everything right all right so now we're going to do is we're going to go ahead and break down this photo structure so what we have in here you can see some Tailwind configuration and what it's doing over here is it's setting up all of the things that Tailwind needs to know about it's using the latest and greatest just in time compiler mode for Tailwind which is actually a really cool powerful feature that they have so I'm not going to break it down too much but that allows us to use the latest sort of version of Tailwind and then yeah we're going to go into Pages Now intel in next.js everything happens from this Pages folder the way that it works is we have the index.js file now the index.js file is simply represents our home Point basically it's basically where everything starts off from okay so this is going to represent forward slash on our website all right so at this point I think I don't know if it's getting hot in here or if it's the code or something's running my computer down but we're good we'll keep on going so at this point what we're going to do is you can see we have everything inside of main that looks like so right so what I'm actually going to do here is I'm going to go ahead and do command J and then I'm going to go ahead and start up this app the way that I start this app up is simple I simply need to go ahead and type in yarn or npm in this case if it's package lock it's npm we're using if it's yarn lock it's going to be yarn so I'm going to do npm today I'm going to do npm run Dev and while that's loading I'm going to go ahead and turn on the air conditioner so that way the room doesn't get too hot let's carry around so at this point you can see what we're actually going to be doing is we want to go ahead and run our application so you can see here we had mpm run Dev right so at this point you've done npm run Dev and it will stop on server on a server in this case it's going to be localhost 3000 so I'm going to click that and then I'm going to go ahead and say Safari so I'm going to open up my Safari open up a new You Know Tab and I'm going to do localhost 3000. okay yeah you're gonna hear a little bit of a fun don't worry about it so good all right we have welcome to next year's get started by adding pages forward slash index.js okay so once we've done that you can see this this is going to say welcome to next.js get started by editing pages index.js so at this point what we're going to do guys is we're going to actually start coding from this file index.js is essentially going to be our starting point as I mentioned before so if we had a the thing that's nice about nexgs is it has a built-in router okay so at this point we've got this open so this is where we Kickstart our app so next.js has a built-in router okay um but we have next.js here so it has a built-in router so index.js points to the forward slash home page of our application hence is the index which means this is our starting point if I had search.js it's going to represent the forward slash search page okay so at this point I'm going to go ahead and say command B and I'm going to go ahead and restructure my page that way I can work nicer with this so we're going to go think from the main block right so what I like to do is go down to main grab everything and delete it I'm going to do the same thing for the footer okay and at this point I'm going to go ahead and get type in H1 and we'll say let's build uh Airbnb hit save and you can see now it says let's build Airbnb so this is called Fast refresh this means when we're coding it's actually going to go ahead and refresh the page as I save the files it's a very nice experience for my coding okay and what I'm actually going to do is it felt a little bit weird I thought so obviously we usually have the demo on this side that's better that feels more natural and it's a lot more easier to go ahead and follow me all right so at this point we've got let's build Airbnb now we've got this new head component the head components is actually from nextges now we have something called the head sort of uh let's call it element in HTML which allows us to have all the things which the browser cares about now one of those things that the browser cares about is the title that you see on the tab so at this point if we can see it says create next app what if I wanted that to say Airbnb or if I wanted that to say papa react I can go ahead and actually use this new head component and actually pop it in the screen like so and then we can go ahead and modify something called the title anything that actually goes inside the head we can actually go ahead and change it over here like so so in this case we can change the file the icon and we can also change this I'm going to go ahead and say papa BMB and hit save and now you can see it changes at the top it says Papa Air B and B okay so this is looking pretty good right now at this point we're going to go ahead and build out our app so you can see here we've got these weird quirky class names this is called Tailwind CSS so Tailwind CSS allows us to no longer have separate CSS files but what we can instead do is actually have these things called utility classes utility classes are essentially very quick ways to go ahead and style up one of our sort of you know files or components so that way we can code really quick and we can have a super you know quite a lot of power behind it right so at this point what I would recommend you do is before you carry on any further go down here and hit Tailwind CSS we want to go ahead and install something called a Tailwind CSS extension you're going to see this Tailwind CSS intellisense this gives you auto complete so when you're typing those quirky weird names it's actually going to give you a bunch of like a nice breakdown if you do want to learn more about Tailwind CSS I really recommend you pause the video here you head over to tailwindcss.com and you can actually give this one page a seam a simple read and this will go ahead and break down all of the nice functional sort of features that telman CSS provides as you can see here we've got loads of colors and remember when we use a color Intel and TSS imagine we use BG red 50. it goes all the way up to 900 and each different one so 50 100 200 300 400 500 600 700 800 900 are going to be different shades of that color okay so that's a quick kind of introduction into it if you're going to use a shadow you've got different shadow depths you can see where I'm going with this right Tailwind CSS allows us to style out our applications really really nicely and quickly all right if you guys like the paste that I'm moving at smash the thumbs up button and let me know right now in the comments because I'll keep moving at this place and you've got this now we know this to be something called a functional component and a functional component exists because what we can do in react is we can create one component and reuse it several times in this case we're basically pointing at the actual home screen itself we're going to keep it very simple this is our home screen okay and what we're going to be doing is we're going to transform this into this right so all you need to do is Click your finger and it works I'm joking it doesn't work we're going to break it down it's not that easy but I will try and make it that easy so we've got Airbnb over here we're going to go ahead and literally get to the point where we're you know we've got it looking like this we want to get to a point where we're looking like this so the first thing I'm going to do is kind of you know I like to do something called commenting out the kind of layout okay so at the top of the Airbnb actual clone what we have you can see is let me go ahead and actually get my stuff working there we go we actually have this nice little section at the top now this is called the header okay so for the header at the top what I'm going to do is I'm going to go ahead and actually create a component for the header so I'm going to go ahead and actually add in a comment here I'm going to say the header will go here the next thing I'm going to do is have something called a banner right so we're going to break this up we're going to do the header and then we're going to do the banner this is going to be responsible for here so you can see what's really nice about this is that we can go ahead and actually split up the workload right this means that you know like if you get tired when you're coding you could focus on one component come back and then do another one it's very nice in that sense and also it's actually amazing as a developer experience and it's going to help you sort of you know scale up when you're building really powerful apps all right so we're going to do that and then we're going to focus on these sections down here all of the information here we're actually going to pull from an API I've actually gone ahead and prepared all of this through really nice simple API links so you can actually pour this data in so you don't have to manually add all this in you just go ahead follow me and we can do it ourselves together let's kick this off and get started first thing I'm going to do is I'm going to delete all of this information in the class name now notice when I do this it's going to go all the way you know there's nothing here now right and that's actually because I got rid of this as well if I say hello world you're going to now see that it's in the top left corner this is because we have zero styling applied to our application okay the shortcut for quick comment is actually going to go command uh command forward slash that's how you do a little quick comment right so at this point we're going to go ahead and actually build this up so what we like to do is we like to keep our rack app very neat okay if you click on the folder structure over here you can see everything belongs in Pages now ignore the API we will touch on that later on uh what's really nice is when you use nextgs because it's served off a server so literally the pages are going to be served from a server instead of directly to the browser I'll explain that in a sec but what's really nice is that we actually get built-in API so you can run Express you can run you know the actual next year server it's really powerful and I definitely recommend using it right at this point we're going to go ahead and close our Pages we're going to click on package Json so that we're on that late like sort of level or folder structure we're going to add a new folder we're going to call this one components so as you can imagine all of the pages belong in pages so that's going to be the home page the search page all the reusable components are going to be put inside the components folder okay so as you can imagine what we've done here is we've got already got two we've got a header and a banner component the header component I'm going to go ahead and click that create a file called header.js now how do we go ahead and start right right now our app looks literally empty so what we're actually going to do right now is go ahead and create our header functional component now there's a very nice extension right if you go into your extensions Tab and you download something called es7 Snippets right so it's actually the top one here and it's going to be this Snippets right es7 react Redux graphql rank name snippers get these These are going to really help you out when you're doing this right so this is going to make it super easy to go ahead and get set up in today's build and what we can do with these Snippets is once we've installed that we can do underscore react functional component which we export and if I go ahead and do enter you can see boom it actually creates the functional component for us we get the boilerplate code it makes it super super easy right extensions are basically ways to power up our code editor so in this case you can see we've added a bunch here and they're just going to allow us to have a better coding experience they're kind of like power ups to our coding environment we can go ahead and install them and it helps us you know level up our coding environments right so we now have a header in play so what we're going to do here is I'm actually going to test this out okay so how do I actually know if my head is on the screen or not so what I do here is I type in H1 which stands for a header and I'm going to say I am the header enter save sorry I'm going to go back to my index I need to render it on the screen because right now again we have nothing on the screen so I'm going to do is rather than having a comment I'm going to delete this and I'm actually going to put something called a component here so we have these nice little uh sort of you know brackets and we're going to type in header now you can see on my vs code I get a little suggestion come up here and it says components for slash header it says Auto Import from that folder so I'm going to click that and it says import header from components now that may not work for you if that doesn't work for you then all you're going to need to do command B and you're gonna have to locate your photo so in this case it's a folder level up which is how we do dot dot it's inside the components folder and head and you just type this out okay so super super easy to go ahead and do that right so we're going to go ahead and make this extremely simple to go ahead and follow so at this point what we have is we have the header so if I go ahead and save this file we can now see the header actually needs to be something it says it's called a self-closed component okay so if we go ahead and hit save it says I am the header all right so now we have the header looks pretty good so now what we can do is you can see all the code that I provide inside this header.js file gets rendered on the screen here so now you can see how we kind of you know block out our code okay so we're going to click into header.js and start building this out the way we need to okay so what we're going to do is I'm going to use this as a reference so as you can see this is our final kind of build so we have three sections here we have the left section the middle section and the right section okay so the way we do this when we're coding is we go ahead and we actually go ahead and spread like we we containerize it so there's an overall container here at the top right this container at the top is going to be used for uh it's going to be used to display the actual header out so I want to have three divs which separate so a div is literally a container so we literally start off by containerizing things okay here what I'm going to do is I'm simply going to create those three dips I'm going to create a div here this div is going to be responsible for the left section okay so this div is going to be responsible for the left hand side section I'm going to create a the middle div over here I'm going to create a right div over here so the middle one I'm going to go ahead and type in div we go hit save and for the right one I'm going to type in another div and hit save if you're wondering how I'm doing that kind of quick typing it's called Emmett right you can literally Google online and you can go ahead and check it out so we've got left middle right awesome stuff guys and if you're finding you know chat annoying or anything like that just go ahead and uh you can minimize the chat it's all good all right so at this point we've got the left section the middle section and the right section all right so at this point you know when you're using HTML as well there are actually very kind of you know good um components or elements you should be using when you're building out things like a header a footer the body and so forth when you're using when you're burning a header you should use something called the header tag right this goes ahead and tells you know things like Google and that when they go ahead and scan the page that it's gonna actually this is actually a header that it that the the little kind of Google robot is looking at right so it's going to be a headache component now we have the H1 I'm a header and it's still rendering on the page looks good awesome stuff head attacks are important they're good making use of the correct tags helps you a lot more than you think okay so we're going to make a good emphasis on that now I want an image in this left div this is going to resent resemble the Airbnb logo so what I'm going to do is I'm going to use something I'm not going to use a normal image tag so an image tag is typically what we'll do we'll put in a source over here and this Source would actually go ahead and you know it would Point towards that image what I'm going to do instead is I'm going to use the actual next JS image tag the reason why we use the next JS image tag is because the next JS image tag actually kind of optimizes that image it kind of it does a very clever compression turns the image into a format called webp which is way smaller than jpeg PNG or these other file types right so it makes it way smaller and it also delivers it in a lot more optimal way right again if you get stuck with this stuff don't worry about it just you know Google research it a little bit come back continue the video so the way that we use the Google the image tag is we simply import image from a next image I'm going to go to the top open image from next image now what I do is I go down to my code I'm going to go ahead and use that over here I'm going to type in image it's a self-closing component we go ahead and have that you know extra forward slash okay then what we do is we go ahead and we pass a few different attributes to it so at this point I'm going to go ahead and actually type in source and for the source I have a nice little link that I've shortened for you guys to make the whole experience easier when you guys are coding along with me if I provide a long one it's really hard to kind of you know know what's going on so here we have the first link now notice what happens okay if I hit save on this we're going to get an error this error is going to say yo you need to use width and height or the layout property if you're going to do what you're doing we're gonna do two things you can either pass in a width and a height to make this work the way it works now the reason why it needs a width or high or it needs the layout is because remember as I said it delivers it in a compressed optimized way the only way it does that is it needs to know those things beforehand so what we're going to do here is I'm going to say layout equals fill and what this will do is it will actually use up the maximum space of the container that it's in so in this case the div all right we're going to go ahead and hit save now we get a different issue it says invalid Source prop post name links.popper react is not configured under images in the next config file so basically because we need to go ahead and actually you know prepare next.js for those pictures we need to whitelist the domains that we allow pictures to come from the way that we do that basically it's a way of saying that to nextjs only accept pictures that come from this place okay so what I'm going to do is I'm going to do command B I'm going to go into this level so I click package.json which allows me to get back at that level click a new file and on this new file I'm going to go ahead and type in the following I'm going to say next config.js this is the configuration file for our next framework okay so what we need to do next is we type in module dot exports equals and we do curly braces now this is a way of writing kind of old-school JavaScript right it's called a module export you look into it if you want but what we can do here is we can pass in an images option this is basically how we customize the actual you know configuration file I'm gonna make that a little bit bigger we customize it like so in this case I'm going to go ahead and you know pass in an object and then what we can do is we can say domains and this is how we basically specify which domains we should accept the pictures from this takes an array hence the square brackets an array is like a list right in this case what I'm going to do is and that way you can pass in you know several different domains and we'll type in links.paperreact.com and what I'm saying basically saying is accept any picture that comes from that website right that way it'll make it easy for you guys now when we do that you're gonna have to go ahead and because we changed it you see it says finder change the next config.js restart the server so I'm going to do Ctrl C to cut my server command K is to clear your server now you can see I've not I'm not running it anymore so if I try and refresh this safaricon connect to server in this case I'm going to rerun my app npm run Dev and this will go ahead and run my app again now the reason why we need to do that is anytime you change your next configuration file you're gonna need to change that okay you're gonna need to restart your server because that's a configuration file okay we're going to go back to now we can hit refresh and we should see we are back up and we can see a huge Airbnb logo so we've done something right command J is to hide the terminal by the way right so we've got the terminal but this is uh we got the picture up but it looks horrible right that's not how we want it at all so what I'm gonna do now is actually neaten this up a bit make it a lot more nicer to look at first thing I want to do is keep the aspect ratio you see right now it's kind of you know all messed up and it's it's looking a bit nasty right now I'm not gonna lie all right so what I want to do right now instead is add a second attribute and this one's going to say object fit and you see we get these ones right here so object fit equals contain and what this does is it stops it from changing its aspect ratio which means that even it will still use up the same space but it won't stretch it will keep the aspect ratio okay next thing I'm going to do is I'm going to say object position left oops space left and this will actually assign it to the left hand side of its container now that will be handy for a bit later all right so we're going to push it to the left once it's done now you can see it's taking up a huge amount of room I want to go ahead and clean this up so what I'm going to do is I'm going to go to the div that is surrounding it I'm going to go to the class names and this is how we go ahead and style out the element that's surrounding our image this is a div which is a container as I mentioned before so what I'm going to do here is I'm going to make this relative which means that you know anything which is styled over here is going to be relative to the size of the container so if this containers small the image then becomes small if it's not relative then it's going to be basically relative to the entire application size which we don't want we want to kind of contain it in that div okay the next thing I want to do is I'm going to type in Flex to make this a flex box now if you do get stuck at any point with flex I'll explain it and I'll break it down but check out a website called flexbox Froggy yes flexbox froggy like a frog.com and do that tutorial it's a game you play literally 20 levels and you'll know Flex spots it's very quick you can go ahead pause the video go watch it and come back if you're watching this back but that's going to help you out a ton and then what we're going to do is we're going to Center the items again these are utility classes from Tailwind TSS they allow us to do a bunch of cool stuff off now you can see we've lost it right we we don't see it anywhere so this is because we've made it you know we've made it a flex which means it's going to go ahead and Shrink itself so I need to say this is a height of 10. right and now you can see it only uses up a height of 10. okay so it's looking okay all right it's looking okay at the moment what I'm then gonna do is I want when I hover over this I want it to be a cursor pointer right now it's not a normal cursor I can just type in cursor pointer nice and if you're new to coding this is actually going to be typically you would do this with CSS but we're doing it with Tailwind which is basically writing the CSS for us in some sense so you can see when I hover over it it's literally adding in this CSS code for us okay and we're going to type in a margin y of Auto this will go ahead and centralize it once we go ahead and get this thing working the way we need it or size the way we need it to okay looks pretty good at this point the header is kind of you know we don't know the sizing the Dynamics around it but in this one it's got a very nice kind of padding around it so you can see how it's not touching in this case all one's touching that doesn't look very nice so I'm going to style my header okay so for the header I'm going to say it's sticky now what the hell does sticky mean sticky means as I scroll down it sticks to the top okay so we want this to actually stick to the top of the page so what I'm going to do is I'm going to say sticky and it's a very nice kind of thing you should know about I'm going to say top zero now if you did uh sticky top 50 it would be stuck in the middle of the page that wouldn't be a very good experience would it all right so this is going to be really nice so sticky top zero next thing we're going to do is we're going to say Z50 now Z index is basically where what layer it appears on so if something has a z index of let's say one and something has 50 50 is going to go in front of the one of the element with Z index of one so we want this one to be to be always at the front so we're going to give it a z index of 50. that's why when we scroll down it's always at the front right so we're going to protect ourselves here's that index at 50. now what we're actually going to do here is we're going to make this top higher top row and what I'm actually going to do to demonstrate it is we're going to make it a grid right and this is going to be grid of three different columns so if you think about this what we're doing here is I'm actually I'm actually going to go ahead and create let me go ahead and get a little box right and I'll freeze it on the screen there we go nice so I'm going to create a box here all right this is going to be a sort of you know a container or how do I get this oops no not that one is it nope not that one oh no that's a circle right so I'm going to go ahead and um where the hell is that drawing there we go yeah I'm going to make this a column so this entire container I'm going to split it up into a column three columns this is called a grid layout this is going to be column one column two column three and this allows us to go ahead and style it out the way we need to do it okay so let's go ahead and do that so right now you can see it's just pretty much you know it's arrival it hasn't got any style applied so at this point what we're going to do is I'm going to type in Grid this applies the grid structure you can see it applies this here SS class hit save okay nothing changed so far we can say grid columns three grid Dash columns Dash three oops three hit save again nothing visually changes yet because all we have is that at the moment but to prove that stuff's happening we can type in BG for the background color and if I just do red 500 you're gonna see that there is actually something happening right now okay so I'm gonna make the top uh White right now you're probably wondering it's already white why would you make it white again no it's actually already transparent the background of the page is just white that's why we see it okay so now what we're going to do is we're going to type in BG white okay now why you don't have to give a shade to it it just works the way it works looks nice all right the next thing I'm gonna do is I'm gonna type in Shadow MD and this gives it a nice kind of you know Shadow underneath it that gives us this nice floating aspect this floating feeling that we see right here that's really nice right oops there you go that's really nice okay so super simple right now Shadow MD and the next thing we're going to do is type in a padding to the y-axis so on top and bottom of 5 live and you're gonna see when I enter that you see how now we have some spacing looks a lot better right but look we still have a problem on the x-axis right so it's touching the sides too much right now okay so what I'm actually going to do right now is do padding X five and now you can see we've padded it inward and guys we're starting to look pretty good at this point all right this is looking pretty damn nice at this point and uh yeah there is a shortcut for this if you want to go ahead and combine this you can just type in so if you want five on The X and Y axes we can actually go ahead and say padding in all directions or five and it gives us the same effect okay so if you're enjoying this video so far smash the Thumbs Up Button let's keep on going right so this is looking pretty nice at the moment now what we can do which is even cooler with uh Tailwind is you see right now the padding here is actually a padding of uh it's quite large right when we go to a mobile device that padding shrinks so if we go ahead and get bigger can you see there's a difference in padding between this the small screen and the medium screen it gets a bit bigger right and how the hell does that work all right so this is actually called Break points now the way a breakpoint Works in Tailwind CSS is typically everything is mobile first which means that the rules and the utility classes that I'm writing right now they are all for the Mobile screen unless we say otherwise so they're all going to be Mobile screen and then if you go ahead and make your screen bigger it just keeps those Styles but what's really cool is we can go ahead and say when you hit the medium screen do this when you hit the large screen do this when you hit the extra large and it goes up to like two three XL right so what we're going to do now is these are all mobile first and then we're going to see when we hit the medium screen we're gonna apply a padding of on the x-axis of 10 and I'm actually going to go ahead and kill something called Rocket that's why you guys can see the Emoji so here medium of 10 and what this does is it adds in something cool with a CSS media query and it says only apply paddingx of tense or you literally double the expanding when we reach a size of let's go again over that it says when we reach a size of 768 pixels okay hit save and now you can see if I make this a bit bigger boom after a certain point it gets bigger that is called a break point and that's why I really do honestly love using Tailwind CSS it's so easy to make a responsive websites right we've got the left section pretty much done at this point right so if we go ahead and make this full screen looking pretty nice okay pretty nice just keep on going at this pace we've got the left side done so I'm going to get rid of that we've actually keep it in there okay I think it helps you guys out where the next section is the search section so the middle is going to be representing the search the search looks like this okay there we go so this is actually going to be like a custom input field so we won't have it have to do a few clever things here then we actually have a nice little icon over here that I'm going to show you guys how to go ahead and grab yourself so to get this working we have our div we go inside the div and the first thing I'm going to do is actually have an input field so an input field in HTML allows us to have some text so if I go ahead and Pop That in right now you're gonna see that it's actually over here a little bit hard to see by yourself but there you go so I can start typing in that input field now looks kind of cool but it looks a bit boring I want that to look like that now obviously an input field doesn't look like that out of the box so we're going to do is we're going to make the div around it have this look and then we're even going to have a little kind of Icon inside the div and then up to this point over here we're going to have the input field okay so it's actually going to be the div that looks like that the input field here and then a little icon over there okay so we're actually going to be using something called hero icons this is actually something awesome that the guys over at tail and TSS work with these are built by those guys and what you can do is we're pretty much going to install this into our project and then you can go to heroicons.com search for any icon here and then pretty much use it so in this point imagine we wanted a search icon we're going to see that we get two icons two variants we get the outline variant and the solid variant we've got search and search over here some of them look the same some of them have a different aesthetic okay in this case I'm going to click documentation now with this I'm going to go ahead and install this npm install error icons react that's it let's keep the vibe up right now we've got the command J to bring up the terminal I would keep one terminal open on your code and I'd add another one so you can now you can see we opened up a second terminal and in this one I'll do paste so npm install Arrow icons react okay Enter and while it's doing that you can see then you can basically go ahead and pull it in so imagine we wanted the soundtrack of import search icon from hero icons react and then remember solid or outline you get two variants okay and you can change all of the stuff with Tailwind hence why it was built by those guys because they wanted to incorporate all that Tailwind utility class goodness inside these icon sets as well what we're going to do now is we're going to go ahead and Implement that little beautiful search bar right so what I'm going to do is you can see we've successfully installed it so keep that tab open but I'll go back to the terminal command J to hide it and then what we can do is we can go ahead and have the following to make sure that it's not so confusing I would add a placeholder as well to your input and I would say here what do we want we said start your search start your search enter there you go now it looks like a placeholder you can type in it a little bit more nicer to look at while you're building this out right what I would do now is I wanted something called the search icon so to import the search icon from what we where we need I'm going to go ahead and say import search icon and this actually is something called the explicit Imports we need to define the exact name so search icon from and this one is going to be from hero icons or slash react forward slash the solid variant is what I want okay this gives me the hero icon for the the search icon sorry so what I do here is I go ahead and say render it out on the screen self closing in component and now we get a huge icon on the screen looks pretty sick right so at this point we've got the search icon so what I can do now is I can go to class name with the class name I can start applying all the styles that I want so I want to give it a height of 8 because it's kind of huge right now all right there you go looks a bit smaller what I'm going to do is I'm going to zoom into it a little bit so as I apply it you guys can see it I'm gonna make this actually be a little bit responsive but we'll sort that out in a second the first thing I want to do is I want to make the background a shade of red so I'm going to do BG red and I'm going to make it 400. and what I love about that intellisense is it gives you the color samples and everything so that looks pretty nice to change the actual icon to why it's actually text Dash White okay and then you can see this and that's because an icon is actually text all right if you didn't know that now you know it's pretty much going to be resembled as text on the computer side what we're actually going to do now is I want this to be rounded I want it to be like a little circle so I'm going to type in rounded Dash four and boom we have a circle at this point that actually looks pretty clean I'm not gonna lie I'm liking how that looks but what you can then do I'm gonna add a little bit of padding so it has a bit of breathing room so I'm going to type in P of Two And if you're always confused as to what it's actually adding that's the CSS ads we're using REM which is a better measure to use hit save now we have our nice little icon right looks very clean at this point now when I do go ahead and hover over it I want that to be a cursor pointer I'm going to type in cursor pointer okay and then now when I hover over it there you go looks really good right so that looks pretty nice at this point but our container by default is something called display block that means that it Stacks up it just Stacks up on top retail so what I'm doing is this div right here holds an input field and a search icon filled right it holds these two thirds it holds this one right here and this one over here so what I do is I apply something called Flex to these two elements and what Flex does is it by default goes into a row okay so what I'm going to do is I'm going to go to my Dev type in class name equals and over here I can type in Flex back and now you can see by the focus draw but we have this squashed look to it that's not very ideal okay so instead what I'm going to do now is sort this out so I'm going to do Flex I'm going to centralize the item so item Center I'm going to say the actual border here should be I'm gonna give it a border only once it hits that Medium breakpoint but I'll show you what I mean by that so if I say border I'm going to give it a border width of two because here look we get a nice border okay and then what I'm going to say is round the borders well and you get different ones you get rounded SM rounded medium rounded large all these other different sizes you see that looks pretty good but you see it's not it's not there yet it's just not looking the way it needs to look right now right and this is because of two things it's because we don't have enough space remember it says three column thing over here we actually sort of change a couple of things we actually get rid of the icon on the small screen but we show it on the medium screen you see that otherwise we get that issue so we actually want to have that kind of responsiveness to get that to work what we do is we go ahead and firstly I'm going to add a padding of Y adding a white of two so that we have a little bit more spacing I'm actually going to add a shadow as well now I want to add a couple of these style traits when only on the medium screen right now you see it doesn't make sense to render that out all right so what I'm going to do is for the search icon I'm going to by default make it hidden okay so by default it's hidden I'm only going to show it once I get to a medium screen so medium screens I'm going to make it something called inline Flex now you guys are probably getting annoyed at that it's kind of covering it it's medium inline Flex okay hidden media MD inline Flex if I hit save and now when I make it bigger only on the medium screen it comes in line now obviously it's not working the way we want it to yeah so we're going to figure that one out right now as well okay but at this point you can see being a bit weird being a bit unpredictable okay the way that we fix this is we've got to change a couple of style properties firstly let's fix the outer div well again they were kind of powering piling these on right so on the on the mid the sort of container element I'm going to say only apply that border once we hit the medium size so that looks cleaner on a phone right but only when we hit the medium-sized screen do I actually want to do it now I didn't do that correctly it's medium colon border so now only on the medium screen I see the Border awesome looks pretty pretty good all right next thing I want to do is you see on that border it touches it that's not nice that's really not nice so the way that we fix that is we can go ahead and add in something called padding left to the input field so on the input field I'm going to say let's go ahead and say class name equals padding left of five uh in this case I wish I gave it 10 left of five is good yeah you can see it touched it moved away but we still have that little issue right this is because the background of the input thought is white by default so what I want to do is the input field I can go ahead and say class name transparent so I'm going to type in transparent okay and now you can see boom right so now you can see I actually disappeared wait a second did I type something wrong I think I did right so it's actually not uh but it's BG transparent sorry BG transparent there we go and now you can see there is no background but we still have our search functionality we have this another annoying outline okay how do we get rid of the outline well Intel and CSS it's really easy we just type in outline done and now when I type in okay looking pretty good all right it's kind of gets close to that and then we've got this other issue of this is not sticking to the side hmm it's a bit annoying right what I want to do is I want to make this input field grow I want it to take up as much room inside that container as possible when we have the container as Flex what we can do is we can select one of the components we can say Flex grow and what that will do is it says grow as much as you possibly can so it should push the other element into the corner now when I hit save I do that boom froze it over to the corner okay looking kind of looking kind of good at this point all right so what I can now do on the search icon is we can go ahead and see it applies at this point so I'm going to go ahead and actually make this like so I'll make that a little bit smaller so we can see what's happening so for the flex box for this div and remember if this is kind of getting confusing you can go ahead and just pause it get up to speed and then carry on okay don't worry don't freak out if anything's not making sense at this point we can go ahead and say for the medium screen I also want it to be a shadow and I want to say shadow SM we have the Shadows more only on the medium screen and actually is under here very subtle to see that but if I go ahead and change this to an extra large oops or just to say a large you can see there we go you see how it's a very subtle delicate small border that we're applying there okay now we've got this issue over there right that's not looking very good at this point so I'm going to do that is I'm going to say for the search icon I'm going to give it a margin X of Auto of Auto oops oh Imagine X of Auto but after the medium-sized screen well actually you know we don't even need that I'm gonna say because on the it's only visible on the medium screen so I'm gonna say after the medium screen then what I'm going to do is I'm going to say oops one second sorry guys that that's kind of annoying right now because I think while I demo it what I'm going to do is I'm gonna disable my um my tail in CSS but you guys make sure you've enabled it all right but I'm going to disable it primarily for one reason which is because you guys can't see more I'm typing as I type it I think it'll be easier for you to see I need to just quickly spin up my app no I don't that's all good okay that way it doesn't keep covering the screen right okay so now what we're going to do is we're going to say on the medium screen I want to add an extra margin so I want to add a margin on the x-axis of I think it was two yeah we're gonna add a margin on the x-axis of two now you can see we spaced it out nicely now check this out okay that's looking pretty damn good all right looking pretty damn nice and look on the medium on the small screen it works perfectly nice and then the big screen we've got this perfectly responsive the middle align centrally align search box right looking nice guys smash the Thumbs Up Button if you're enjoying it so far and you're able and don't worry as I mentioned before this is being broken down for absolute beginners so take your time and do this at your own pace okay the whole point is that you learn something okay so we've got this looking pretty nice now the search the text here I'm going to change that a little bit I'm going to say the text should be small I want it to be a slight gray so I'm going to say text Gray of 600 okay and now you can see it's a slight gray and it's actually gray when I type right so if you may have thought they didn't change color that's because the placeholder is great by default I'm going to change the placeholder to be a slightly different color of 400 so placeholder grade 400 and that will go ahead and take effect now in order to do that actually we need to add in no we don't no we don't we're good that's good yeah place out of 400. nice so at this point what we're going to do is I'm going to go ahead and I think we're pretty much done with that so we have everything being responsive it looks pretty nice and yeah so we're done with the section here this is looking pretty good so now we're moving over to the right hand side of the uh the header okay so moving on to the right hand portion of the header anyway so div on the right hand side over here is the next portion what we're going to have here is a bunch of things we're going to become a host and a few different icons we've got a globe menu and a person icon so we're going to click become a host okay so I'm going to do a P tag and I'm going to say become a host oops become a host hit save now you can see it pops up now you can see it's not aligned the way that it needs to be so I'm going to show you how to fix that and get that working as well in the way that we need it right then I'm going to import three icons I'm going to need to use later on I'm actually going to import a few icons so I'm going to need throughout this this component so I'm going to go ahead and pop them in right here you guys can feel free to add them in as well we've got a few additional icons so we already have the search icon I've added in these four icons okay so the next thing we're going to do is we're going to go ahead and add in the little Globe icon I was over here right so I'm going to do here is I'm going to type in Globe alt icon and I'm going to self and close it right and if we hit save it's huge breaks everything looks awful so I'm going to add in some styling again Tailwind CSS for the win give it a height of six for this div I'm going to make sure it's actually a flex box because right now it's stacked up in a block for you okay and then there you go looks really nice okay and then what I'm also going to do is I'm going to space this out so all the components that I put inside of it I don't want to add in padding for every single component when you're using Tailwind you can do a very nice powerful little feature here and actually go ahead and type in space along all the X children components of four and now it will space out all the components that are inside that container with four right and you can go ahead and play around with the values change it up as much as you want and then we're going to go ahead and type in after that we're going to say that we want to make it items in the center so I'm going to say Flex items Center and now you can see it drops centrally aligned so at this point we've now centrally aligned our Elements which is looking pretty nice right looks exactly as I want it and then what we're going to say is justify end justify end and what this does is it positions it at the end of the element as opposed to by default at the start of the element okay so the next thing we're going to do is go ahead and actually change the color I'm going to make it a text I'm going to make it gray and I'm going to use a shade of 500 which is in the middle in the gray Spectrum that's looking pretty clean next portion is these two Now can anyone guess what I'm gonna do here we have two elements and we've got a little border around it so naturally we think of this as a container AKA a div so what I then do is I pop a div around it so I'm gonna go here pop a div around it there you go I'm going to add a menu icon inside this little Dev self-closing and we're also going to add in a user Circle icon okay now you're probably wondering you added that and I saw something moved but there's nothing there it doesn't work that's because we need to give it some styling right so over here I need to say it's a class name with a height of six okay and here I'll say it's a class name of a height of six as well right we'll give it six all around okay looks good now you're probably wondering but suddenly we gave it Flex what the hell's going on every time you create a new div it defaults to block which is stacking right so that you remember every single kind of you know nested container can have its own layout so what we're going to do here is we're going to give that one a flex box as well okay so that's going to be a little bit nicer to do it so here I'm going to go ahead and div I'm going to say class name equals flex and you'll see immediately it pops into the center then I'm going to say items should be centrally aligned oops inside of that would help item Center and I'm going to say Space X of 2 which should space them out a little bit more I'm going to give it a border of two which Pops in a border a padding of two which spaces it out a little bit and then a rounded full which makes it a rounded border and then as simple as that you can get a lovely looking UI right now for those go by cones I want them to be in a hoverable so I can say cursor pointer and things like that and then this suddenly becomes a nice clickable element looks very clean looks really thick and nice okay so what we're going to do then and remember guys if you're enjoying this not only smash the Thumbs Up Button hit the Subscribe there's over 50 of you that are watching right now that aren't subscribe I really appreciate it makes this channel go to the moon and above and we are growing to a million that's all I must stop until here and above but keep going so what we're going to do is on a small screen that looks a bit messy so I want to hide that on mobile first View and then I want to include it after a certain size so the way I do that is where we have become a host I'm going to apply some styling so I'm going to go ahead and say okay you know what that should actually be hidden by default so there we go mobile first but on the medium screen I want it to become an inline element so medium screen become an inline element you could say you know in a flex whatever in this case now when I do this it only comes available on the medium screen all right so as you see as we hit that Medium break point a lot of things happen now that's a little bit of a crunch you can go ahead and modify that if you want but most likely they're not going to be at that exact portion it'll be this this or that there's typical breakpoints that you style for okay looking pretty good guys let's carry on so we've got that looking nice and I'm gonna actually make that a cursor pointer as well because that way you should be able to hover over it it looks like a link looks really nice closer pointer save okay so we've got this working looking pretty slick now all right the header is done we are done with the header now we are going to move to the banner right so what we're gonna now do is build out another component which is the banner the banner represents this gorgeous looking image over here again it's going to be nice and responsive and it's going to look pretty damn cool I'm going to show you how to get that picture looking just like that in the way that we need to do it okay I'm gonna go ahead and create this Banner component command B to open this up go over here go into our components folder click and on the new file and type in banner.js underscore rfce to go ahead and get a nice little Snippets and then inside the banner we can go ahead and code a few things now here I'm just going to say H1 I am Banner save and let's just get this working firstly go back to my index over here I'm going to say banner and remember we get this nice little Auto Import hit enter and look it automatically did the import for me if it doesn't work don't worry don't freak out but you can see now it comes up on the screen so try and do things in that sense right I'm a bit uh I'm a banner so we're going to that confused me for a sec I was like why am I seeing it so I'm going to click on that and then I'm going to go ahead and import the image uh component that we used previously from next.js so import image from next.js next forward slash image and then I'm going to go ahead and replace that with actually something a bit more useful which is the actual image component capital I be careful self-enclosed component the source for that image is going to be the following I'm gonna pop in this Source right here links up over at zero FM is the one that you're looking for all right so I'm gonna go ahead and hit save and there you go so now we've got image with Source must be used with and blah blah blah so we get the same issue right remember you have to prepare it for it so we say layout fill in this case layout fill and then you're going to see another slight issue oops while we're done there yeah so now you can see it takes up the full width we don't want that right we don't want it to take up the forward it doesn't look nice it doesn't you know do what we need firstly I'm going to make it not stretch now you previously saw object fit contain which keeps the aspect ratio but I want to do something called cover and that will maximize it right but it won't it will kind of you know zoom into the picture as opposed to you know contain it so in this case I mean it looks kind of cool right looks kind of cool like a huge picture it's kind of like dramatic how we've got this kid and dog and like you know purple react walking maybe that's me I don't know right but at this point we're going to go ahead and uh let's make that a bit more you know styled up so we're gonna go ahead div and then I'm going to say class name equals and I'm going to say relative so it should be relative to the size of that container in this case it disappears because when you make your relative you have to define a height and a width okay oh well just the height in this case so what we're going to say here is the height should be you know in this in this case you can give it a certain value now it doesn't just work in the sense if I can type in like 67 there are certain steps up you can use uh the Tailwind CSS intellisense extension that I talked about earlier and do it but what I'm going to say is you can actually use something which is pretty cool and just in time compiler mode so the latest version of Tailwind which we have right here we can go ahead and add these square brackets and we can go ahead and add in exact values so in this case I want to make the height 300 pixels now that's pretty cool right obviously that's not ideal really we want this Behavior right where it looks like that but it scales up in a nice way so okay mobile first remember mobile for everything is mobile first when we're styling that's a good principle so we're going to say okay mobile first is high f300 then what I want to do is on the small screen because mobile is not small small is actually bigger than mobile we're going to say the height should go up to you let's just say 400 pixels okay and then on the large screen we're gonna go up to you guessed it 500 pixels 500 pixels and then on the even larger screen the extra large we're going to go up to a height of let's say 600 pixels and then finishing it off 2XL is going to have a height of and this one was 700 pixels so we're just stepping up in the different screen sizes now if I go ahead and do this look how it nicely goes ahead and actually resizes all right until you reach the final big size there you go look at that now we get this very awesome kind of you know responsiveness to it right and there's many ways you can do that you can go ahead and use a percent you can use Ram sizing whatever you want this is one example with exact absolute pixel sort of values and that only works with just in time compiler with Tailwind okay really nice little feature we've got the image working the next thing I want to do is do something called absolute positioning so this is actually a little div in its own so not sure where to go in this button here and I'm going to Absolute position now what the hell does that mean it means I can position wherever I want on the page that is what we call an absolute position now if you use this recklessly you're going to start seeing a element just fly off into the corner of the screen or you know go way off through somewhere that you're not going to see and you want to be careful about using it so the way that you contain an absolute positioning positioned element to The Container so that way it doesn't fly off somewhere so far is you go ahead and make the parent relative Okay so we've already already done that because we did that for the actual image itself we made the parent relative what we're actually going to do now is we're going to go ahead and pop in a div and this div and I'm going to show you a little trick if you write div four uh then the crocodile bracket or the P tag inside it makes a div with a P tag pretty sick right you got to set up Emmett to make that work and here you're going to say not sure where to go question mark perfect right and then you can see uh suddenly where the hell is it I don't see it I don't see what you're talking about it doesn't come up on my screen okay we're gonna go ahead and fix up I'm gonna go ahead and say class name for that div is going to be absolute and then you can see it comes up and it flies to the top left like I mentioned but it's relative to the container that we're in so you see it actually contains it to the parent right so this is where absolute positioning is really powerful provided you make the parent relative otherwise you're relative to the page in which case you fly off to the top of the corner of the page and that's a headache when you're learning from absolute positioning at the beginning it becomes like oh don't use that because it's scary if you just make it like that it's not too bad right so at this point I'm going to go ahead and say the top should be let's say half and that means it will go to half the page and the width should be full right and that means okay but you didn't do anything that's because if I make the width 4 and the text Central boom it goes really nicely actually in the corner over there okay so it looks kind of good on this screen on this screen it's kind of big though right so the P tag now I can go ahead and do mobile first styling I can see the text should be by default small right well on a small screen it's going to go ahead and be uh text large so on a small screen looks really nice but on the bigger screen boom it becomes a large so not sure where to go looks really nice all right so now what we're going to do is we're going to go ahead and add in the button on flexible now you won't believe there all of that the clickable Dynamic element styling everything that looks sick in what you're seeing there all comes from Tailwind now what I'm going to do oh this is a Vibe whenever this song comes on right so what we're going to do is we're going to go underneath the P tag and we're going to go button okay now the button is going to say I'm flexible right and I'm going to give it a lowercase f so I'm flexible now of course that doesn't look that great now the reason that you might not be used to using Tailwind as well is because when we use Tailwind it strips all the styling which means H1 h2h3 they all look the same and this is because it then allows you to go ahead and apply utility classes to a blank canvas no matter what element you're using that's awesome because then you can go ahead and configure The Styling otherwise you're going to have to always fight with the H1 cell or H2 star or any other thing that's why I don't like bootstrap that's why I like Tailwind it actually allows you to Define what the style looks like so massive use for it there let's go ahead and continue on so for this button I'm going to go ahead and give it a class name now pay attention to this one because this is where it gets pretty cool I'm gonna first give it a text purple 500 text purple 500. now the text went purple I've seen a shade in the middle somewhere right what I'm gonna do is I'm going to say that the background should be white right oops BG white right looks pretty nice but you can't see it much that's because we need to give it a bit of padding so I'm going to say the padding of the X actually should be 10 depending on the y axis should be four and immediately we can start to see that button a bit more okay the next thing that pretty much immediately you know pushes it out is we say Shadow Dash MD and now it's got a shadow and that immediately makes it pop right so it's very visible now the next thing you can naturally guess make the corners rounded rounded four right and you can do the things like rounded LG and it makes it you know less of a rounded corner and so forth and then in this case I would like to do rounded four and Rakesh says tail is pretty awesome feels like a shortcut to the class that you would have manually otherwise created yes exactly it's pretty much a shortcut to go ahead and add that you know I think all you know when you do it manually and especially CSS module style components whatever you decide I've used them all and it's it's just slower right whereas Tailwind is so fast it ensures consistency very nice style palette uh color palette and it's just got loads of benefits to using it it's definitely my favorite go-to right around it full so at this point we're going to go ahead and we're going to say fun boat to change the text to a boat and then we're going to make the text itself actually become so first you actually want to add a little margin on the y-axis of three because we're touching not sure where to go I don't want it to touch it so I'm going to add a margin margin is actually on the outside of the component padding is inside the component all right or element okay so now what I'm going to do is I'm going to do some pretty cool things here where I can pretty much go ahead and you know how do we do that right that's called a hover State when I'm hovering over it when I click it it's called an active State you can Target these things and tell when CSS very easily so what I can say is okay first is let's tag or the hover state I'm gonna say when we hover I want the shadow to become an Excel so I want the shadow to become slightly bigger so at this point you can see this right and it's got a nice shadow to it but I'm going to go ahead and actually make the size change as well all right so in this case when we actually go ahead and click it so in this case you can see look we get the nice kind of you know it looks like it moves but really we're just changing the uh the shadow very nice little trick right and what I'm going to do here is I'm going to say when it's active I'm going to scale the button so when I click it active stay scale 90 right so in this case look at that it looks like I click it now but this one is really smooth and this one is clear it's kind of horrible right whereas this one is like you know smooth how do I add that transition well the way we do it until when is we say transition right and we say duration I'm going to say duration is 150 you can give it a different range 100 200 300 there's a few different ones 150 is quite nice and now that applies to transition question two or your you know even when you have this animation between the shadow which means it even looks like it moves even so did you notice how when we add that sign animation it literally looks like it lifts off the page now but it's not actually moving right it's crazy what design can do so enjoying this hit the thumbs up subscribe if you haven't already and we're going to keep on crushing pop fam let's go this is looking sick look at that so we are pretty much at the point where we just finished the banner and we just finished the header so we've got the fun part now all of this goodness right explore nearby live anywhere and then this kind of thing so we're gonna split this up we've got a few sections here and then we've got the small cards so I'm going to be calling these small cards I'm going to call in these ones medium cards and you can see there's a scrollable Carousel and then we've got this large card here okay and as you can see each one is going to perfectly respond and in fact if you haven't guessed already we're going to use grid over here so grid a column of four and as it gets smaller grid column three grid column two grid column one uh whereas here we're gonna have an overflow so you're gonna learn all of this cool stuff okay okay so at this point we're gonna go ahead and continue on with the build so I want you guys to go into your index.js next and we're going to go ahead and map this out now inside of index.js we're going to have something called a main section this is going to resemble the main portion of the screen okay so what I want to do now is I want to have all of those different small cards right and that's going to be like you know what what we have and that's going to pretty much resemble this so this is going to be called a section what I'm actually going to do here is I'm going to have a section and this section is going to have a H2 because it's like a subheading which has explore nearby all right we're going to tackle this section right here first the explore nearby park right so this part here oops this part here this is what we're tackling okay so explore nearby there we go and I'm gonna actually start this right now let's go to class name and this actually gives this a nice little bit of signing we're going to say it's text I'm going to give it four Excel so text goes up quite a big amount you can check the Tailwind dots by the way if you want to know all the different you know utility classes yourself and that's going to help you guys out quite a bit so we're going to make it font semi bold I always do this why am I doing that font semi bold and then I'm going to say padding on the bottom of five okay it looks kind of cool right you're probably wondering the planning bottom isn't taking base is because it's going to attack this bit I'm going to style the actual section itself in just a second I'm going to say padding top here of six right there you go it pushes it away now the main section okay I'm gonna give this a bit of signing here now notice something in this one you know it's how this entire section right so this entire main kind of you know container that we've got over here never really goes past the max width right so it's kind of got this Max width restriction from here all the way over here right so it's kind of Max width over here Max width over here but it remains in the center the reason why that happens is because we apply something called Max width 7xl oops Max width 7xl so it'll never get bigger than that with if we set a kind of constraint okay so then what we're going to do is do MX Auto to make sure that it's always Central if we don't do MX or it'll be left aligned here and it will end somewhere around here okay so that actually does it quite nice I can see some of you guessing beforehand it's awesome to see that you guys actually get it right A lot of the time as well so now if I try this out you see how it restricts it over here okay but if I didn't have the um if I didn't have MX Auto you're going to see actually fly to the left and it would probably end there so that's why we do MX Auto and that means a margin X on there so it automatically automatically configures facing on the left and right so it'll centralize itself okay so at this point what I'm going to do is I'm going to type in padding on the x-axis of eight I don't want it to touch the side ever right so that's mobile friendly but when we get to a bigger size so on a small screen so that's bigger than a mobile view I'm actually going to increase that to a padding of 16. and the reason why is because it looks kind of nice on the bigger screens to have a little bit more so you see how slightly changed there but because everything sort of snaps at the same time it's very it's very hard to figure out where that happens right so that's going to help you out quite a lot so we have explore nearby nice looks pretty good and then we're gonna go ahead and actually have and inside this section we need to implement these now these are the cards right now this is where we do a bit of nice kind of next.js magic so these cards are going to get pulled through from a server all right now the server endpoint so we're going to go ahead and pull some data from a server right and these API endpoints are already made I've already created them they're super easy to pull from and we're going to go ahead and use something called server side rendering to make this possible okay and there's two ways of doing it you can either have two types of like a a sort of server rendering you can have something called Static rendering or server-side rendering now in the case of a home screen the data is not really likely to change so much so we can actually put something called Static rendering on in action I guess so in this case we're going to do stack rendering but if you if you have information which is likely to change a bunch right so imagine it's a news articles are being constantly changed then you want to use server-side rendering which means every request that comes in it will regenerate the page when we do static rendering It prepares it once it caches it on a server and anytime a user comes it just delivers that same copy right the Assassin probably can easily get outdated if there's new information kind of flowing in so I'm going to show you an example of static rendering for the home page and then on the second sort of tomorrow when we do the search results we're going to use server side rendering so that way you're going to use both static rendering and server-side rendering so that renderings gets redeployed when you do um when you actually release the build to the internet okay so at this point we're going to go ahead and actually include it here so the way we include static site rendering is we go ahead and include a function all we need to do is actually say export asynchronous because this is actually an asynchronous function because it's going to be doing a bunch of you know Network you know work before it actually reaches the browser I'm going to say it's a function and you have to use a special function name here you'd use something called get static props okay and then you write the function like so now this just by having it inside of the index.js file this only works in Pages uh sort of components by the way just by having it here tells next shares that this is going to do some clever server rendering stuff now I'm going to give you a quick breakdown about as to how the this differs from normal react okay so what I'm actually going to do is I'm going to open up a terminal and I'm going to make it full screen I'm going to draw on this right so typically what we have or when we're coding is we have react okay so typically we have a browser and I'm going to go ahead and freeze it there we go typically we have a browser now this is what the user sees right they have some information on the screen typically this is in react okay so a user typically comes to the website and they just get delivered this when you're using react it's called a bundle a react bundle so when you release a react app to the website or you know deploy it online a user comes to the website they get the entire react bundle now the entire react bundle sure it loads pretty quick it's definitely a pretty good thing better than using raw HTML CSS and JavaScript for sure you get the power of react but the problem comes when your app gets a bit bigger this is where nextges comes in next.js essentially adds in additional steps so what nextgs does is it kind of and I'm going to go ahead and simplify this next.js introduces a server okay so let's think of this server as sitting between the two points right this is why you have to deploy next JS apps slightly different you have to have a server running to go ahead and use it okay so what happens is is the user makes a request to go to the site but what they don't see happening behind the scenes is the user really makes the request to a server and then the server delivers the page right so what actually happens is imagine we go to index.js the user requests to go to the home page so imagine they go to Papa react.com okay so they go to Papa react.com and then they go to this page now they don't need the entire app right so the server knows that okay they're just visiting the home screen so all I need to do is pre-build the home screen and send only the home screen to the user right and that page is loaded with react now what we can do really nicely here is we can you know cut out a lot of weight but we can cut out tons and tons of weight inside the application which is which is then delivered to the browser that means that the user experience is way faster to load it's going to be a hell of a lot more powerful because now you can do loads of kind of cool things on the server to prepare these Pages beforehand and that means when users come to the site it's so fast to deliver the pages okay so what we now do is we have this Middle Ground server so as I mentioned before if you use static rendering which is the default thing that happens in next.js when we release or deploy our website it gets put over here and it basically builds these Pages beforehand so it will have these Pages pre-built and it just delivers them as and when the user kind of comes in so it's super fast if we include something called server-side rendering right then what happens is every time the user comes to the website it will go ahead build this page fresh with fresh information and then it will deploy it it's still quicker than doing the entire react app because all we're all we're giving them is the one page they're visiting so if they go to let's just say the contact me page or the challenge page for example then all they're going to get is the challenge page you're not going to get the entire app so it's way faster and way better to use next.js over a typical react just for that one reason as well right it has a bunch of other benefits but that is a kind of a quick breakdown as to why we do it so at this point when we do the static props we are actually going ahead and actually doing this step right here so we're going to say okay when we're pre-building the page at this point I want to fetch some information so that way I can build this page really nicely okay what's nice is that we can pre-fetch this information in a bit of code which is what we're going to do now and then we can pass it over as something that's called props to the component so it's actually a lot simpler than it all kind of sounds right don't worry when we when we actually mess around with this it's going to be super easy guess that props now what we're going to do here is I'm going to make a call to that API so I'm going to say const and I'm going to say the explore data right so this is going to be responsible for the data that you see here so what we're going to do is this is an asynchronous function so if I make any kind of request to you know any endpoint on the internet I have to do an await right we can say a weight we're going to say fetch and this is how we basically make a fetch to an endpoint so we're going to make a fetch right and now I'm going to show you what we're actually going to pull right so in this case I'm going to go to this endpoint over here all right so I'm actually going to fetch now you can actually see what is at this endpoint if you just put in a browser this is going to go ahead and pull the following so you see this is actually pulling some Json information okay so as you can see it pulls adjacent array and this array right here contains a couple of objects and each object has an image a location and a distance all right so this is going to be eventually shown on the screen like so all right so at this point we've got image location and distance so what I want to do now is I want to pull this in so we're going to pull that information into you know our code base and then what we need to do is remember when we make a request it comes back with all this excess information the headers all these other kind of you know information that you might want to use but all we need is that Json that we can then go ahead and show on the screen so what we do is we say dot then right and then here I just say the result well the response is going to be passed and we're going to we just want the result.json okay and what that does guys is it goes ahead and it just gets us the Json information which is essentially this so now I get this inside this variable okay once we do that I need to return it to my functional component up here because this stuff is actually happening on the server anything inside of get static props get server side props whatever we do down here is happening on the server beforehand it happens at this point before we reach the actual browser because this is actually where the browser is right over here Okay so what we're going to do now is I need to return it to that functional component at the top all right so at this point I'm going to say return and what's really cool here is that you simply return it as something called props pretty much stands for properties right and what happens is this takes an object and you can pass whatever you want so I'm going to pass explore data right so the key is explorator and the value is explored here now in es6 you can go ahead and shorthand this you can go ahead and pass it back like this so what this does is is well the information that we had over at the server we pass it sorry oops we pass it to our functional component over at the browser level right so what happens now is over here we actually get props so if I wanted to go and access something I could say props do I explore there and I'll get access to this information that was rendered on the server okay what I can then do is es6 allows us to pull apart it's called destructuring if you want to know what destructuring is we cover it all in react Basics so you can go feel free check it on the skillshare link down below and that should help you out but we can go ahead and pull it apart here and say explore data so curly braces and that will pull it apart so now I don't have to write props.explore they are I just say explore data okay so at this point I have my beautiful kind of explore data coming through Okay so we've got this stuff happening here so now what I can do is I got this information on the front end so I can say explore data and now I want to do something clever I want to map through it now map is something that basically goes through all of these items that come back and it will give us each item and we can do something with the item that kind of gets shown on the screen in our case we want to render one of these components every time we run through that Loop so every time we run through the loop the way we do is we say dot map and we don't do a four each because a map returns a value so we say map so every single item we should give it a name that makes sense right in this case we're going to call it something like you know let's just say item right and this item we pass in so if you put parentheses here not curly braces parentheses it means it's going to return a bit of jsx so if I type in H1 and just say um item oops so jsx item if you put the curly bracelet allows you to have JavaScript inside your HTML so you can say item dot let's just give it a test and we say item.location now what you're gonna see guys is if I go back to my code it's going to undivise on object I'll explore the areas not so we need to make this actually um we need to actually double check something firstly so I'm going to go ahead and debug my code okay there you go I just have to refresh there you go London Manchester Liverpool but to protect yourselves you want to do something called optional chaining that means that if for whatever reason it's not there or it's undefined it will be it will handle it gracefully that's why we say it could be that might not but it's going to be there so just protect yourself now you can see it's pulling the information from our endpoint but we're rendering on the screen what you can do then is you can destructure it even further right you can get the image the location a lot of stuff away from it but I'll keep it simple I just have item for here right now rather than doing it all here and you're not having all the code over here we're going to create the small card component to represent this okay so command B go to my components and I'm going to go ahead and type in small card dot JS oops a small card dot JS underscore rfce for our boilerplate code and then inside of here what do you think I'm gonna do right so I actually want to get this information passed through so again every component in react can take props which means properties now props are basically something that remember I mentioned we can reuse these components the way we reuse it is we use the same component but we pass in different properties right so that's what the props are for these are pretty much the same way that we write an attribute to anything we pass it in the same way so in this case I want to pass in three props right now you can do it in a you know a simple way but in this case I'm going to destructure so I'm going to say the props will be image location and distance and this is because this is what they have them on the end point over here okay um so we're going to go ahead and pass these in now how do I actually really pass that through because this is on the functional component side if we go back to our index where I actually render a small card so you see we're going to do the Auto Import trick here you see small card from components where we render that out guys I can actually pass pass it through similar to an attribute so I can say the image is going to be the item dot image right then we're going to go ahead and continue on we're going to say the distance is going to be equal to the item dot distance and then we're also going to say the location is equal to item dot location okay so every time we Loop through we're going to map it to these props inside of a component that gets passed through over here and then we can use them right so that's how it works right so now what we do next is we go ahead and remember whenever you map anything inside of react you should always pass in a key a key is a unique identifier so that way when react renders out that list of things on the screen you have to do it in a clever way you have to pass a unique identifier to each of the items and that means that say we add another kind of element to that list if we don't pass the key it re-renders the entire thing now that's not a problem if you've got four things but if you've got a thousand things it becomes an issue it's not worth knowing because you become a good react developer so you're going to use something unique in our case we're just going to mess around we're going to use something like the image itself which is not the best thing but if you should be using a key right from your back end in this case we don't have something so I'm going to use the image it's okay for now but you want to use something like an ID okay so at this point you can actually perform destructuring here so if you wanted to you can actually pull out the image the distance and the location and get rid of all the item stuff here so you can clean up your code like that benefit to vs6 there you go all right test that it works right so again we don't get any error that's a good sign let's go over to small card and now we're going to build out the small card okay so what I want to do is I want to have two divs in this card I'm gonna have the left hand side I'm going to have the right hand side the left hand side is going to have an image the right hand side is going to have um the text like so okay so how do we do this firstly I'm going to need the image component from next to Js okay let's get the music back up and let's kill it guys I'm gonna go ahead and import the image tag from next image so for the small card now what we do is we're going to render two divs inside remember the left hand side so the left and the right so for the left hand side I'm going to render a div and that div is going to have an image component inside of it see how nice that was but this is going to be a self-enclosed image component now this image component is going to have a source of image right and that's actually the image that we passed through as a prop it's going to have layout fills we're going to do the same trick that we were doing earlier right this music is such a Vibe and then we're gonna say the class name I'm going to show you that afterwards because it's kind of cool all right now if I just save that okay that's horrible now why is that happening remember if we do layout fill it's going to fill the entire parent so what we need to do here is we need to say class is relative now it will fill in its relative container now it doesn't show anything because we haven't set any kind of height so I'm going to say that the div here should be a height of 16 and a width of 16. okay that's pretty cool we've got this looking nice I want to round the corners off though right so whether we have the image I'm actually going to go ahead and say rounded LG and what that will do is we can actually oops sorry I've messed that one right up we're going to go ahead and give this a class name there we go and I'm going to say rounded LG rounded LG so you've got this now we've got this explore nearby looking pretty nice looking pretty good all right so the next thing we're going to do is we're going to go ahead and add in the text okay so we can add in the right div now this is going to have a H2 element inside of it and we're gonna have a H3 as well so we're going to prepare ourselves the H2 is going to have the location and the H3 is going to have the distance okay so now you can see the London 45 minute drive Remember by default it's a block it means these containers stack up I want to make it a flex box so that way it goes by default into a row I go into my class name and say okay you should be a flexbox now it's a row I actually no sorry not this one this one should be stacked up the actual overall container should be a flexbox all right looks a lot better that way it's not centered you know this is actually not centered so what I should say here is flex items Center and that is looking a hell of a lot better okay so at this point we're going to go ahead and say the item should be centered a margin of 2 should apply it's not where everything spaces out now I want you to pay very close attention to as I make these changes look how awesome the changes are shown on the screen I'm going to say margin top should be five okay so that way space itself even more I'm gonna do space between all the X components of four so that means the text should space away from the first step the left div okay and then what we're going to do is we're going to say rounded Excel so that should round out if we have anything like a background for example which we will have I'm gonna make the cursor appoint us that way when you hover over it it's going to be a cursor pointer and now when I hover over it boom we get a nice curse of pointer but I want this super slick background you see the rounded applies there but you see I want this scaling effect okay so let's continue on so I'm going to go ahead and say cuts a pointer and then I'm actually going to say when we hover I want the background to be gray and I want it a shade of 100 so it's gonna be super subtle so there you go we get these nice kind of you know it drops in like so and remember that rounded comes into effect there we'll do rounded XL okay and now what we're gonna do is we're gonna say when we hover over it I want it to scale up so I'm gonna say hover scale I'm going to do 105 percent okay so you see now it scales up but again this one has like a really silky smooth scaling right so big big kind of you know nice nice bit of uh you know nice bit of work happening there so at this point I'm gonna say transition and we're gonna add in that transition effect so transition transform well that's because we're going to make a transform you know effect happen and we're gonna say duration should be 200. okay looking kind of cool but you know is how it's kind of different to this one right so really you want it to snap in really quickly but ease out right so what we can do is right now it's easing in easing out it's kind of I know it sounds weird but the more you work with this stuff the more you understand this if we do ease out now you'll get a very nice kind of it quickly comes in the screen and it eases out so it kind of easily Fades itself out and that is looking nice that is looking thick that looks awesome right if you're enjoying that go ahead and smash thumbs up that's damn cool crushing it guys they explore nearby moving strong the right hand side is done and with that said we're going to change the text color to text Gray 500. and we are nearly pretty much we are pretty much done there right so you see it doesn't respond the way we need it to so I'm going to go ahead and make it a bit more responsive in that aspect so this is where we're going to go ahead and actually go to a level up all right so we're done with the small card what I need to do now is where we render this out inside of index over here I'm going to go ahead and Surround our explore data so all of these things popping in with a div so I'm going to go ahead and pop this I'm going to cut it paste it in there and this div I'm going to make class names and this is going to have a grid system by default the grid automatically you see it stays in the column one column by default okay remember it's mobile first right so what by default we're going to say is columns one I'm just going to explicitly write it so you guys know what's happening okay so at this point when we hit the small breakpoint I'm gonna switch to a grid column of two right so if you see now when we get to the small breakpoint it goes to two but we don't account for any bigger size pasta right so on the smooth on the mobile it's one small it's two and then we we step up when it hits a large break Point grid columns 3. and then when I hit the extra large we're at columns four and now check this out boom box right it's not touching the bottom yet because we need to add a bit of padding and so forth but that is clean that is really clean it comes from the server looks just as we want it boom all right looking really really nice now at this point we're going to repeat this process right so if you enjoyed that I would really recommend you know maybe rewind and watch how we did the static props and stuff like that again because we're going to go ahead and repeat this now for two more things we're going to prepare for the medium section or the medium cards which are basically going to resemble this over here we're going to slightly change the siding of course and then we've got the large card over here right now the this middle one we're actually going to pull from the API so this data is different to this data this is going to be hard-coded for large card but this one is going to be poured in as well okay so continue on now down here we're gonna have another section this section is going to have H2 this H2 is going to say live anywhere all right and this is going to be basically that part there okay if we go down here he says it says live anywhere at the bottom this is going to have a styling so we're going to say class name last name equals and it's going to be text for excel and it's going to be font of semi-bold and it's going to say padding on the y-axis of eight and now you can see you live anywhere pops up very nicely okay looks pretty sleek so I need to go ahead and actually pull in that other data okay so we're going to call that data we're going to call that there um cards there we're gonna go ahead and pull from another endpoint so this endpoint is going to be slightly different this one's going to be zp1 so it's going to be forward slash zp1 from links.com it's gonna have a bit more information like this image and title so what I'm going to do is I'm going to say const cards data equals a weight Fetch and I'm going to go ahead and Pop That in right there so zp1 I'm going to say dot then I'm going to pass it to get the the Json remember if you don't pass it you get all that extra crap and we don't always want it and then how do we go ahead and pass it back to the functional component in the exact same way we go ahead and take cards data and we literally can go ahead and pull that through the component now because that comes through as a prop okay so now we have it on the front end which means that in this section over here oops I actually spelled that wrong so now what we're going to do is we're going to go ahead and say cod's data dot map again same principle applies every item that we Loop through aka the thing on the list over here we're going to go ahead and do parentheses which means return if you do a curly braces if you do this you're going to have to explicitly do this well return sorry you know explicitly return a bunch of stuff but if you do it yeah but that allows you to have additional code here if you want to but in this case we don't want that we just want to do a direct return for some jsx stuff and what I'm going to do here is actually return the medium card component which we haven't built yet so I'm going to go ahead and build this right now going to my components go ahead and create a new file called mediumcard.js underscore rfce boom and then once we're inside the hip we're gonna pull through the props the props in this case are going to be the image and the title if you're wondering where I got these from this is the data format that we get back from our API so we're going to stick with it I'm going to go ahead and import this and if you're wondering how the hell I did that go to the end of the text here Ctrl spacebar Auto Import from components medium card and you can see now I just pulled in really nice all right that's looking pretty good at this point and now what we're going to do is we've got the medium card pulling through so we're going to say item actually what I want to pull through here is the key and we're going to use the item image for that one again if you have an ID it's better in this case I'm just going to wing it with that um two images could be the same hence it's not the best key I'm just gonna be real with you in this case I'm gonna say the image that we pass through is going to be item.image and then the final one is going to be the title which is going to be the item dot title so what we're doing now is we're mapping through the values that we return back and we're going to go ahead and render them pass them through as props now again es6 you can do something called destructuring so I can go ahead and put parentheses here curly brackets say image and title get poured from that object and now I can get rid of all the item Dot there we go looks really good hit save go back to our application and now what we can see is we can see undefined is not an object blah blah blah blah where we can refresh because it needs to fetch it for the first time as fast refresh bugging out again I would recommend you still optional chain just to protect yourselves in the event that you know it doesn't work out or there's some reason uh error for pulling that information so at this point medium Cod how do I get this information actually out on the screen I'm going to go to a medium card and I'm going to go ahead and style and build out the medium card now now this is going to consist of an image and then also a title so in this case an image and the tiles are very simple okay so we're going to go ahead and pull in the image component okay so we're gonna go here pop in an image component but inside of here I'm going to pass in the image now again we're going to use layout fill and so at this point layout fill requires that we're going to have to surround it in a div all right otherwise it's going to take up the entire screen so I'm actually going to have a div with an image component inside of it and again this is a self-closing image component the source is going to be the image okay the layout is going to be the fill oops now it's going to be fill okay looking good looking good oops and then if I hit save now wait for it it's gonna freak out and it's gonna take up the entire space right again we don't want that although this dog is kind of ugly I mean I love dogs I'm a dog person let me know in the description your dog or a cat person I'm a dog person all right uh pugs are not my type I have German Shepherds and a few of those um but I always thought pugs are a bit strange anyway back to coding so for the dip here I'm going to do class name equals relative and that will actually go ahead and again restrict it to be only rendering like that for the uh that the the component or the container that is in so it's only going to use up the space it has for that container the image is now being sized relatively to its brand container Okay so Evan says dogs for sure oh yeah I did so in this case we need to set a height and a width so in this game was a height of 80 width of 80. okay hit save and now you see this look at that looks nice images right nice looks really good okay um so at this point guys oops what am I doing uh back to the thing okay at this point what we're going to do is we're going to go ahead and add in that little text underneath okay a really nice song H3 and then here we're going to put in the title okay so there you go outdoor getaways unique stays obviously what we actually want is this nice kind of scrollable Carousel you'll be really amazed at how easy it is to get from where we're at right now to that final goal stick with me you'll see that how we do that first thing I'm gonna do is I'm gonna change the starting of that text kind of boring right now I say the text on mobile views should be 2XL and we're going to keep it as actually was the margin top should be three to space out okay looks pretty nice now the overall container div I'm going to style this when we hover over it I want it to have cursor pointer okay so now when I do this there we go we hover over it and then what we're gonna do is go ahead and say hover scale 105 okay again now we get the scaling effect again look at that it doesn't look that great right now though okay it has this overlap we're gonna fix all of this I'm gonna firstly apply a nice transition transform transition duration is going to be 300 I don't want it to be super quick duration 300 and then I'm going to say ease out now remember what I said before ease out allows us to go ahead and it'll pop in really quick but as you let go of it it fades out really nicely okay so at this point looks very cool all right so this is looking very nice at this point awesome stuff right so I want to now get the layout like this to make sure we don't have this overlap and annoying issues so we're done with the medium card so the next step is go back to our index okay now inside index where we actually render out the medium cards we're going to surround all of these inside of a div okay so I'm gonna write a div I'm going to grab my card State as it gets rendered and paste it inside the div so now it's contained in another container okay and then what we're going to do here is I'm going to go ahead and say style it so we've got a class name it should be a flex box immediately a flexbox goes into a row right but you see what happens it actually extends the entire screen as that is definitely a No-No we don't want to do that okay so what I'm going to do here is first I'm going to space out the elements on the x-axis of three so not touching but again it's using up more screen than it should we don't want that so here I say overflow scroll Dev Mentor lives as dog person for sure yeah dude I agree with you I'm a dope question as well I'm not I ain't got nothing against cash but I just don't personally overflow scroll now if you see overflow Scrolls there's anything that overflows the width of the page will add this little scroll bar in and it allows us to scroll through the overflowing contents that's what we refer to as overflow okay so at this point we can go ahead now we get this nice scrollable aspect to it okay so you see we're getting there and again we actually need to add a rounded element to the medium card so I'm going to quickly add that because it's bothering me so on the image I'm gonna say class name equals and actually did I think it was medium rounded XL we did I'm gonna say round in Excel and now you can get a nice little rounded effect right now you see there's no overlap but we still don't have the nice kind of finished aspect that we want right so what I'm gonna do now is actually hide that scroll bar so you can see here there's a scroll bar no I don't want that scrub I want this kind of slick you know you just scroll with it with your your fingers as you're on your computer so what we can do here is we can actually use something called a plug-in for Tailwind so Tailwind is extensible it means we can you know people can make plugins for Tailwind then we can go ahead and add it into our own configuration file for tailwind and scoop it up even more so we're going to go ahead and add in scroll uh scroll bar height which is a plug-in for it so in order to do this we need to install Ln scroll bar height right so the way we do command J to pull up our terminal go into our second terminal and we'll do npm install Tailwind scroll bar hide okay as you can see I entered it in there this will go ahead and pull it into our project Okay so we've installed it into the project so how do I upgrade my Tailwind now so it has it right because by default we can't hide the scroll bar super easy right so what I'm going to do now is I'm going to go ahead and say in the plugins we simply type in require notice how it's an array so we can actually have more than one so I'm going to say require and I'm going to pass in Tailwind scroll bar hide so this now upgrades our Tailwind so that way we have this additional scroll bar hide functionality and you can go ahead and Google that Library if you want to have a look at it it's going to be really powerful so at this point where we've got the Overflow now I can say scroll bar hide and just like that I think it's scrollable how do we have a look it's a scroll bar hide yep it's just like that and you should this should hide so what we actually need to do is we're probably gonna need to restart our server to get that to kick in so because we've made a configuration file change I'm going to do command Ctrl C I'm going to npm run Dev to restart my server okay when I refresh and now give it a second and it should pick up the new configuration file and wait for it you should find that difference it says compiled build the page successfully go down and now we have no scroll bar looks very nice no scroll bar at the bottom anymore okay so now that we've done that obviously it's kind of you know it's a bit close to the bottom so what I'm going to do here is I'm actually going to add a little bit padding command J to hide the terminal P3 adding F3 to give it a bit of padding so it doesn't get cut off when it zooms in you see before without the padding it was getting cut off so if I get rid of that it actually Cuts itself off you see that when we so you give it a padding on the outer container to fix that and we do Dash margin left of three because I actually padded it a bit away from the left so we've correct that with a margin negative margin of three and now we have this beautiful scrolling container look at that guys looking awesome right that is looking very nice at this point and what I'm going to do now is actually show you right here look at that awesome stuff all right so we've done the live anywhere we're going to create the large card next okay so the large card is a pretty interesting one you see we're gonna build this up now it's going to be a hard-coded value we're not going to pull this through and then we're probably going to go ahead and just make this one relatively simple we're going to do command B create the large card component I've kept it very simple for you guys to go ahead and follow along with me underscore FC for our template code and inside the large card we're going to accept four props okay we're gonna accept let me go ahead and say blah blah blah we're gonna accept for the props here we're going to destructure them so we're going to basically go ahead and pull it apart I'm going to accept an image a title a description and I'm going to accept a button text okay so I'm going to make it a reusable component a large card which is reusable okay now what I do is I'll save this here go back into my code I'm going to go ahead and pop in a large card and you see we all tell import and so that way we import it over here like so super nice neat coding keep your environment clean guys but here I'll say the image is the following is going to be a nice shortened URL that I've saved for you guys so this will go ahead and make it super easy so image is like so it's going to be a nice little URL yeah awesome stuff and then so I'm up says this is live how are the zoom edits I'm literally zooming in and out on my trackpad so that's how it works everyone's always wondering how the hell did he do that that's why I'm doing it I'm gonna say the greatest Outdoors right and you know to save a bit of time I'm going to copy the description and button tags there we go and hit that boom nice so now we've got this large card obviously nothing's rendering on the screen yet so I'm going to go ahead and fix that with the image title description button text so we go over to our large code now a large card now and we need to style this up all right so this large card now the large card in itself because it's huge I'm going to make that a section now here's up to you you can make it section leave as a div whatever you really want to do that's okay I'm going to go ahead and not happen there and then what I'm going to do is I'm going to pull in the image component from nexjs image because I'm going to use that as well here I'm going to pop that in like so and then we're going to have a few things we're gonna have two divs the first dip is going to be this you know kind of image that we kind of you know again layout full fill then we're going to absolutely position this relative to the parent to get this perfect positioning okay all right so let's go ahead and add two divs the first one is for the image the second div is going to be for that text so we're gonna pop in our image over here like so and the image source is going to be the image that we passed through so it's going to be see how we're making it reusable super easy right here we say layout is fill looks really nice and then we're going to go ahead and say object fit cover remember we've done that I showed you an example of contain I showed you an example of uh cover right so we've got two examples in this case and let's see what's happening so right now it's not actually showing for some reason but we're gonna go ahead and fix that in a sec oh it is sorry it's just flown up here and that's because we need to make this relative remember whenever you do that still it's gonna be it's gonna not show it so you wanna it's going to use up the entire sort of screen size you want to make it relative to its parent to the sort of container so I'm going to say relative height of 96 and a width and actually here I want to say A Min width and this answers someone's question earlier should I say Min width 300 pixel it works with uh Dynamic Min width works with Dynamic content as well so that's pretty much what we want when it goes ahead and gets smaller is we want to get to this achievement like we're going to achieve that design okay so at this point and again if you want to extend the build feel free you know go ahead and take it as far as you want but yeah be awesome so now what we're going to do is I'm gonna go ahead and we're going to take the image which we've added a few things to here I want to make the corners rounded someone say class name is rounded 2XL okay there we go it looks really nice and we're gonna We Are that's the design language today I'm gonna make the an actual section relative as well because I'm gonna have that absolutely positioned text which floats around over here right so we have to make the parent relative otherwise I'll fly off we say py is going to be 16. that way it has padding on a top and bottom and then we say cursor pointer because I want it to be a clickable element cursor pointer looks great now we've got that nice little you know bit on top of it now here we're going to have a H3 inside of it this is gonna have the title okay so the greatest Outdoors you can see it pops in really nice we're gonna have a P tag which has the description okay and that has you know wishlist curated by Airbnb and I'm gonna have that custom get inspired button on the screen okay and then so here we're gonna have a button at the bottom of the screen so we're gonna say button and then inside that button I'm gonna say button text and that's going to be all the props that we pass through okay looks nice so I'm gonna basically get this to this very quick using Tailwind CSS so at this point I'm going to say Dev class name equals and we're going to say absolute and immediately it's going to go ahead and you know do some weird stuff like so stop weird things against the iPhone say top 32 and because it's relative to The Container if I do top zero you see how it's relative to that but we've got padding here so that's actually where it starts but top 32 gets us there we're gonna say we actually want to kind of you know left go away from the left 12 and that's how we get to this point okay so the H3 tag I'm going to go ahead and customize this we're going to say the class name equals this is going to be a bit bigger so I'm going to say text for excel okay margin bottom of three and a width of 64. and you can see now oh you know things just start to come together the P tag looks so great as it is the button text let's go ahead and make that that nice little black button so here we're going to say text should be small okay we're gonna make the text white make the make the text White and then we're going to say so text White and then we'll say BG Gray 900. okay there we go you see we've got a nice little background there so we're going to make a padding X of four a padding y of two a rounded large that way it's not so tight on the corners oh and a margin top to separate it five boom you see how like it's crazy right you get so much power when you use tailwind and it's just really fast as well like you can get all of this beautiful you know it's really really is nice you tell when so there you go that looks pretty good okay and I think that's actually the large card section done right and you see how it oh oops I'm actually resizing the wrong thing it actually looks perfect whatever size we have and then the max width kicks in for this for the overall section looks really good okay looks really really good and it's already implementing static you know generation for the data it's actually fetching this on the server beforehand and then it's going ahead and preparing the page and then it's delivering it to react so this is where you know angular and all those things like this is where nextges blows it out of the bag so react was already amazing as it is but next.js just kills it when you when you combine it in because you have all this additional power you're only delivering what the user needs hence why it's so quick it's just crazy really powerful really awesome really nice stuff the next final part of the puzzle is the footer all right the footra we're going to go ahead and Implement it's going to be actually pretty fun now if you've found it quite cool so far you're gonna find the footer a breeze right at this point what we're going to do is we're going to go back to our index file okay so I'm going to pop this in like so go to our index file and then I'm going to go underneath the main I'm just going to say underneath the main content so that's where I'll have the footer I'm going to create a photo component photo.js underscore rfce for our boilerplate code hit save so that way the file actually exists go back here enter into the text control spacebar to get a nice little import shortcut that Imports footer at the top of the page right so at this point we've got the footer coming in so the footer now we're going to go ahead and style it up okay almost there now the footer I have hard coded so it'd be super simple for you guys to go ahead and follow along this is going to consist of a bunch of different sections so one two three and four and each one is going to basically resemble so in this case we've just got it sort of you know very simply stacking up in that case otherwise it will be a four column layout there's gonna be four divs and then we're gonna go ahead and apply things to it okay so let's go ahead and do that let's make it super simple to go ahead and do that so at this point we're going to go to our div and then we're going to go ahead and say wait for it so there you go that's why it's recording so we're gonna say div and now I want to do I want to say okay so for the deer we're gonna have five dips okay so there's actually a trick here so let's say we got rid of all of this and we just put a parentheses they want to say div and that should be Times by uh so we're gonna have a div with a div inside of it Times by five there you go boom we got five divs a little shortcut all right inside the first divs we've got the first div which is the first column second div third the fourth div all right I think that's the way yeah anyway anyway it's fine is what it is so at the top we're gonna have a H5 and this one we're going to say is going to be the about section right so you see the about and that's going to be resembling this and then you've got community host support so I'm going to do one and then I'm going to copy the values in and it's going to and then you guys can feel free to copy that we're going to do five paddings uh so paragraph sorry and for each one I'm going to have a bit of text in so I'm going to go ahead and pop these in like so all right so we go ahead and hit save and you see how they stack up on top of each other now for the H5 tags in every single one we're gonna give it a class name a font bold okay so there you go it has a little bold look to it and then for the class around it's the container that we're surrounding it we're going to see a space along the y-axis of three or four is better actually here and then you can see it spaces out the Y components or sort of elements underneath it okay and now what we're going to do is we're going to say text should be extra small text should be gray and it should be 800. okay so 800 shade of 800 quite dark right so that's how we get this look and feel to it looks really nice already right so I'm going to repeat that a few times over for the other sections and this is where you can feel free to just copy them out so these ones right here I'm gonna replace with the contents like so see obviously at that point you could pause just copy out if you want and then you can go ahead and do it and I've just now added a few Easter eggs in there this is not real site it's pretty awesome clone all right and then we can go ahead and see now it Stacks up by default it's a block all right it's block elements so what we could do now is we can go ahead and go to the overall div and we can apply some styling here so class name equals and we're going to make a grid system we're gonna say on the mobile view I want it to be a columns by one so it's gonna be one column grid system but when you hit the medium break point then I want to get to the bigger columns and split into four okay so on the medium break point then we hit into four column territory so now you can see we hit the medium see that guys it goes into the medium View and then it goes ahead and splits into four columns like so right so that's quite neat when it works like that but then we've got this spacing issue so how do we fix all the spacing stuff right now the spacing issue can be fixed with the following so we're going to say uh space along the y-axis of 10 but the reason that we're actually going to use something cool here called Gap y10 and then that actually goes ahead and space it out in this case we use a square e space doesn't always support I would say space Y axis of 10 and then in here we're going to go ahead and say padding on the x-axis of 32 depending on the y-axis of 14. hit save okay and there you go and then it kind of spreads into the middle which is a lot nicer we're gonna give the background a gray so BG gray 100 and then you go it looks really nice all right text Gray of 600 text Gray of 600. there we go nice cool stuff guys all right so at this point look at that looks pretty cool now you can see this little issue here now this is a problem that happens when you're using uh space of a gap Gap is an awesome feature but it's not always supported in uh in a safari so I recommend using Gap terms because then you don't get the first element that gets spaced up so Gap and space that's the difference so you can see look at that guys looks really clean right and it goes ahead and sizes out as we need it so far guys this is the build that we've actually coded today so you can see we're pretty much done for the front end portion of this build looks absolutely incredible we've got lovely little elements here we've got lovely little animations styled you know everything was awesome look at these transitions they ease out perfectly boom beautiful silky smooth transitions going down here you can go ahead and resize and we have a Max width that gets applied even the way the picture changes everything is responsive we get this nice scrollable aspect looking really beautiful here the grid element changes here it's Dynamic and responsive fits the screen as it looks good and look at that look at the hero oh just so so clean so what we're gonna do now guys is you're going to go over to your GitHub okay you're gonna log into GitHub if you haven't got an account on GitHub create one you need to get up account it's so useful you're going to create new repository right you're gonna go down here and then you're gonna click on and let's just type in this case I'm gonna do Airbnb YouTube demo so from you guys I'm just gonna call it a demo okay now I'm going to make it a private repost that way you know it's not accessible to everyone you guys can feel it free to do the same correct repo now it's going to be a fresh repository which means you can go ahead and click copy this line down here copy it go back to your code editor and what we're essentially doing right now is we're going to push our code to GitHub GitHub is a place where we have repositories repos their code this is where code lives okay so what we can pretty much do is we can store our code on GitHub and then with virtual we can connect our GitHub account and then we can deploy that project so that's what exactly what we're going to do command J to open up our project go down to the second a second terminal and then we're going to go ahead and say we're going to say paste so we're going to paste that Commander that we just had previously from our GitHub this one here we're going to copy it paste there we go and now what you want to do is get add or so dot get add Dot and this will add all of the your full your files to your git push we call it a commit right we're gonna we're gonna commit all these files to a uh a sort of a change request for a repos we're going to commit it and then we're going to push here so it updates the repo right so I'm gonna do git status and you should see green nice if you see red just do get addo again and you're good to go at this point we're going to say git push then you should get this magic command you want to copy that paste it and you should see a push right at this point what you want to do is go back to your GitHub and refresh and you should see your code just got pushed into your project okay so this is really nice at this point actually we just pushed the initial thing we didn't actually commit so if I do get status check this out look still we didn't push it so what we actually need to do is we need to say git commit Dash M and we need to say okay let's call it a day one build so but we just pushed in the old codes we're gonna say day one build and now we do a get push and now if I refresh you should see it doesn't say two hours it should say 11 seconds there we go nice all right so check this out so you've got all of this stuff happening down here okay so we've gone ahead and pushed it to our GitHub the next step is to go ahead and go to reversal so I'm gonna go to versal.com reversal we basically create an account you then want to go ahead and connect your GitHub repo it's very simple to do so okay we're going to click on new project and I've actually connected my git repo already it's very simple to do so they have a ton of instructions all you do is connect your git repo and then you see 59 seconds ago we just pushed to this one I'm going to click import okay at this point I'm going to go ahead and click on skip for the name and then we have this now you can see it automatically detects it it's the next JS project we're going to leave all of this pretty much as it is we're going to click deploy and this is going to go ahead and deploy the application to a custom URL that versal provides for us it's going to go ahead and build in Airbnb I'm not saying vessel it's going to build our Airbnb yeah and then you can say congratulations you just deployed a new project to vessel and then hey you get this nice confetti and then you can click this and you'll have a beautiful little link so it gives you a nice deployment and they also got these bunch of other domains but the point is you want to click on any of these to come visit and you should be able to go to your actual website all right so I'm gonna go ahead and quickly sort out our coding environment boom go ahead and make this veneer okay so first step we have this as our starting point now where the hell do we actually even begin with this I guess right well when we type in over here I want that nice calendar functionality so let's have our actual application up on the side the actual finished applications that way we can have a constant comparison to it so as soon as I type in here a few things are happening first thing I'm typing in and then a calendar pops up right now this is no ordinary calendar this is a pretty jacked up calendar we have loads of different nice little functionality trades and even here you can say look two days 12 days up to today or you know two days starting today and you can change all of these things up oh sorry you know what I'm saying you get a point right you can actually go ahead and modify the dates and all sorts of stuff and you can change the number of guests and we've got a nice little you know switching kind of you know incremental counter here as well so loads of things are happening here you've got a nice little selection over here really modern looking design then we have two buttons that cancel which actually goes and eradicates your search or you can go ahead and actually go ahead and click search and we've got some Modern design here so I want to go ahead and implement this right now first thing I want to do is go over to the component that is responsible for this okay so we're going to go ahead and jump over to the header component okay because this is where the magic is actually happening so we have the header component over here now command J hide the terminal give yourself as much space as you're going to need to work on this and remember take your time enjoy this process it's all about enjoying yourself now the first step to going ahead and actually getting some functionality like this is we need to know when the user actually types in the field can you see when I type in a calendar shows up when I don't type in nothing shows up so what we're going to use here is something called State now State inside of react is simply basically think of it as a short-term memory for our components now what you can do with stay is you can go ahead and actually map the text from the input field so as the user goes ahead and types in a value we can keep track of that value now why didn't a short term because if you refresh the page that disappears now you can add something called persistence that way when you refresh it goes ahead and you know keeps it but in a lot of cases for example in a search bar you don't really care so much about persisting the value hence why react state by default is non-persistent so it will disappear after a refresh so let's go ahead and do a live demonstration of this as I mentioned before when we type in it will go ahead and keep track of the value now that allows us to then go ahead and do the things that we need to do like show a calendar okay I'm gonna go over to the start your search input field okay and the first thing that I actually want to do is I want to map this value to a piece of state now how do I make you know this so-called state so what the heck is State remember I said it's a short-term memory store but what we can essentially do is create different variables inside of that state so what I'm going to do is I'm going to go ahead and create a piece of variable or sort of you know a little bit a little variable called search input and that's going to be responsible for holding on to that value that the user types in so at this point what we're going to do in order to do that so when you're learning you know JavaScript by default you'd pretty much go ahead and do something like this you'd say search input and then you know you'd give this a default value of empty right so it'll be empty string but in inside of react you're gonna have to do something slightly different okay so inside of react we actually have to do a special sort of you know a syntax or a set a special way of writing this variable and this is basically responsible for when we go ahead and type in we have to tell react that that value just changed so that way it can refresh and show the thing on the screen in the way that we expect it to so the way that we do that is we go ahead and say const and this is going to be called something called array destructuring but we won't go into it too far all you need to know to get this working is you go ahead pop in some square brackets and we're going to give the name of the variable as the first argument so we say search input the second thing that we have is something called a SATA function so what this is if I ever want to change that special piece of you know a special variable in our state for example search input in this case I don't just go ahead and say searching for equals some text can't do that because react won't know that I've updated it so instead we have to go through a special function which allows us to modify the value when we go through that function we're basically telling react you need to now re-render that field or wherever the hell that thing is used so that's how it all works that's where the magic works the syntax or the standard for doing this is we say set search input so whatever your variable name is you just say set that's the kind of standard for it okay we're going to go ahead and say equals use State okay so this is how you get it working you say and you see it says Auto Import from react so I'm going to go ahead and Pop That in if you don't get the Auto Import that's how you pull it in from react so you go ahead and say use State and this will actually go ahead and create that variable for us and then we pass in an argument because this is a function so the way this works is you give the initial value of the search input so the search input by default is actually going to be a blank value I guess right and if you're wondering no no suddenly you start your search now that's actually the placeholder so that's actually going to be when we have an empty value so in this case we put in an empty array empty string so we've done it we've set up this piece of State okay let's check this out we've got search input we've got our modifier function and we're ready to rock and roll so let's go ahead and move we've got our search input here let's go find the input we have the input so how do we connect this new piece of state to the input that we had there's a few ways of doing it you can use a reference you can do all this other stuff today we're just going to do a simple map which basically draw imagine we're drawing a line from the input field to that variable and we're just connecting the two things okay so the first thing I want to do I'm going to say the value of the input field is going to be the value that we have inside of our search input so we just literally do a direct connection right okay seems pretty good now if I save this and I go ahead and try and type so I'm hitting the keyboard as hard as I can right now nothing's happening this is because we automatically went ahead and set it to a blank string and then we don't actually tell or react that when you change the value you should update that string so react is saying no no you are going to absolutely get stuck on that you know that value here so if I go ahead and change this to hello it's going to be absolutely stuck to hello no matter what I type okay that's not ideal so what we need to do we keep it as a blank string we go down to our input and here we say on change okay and we say equals and we can do something nice here called an arrow function okay now we don't need these little curly braces because we're only going to write one thing but this Arrow function gives us something called an event right and it's e for sure and what the event does is it actually goes ahead and every time the user types in that input field think of the computers or the browser as fi it fires off this event saying you know it has and that event has loads of information for example what the user just typed in so we can use that information to go ahead and update that search input variable so in this case we're going to say set searching but remember if I want to update you I have to use that special function so set search input I pass in the new value now in this case what is the value how do I get the value remember I said it all comes through this event so in this case we can say e dot Target dot value and that special magic keyword right here Target dot value accesses this field and says whatever the user just typed in get that value and then map it to the searching book okay so let's go ahead and save it so we did these two little lines of code here and now if you type in nice it works and what we're doing here right now is when we type in that input field it's actually updating the state in our component and again remember if I refresh it defaults back to you guessed it blank okay so at this point this is looking pretty nice it's looking pretty good so so at this point what we're going to do is we're going to use that value now if you don't believe me and you're like no sonny I don't believe that that's actually getting stored inside of a variable and you're just saying it we're going to go ahead and inspect the element okay I'm going to go ahead and inspect it right here and if you're on Safari three you're gonna have to go ahead and enable the developer tools which are in system preferences over here or in preferences or in Chrome you just have the you know inspect element I'm using Safari purely because when I'm live Chrome takes up too much RAM okay I'm going to be real with you and this slows things down but what I can do here is I can simply say okay console.log to search input because I just want to see what's going on with that variable okay so in the beginning I can see it's blank right if I go ahead and start typing that London and can you see how every single time I'm typing it goes ahead and updates the value right so look London right so now we know that that's actually getting mapped to that variable so this is a kind of a Surefire way of checking if you've actually connected the two things together okay pretty cool right so the next step is let's get that calendar popped in so now we have access to this variable so we can go ahead and do this okay so now what we can do is we need to go ahead and implement this beautiful calendar okay now don't get confused calendar goes up to this point and then this is our own code number of guests and here again we're going to keep a piece of state to keep track of the number that we go ahead and change here so we're going to use that same approach to go ahead and do that and then we've just got two buttons over here okay so we're going to go ahead and Implement all of that nice stuff right now okay so how do we go ahead and do it so what I'm going to do here is I'm going to go ahead and say if we have the search input so where do I do this we go down to where we have the right container I'm actually going to do it underneath this right container so the way that we can check this is we can go ahead and simply type in H1 and I can say hello world right and because we have a column of three it's going to go ahead and go into the next line so at this point if we had a column uh set up of three so it was one two three and then the next step naturally goes on to the first column on the second row okay so at this point we can go ahead and say we can go ahead and say um we can change this up this part to look something like this and also notice how we can actually make this conditional so I'm going to now say okay only say hello world if the search input has a value okay so the way we do this is we say if their search input has a value we by doing this we this basically means if it's not blank then so if it has a value if it's truthy this is called then render out this so at this point we can check it we can go ahead and say look if I type in okay perfect right when it's empty there's no you know there's no hello world but when I type in there is a value hello what awesome this looks really nice right and uh and this is exactly what we need to get started so what I'm now going to do is I'm going to switch this hello world up to actually have something useful in it instead I'm going to go ahead and say that we should have a div here now this div is going to have something called a date range picker inside of it right now date range picker is something that we're going to have to install so the one that I'm going to use is something called a react date range all right so reactive range is an awesome Library I'm going to show you right now we're going to go ahead and type in react date range and you can see look if we go to the GitHub page it's an awesome a well-maintained library you can tell about because it's got a nice number of stars over here as well let's head over down here and you can see an example of the actual calendar in action now you can see you get loads of different customizable parts to this calendar and here you can actually see that um you know you can have it in multiple different ways different colors in our case you know we actually started to look like Airbnb you don't need the additional things sometimes if you do again all of this is customizable through that component's props now remember we talked about props that's how we customize a component and make it reusable so so far we've actually already learned about props yesterday and we actually learned about um State already today so we're going to keep on cracking on at this pace and we're going to keep on smashing this please smash that Thumbs Up Button if you're enjoying this right now okay so you can go ahead and play with it at the live demo but I'm gonna go ahead and install that so we're going to copy this Command right here and it's not only this we need to install this actually requires that we have react and this other Library called Date FNS which is basically something called appear dependency now a peer dependency means that the component library that we're going to install relies on that so we need to install all of this stuff right so what I'm going to do is I'm going to first install this by going ahead and simply copying it go back to my code command J go to my second terminal window I'm going to go ahead and simply paste it in so npm install dash dash save react date range you don't actually need to do dash dash save anymore but um yeah so we've installed that successfully the second one npm install save or reacting to FNS even if we have react installed you know you can easily it will just it will know that it did that it's not it's not silly so we've actually installed the two dependencies that we need now you need to go ahead and install this themes and styles of that calendar if you don't install the CSS files what's going to happen is this will not look like this because this has some bass styling hence why we need to import the style into our file so what I'm going to do is I'm going to grab these two lines over here go over here up to the top command J to hide our terminal and what I love to do is I love to go back to my main terminal come on Jay and then and I'm going to go ahead and import it we've got this reactive range this style CSS and theme hit save you'll notice that nothing really changes out of the box okay this looks pretty nice and at this point you see we've actually got a class based component example here so rather than doing it this way I'm going to change it up a little bit I don't want the calendar I want the date range picker okay so I'm going to grab the date range picker like so and what I did is I looked at this and I'm very familiar with how to change the class space button into a functional so let's go ahead and grab this right here date range pickup we're gonna go ahead and grab this and then let's go down and then now what I'm going to do is I'm going to say we want to render it out inside of this the div that we had only when the search input was active okay so what I can actually do is I can say Okay render the date picker which is a self-closed component right now if we just do that then let's see what happens so what up in London oh that's not nice right it doesn't look very nice do we need to give this some values in this case well you see it doesn't have anything to work off so what we actually need to do is provide something called ranges right so the ranges here is actually something which allows it to have some initial values to work from otherwise it has no idea how to load stuff out so here what we do is we pass something in chord selection range right so I need to actually go ahead and prepare something beforehand so in here I need to pass an array with something called selection range and now selection range is the variable that we're going to create but I'm going to go up to the top of my code now and I'm actually going to go ahead and say okay const selection range is an object right so this is kind of like a configuration for the date range picker and we need to provide it with a start date okay oops start there and we need to provide it with an end date okay and we need to provide it with a key and you're probably wondering something that's not how that that's not how you write an object you're right I need to fill this one out the key is going to be something called selection and then end date and start there I need to prepare so we need to create two new pieces of state to keep track of the start date and the end day so I'm going to go ahead and create those two pieces right now we're going to create the start date variable inside of our state now remember the syntax is you write the variable and then you write set start date okay and then we say equals use State now what value do we give a start date right now in this case I'm going to give it today's value because it makes sense if you click a calendar you should be seeing today's value and then you go forward and back appropriately okay so in this case I'm going to say the default value is a new date and this actually gives us today okay I'm gonna copy this I'm going to change it to say end date so I'm gonna say set end date now we have two variables now I'm going to use these variables over here all right so I'm going to say end day and start date okay now we have our selection range so at this point we're going to go ahead and say selection range we've got we've got this nice little juicy variable here and yes you can if you've got es6 any Asics sorry you can go ahead and shorthand this but I'm just going to keep it there for Simplicity so you guys can understand what's going on we're going to grab the selection range go down here now I'm going to pass this into the ranges and we're going to click save right and I'm going to refresh and we're going to see what happens now if I hit London already look at that already now it's not centered and it hasn't got the right color scheme and that happens because we haven't got an unchanged function so we're getting there we're moving closer to the end goal but we need to go ahead and fix this these few issues that we have right so at this point I'm going to go ahead and hit Refresh on the page and we're going to go ahead and do this get rid of that right so it looks alright like this but obviously we can't interact with it so how do I fix these problems at this point what I'm going to do is I'm going to go down to our date range picker and I'm going to go ahead and include a second attribute now this one the first thing I'm going to say the Min day so I'm going to give a few attribute the minimum date is actually going to be today now think about this this means that the minimum date is actually going to be today and I think about what that means you shouldn't be able to go ahead and search for a date in the past when you're looking at Airbnb because you need to book only in the future I can't book a hotel or a house for yesterday has to be from today onwards right so that's why the minimum date is today and then we're also going to say the color scheme now the color scheme for Airbnb I actually have it here so I'm going to say the range colors and what we can do here is we can pass in an array of values now the array here we only have one color and this is going to be the Airbnb color so I've actually got this one for you so you guys can feel free to copy this but if we go ahead and pop this in that's actually the Airbnb color so if I hit save on that now you can see the range colors has turned to the nice Airbnb color okay so at this point we've got range colors a bit lower now over here we're going to go ahead and say hit save and it's all good so far I'm gonna the final part is actually the ability to go ahead and actually select it so if I try and do it now it freaks out it says on change doesn't work right so at this point we need to include something called unchange now on change now I think the music's better at that point right so at this point we're going to make a new function called handle select and what this is going to do is it's going to receive the values that the user is actually selecting and then we're going to go ahead and update the start date and the end date appropriately okay so the way this works is we create a function chord const handle select and what this does is it's an arrow function now when we do this just like we had the on change over here which had an event attached to it they've attached a few values with the handle select function what they've actually given us is the ranges that you've selected so that way we can actually go ahead and map that to the start date and end it appropriately so at this point what we can do is we can say and then think remember what happens guys it then goes ahead and actually maps that to the start date okay so to make it super clear I'll go ahead and pop this up here although it does work if we do it the other way around so at this point I can go ahead and say set the start date all right set the start date to the ranges dot selection dot start date and this syringes.selection.star that comes from the library so when we click on that map or you know on the calendar sorry this is where the value is given to us right it comes through the ranges uh sort of argument uh sort of variable and then we pass it into our state so it's updating our local state which then shows on the screen we do the same thing for the end date set end date ranges dot selection dot end date okay now we hit the sort of save button and I'm going to go ahead and refresh and then let's go ahead and type in London and now let's try and select a value okay still get it it's evaluating ranges selection start date now what is happening here and what have we done wrong let's actually look into this a bit more and figure out what is happening so we've got the handle select are we passing it down yes we are let's go ahead and actually check if we've done everything correctly as we should have done it so right now it's undefined it's not an object selection dot start day right now bear with me one second let's go ahead and try this one more time let's do London and again we get the same value now I'm going to check that the actual um the actual library that we're using is the same version as the one I've got just as a quick sort of Sanity Jack so we've got react date range 1.3 in this case I've got react date range 1.0 okay perfect so in this case we need to go ahead and actually correct this so handle date range over here and I've done simply put let me go ahead and where is it gone we're debugging right now guys we're debugging you're seeing it real time debugging it's all good this is how we do it okay so ranges selection start day right so that looks pretty good to me and let's go ahead and just double check and sand it there we go okay so what I'm actually going to do is I've got a written as an old school function I don't think that will change yet but I do want to just double check I do want to double check if this changed anything for me it shouldn't do though no so you shouldn't do that okay so thank you so much to Satoshi kawasoi says it's very helpful me to understand where I thank you from Japan amazing stuff dude amazing stuff thank you so much okay so at this point let's go ahead and do London so we need to debug this so the first thing I would do is I'll console log the ranges and let's actually see what's inside ranges when we get this on change event firing off so let's see everyone's saying selection s is in caps nope it's not actually using caps oh here it is yes there you go guys that is the problem right there all right so this selection range is actually the issue so you need a Keen Eye amazing stuff so when you're doing this you can keep this as an error function and that's the same thing as writing the old school way but the main problem there was the key that we were passing was incorrect hence why this would have had to be an S because that was the key that gets mapped here so you want to keep a lowercase when you have your keys you hit the refresh button and let's go ahead and try it one more time if we've done this right so let's go ahead and hit um London and wait for it boom ah yep start they got updated 19th yes there we go look how sick that looks guys we've got a nice updated look and feel that's awesome let's go ahead and compare this to the actual one nice we've actually got it working just like we had it over here all right and we can go ahead and Tinker with these values all works perfectly yeah nice awesome stuff guys now at this point it's still not centered so we're gonna have to style this up okay um Okay so we've got the date range picker over here and now what I'm going to do is I'm actually going to you know span this across three areas so you see this div right here well the entire header is actually grid column three and if you remember we did it over here we said Grand columns three okay which meant that it was one two three and then it went ahead and the next component will come on to the you know the next row because it's not going to fit because we only have four three columns so what happens here is we can actually make this entire div span across three columns so what I do is I say class name equals and then we're going to use our lovely utility glasses here I actually want this to be a flex box so I'm going to say Flex I want it to by default also be a column now the reason why I want that is by default remember Flex goes in a row by default when you do it so what we're going to do is we're going to make this next if span across three so that way we get it like this so what we can do here is we can say Flex column and the reason why I said column by the way is because I don't want the if I did row number of guests in that would come next to this I want it to be stacked in a column all right so what I'm going to do now is say uh column span of three okay now you can see nothing actually changes visually the reason being is because although it's taking up three columns now we need to center it with MX Auto and that says that the left and right margins will automatically configure themselves and we can go ahead and hit save and there you go now it will automatically calculate the left and right margin no matter how big the page is and we have a beautifully centered calendar picker so if you guys thought I was sick and honestly easier than you thought then go ahead and smash the thumbs up button right so let's go ahead and continue on all right so date range picker uh so what we're going to do now is I'm also going to say margin top should be zero I don't think we need this now let me go ahead and check this out I don't think we need that anymore screw that all right so at this point if you do do a margin top you can say 10 for example and it would just go ahead and push it from the top so if you do want to add spacing feel free to do so I kind of like it when it's kind of touching I think it looks kind of you know slick and it's kind of connected um Javier says go in development appreciate it dude thank you so much right so now what we're going to do is we're going to create the next section here number of guests if you notice so I said that next as the music went off that's totally not awkward so we have a number of guests over here and then we have this nice little kind of you know we have an icon we have a number here and this is actually an input field but it's a special number type okay so we're gonna go ahead and mess around with this right now so what we need to do is underneath the date range picker I'm going to create a div and that's gonna have H2 inside of it this is going to say number of guests all right and remember because it's Flex column it's no longer going to the right of it it's going underneath it right so it looks really nice the number of guests we're going to style this a little bit now what I want to do here is I want to make this let's go ahead and make this a little bit smaller there we go number of guests class name equals and this is going to say it's HD we're going to go ahead and say that this should be text of 2XL I want it to be bigger right it looks a bit boring right now so I'm going to go ahead and apply that text 2 of Excel and then we're going to say the padding on the left should be two I want it to kind of push a bit over and I want it to say it uh what am I doing I want to be no I don't want to push it over I want to say text to Excel and I want it to basically take up as much as possible of the container that ASN you see in this case this is actually separated from the component over there now you can do this many ways oops I've got some guy's face coming up there's many ways I'm just going to say Flex grow which means that this will take up the most space that it possibly can okay because we're next to it we're gonna have the input field cool and then we're going to say border uh actually no sorry we can say the font is semi bug nice semi bot nice now if I go ahead and do that boom we've already got it looking pretty nice okay pretty nice all right so we've got the H2 popped up looks pretty simple now we've also got an icon that's the users icon over here so I'm going to go ahead and pop this in now we did import that preparation for this it's a solid hero icon so we've gone ahead and popped it in here and we're going to go ahead and throw it in down here so I'm going to say it's a self-closed icon we're going to say that the class name is going to be a h of 5 so h of 5 which means height of 5 and you can now see that it's underneath okay interesting now this is because we haven't actually started the outer div now I do want this div to be a flex box so I'm going to go ahead and say this should be a flex box okay now it goes to the same it will go across in a row you see that it goes across in a row then what I can do is I can go ahead and say the items should be in the center I'm going to centralize them and I want to add a border B so a border bottom is going to be applied here and I'm also going to add a margin bottom of four because I want a little bit of space from the bottom here right so now that's looking pretty nice okay so this is looking pretty good at this point you see slight little margins a margin bottom to push it away all of these things make it really really easy and and kind of the visual aspect quite nice all right number of guests right now when that input field next so underneath the users icon input right another type the type is not text right what I'm actually going to say is the type is a number and as soon as I hit save here you can see we get this kind of core number now that's kind of huge well so I was scrolling when I was doing it that's kind of huge right now I don't want it to be that big so the way I can do it is I can set the width manually all right oh this song always gets me hyped up guys so we're going to go ahead and say class name equals width of 12 and then I'm going to go ahead and say padding left oh God I always do that I'm going to go here and say panning left of two pounding left of two texts should be large we want that number to be a bit bigger and I actually want it to have an outline of none you see right now we get this blue border I don't like that I think it looks crap so I'm gonna say outline of none and then I'm also going to change the text to a red of 400 which is like a nice kind of shade of red right it looks pretty slick and that's actually very close to the Airbnb so it pretty looks pretty good look how sick that is right now this right now if we it's not actually mapped to State okay so we don't actually have that mapping remember the value and the on change we're not mapped here okay so at this point what we're going to go ahead and do is create a number of guests piece of state which is going to track the number of guests that I enter in that input field so we're going to do the same principle that we did earlier guys we're gonna go over to the top of the file and then we say const I'm going to say number of guests and remember the syntax or the standard is set number of guests it's that number of guests and what we do here is camel casing so that's where you start off with a lowercase and then you Cam will case up which means every like sort of new word there is not spaced but it's a new capital letter and that allows us to read it a bit easier so it says use State and the typical number of guests is going to be devoted to one because you typically wouldn't book a uh you're not gonna book a you know a room for zero people are you gonna book it always for one at least we can say the default value is going to be one so now you go down to number of guests and let's go down here and what I'm going to do is I'm going to say the input there's actually going to be a value of number of guests right and I hope this is making sense right so if we go ahead and do London now you can see the default is that and again because I haven't implemented the on change you guys can see that it doesn't actually allow me to increment it but we do the same principle we say on change that fire is off an event in this case e and e we can go ahead and say set to number of guests and to get that number that the user changes we say e.target.value and that's how we get that number that the user if I hit save now go ahead and give it a try boom nice looking awesome all right and that again is being mapped into State and oh we can do that as well which we want to go ahead and actually eradicate so at that point you can actually go ahead and fix it and you can say min equals let's go ahead and say Min equals one now we should see that the user shouldn't be able to go underneath one so you do want to do that to protect the user so this is called you know we always want to kind of validate the user's input we shouldn't trust the user ever at this point we're going to go ahead and say we've got the input here we're going to go ahead and underneath this div we're going to say div and this div is going to be responsible for the two buttons now cancel and search so these two buttons are actually quite simple and I want to show you a little trick if rather than doing it like this you can go ahead and say div button times two and look at that it goes ahead and creates a div with a button times two now you are going to need to set up emit right so if you do want to do that just Google simply M it for react and then you'll be able to find it online and it's simply a little configuration that you're going to need to toggle in your settings to allow you to use Emma plenty of videos online about how to use Emmett yeah I think we actually cover it in the real Basics as well so what I'm going to do now is say div class name equals Flex because this is a flex by default we want it in a row nice and the way that we kind of give it equal spacing is we make both of them Flex grow which means they're all both going to kind of compete for the space which means that they both get equally distant spacing okay so at this point we've got the first button which is cancel we've got the second bomb which is such hit save and now you can see look they're kind of using up minimal spacing in flexbox is very conservative it doesn't want to use up more space than it needs to so we have to say you can go ahead and grow you can see that's going to push the other one to the corner and then if I go ahead and say the search also needs to grow Flex grow same as saying Flex one and then you see they battle for equal spacing okay let's go ahead and start these buttons the first one I'm going to say should be a text Gray of 500. the second Bunch be a text of red of 400 which is that nice Airbnb looking color boom already looking pretty sick guys now when I click it nothing happens with these buttons what I want is my click cancel it goes ahead and does that I want to click search it will go ahead and do the next step okay so the first one I want to do is the cancel action the way I do the cancel action this is all linked to the state so what we actually need to do is when I click cancel I need to wipe the search input State back to an empty string event says why not justify around you can use justify around if you want I'm just sharing multiple examples remember when you're styling there's several ways of doing things it's kind of opinionated you can do it however you want in this case I decided to use wax grow just to show you that you can go ahead and push it at this point we've got the two buttons here so when I click the first button so button on click what I want to happen is I want to say reset input now I haven't created this function so I'm going to go ahead and go to the top of my file I'm going to create this function over here so this is going to be search input and this is an arrow function and yes when you do write functions you can also write some something like this you can say function reset input oops oh reset input and that could literally be a function as well so sorry it could be like this that's also a valid syntax but this is the es6 way of doing it it's an arrow function it's pretty similar right don't worry about it too much now when we click the reset input button all I want to do is I want to set the search input back to its default value which was blank okay so let's go ahead and hit save now we've mapped it so if I could try this out cancel oh that happened because remember everything's connected right if I typed in a value here we have search input as populated which means we see all of the contents here because it's dependent on search input when I click that clear or reset input what we're doing is we're setting the search input to null which then goes ahead and hides it so click it goes away awesome stuff guys right really really nice so at this point what I can do is I can go ahead and say look London and now we want to implement the search now the search is where we have the more interesting stuff happening the search is going to go ahead and redirect us to the search page now the search page let me go ahead and give you a quick demonstration of what that looks like so we're going back to the main build here if I go and say London and hit search we should be redirected to another page but what we're actually going to do here is render out this page now this page notice there's a little delay that's because it's server side rendered which means it gets prepared on the server then it gets shipped to the user so it's very quick for the user's experience and it also means that the user gets the entire page at once pre-prepared it works very well you're just seeing it in the development sense so that's why I can come across slow sometimes right there's many pros and cons to doing that as well many Pros sorry so what we're going to do is we're actually going to prepare this page that way when we click that button I keep going back to the guy when we click this button we can actually send the user somewhere now remember I said yesterday inside of next.js the router is built into the actual page structure so I'm going to give you a refresher on this right so in this case when we have the home page in this case we've got localhost forward slash and this is the home page right so in this case we just come to this page now if I want to have a forward slash search okay so forward slash search then what we can do is if I try and do it now it's going to say 404 the page cannot be found firstly notice how we have a 404 page that's really awesome it's really nice it's a slick part of next shares if we haven't built the page it gives us a nice 404. if you want to customize that page you can simply make a 404.js page simple as right in this case if I want to make a search page I go to my pages folder and I literally create search.js lowercase because you want to have it if we do uppercase it's literally forward slash uppercase search but I'm going to go ahead and hit save right now we have this underscore rfce for our react functional component with an export and now this is the search page now once you're inside the file there is a standard you want to have it as a capital S because this is a component that represents the search page okay so you want to keep your standards nice and high okay so here I'm going to say H1 I am the search page okay now let's see if it actually worked right or if I'm chatting absolutely rubbish so I'm going to go ahead and say forward slash search I am the search page nice so the beautiful thing about next JS over typical just normal react remember nextges is a framework for react really nice part is it has this built-in router that I just demonstrated if you don't use nexgs you're typically going to use something called react router to make that happen and there's loads of setup involved but as you saw next year it's already done we just have to put the file in the pages folder and it works Auto magically right so it's very nice looks super crisp and it looks awesome when we do it now what's really nice about react right react remember it's component based which means inside of the search screen what we can do is we can simply go ahead and pop in our you know our other components that we actually had so at this point I'm going to go ahead and actually pop in rather than this I'm going to say let's just have the header directly rendered in now remember we actually created the header inside the components so the header is actually pre-built so at this point I can literally say okay if it's simple as you say Sunny then we should be able to type bin header Auto Import okay self-closed header and then it should come up when I hit save right boom we literally get the header hopping on this screen now that's the beautiful thing about react you can reuse the components across pages so not only do we have the power of react we have the power of next.js as well we're going to go ahead and do the following so now we want the footer at the bottom of the page as well right so I can go ahead and say the footer and then just pop that in as well now as you can see it's only going to use up this so if I want to use the entire height of the screen always I can actually say class name equals height of screen now why would I want to do that as well it's because and we actually don't sort of you know spread it out but why would I want to do that is because when we have the actual app I just want to have it scrollable as well right so I mean you can have this you may not have it it's up to you right now what I'll do is I'll put it in when we need it so that way it makes a bit of sense so at this point we're going to go ahead and implement the search page so as I mentioned yesterday it's very good to have you know meaningful HTML elements in this case we're going to use something called the main tag right which represents the main section of the page so we're going to go ahead and say this is going to be a flex section so we're going to go ahead and say this is a flex section and what I actually want to do here is I first want to have the left hand side now the reason why we have Flex is because eventually we're going to have two elements side by side we're gonna have the you know the section we're going to build today and then the map as well but today we're only going to have this so we actually have to have a section here which represents all of this so I'm going to say section okay and inside of section I'm gonna have a P tag and this oops P tag and the P tag is going to say uh let's just say 300 plus stays four you know let's just say five number of guests right and we're going to go ahead and you know actually make this the actual values that you've entered in afterwards they should actually have the dates and everything else I'm going to show you how to implement all of that in a second all right so we're going to carry on doing that so what we're going to do is we're going to I'm going to show you we're going to make that dynamic in a sec but for now it's okay right so we've got that at the top and I'm actually going to style that while we're at it we're going to say class name last name equals uh text extra small so text extra small and then over here I'm going to have a H1 and this H1 is going to represent the stays in whatever place you've entered so if I said stays in London it's gonna have as it stays in New York we're going to go ahead and just pop in some dates hit search and then it'll say New York stays in New York and so forth okay now notice that we are pulling data from an endpoint which is not going to dynamically actually search Airbnb across yeah we have a dummy m point at this point in time we can't build everything in one go but right now we will be server-side rendering those results you can naturally then go ahead and extend the API endpoints that way it accepts the location and you can pull in the information that's a challenge for you guys all right but we're going to show you how to implement everything in today's bone so H1 is going to say stays in let's just say in Mars for now so we know we have to change it right so we're going to go ahead and the class name equals and here I'll say the text should be 3XL okay text is three XL and here I'm going to say that we have a font a semi-boat oops I always do that all right font semi mode and then I'm also going to say the margin top of two because right now it's touching it I don't like that and I also want to say margin bottom of six because as you can see we also have some spacing between the underneath component now look at these we're going to build them out in a sec as well right keep it going guys keep it going so we have the H1 done now for that section we're also going to implement these buttons right so it looks very nice we're going to go ahead and actually Implement those so what I'm going to do is I'm actually going to first create the first button so I'm going to say div and then inside that div I'm going to have a P tag and that is going to actually say cancellation flexibility so these are going to be representing the filters as you see here so type replace price rims and bad more filters and you can go ahead and implement the filters if you want or use headless UI and you know take it as far as you want to go it's up to you guys if you're enjoying right now subscribe hit the like button you know what to do right now at this point what I'm going to say is you see this is actually responsive so if I go ahead and make it extremely small by default on a mobile we want to hide them right now you can make it you know have a little kind of you know a burger menu It's called like this that pops out again I'm going to leave some stuff for you guys in our case when it's on the mobile screen we hired the first it's only after a certain point that we show them so what I'm gonna do here is I'm going to say by default the class name is going to be hidden from mobile view okay now so as you can see here is hidden and then we only see it on we don't actually see it yet because we haven't set the breakpoint at which it comes in so I'm going to say on a large screen then we do an inline Flex which means that it comes in line as an element so in this case when I go to my larger screen it says cancellation flexibility okay it looks really nice at this point what I'll do is I'll actually build it out and then I'll Implement that so you can see it all the time so I'm going to go ahead and actually build out this class name okay so the first thing I want to do is actually go ahead and pop in the stars that we have here so this is going to have a padding X of two a padding y of two I actually want to make the panning X4 okay so we're going to give it a bit more padding around it and then I'm going to go ahead and say that this should actually have let's see let's give it a shadow of large when we hover over it okay uh before that we'll give it a border and if you want a border to be thin you just stay border okay in this case look we got the Border I'm gonna say rounded four oops rounded full there we go and look at that looking pretty clean already okay really nice when you hover over I want to be a cursor pointer at this point I can say cursor Dash pointer and now we have the cursor pointer when we hover over it nice and remember we have those active States so in this case I can say hover when I hover over it I want to apply a shadow of large okay looks pretty nice right that's looking pretty good I want to click it I want to say you know change the scale so that it looks like it's been clicked inward so I'm saying when you it's active so when I click scale it down to 95 okay at this point if I click it okay we get this nice clickable functionality behind it now as you can see these little subtle UI changes make the entire experience the way that we expect it when we also click we naturally expect to see the background color change as well so I'm going to make that BG gray 100 now when I click here oh look at that guys so clean so so clean all right so what I'm going to do is I'm actually going to transition it so we have a nice little you know it's not going to just be a sudden click and it goes inward I'm actually going to go ahead and make it a little bit nicer as a transition I'm going to make the transform part of that I'm going to say duration should be 100 milliseconds and it should ease out so that way it doesn't just snap right so immediately when I do it now you see there's a little quick animation to it and you see how it's like a very nice smooth experience right very very smooth experience okay so at this point we're gonna go ahead and do the following so you don't actually have to use jsx file names for this in next.js and create react app is smart enough to know that you actually use jsx it got leveled up over the over the years so that's why you can do it all right in this case we do ease out for the animation so let's continue on so we have this right now I want to kind of repeat this now you can see a problem that's going to come up and this was the problem that I first thought of when I first started using tone I was like okay if I've got loads of stars going on with one component I want to keep repeating it I'm going to get into the HTML problem where I just copy and paste a bunch of times and then I've got an issue so how do I fix that right how do we go ahead and get around that well we can go ahead and actually you know we can actually abstract this away into our own custom utility class component or sort of class name right so rather than doing this and having two P tags with the same things and you can see the problem there right where kind of you know it's highly coupled you see that we're gonna have to change everything here it's going to be super annoying and in this one we're going to have type of place type of place right so rather than doing it like this what I can actually do is I can actually create my own custom Tailwind CSS utility class so just like these I can create my own custom one the way we're going to do it is I'm going to go back to my code I'm going to minimize all the folders so you can see it I'm going to click package Json so I'm at that level of the file structure create a new folder and I'm going to call this folder Styles okay inside of this folder I'm going to actually add in something called globals.css it's going to be like a global CSS file right now inside of this CSS file I'm actually going to add in my own custom Tailwind uh utility class the way I do is I say at Tailwind and I pull in the components uh utility classes and this is how you're essentially doing it right you can feel free to actually check out Towing's documentation if you want but we need to do this first thing then what I can do is I can inject my own custom utility class into the components layer so what I do is I say at the layer of components all I could say is I can actually just start writing my own custom closet and in this case I'm going to call it button I'm gonna have it so when I add button it's going to do all of these signing things for me the way I can do is I can't just start writing Tailwind here I have to say at apply and that actually applies the Tailwind Styles and what I can do is I can go over to my header and I can take uh no no header sorry I can go up to my search page and I can take this styling over here go back to my Global and I can literally just pop it in like so okay and what this does guys is if I go ahead and hit save now right this is going to go ahead and actually create it in the way that we wanted all right so in this case we've got and it should actually syntax highlight for some reason it's not doing it right now but it's okay so in this case we've got this I'm just going to double check if I actually have I have added that incorrectly yes I have yeah in this case apply and we've got this happening here so what we then need to do is actually pour this into our application okay the way we do that to pull in the application pull it into the application is we go over to our app.js file this is like the starting point in all of our applications we go to our uh pages app.js and this is basically like the starting point for wherever the pages get built up and what we're going to do here is we're going to import and we need to point to that file so we go ahead and right now we're inside the Pages directory so I'm going to go upper level dot dot forward slash and now you can see we're upper level so I'm going to say styles and then I'm going to go into the globals.css and we're going to pull it into our you know onto our application at this point it says cannot find that file let's go ahead and double check why it can't find my stuff see what's going on here so we've got the Styles Happening Here blah blah blah can't resolve styles global.css oh that's because I've got s right you need to make it singular okay now you can see it says connect result blah blah blah let's go ahead and refresh and it's done you just need to give it a nice little refresh sometimes yep okay so now no error all good so what we can actually do if we've done this correctly we can go ahead and hide this and we can go to and the reason why you're not seeing the apply have syntax is because I deactivated the CSS uh the Tailwind intellisense because it kept blocking the page you guys should have it though I'm gonna go back to my you know search page and I'm going to change this now and just say button and notice how we have the exact same styling guys button boom we now have a reusable utility class name so what I can actually do now is I can go ahead and pull in as many of them as I want so in this case let's go ahead and say search and let's actually have the rest of them so I've got price rooms in bed and more filters and then we can go ahead and hit save and boom just like that we have a reusable utility classes from Tailwind CSS so not only do we have reusable components but we have reusable utility classes and we can create them as and when we need them so that gets over that issue whenever you might think I'm gonna have so much like you know spammed out class names well no you're not if you do it right okay that's the beauty of it if you do it correctly this stuff gets powerful guys okay so we have the type of price now I want to make this look like that now how the how do I do that right first I'm going to go ahead and go to my class and I'm actually going to say that this is going to be hidden by default right I'm going to say on the large screen it should be inline flex and then I'm going to go ahead and give it a margin bottom of five so it has some spacing underneath it right I'm not going to hit save until I'm done with the changes I'm then going to say the space between these X components should be three and they should be text Gray of 800. okay and then I'm gonna say white space no wrap and what that means is that if there is ever you know something that kind of gets extended above I actually want to kind of never wrap the text onto the new line I don't want to do that so I say no wrap white space no wrapped I do that now you can see on the small screen that's hidden because remember mobile first it's only going to appear on the larger screen and boom the reason why it applies Flex by the way is because we've done inline Flex okay so this means that it goes ahead and drops it in line and it has a flex standing property to it and boom just like that looks absolutely amazing so we've done that now the next thing I'm going to do is actually go to the section itself and I want to make this section actually have a bit of styling to it so this section resembles the box right here right and what I'm going to say to this one this should be a flex grow so you should take up as much room as possible I want the top padding to be padding of 14 and I want padding on the x-axis to be sticks so that way it's not so constrained if as soon as I hit save you're going to see that it now spaces itself out okay now you won't have this issue once we have some contents popped in right so once there's some stuff happening down here you want to you know it's all squeezed together so at this point looks pretty nice okay looks pretty good so far so what I'm actually going to do now guys is go ahead and create the search results themselves okay so the search results themselves actually what we could do at this point is we can go ahead and have the redirect functionality so firstly when I click the Airbnb logo I actually want to go back to the home page now in order to do that we have to use the router object inside of next.js now again remember I said Nexus has built-in routing so what we're going to do is we're going to tap into that and basically have it so when we click on this it takes us over to the home page now how do I do that right so I go over to my header and what I'm going to do is I'm going to go ahead and say let's go to the header file right now and I'm going to actually pull in something called the router the router is a special object much like the router that we use in react router in normal plane regular react we're going to say router equals use router this is a custom hook that they give us and you can see it has has a nice little intellisense if you didn't actually get the internal sense you imported like so and this gives us a special router object and that allows us to redirect the user to certain places so what I'm going to do is I'm going to say when the user clicks that image okay and what I'm actually going to do is I'm going to tap into the div that it's actually you know it's nested inside of a div so I'm going to go ahead and go to that demo say on click I want to go ahead and have an inline function that gets fired off I'm going to say the router should push a page and now what I want you to realize is when you do any kind of navigation in an application you are going to have something called a like sort of like a history of pages now if you push a page in so imagine I'm on the home page and I push the search page now when the user clicks back or they swipe back they're basically able to go back now how does that work it's because we have a history and you push the page on top of that history which means when you swipe back you now have the previous page that was there so that's how it works you're pushing Pages onto this history and that way you can go back if you need to okay you don't need to use use history you just use a special router object so I'm going to show you a live demo of that right now so we've got router dot push and we're going to say go to the home screen so forward slash that's the home directory okay let's give this a try let's go ahead and click Airbnb and then wait a second and it should go ahead and boom Works took us to the home screen now we aren't going to implement a little loader that will go ahead and do it the reason why you're wondering why wasn't it sudden Sonny when I use regular react it's sudden that's because we're in developer mode right now for next.js which means that it's actually building out the page every time when we do it when we actually deploy the app it's going to be sudden because those pages get pre-built before deployment especially if we're using get static props if we're doing get server side rendering we're doing service already it's brought in every request but we're going to that in further detail in a bit so at this point what we're going to do is we're going to go ahead and actually have it so that when I click on London and I do something like this and I click search I want to redirect the user to the search page now okay so what I'm going to do here guys is I'm going to go over to my home page which is index.js and then I'm going to go ahead and do that's the way it's for it let's go over to my Index right now and I'm gonna go over to to do my search now where the hell is my search my index page oh sorry it's in my header I was wondering I was like where am I going all right yeah we have the header input there we go so we have the input over here right this is where everything gets rendered out now when we click the search I'm going to go ahead and Trigger off a function so I'll say on click and then when we do that I want the following to happen I want to search function to go ahead and get fired off so this is simply going to be called you know naturally it's going to be called search all right so I'm going to create this search function now go up to the top of my file outside the return block and here I'm going to say const search right and we have access to the router because we pulled in the user router a hook which allowed us to have it okay and then what we're going to say is bossler says will you show how to deploy to web I actually showed you yesterday but I will be redeploying today as well so stay tuned if you want to find that out okay so at this point what I need to do is I'm going to say router dot push and I can go ahead and do the same thing I can go ahead and say forward slash search all right so that in theory works if I click this now it goes ahead and takes me to the search page which is pretty sick that's the first step right do that see if it works boom your reap your page ring was but I mentioned before that we want the dynamic information that the user entered in the previous screen to go ahead and pass through to the next screen okay so you can do this in many ways yes you can use something like Redux or whatever but this is beginner friendly so what we're going to do is and this is actually a pro to doing it this way as well right so I'm going to show you exactly how we're going to do it without any of that heavyweight Redux stuff right at the moment so we're gonna go ahead and keep it very simple right now we're gonna go back to the home page I'm gonna say London boom boom and then before I click search rather than just doing a basic redirect what I can do here is I can pass in an object and I can say the path name the path name is actually going to be forward slash search and I see loads of people asking yo why don't you just use the next shares link component this is why because we're going to say you know push to the path name but we're also going to go ahead and pass in a few query parameters right now what is a query parameter what the hell does that mean so if we look at the actual final build what you're going to notice is if I go ahead and do for example let's just say I want to go to London and I'm going to go to let's just say 9th to the 20th with two guests and I click search now this is going to go ahead and load up the search page and ignore the map for now because we're going to build that tomorrow but if you see inside the URL right now it actually says it says forward slash search and then it has something called query parameters and here you can see we've got actually got all of our variables being passed through now why is there a benefit to doing this right so we've got start day ending and a bunch of other stuff why is there a benefit to doing it in that way right because think about it what you can then do is you can share the URL to someone else and they can actually have your search results dynamically loaded whereas if you use redox you're not able to do that right so this is extremely powerful for that exact reason okay so let's continue on all right let's go back to our actual application now let me go ahead and go back to our app over here so we've got search and what we're going to do is we're going to pass in a few parameters at this point so we're going to say the location parameter which is going to be it's going to say location in the URL we're going to say that is going to get mapped to the search input okay so the search input so now if we try out we're going to see that we're going to go to search and you're going to see that it went ahead and took us to the search page sure but now you can see it's got four uh question mark location equals London so you can see we're actually passing it through it might be super small but right now that says forward slash search question mark location equals London that's called a query parameter okay at this point what we're going to do is we're going to say the start date is actually going to be the start date now you can't actually just simply pass in a date object it needs to be a string so what I'm going to do here is I'm going to say dot two and then you see we get these different transformation functions so in this case if I say to ISO string this will give me a string representation that I can use inside the the URL I'm going to say to ISO string okay and we'll do the same thing for end day now what you can see is if I go ahead and show you this dot dot two ISO string and there's loads of different ones but to Json all sorts and then what we can do is you're not now going to say I'm also going to pass in one of my number of guests okay hit the save button and now let's go back to Airbnb and let's go ahead and do let's just say London or I'm just going to test it let's just say Mars 9 19 and let's just change this to three and click and search okay now what we see is we see this little URL it says forward slash location equals Mars and start their equals we've got a string representation of the day and end date and we've got the string representation of the ende and number of guests equals three so you can see now we're passing over the variables to through the URL when we redirect the user okay so let's continue on all right so now what we're going to do guys is we need to go ahead and go for inside of our search page I now need to grab those variables right so how do I actually get the variables from the search sort of URL so from the actual page URL how the hell does that work right so the way that we do this now is we go over to our search page and we need access to our router object so what I'm actually going to do is you guessed it I'm going to go up to the top and I'm going to say const Rooter equals use router so this is why we love hooks we've gone ahead and import at the top constant router equals use router and inside of router we have access to something called router.query okay so at this point if I go ahead and say router dot query you can now see if I go ahead and console log this so console.logruta dot query and go ahead and you know I'm actually going to do a quick search let's go ahead and say London um let's just make sure we can say Pluto so you guys know I'm not lying 8th to Tenth I'm gonna say four guests search okay and now if I go ahead and inspect so I get my console up you're gonna now see if I go to my console you're gonna see an object okay now this object you can see has the end date location Pluto number of guests four and the start date so you can see we've successfully pulled it through using router.query okay so at this point now we have access to the variables okay so when we have access to the variables we can actually go ahead and do something called destructuring to go ahead and get access to actually separate them all as variables so what I'm going to do here is I'm going to say const and I'm going to say pull out each one so I'm going to say the location the start date uh the end date the number let's go ahead and do it let's just say location start date end date and also number of guests and that's going to get pulled from router.query okay and if you're wondering what this is this is basically saves us time so we don't have to say dot location so we don't now have to say router.query dot start date router.query dot end date now I've pulled out each of them so now if I want the location I can simply go ahead and say console.log location this is called something called es6 destructuring all right this is the yesterday you can feel free to read up on it afterwards as well okay now you can check if the variables are no and redirect them away from the page sure all right so you can do that as an extension I'm going to go ahead and show you right now how to just go ahead and show it on the screen okay but very good uh I'm actually checking on that as well really nice okay let's continue on so I'm gonna go ahead and we've got access to the variables now so if that's actually what is happening now surely I can actually go ahead and say on the screen the location right so now if we go ahead and say stays in and we change that to the location now you can see it says stays in Pluto okay let's double check it so I think you know you may be lying to me let's go ahead and go to New York okay 9th to the 12th and then let's click search stays in New York now all the other data needs to be changed but this is actually working okay so at this point now what we're going to do is I'm going to go ahead and correct the rest of the deal okay we've got 300 stays for five number of guests so in this case I can say number of guests here number of guests and that will now pull in the actual number two guests okay nice and in this case rather than saying you know stays for this many guests I'm just going to say guests right so there you go that's a bit cleaner and then here we're also going to say 300 stays and then we're gonna put the range so we're gonna have the start date and end date here now I'm gonna need the range in a couple of locations right I won't actually want to have the ranges so rather than saying start day end date blah blah blah I'm gonna create a nice little variable for us which compiles this for us ourselves so firstly I need to format the start date and end date because remember we compiled it into that little string so remember that string that we actually got back over here it's like this messy string right here it's a kind of a horrible string we don't want to show that on the screen so instead now what I do is I say const formatted formatted start date equals right and I'm going to go ahead and use a special format function I'm going to pull in the format function from a special Library called Date FNS we actually installed this when we set up the date picker okay so I'm going to go ahead and use this format function we'll say format I'm going to say new date so I'm going to go ahead and put like you know build out a date object and I'm going to say the date we're going to pass in the start date so it's going to go ahead and create a date object from the start date so it will give us the date and we actually push that and make it an object now and then what I'm going to say is actually as an as an argument here so you see format is taking two arguments the first one is the object and the second one is the sort of you know the actual sort of formatting that I want to apply to the date so in this case you can actually pass you know some syntax here so I'm going to say it should be the date date the month month month which will actually say you know in text what the month is and then the year yeah and you can look into this if you want more you know details as to how that works but you can go ahead and check on the format um day FNS documentation if you want to have a look as to how you can actually customize that more it's actually very you can customize it quite a few ways then we're going to do the same for the end date format and then there equals new format format New Day end date same thing and I'm then I'm going to create a string from these two values I'm gonna say the range is going to be back ticks backticks allows us to include JavaScript in a string so it's called string interpolation nation and then here I go ahead and say if I want to include a variable so I can have some you know random text there or I can have a JavaScript variable and say have the first date and then have a dash and then have the formatted end date formatted end date there we go okay I want to show the range on the screen so now I can go ahead and pop the range in here and just like that it will now say 300 plus days 9th of August 21 to the 12th of August 21 but two guests very nice right looks very very slick okay so that is exactly how we see it here that's how we're now pulling it through okay so we're now going to go ahead and create the little placeholder that you see here now how the hell did I do that okay so in order to get the placeholder sort of customized we have to actually add an additional prop to our header right so by default you know it's always going to say start your search and uh yeah we've got the header here what I'm actually going to do is I'm going to include a special prop so Props come through like this for react right we can destructure props to go ahead and pull out the objects or the sort of you know keys that we want from the object so in this case I'm going to include a new prop here so I'm gonna you know rather than saying prop stop place order I can actually destruction like say we're going to include a new placeholder prop okay now this placeholder pop is not going to be required but if it is passed through for example in this case I'm going to go ahead and say you know I want the actual placeholder to be whatever you know some of the some information about the actual States in this case London 9th of August blah blah blah so in this case I'm going to say the placeholder is actually going to be equal to and then I'm going to do back ticks because I want to string interpolate here all right so now we're going to go ahead and say location yeah and I'm going to go ahead and say you know a little line pipe and then we'll say range you see why the range came in clutch here right and then we're going to go ahead and say pipe and then I'm gonna go and say number of guests number of guests okay let's continue on all right so at this point let's go ahead and hit the number of oh God what is that number of guests yeah and then here I'll say guests okay so hit save and nothing happened now the reason why nothing happened is when actually using the prop over here okay all right so play soda right here now what I'm going to do is if we have the placeholder I'm going to use it inside of the header component now how the hell do I do that I go down to where we have the search itself so if I go down here to the middle section where we have the search I can actually say well we just say start your search I can put some curly braces around it and I can say okay this is actually a nice little function or a nice little kind of you know operator in JavaScript that you can say use the placeholder or so two pipes means or so if it if there is no value for placeholder it will default to this but if we do provide a value it would use this so this is kind of a nice way of doing it I'm going to hit save and now you can see look at that New York 9th of August 12th and it has the dates and then two guests and I can type in perfect all right and remember because it's all oh it just works so nicely and you can actually continue to use that function as a very London pick another date so like six so this blow along to hit search now we will go ahead and actually redirect us here as well and we might actually want to close that afterwards as well that might actually be a nice little additional feature that we can do right in this case it says London 6th of August and so forth okay all right so at this point we're now going to go ahead and server side render some information so we have that Dynamic information pulled through which is pretty cool right if you guys learned something new there you can go ahead and actually say that so you can actually go ahead and check it in the comments right now so there we go we've got this work in London science to this let's go ahead and say seven and such and now you can see London 1926 seven guests and we've got all the information here stays in London perfect looking juicy right I do want to actually Implement that loading indicator at the end remind me to do it right when we get to the end but let's go ahead and server side render that information now remember server side rendering is basically preparing it before it reaches the user's browser so remember in xjs there is a middle server right when typical react without next.js the entire bundle is delivered to the user when they load the page in next JS we have this middle server which basically can process requests so now when the user comes to the search page I can use the information that we get you know at the URL and all that other stuff to build the page beforehand get all the search results and so forth and then deliver the entire page to the user without having it so that the user sees us loading kind of crap and then it just you know I want to use this now when they go to the webpage Boom the whole page is loaded that's why we use server-side rendering it's sick trust me and that's why Google loves it as well because those robots when they come to your website they're going to get all the information at once as opposed to a little loader okay so at this point remember yesterday we used get static props now what we're going to actually do here is we're going to use get server side props the main difference between these two things is get server-side props means that every single time a user comes to the search page it's going to go ahead and rebuild that page per request so it uses that server every time a request comes in right so in search page we're going to do that on the home page we use get static props that meant that when we deploy the app that's when the page gets built and then every user that comes afterwards goes ahead and gets that version of the page which means it's immediately available but the danger with that is the information can get outdated now there is something called incremental stack generation which I teach in zero to full stack hero but for today we're going to leave it with static props and get server side props okay so let's continue on so we're going to go ahead and actually server side render so to implement service that I'm rendering you go down to the bottom of the file and all we have to do is include a special function then next.js knows how to do that little kind of middle server rendering step so this is an asynchronous function if you go ahead and say function get server side props and remember go on to you know have a look on online as to what what actually this means if you want to go and check out check out xgs documentation you can get something called the context here which allows us to get things like you know the query parameters like the router query in this case we have dummy return information from an API that I provide but again you can extend this app and do whatever you want to do that's you know it's up to you that's why I told you about the context object at this point we're going to say const search results now I'm going to go ahead and fetch them from an API so I'm going to say await fetch right and the search results I've nicely gone ahead and popped into this URL it's links to copyright forward slash i s z so if I go to this right now you're going to see that we actually get a nice like little returned object I don't know why there's a monkey in the corner but now you can see there you can see that you get an image you get this object it's an array of objects right so check this out so now you can go ahead and see image location title description star price total longitude and latitude now the longitude and latitude is going to be very useful for tomorrow okay but what we're going to do is we're going to use that in tomorrow's bird we're going to use the rest of the information to actually render out what we see over here okay so let's go ahead and actually get this built out okay so at this point we get the results and then in order to actually get you know when we do a fetch we actually get a bunch of other information we get like what type of you know in this case it's a get request that we're making we get a bunch of headers and all this other stuff if I just want the response.json if I want the Json object that comes back which stands for JavaScript object and you get notational stuff so it's basically JavaScript object then you can say then pass the response as a res dot Json so this gives me back the Json object that we saw over there right and this is basically allowing us to wait for it to come back its passes it and search results comes through here so this will now have that Json file that you saw over there okay whenever you use a weight you do need to have an asynchronous function it does not work if you do if this was like this it doesn't work okay so then when we once we've got this how do I return it to the actual page right so this all of this stuff is happening on that server step in between what happens how do we actually pass it back to the page we say return and then we say props so we saw this year when we did the home page what I'm going to say here is search results now again you know if you've got uh es6 allows us to shorthand this if the key in value is the same so in this case I can just say return the search results okay so how do we get access to these search results on the actual page okay how the hell does that work so what I can do now is I go over to my search page and I actually pass through the props I can destructure the props and I can get the search results out of here this has that nice juicy object that we saw previously okay so I can now use that object to render out all of this information okay that's pretty cool now if you're probably wondering something I want to see proof I don't believe you dude that's could be a lie you know you don't you know you don't know how to trust people these days so I'm gonna go ahead and prove it to you I'm going to unlock the result so let's go and inspect the elements let's go ahead and pop this out let's just say inspect element okay and then I do console and now you can see there's an array of seven that gets returned and as you can see it has all the information the description image latitude longitude location Price Star title and total all right so this is sick it's coming through it works okay so search results at this point we're going to go ahead and jump down to underneath the div that we had over it so we're still inside that section okay but I'm actually gonna be um let's have a look let's have a look so we've got the div over here but I'm actually going to go ahead and pop in a a map so I'm going to do a map here our map is how we go through an array and you know return some screens on uh some return something on the screen so I'm going to go ahead and say jsx those color braces search results.mat okay now for every time we map through the item so in this case it's going to be the actual search result so in this case search results is an array the singular item is such result or you can just say item right I'm going to do a direct return now in this case a lot of you may slip up here because you end up using curly braces be careful if you want to return the jsx object you use the parentheses directly if you want to have several lines of code put the curly braces and then you have to return the parentheses afterwards okay that's just something you need to know all right so I'm going to go ahead and actually create a component to represent each of these things these are gonna this is gonna be cool let's call it the info card okay so it's gonna be the info card component okay so at this point I'm going to go ahead and say um I'm going to create a component here and I'm going to call it the info card.js okay underscore rfce to prepare it nice right we've got that working pretty good now this is going to accept all of the props that we actually got previously right so this is actually going to be you know the image location title description all that stuff that came through so we're going to do destructuring and I'm going to go ahead and pass in the property so we're preparing ourselves to get this thing ready for so that we can we can push the information through it so we go back to our search page and here I'm going to go ahead and say you know info card that we're going to render each info card out and you see it Auto Imports it at the top info card and then I'm going to go ahead and say all right we are rendering out now I'm going to pass through all the props info card so at this point for the info card I love this track man these songs get me hyped when I'm coding all right so I'm gonna go down to the search and what I'm gonna do here is I'm gonna pass in all the different items so we've actually got a bunch of things here we've got things like you know the image equals the item dot image and if you're wondering where the hell is he mapping this stuff to it's basically mapping to the response that we get back so it's the item dot image all right now this is going to continue on we've got location equals item dot location so forth now you can see there's a kind of an annoying thing we have to do item dot item dot item dot right so at this point what we want to do instead is destructure the item and get all of the things that we need out at that point right so what I can do here is I can go ahead and pull apart here and I can say give me all of those props this is Destructor see why destructuring comes in like clutch right so uh we're gonna go ahead and say this now we don't have to say item dot item dot right so at this point it's pretty simple we can go ahead and pop those through like this a location image and so forth now whenever we're mapping through we should always have a key in this case you should be using an ID right or something a unique identifier something which I would say is actually a very like a better unique identifier in this case would be like the longitude latitude but in this case I would say just I'm going to use the image I know it's not the best one it's just for a demonstration but you should really have an identifier here that would be a unique to that component that allows you to go ahead and map through it easier okay so at this point that looks pretty nice okay I'm gonna surround all these search results in a div which is going to be a flex box okay so I'm going to get all these search results and I'm gonna pop it inside of a div I'm gonna then style and just say flexbox Okay so remember flexbox by default defaults to a row this is not a row obviously I want it to be a column so I want to say Flex column okay so we're done joking you don't see anything on the screen that's because info card's empty so we're passing all the props through but nothing renders out on the info card so this is where we build out the info card now at this point we're going to pull in the next JS image component because we're going to need to render an image and what we're building right now if you're tuning in new we're actually building out this card right here we're gonna build out that beautiful card so at this point I want to actually have a div with the card because if you remember when we do the image component we make it layout fill and then we sort of you know wrap it in the container so that way we can put the shape on it and all that stuff so I'm gonna have a div with an image component inside of it okay the image component is a self-close component the source of the image is going to be the image that we pass through as a prop so if I go ahead and hit save it says whoa whoa whoa you have to use width and height now remember this is because next.js does some clever compression to the image beforehand okay so now we have to go ahead and prepare next year so you can either pass in width or high or you can make layout fill I'm gonna make layout fill and I've got the surrounding div to go ahead and make the styling and be applied appropriately so if I do layout fill now you're going to see it's actually going to spam the entire size of the screen now we don't want that right and it's just going to pop in as it loads that's not ideal right that's really not ideal so what we can do here is we can go ahead and firstly I don't want it to you know lose its distort I don't want to distort like that so I'm going to say object fit should be cover this means it will just zoom into the image rather than distort it okay looks a little bit better but it's still awful right so I'm going to go to the actual class name which is for the div surrounding it I'm going to say it's relative this means that the image inside is now relative to the size of the container right now it disappears this is because we have to define the height right so in this case I'm going to say the height is 24 and the width is actually 40. it's safe now what you're going to see on the screen in just a second is everything load up all right so we see all these images being popped on the screen in a very nice fashion I24 and width of 40. at this point I'm going to go ahead and say on a medium screen remember this is mobile first but on the medium view I want the width to grow I want it to be a height of 52 on the medium screen and on the medium screen I also want it to be a width of let's say 80 I want these pictures to grow when we have more real estate right I also don't want to shrink them so I'm going to say Flex shrink of zero this actually you can look into Flex shrink a bit more but this means that they won't shrink if you know if they if they have to I'm actually going to prevent that so now you see if I go ahead and make it smaller after we hit the medium screen break point it gets a bit bigger nice right that looks pretty good so underneath that div now so the next step is we're gonna have this text now remember when we're building this stuff out right you want to go ahead and compare oops I've got that from yesterday you want to go ahead and actually you know componentize everything so this in itself is a div okay we've already done the image div over here so this is a div and then the overall bloody thing is a div as well right so this is actual info card div that surrounds everything all right so this is how you want to kind of visualize it beforehand so we've done this div on the left hand side that is actually done now we're going to build out this div over here okay so what we're going to do now is we're going to go ahead and do the funnel I'm going to say div okay and that's going to have a different side of it right now I'm going to show you why it's going to have a different side of it because what we're doing is we're separating a few things the top div is going to have private room and center of London and then it's going to have flexbox spacing with a heart at the end of it okay so I'm going to show you how we do that so we've got the div here we've got a P tag which says the location all right so this one is going to say the location so in this case it says private room and center of London so if we go ahead and do that you can see private room in the center of London all of them have the same location in this case right and then what we can do is we can do after I change that to be honest I thought it was actually different but interesting okay anyway um so what I'm actually gonna do now is I'm actually going to pull in a heart icon so we're going to pull in a few of the icons beforehand so that way we have them ready two icons heart icon from the outline variant and star I come from the solid variant okay and you can go ahead and see here we've got the star down here and the heart over there so we're going to go ahead and use that right so at this point we've got the location here working nicely we actually want to pass in a height icon and this heart icon I'm going to go ahead and say the class name should be a height of seven and I want the cursor to be a pointer so cursor Dash pointer right so now you can see look looks pretty nice but again I want that to actually spread across like that how do I do that I make it a flexbox so it defaults to a row and then I say justify between which spaces it out between it right so I'm going to show you that in real time we'll say class name equals Flex that will put into a row you see in just a second it's going to go next to it any second now any second now there we go yeah and then we're gonna say justify between and then we're gonna that will actually space it out so that way it flies across uses up the space it justifies some space between it okay the overall div that surrounds everything I'm gonna actually style that one a little bit as well I'm gonna say that this class name and this is actually going to reassemble this part of the div here I want that to be a column a flexbox column and then that way everything Stacks up on top of each other so I'm going to say this is a flex Flex column okay and we're gonna say that that should grow so Flex grow I'm padding left of five so if as soon as I hit save now you can see a few things take action right now the reason why it kind of looks a bit weird right now so that's the padding left I just applied is because the overall div we haven't actually applied a star to it right so if we go to the surrounding div and we say that that's a flex box this will go into a row as opposed to a column and now it will move to the right hand side of it okay this is why it goes into a row instead of a column okay so at this point we've got the a few things looking pretty nice we're gonna then have a H4 which has the title and that's actually going to be you know the room that we're looking at so in this case we go ahead and Pop That in it says independent luxury Studio stay at the spacious Edwardian house now these look exactly as the same as the rest attack so I'm going to make it say text Excel and now you can see if this should go ahead and look a bit bigger as well we should be able to have it you know there we go they're starting to look a bit nicer okay The Next Step that we're going to do is we're going to go ahead and say we're going to have a div and this div is actually going to be a line of its own so you see this div here if you just want to have a little independent line with tell when you can do a nice little trick here right you can actually just have a little div and I will have a little wall break in a sec thank you Andre I'm gonna have this I'm gonna say a little div self enclosed and I'm going to say class name equals and this is a very nice trick by the way we're going to say border bottom for this little div the width is going to be 10 okay and I'm going to say the padding on the top should be two now you're going to see a nice little line which is resembled from a div so that's the nice thing you can do about Tailwind CSS we've got the div in play next step is to get the P tag which has the description so okay so we're going to put in the description here so jsx description and then let's go ahead and save that P tag should have a class name which is so now you can see it's a little bit squashed up right now so I'm going to go ahead and save that afterwards and we'll go ahead and repair it and you know make it responsive as it needs to be but for now I'm going to say that that description text should be padding top of two it should also say the text should be small this is quite a lot of text right so we're going to make that small text we're also going to say the text should be gray and it should be a shade of gray which is the 500. I think it's 500 yeah let's do 500 and we're going to say Flex grow I want it to take up as much space as it can in its container that it has okay that's looking pretty good looks a bit more bearable still not that nice on the small screen we're going to make it look a bit better right so let's continue on so we've got the P tag looking nice okay so then the next thing we're going to do is have the div now the next div is going to be responsible for this we've got the star on the left and then we've got another div over here which has 30 pound a knight 117 total so you can think of everything in terms of boxes right we've got a box around here a left side for the div and this one on the right so what we're going to do now is we're going to have a div to resemble that okay and on this one we're gonna have a P tag for the star this is going to be for the little star icon over here the storm icon is going to say star icon here we're going to say height of five and the text should be red with a shade of 400 let's hit save and see what happens there you go pops down to the bottom the reason why it's at the bottom by the way is because the P tag above it is flex Grill and we're in a flex column structure which means it's growing taking up majority of the space and that allows it to push to the bottom that's how we managed to achieve that okay now the P tag over here I'm going to go ahead and say just I'm going to pop in the star next to it because it's actually already A P tag now you can see that this happens right so we can actually go ahead and if we've got two child elements inside of a P tag we can actually say that the P tag itself is a flex all right style and we can actually Center the items you see is it slightly off at the moment because the items Center and this actually allows it to center it looks pretty nice all right we're doing pretty nice at this point all right and then we've got that bit now we also want to have the money part so that's going to be a div and we're going to have two P tags inside of it so P times two so I just typed in div with a p times two inside of it and then enter and then that's Emmet for the win the first one's gonna have the price the second one's gonna have the total okay now you can see it pops in underneath so we're going to get that to that now how the hell is that gonna happen right firstly I'm going to go to the surrounding div okay and then the surrounding div I'm going to say it should be a class name where it's Flex okay and that means that it will now go into a row these two containers right just taking a second to update give it a second now you can see it goes into a row then what we're going to do is we're going to say that this should be justifying the space between it so this will push the two elements the star and the price apart okay so once we've done that then you can now see that we've got the two items applying I'm also going to say items n to push it to the end in case it wasn't already which is but it's just safe and there's a padding top of five and that would actually give it a little bit more padding so it pushes down over on this side okay looking pretty nice at this point okay looking pretty good at this point now we're going to style the price and the total friends and totals they look a bit weird we're gonna go get the price first and we're gonna say the price should be text large okay and then we're gonna say the font should be semi-bold and I'm also going to do padding bottom of two hit save on that now you can see that now it looks a bit bigger for the text but also I want to say on a large screen I want the text to actually be 2XL because we want to use up the real estate when we can 2XL sorry okay now let's see as we get into a large screen you see that price got a little bit bigger that's a lot nicer right awesome looking a lot better then we're going to go ahead and install the next P tag the P tag over here here we're going to say the text should be right and that means it will push it to align right so now it's at the edge of the screen nice and then here we're going to say the font should be extra light because we want to you know we don't have a light a little kind of touch on that right so now you can see extra light little details guys little details look so clean okay everything looks crammed as hell it doesn't look good in mobile view yet we still need to fix all that but all the information is on the screen okay and we also want the hover effects how do I get these hover effects yeah so let's go up to the surrounding div now for the invoke card okay it's surrounding div info card now I'm gonna do padding y of seven hit save padding X of two to go ahead and add some additional padding from the sides as soon as I do that you're going to see that we have a little bit more spacing now which already looks a hell of a lot better I'm gonna add a border bottom to each info card right and I'm going to hit save every time I do it so that way you guys can see it pop in and we'll do cursor pointer and now you can see we've got the Border bottom cursor point to allow us to have the cursor pointer kick in and already looking a hell of a lot better okay so what I'm also going to do now is when I'm going to say hover opacity so when I hover the opacity of the container should become 80 percent okay now when you see that look that gives you a very nice and if you see that look very subtle but nice effect on the screen the next thing I'm gonna do is I'm gonna say when we hover there should be a shadow LG right so Shadow LG one second we're back on um Shadow yep shadow LG right uh at this point Shadow LG so if I go here there you go look at that shadow large and then you see the little subtle details you can add additional padding on the right as well it looks a bit close to be honest so you can add in like if you wanted you could do padding right of like you know four and that would pad you a little bit more and that looks a bit cleaner right so that looks already a hell of a lot better guys all right we're just some padding some Shadow when we hover and so forth now again we don't want it to just snap right we want this kind of you know the graceful elegant transition so what we can do now is I can go over here and I can actually say transition and I can say duration 200. all right duration 200 is out and then I can say okay that looks pretty good now what if only for the first child in the list I want to give a border top so you know in this case only the first one I want to give a border top I don't want it for the rest of it I just want the first one to have it you've got a very handy modifier here called first this will Target the first child in a list of elements and we can go ahead and say for the first one I'm going to give it a border top okay and then now you'll see it doesn't add it to everyone it only adds it to the first child to prove that that actually works I can say first oh God damn it first BG red five one just to show you that that's going to work only for the first one right so you see it actually works in a very nice way so in this case we're going to apply the Border top nice all right it looks really really cool there you go it actually did apply opacity to the text it's just very subtle you look at that it's actually applying a opacity there right so it does apply it to everything but we have one slight change now you're probably wondering where the hell is it changed it's actually when we go ahead and click a new screen we want it to go ahead and have the loading indicator so in this case you can't see it here but let's go to the actual final build and let's go ahead and click search and um we haven't actually got here but I want to have a nice little loading indicator at the top so you see that little red bar that flew across now I want to have that so we've only got the loading indicator to go ahead and pop in actually tell the user that something is loading right so how the hell do we do that okay oh we're missing the Border radius good shot good shot someone called me out I need to be called out right so go to the div with the image container and let's go to the actual image itself go ahead and add in a class name thank you so much for doing that by the way let's say rounded 2XL and then let's go ahead and pop down and that is the icing on the cake right now give it a second boom it pops in look at that very nice very very nice all right look at that guys oh looks slick okay looks very nice and remember it has those responsive kind of you know buttons let's go ahead and add in the loading indicator so and then the loading indicator all we need to do now is let's go over to app.js that's because that this with the loading indicator is going to actually you know take effect across the entire application the loading indicator is essentially when the user transitions to another page rather than them kind of seeing nothing happen on the page I want a little red bar to go across that will actually go ahead and you know update depending on the router's state so when it changes it will go ahead and update the uh the sword you know it will show that loading indicator fly across so let's go ahead and Implement that so at this point what we can do is we can go ahead and check out something called and it's actually from a very nice library from this dude over here so it's bad rap bar of progress this one or right here okay so there's a lot of examples as well but this is the npm library that we're going to be using and in this case you can see it's a pretty nice little you know dependency that we're actually going to pop in okay so what we're gonna do guys is we're gonna go ahead and actually pop this in now there are many yes there are many libraries to do this right this is just one way of doing it right so I'm going to go back I'm gonna go ahead and pop in my zsh on my zsh I'm gonna go ahead and install it so npmi bad wrap bar of progress okay let's go back to our home page you know to just you know get everything looking a bit Sleek go back to our node okay and command J to hide the terminal we've already got it installed so I'm going to import that from that Library so import the progress bar from that okay at this point what we can do is we're going to go ahead and actually build out a progress bar so the way we do is we say cons progress equals new progress bar and this is from the library documentation this takes an argument which is the options as you can see here this is an uh a actual object so in this case we're going to give it a size of four and you can increment that number to make the bar thicker okay the color is going to be the Airbnb color now if you remember earlier it was actually this color right here okay and then what we're also going to do is give it a class name so we can actually add our own class names in I'm going to give this one a z index of 50 so that way it's always at the top remember Z index is basically how it layers up and then you can give it a slight delay I'm going to give it a delay of 100 so that way you know even if it was super fast I still want to show it right so I'm going to delay at 100 and that means it actually will be visible for the apparent future right you can add page transition if you want I'm gonna add a progress bar remember you can take this as far as you want progressor that's it yeah all right so what we're going to do now is we're going we have to make a connection to the router so what I'm going to do is I'm going to import the router from next router right and then we're going to do something interesting here we have a router dot events right and here you can see events actually has this function called on right and it's actually seen in intellisense and what we can do is the router whenever you change route it actually dispatches in action then next.js knows about so what we can do is we can tap into it the first one that we want to tap into is we want to say root change star and this is basically when you and when you initially you know push the user to a new page this is what next.js knows that has fired off so what I'm going to do is when that happens I'm going to go ahead and say the progress bar should start right and what this does is it means that the progress bar will start loading at the point that the route just started to change right so This Is How We Do rooted our events on Route searching so when the root starts to change I'm going to go ahead and start the progress bar okay cool and we're going to go ahead and say router dot events on and the next one is going to say root change complete okay so we're also going to say when the root change completes you guessed it it's going to say something like progress finish all right and that means that that's the indication for the Finish Point okay and the delay is basically the delay between start and finish okay hey that's nice all right so I'm also going to do it for the root change for them we're also going to say for if there was an error for whatever reason it's going to indicate that the progress bar should finish okay so this is pretty sick let's go ahead and hit save okay now how do we go ahead and actually see this working well believe it or not we've actually gone ahead and implemented it so let's actually see if it works off the bat right there right I'm gonna go ahead and type in London I'm gonna go ahead and do you know some dates and let's go ahead and do this and let's just see so I want you guys to pay very close attention to the top of the screen okay as soon as I hit search it will go ahead and hit trigger a root change start event on next.js router that means we should start the progress bar when it finishes the page transition it should say finish which means that the progress bar will finish off let's click search boom look at that guys as it's loading look as it's loading in pictures it's literally showing us wow that is incredible that is absolutely incredible it's working now he's getting a bit stuck there when you're wondering why that is let's actually have a look what's happening there um I'm gonna go ahead and just double check maybe perhaps we've done something slightly different but that's a strange one let's go ahead and try Airbnb and let's go and check it out now we've got this slight little kind of weird Behavior going on I'm gonna go ahead and dive into that a little bit more right now I'm just going to check if I've got you know some weird delay happening what I would recommend is do a complete refresh of your application unless you in New York oops New York are New York 9 to 11th search okay there's a bit yeah okay I just need to refresh so I want to let you guys know something when you use fast refresh always give your app an actual refresh sometimes because the fast refresh there's like a kind of it's called a modular like hot swap kind of a module so whatever the code changer tries to like be smart about it and in this case it doubled the progress bar so let's give it a complete demo right now okay let's go back to Airbnb let me change that size to like an eight let's see if it works right let's go ahead and say London and let's do something like this I might actually need to refresh it but look the ball is bigger looks like a fast refresh caches um yeah so probably gonna it depends you just have to refresh once properly and it fixes it okay that won't happen in production so there we go let's go ahead and do this so we're gonna go ahead and use something called a map box now what is mapbox well it's maps and locations for developers right you can go to their website have a little scroll around it's used by tons of different apps and companies so you can see here instacart BMW Strava all of these different companies the weather company we all know that one you know where we check the weather but you can see here they're responsive they work across devices now you can see it's not just 2D right Maps you've got nice 3D maps everything that we could possibly need and it's very customizable by the way it's all included in mapbox so this is where you know get your your focus face on let's continue on so what I'm going to want you to do go ahead and sign up right so you need to make an account on mapbox it's completely free you just have to fill in your name you know your last name your email if you have a company all that good stuff you want to go ahead and Chuck that in and then sign up now once you've done that you can click go to account you'll be taken to this page right so we can go ahead and actually get everything we need now if you scroll down you're going to see access tokens and don't worry I'm going to refresh this so you guys can't use my access token but this is going to be very important for today now what is a public token a public token is basically R so once we have an account with mapbox we're going to go ahead and actually use the maps over at mapbox but how do we tell mapbox that we are who we logged in as but how do I say I'm Sunny the guy who just logged in five minutes ago whoever that is but how do I know myself from anyone else well we use something called a public key and it's called public because we don't care if the world sees that right but you should always keep any kind of key in an environment file of some sort so let's go ahead and crush this right now okay guys so we've got our access token so make sure you go ahead and hit the copy button on this one right here I'm going to refresh this in a second so don't even try and copy it it's not going to work don't worry about it okay but what you want to do guys is you want to click on go to mapbox Studio all right so you want to click on go to map box studio now here they've made it really nice as to how we can go ahead and build our map so in this case what mattbox studio does is they give you Styles so we're going to go ahead and create a new style so I'm going to click a new style now they give you these nice kind of variants so if you want you know a satellite Street go ahead and do satellite if you want a basic Street you can have a basic view monochrome is kind of nice as well navigation is always pretty slick right but streets let's actually have a look at streets and what should we do guys you guys pick for me I'm going to let you guys decide this is the one that I had before which I'm pretty sure was the navigation look always close to it but go ahead and let me know which one should I pick right now basic monochrome outdoor navigation satellite or streets who knows us all right we can go ahead and basic and we can even change it to Galaxy that's what I had before okay so at this point I'm actually going to go ahead and pick streets all right I'm going to pick streets and we're gonna have this right now that you know what I can't do it to myself I'm gonna go ahead and do basic with the Galaxy I like the dark theme I'm not gonna lie guys it looks sick navigation it is all right so we're gonna click on customize now so once you've customized it it says welcome to the studio now you can click on learn more and look around but look what's really cool here guys you get all of these customizable layers colors maybe you could go ahead and theme it I'm just throwing this out there you can go ahead and theme it so that way you have the Airbnb color template right so that way you have all the Airbnb styling that you would need for your map to match that would look sick so you can go and actually change all the colors over here so where we have you know motorways and Trunks we can go ahead and change that to a pink or something like that so let's go ahead and make it like a red let's go ahead and do something like this in fact where have we got have we actually got the where I use the Airbnb color yesterday so let's go ahead and find it and then I'm going to go ahead and actually pop that in because that would look pretty cool right so we've got text red font okay I've got it here nice I've got the Airbnb color right here I'm going to go ahead and grab that I'm going to pop it in like so okay now we have the ibmb color now obviously you can make yours a little bit better but what we want to do now is go ahead and click on share right now we've clicked on share and we've got two things which are critical to what we need to do right we've got this style URL and we've also got the access token you're going to need both of these things right here in order to get this map into your application okay so make sure you take your time get this one Mike I want you to style up your your app and style out your application and then we're going to come back here in just a second we're going to get this style URL and get this access token okay now what I'm going to do is I'm going to go ahead and refresh my style um refresh my token and then come back so that way you know that we don't get no like we don't get no annoying stuff happening in today's world but let's go ahead and I'm going to quickly do that right now and then I'll be right back so I'm going to go ahead and I'm actually refreshing my token right now so I have a shiny new token right now is looking pretty nice I've got my you know there we go shiny new token I've copied it I'm now going over to my matte box Studio once again and we are back and I go to my navigation and there you go so I'm back at the screen but I've got a new navig a new token we click on share and now I've got this right now obviously you can't see it also it's fine so at this point how do I go ahead and continue on with the build well we need to pull this into our app so what I'm actually going to do and in order to get this inside of our app is I'm going to create a map component right so this map component is going to be the one that resembles everything inside of our app once we get it working so it's going to be responsible for showing the map somewhere around here okay so what I'm going to do is I'm going to go ahead go into my photo structure go to my components and I'm going to create a map.js component okay underscore rfce which is our boilerplate to go ahead and get our component up and running so you've got the map here right now where are we going to put this map right so where I'm actually going to put this map is over inside of the search screen so we're going to go to our search screen and I'm going to probably put it down here somewhere so I want to actually put the map underneath where we have main so we have the footer but right before we finish the main you see where we have everything in sections I'm actually going to go ahead and create a new section okay and this section is going to have the map component now if we scroll down you can see we get the components one where it says Auto Imports I'm going to go ahead and do that one right there okay and then oh this one gets me hyped up all right so now we've got the map being rendered in and you can see up at the top we're pulling it in like so so here we have the section with the map like here like so right so this section I'm going to go ahead and say class name equals and what I actually want to do is I want to show this only on the large screens but the section class name now I want this to be hidden so if we go back to the main bone you can see on smaller screens it's hidden now what you could do is you could actually go ahead and reposition it but I'm going to leave that in in your call right but what I'm doing is I'm making it hidden except when we get onto a larger screen where I get the actual enough screen real estate that we can go ahead and do it okay so in this point I'm going to go ahead and say hidden by default otherwise only when we're in an extra large screen should I go ahead and inline Flex it but what I'm actually going to do here is I'm going to actually go ahead and probably not import and not add this just yet so we want to see it while I'm coding and then I'll go ahead and add in let's go back to our map now how do I get you know this nice navigation map box into my app now well we're going to use a nice little helper package now this helper package is called react map Dash GL okay so if we go over to our safari we're going to go ahead and pop in a react map GL you're going to see this react friendly API wrapper and what this is is somebody's gone out there and actually wrapped up you know they've added a bit of code which actually gives us the nice react map GL component and what we can do is we can passing a couple of things here that will actually go ahead and allow us to pop in or you know the things that we have so like the map style URL which is the one that we just created in that style editor and we're also going to have the a access token so we can actually go ahead and pass that in like so so if you can see down here it says using mapbox tokens so I've gone ahead and done the documentation I've done all the hard work for this so you can now just go ahead and follow me to save yourself a bit of time so we're going to go ahead and import this but before we do it we need to install it so copy this line right here go back to your code command J to pull up your terminal and you're going to go ahead and do npm install dash dash save react map GL okay now while that's happening we're going to go ahead and copy the top line over here where it says import react map GL from react map to our library all right so let's go to the top over here paste the end and now we have this okay so what we want to do is this map if we don't actually require a div this whole component is going to be this map and that makes sense right it's called a map for a reason we want the entire component to actually be that map so what I'm going to do here is I'm going to go ahead and say okay let's pop in that component all right and this is this actually can have some children now what would the children be eventually is going to be the actual you know markers inside of the map hence why it's a child component so let's continue on we've got the react map GL so this actually takes a bunch of attributes now what do we pass in here right so I mentioned before we need to pass in the style URL but we also need to pass in the access token okay so the first step is I'm going to go ahead and actually pass in the map style and you see here when it seems that have been mapped we get a bunch of drop downs right so the one I'm looking for is mapbox API URL I actually not this one sorry MacBook style right now what we're going to do here is we're going to go ahead and type in equals and I'm gonna pop in the following Right Here style URL I'm going to copy this I'm going to paste it right so we have this is our style URL now what is the what does that mean this is essentially going ahead and hey like popping it it's grabbing this map box um style that we've created in the matte box editor and now it connects it to our component right so this means our component will know that's the style that we want so all of these nice little colors that we've added you should be able to go ahead and pull them through the next thing is the mapbox access token so whenever we have any token or anything like that we should always consider playing it in something called an environment file right so typically when you're coding in react you can use something called dot EnV file but when we're using next.js if it's a public key right we can actually do something a level up we can use something called the next dot config.js which we created earlier to go ahead and allow us to add pictures into our app so what we're going to do here is we're going gonna add an environment variable now what the hell is an environment variable you might be new to coding you may not have any idea you might be coming for years and you have still have no idea what environment variable is this is basically when you're in your development environment so when we're coding at home in a computer that's called the development environment or your local environment but when you deploy your app to Virtual so it's up on the Internet living somewhere that's what we refer to as a production environment the two environments can have different keys so imagine for many reasons you might want this you might have like a development a sort of a dummy server which has a certain key and then when you push to your production server you have a live key right so this is why you might want to do this in this case we actually have one API you know an access token which we're going to keep the same across both but it doesn't really matter we're going to go ahead and set this up all right let's continue on we're going to go ahead and rather than just adding the key here like I said we're going to make use of the next dot config.js file so what I'm going to do guys is we're going to actually use this file to go ahead and include a variable now this file I repeat this file should not be used to include any private Keys notice the map box key when we actually got it said a public key that's fine right but whenever you're dealing with something called a private key that should be in a secure environment file or in some kind of secure place so for example inversal you can upload your environment variables and all that stuff that's a different time a different topic but in this case you want to go ahead and make sure it's public key that you're putting in this file because you're exposing it when the user loads your website so at this point I'm going to type in end and then I'm going to go ahead and say map box underscore key okay and in this case you simply put quotes and then you put in your super secret key all right you guys thought I was gonna write it didn't you all right so at this point I'm not going to write that key all right but where do you get your key you're gonna get it from here the access token all right so this is your key this is your private key the access token right here so what you want to do is copy it and then you want to go ahead and paste it in here you guys keep thinking I'm doing it right but I'm not going to do it all right so at this point what I'm gonna do please go ahead and paste it in but when I do it I'm going to hide the screen I'm going to paste it and I'm going to save the file and then close it right but this is what I'm doing the environment part matte box key okay so pay close attention if you're following this along so I'm going to go ahead and paste in that value right now so I'm pasting it in and then I'm going ahead and I'm closing that file and now what I can do is if I go ahead and actually load up my terminal so let's go ahead and hit save right now so you can see we've got nothing here if I go ahead and load up my terminal go to my first terminal you can see here it says founded change in next config.js now whenever you change a configuration file you need to restart your server this is because next uses this stuff to go ahead and actually set up that server it can't fast refresh new variables in so at this point what we're going to do is we're going to do Ctrl C inside of our terminal to cut it then I'm going to do npm run Dev to go ahead and run it again in the developer environment right so here you can see it should in a second go ahead and grab the environment variable rules it may say it may not I'm not sure if it actually says it I can't remember but when you can you can use environment variables if anyone's wondering in this case we're only using the ones loaded in from our configuration file so now that we have that loaded in what we want to do is go back to our map and how do I get the actual key right well what we're going to use is something called process okay so when we do this you can go ahead and actually uh it's actually built into react so process is something that you can go ahead and just type in and it will go ahead and know that you're tapping into this part of react so at this point I can say process dot environment okay and what this is doing is it goes into the environment variable so again as I mentioned if you're in a local environment wherever they're stored it'll grab them if you're in your production environment inversal there is a place where you upload your keys I'm going to show you that as well so you're going to make sure you need to do that right and then here we're going to see you get a bunch of you know information out of the box already but what I'm actually going to use is something called my mapbox key so remember we gave it a key value before it said M and then we said map box key so that's how it knows okay we hit save all right and we don't get an error at this point so if I hit refresh everything seems fine at this point okay if I make it full screen everything's fine there's no errors that we're seeing so at this point it's okay okay so now what we do is we have to pass in something called a viewport right a viewport is very important because it tells this map how it signs itself okay so at this point what we need to do is go ahead and type in viewport but before we do we need to pass it in a value so I'm actually going to go ahead and create this variable beforehand so we say const view Port okay if you're wondering how the hell does he know this right again I've gone through the documentation extensively to figure this one out you can see they actually have a viewport right here that's part of some State you can do the same thing we're going to do the exact same thing here we're going to have a viewport in our state set viewport which is the same standard we learned yesterday we actually learned how to do that yesterday right and then we went ahead and um we're gonna set it up with a latitude and a longitude right and then a zoom value now in our case if we just set it as a hard-coded value that map is going to point in a random location or only that hard-coded value so I'm also going to teach you today how you can take all of the search results that you're seeing on your page find that the actual Center of all of those results and then use that as a value so that's going to be super cool and you're going to use a library called geolib in order to do that so you guys are going to find out how to do this all right so we're going to go ahead and create a piece of steak called viewport and you know the standard is set to viewport and then we go ahead and say equals use State and we're going to have to import this from react like so and here as a default value we're going to pass in an object right so at this point we pass in an object now what we're going to say is the width and height of our map should be a hundred percent right because we want to use up a hundred percent of the container that is inside of right and then we're going to say the height should also be 100 okay so this means that whatever container we put inside of it's going to go ahead and maximize it now to get things started I'm just going to put in a dummy latitude and longitude and the zoom value from the example okay and then we're going to go ahead and do that centering logic that I said before right so let's go ahead and Chuck this in so I'm going to pop in the latitude longitude values like so and in this case we're going to go ahead and say it's a zoom of 11. you can mess around with that value if you want to play with it okay at this point what we're going to do is we're going to say right I'm gonna actually pass in this Viewpoint now what I'm going to do is in order to go ahead and pass in all of these values so what I want to do is I actually want to pass in these values here as if I was saying width is 100 latitude is this longitude is that the way you can do it in a very nice way is you can actually say we can put in our jsx packs and we can do spread viewport now what this is doing is it takes this object and it kind of like bursts like it bursts it open right so that way you have basically done this right where we go ahead and pop it in obviously we gotta say equals otherwise it doesn't work but that's essentially what we're doing when we do a spread operator right we open it up from the uh we open it up like so and then it goes in and works um so let's continue on so we go ahead and spread out the viewport stuff and now we're going to go ahead and hit save now let's see what happened guys so at this point we still can't see a map right so what I'm going to do is I'm actually going to go ahead and check out where we render this map okay so we're gonna go to our search right here and you can see we do actually put out the map but at this point we don't have anything inside of our section so what I'm going to do is go to my uh that class name and I'm going to add the following I'm going to say by default this is going to be a inline Flex element okay so we hit save and then let's go ahead and check it out still not seeing anything okay interesting and what we're going to say is on the uh we're actually going to make this responsive from the get-go I'm going to say it's hidden by default on the extra large screen I want to make it an inline Flex element and then I want to make the minimum width right on the extra large screen so the minimum width that this is possibly allowed to be is going to be 600 pixels okay now once I add that in if I go back to my full screen you can see that it gives a Min width so if I go ahead and actually get rid of all of this you'll see that it gets applied anyway well that looks too squashed up right that's why we go ahead and only apply it you can put it on maybe that screen size if you don't mind it but I would recommend that you go ahead and you know you do it you do it in the way that I said it so it's on the exercising but already you guys can see that that is looking great right it's actually pulled through looks awesome so far and you can see we've got the little map looking really nice okay so at this point what we're going to do is we're going to go ahead and and the reason being is that I can't move why can't I you know you said this was a fully responsive map but right now I can't actually move through I'm clicking it I'm grabbing it I can't do anything that's because we need to go ahead and say up in the correct way so firstly what I'm going to do is I'm going to go ahead and add in that is hidden by default on a mobile view it only comes in as an inline Flex element when we hit the Excel breakpoint and then it has to be a minimum width of 600 in order to show on the screen so at this point looks pretty nice okay this is looking very very nice all right so it looks very good but what we need to do now is add a special function in which is actually called it's called on viewport change right so when I scroll up right now what's actually happening is if we go back to our map command J to hide the terminal the latitude and longitude are constantly set which means that even if I scroll around it's just not going to work right so I'm going to go ahead and actually say here on viewport change so on viewport change so you see we get two different ones I'm going to do on viewport change this gives me so every time we move through it it actually gives us so it's actually an arrow function here which has a bunch of stuff and then this actually gives me each time the next viewport so imagine as you're scrolling every time you kind of scroll it fires off an event and that event is contained inside of something called Next viewport we use that event to go ahead and update the UI okay so what I'm going to do is I'm going to go ahead and say set the viewport right to the next viewport and this means that these values will get changed hopefully as I go ahead and scroll through so if I go ahead and hit save now and I go ahead and refresh now aha now I can move nice and I can even zoom in I can zoom out all right whoa we've gone really far then right but we can even zoom out and look we can go down to let's go over to the UK and you guys can scroll in and go wherever you guys want to go to all right so already we have these gorgeous looking Maps available but if I refresh once again it's going to take me to that hard-coded default value which was in fact this one right here so what we want to do right is actually go ahead and actually you know like I said before we've got a bunch of search results that came back so this is actually these search results over here right each one came back with a latitude and longitude right if you didn't remember that I'll prove it to you guys I'll show you we go to search we go to our get service approx where we did the server side render I can click on this link to go ahead and make a get request to the endpoint and you can see this is the objects that got returned back so this is an array of objects right and if I go ahead and show you guys in a bigger view now you can see that we've got an array of objects inside of it we had a longitude and latitude of each location this is how we're going to achieve the markers which go ahead and actually get pinpointed on the screen but before we do that I need to position the map and zoom it in to a point where it will literally contain all the marker elements the way that we do that is we use a special Library called geolib okay so we're going to go ahead and use a library called geolib so at this point what I'm going to do is I'm going to go ahead and go back to my map and then I'm going to go ahead and install a library that we're going to need so this library is actually called geolib right and you can see it's an npm package and you can see here you've got zero dependency Library blah blah blah in this case is you're looking for the one with a high number of stars that's always kind of you know your your sanity check to make sure it's a decent Library so we're going to go ahead and install this right now I'm going to go ahead and say npm install right npm install glip this is going to go ahead and pop in the dependency right now but we went ahead and installed geolip and now what we're going to do is we're only going to need a portion of it so in this case you see it's got a bunch of different very handy libraries I need something called get intern so they have actually quite extensive documentation here right what I'm looking for here is actually something called get center now here's the one I'm looking for get Center you provide a bunch of coordinates okay and in this case you can see the coordinates of a r of a certain shape now pay attention here okay now this is where we're going to learn about transformation so if we we have an object of a certain shape in an example what I can do is if I show you guys the uh the object that we actually just got back from Json the Json file that we load up this has a bunch of additional information inside of it okay but the library requires that the objects only have longitude and latitude and even then the keys were actually longitude and latitude they weren't long and lat for short so what we have to do is we have to take this object and transform it into this object right with different keys but it has to have the exact same values but we have to strip it apart and make it and plus not only that we're dealing with a list so how the hell is he going to figure that one out right I'm going to show you guys how to do a transformation of an array of objects so that way we can you know pass in an array of objects which looks like it one way and then we can go ahead and change it around and shape it away to the way that we need it it's going to be pretty cool actually right so let's go ahead and do this right now so and pursues right I'm gonna go and know how to you know create an API with xjs go ahead and check out the Amazon clone that I built all right so I've got you covered on all fronts guys so what we're going to do actually first is go ahead and import getcenter from our library command J to hide the terminal pop it in like so get Center okay and then what we're going to do is we're going to go ahead and actually calculate the um coordinates now we do actually get all of where how can I get these uh this this object into my map component firstly right I go to my search and remember yesterday the page did something called server side rendering so whenever the user goes to the search page it fetches all this information from that middle server which we introduced when we use nexjs and then it renders out the page to the the client or the browser right what we're going to do is we're going to take that information so those search results the ones that we see loaded on the screen and we're simply going to pass them through so these search results right here which came first we're going to pass these through down into the map okay I'm gonna say map search results equals search results so I'm actually passing them through now you know you can argue in many ways here you can actually I would say because you're only passing down one level of props completely fine to do that the minute you find yourself passing down two levels three levels four levels you're doing something called prop drilling do not do prop drilling okay like do not it's a bad practice when you start finding that that starts to happen you need to start looking at the approach which is called uh Estate Management so that's when you introduce something like Redux or something like recoil or you know the contacts API that's when that comes in clutch but we're not going to be doing that today so in this case search results over here so I'm going to go ahead and click this over here okay so Matt nice right and then what we do is we get the props through here so we can destructure the props to get the search results okay so these search results right here we can go ahead and you know these are this will include all the information but it will look like this again all right so what I need to do is oops I've actually loaded up a picture all you need to do is actually transform the search results right object into the object that we require which is this right I'm going to say into the latitude longitude object so that I'm just putting it there for reference okay so we're going to transform it into an object which looks something like at this point we're going to go ahead and yeah we're going to transform this into an object which looks something like this I'm going to take this and map it and trans transform and map it into an object so what I can do here is I can go ahead and get the coordinates all right so I'm going to create a variable called the coordinates now what I'm going to do is I'm going to get the search results okay and I'm going to do something called a map right now this is the part where I need you to pay attention all right this is a learning point here I need you to pay attention so a map you can go ahead and loop through a list of objects or however is inside of an array right you can map through it now every time it Maps through I can get a reference to the item that we're currently on so we can name it whatever we want we can call it result in this case right so at this point I'm going to say map through and every single time I have a result I need to do something with it okay so at this point and this is where loads of people make the same mistake we're going to do a something called a direct return right so we're going to go ahead and do parentheses and then I'm going to put the curly brackets so pay attention to what that looks like right now I'm going to hit enter so what this is doing is it's going to return a object every time it Loops through okay so what's happening is we get the entire result every time we live through so I'll have access to this object in the result variable now and what I'm doing is I'm actually returning a different object so what I'm going to return is an object which has a longitude where it's the result dot long right and this is because it's result.long here and then the latitude is going to be result dot lat okay and what this does guys this one amazing piece of code actually goes ahead Maps through it gets the result object and instead of returning the result object in this case if I simply return the result I would get the same object back what I'm doing is is I'm changing it so I'm returning an object where the key is longitude one of the key is longer and this is the value one of the keys is latitude and this is result a lot right so this will actually go ahead and return now an object with all of these values and you're probably thinking nah that's that's rubbish man you you're not doing that so I'm going to go ahead and prove it to you I'm going to console log the coordinates right now and we should see all of this information in this format that we needed it in okay so I'm going to go ahead and check it right now I'm going to go ahead open this up and I'm going to go ahead and inspect the element so I can open up the console right now we click the array and boom you see that that is what we use a map for now you're probably wondering you could have used something like a four each no the reason why a map is different to a four which is because I have four each cannot return a value whereas a map and return a value right so when you Loop through something what's actually happening is whether do we're going ahead and returning a value each time and it bubbles it up into this array that we get returned in the end result right now there's loads of very helpful functions that you can use in this case a map is perfect right there's so many useful functions like yeah six functions like reduce filters and so forth in this case you do not need to use any of those things so Philip says would not reduce not be bad it reduces more when you want to accumulate some values up like for example if you have you know a bunch of numbers in each item that you want to you know kind of condense down or reduce into one number that's when you want to use a reduce in this case a map does the trick so now we have our data prepared in this structure okay so this means we have an array of objects look that looks exactly so that means I can use the glib Library okay so what I'm going to do now what we're going to do is we're going to we've got our coordinates so we've already done the transform step and then we've got it in this nice little coordinates object so now I'm going to go ahead and say const center now what the hell is the center point right this is actually going to be the longitude and latitude of the center of the local uh the locations or the results right so all these results that come through we go ahead and transform it into values which as long as you're not doing and then what I want to do is on a map I want to show imagine if I've got loads of points around London right I want to just have that map centered around those points right so it's only going to be centered around those points so imagine the search results change and suddenly we're in the the states or in Mexico or somewhere else it's going to go ahead and show you you know a center around those points you'll be looking at maximum you'll be looking at the states wherever the points are at okay so const Center equals and I'm going to say get Center and this is the function that we actually pulled from geolib you can see in their example they're doing geolib.getcenter I'm actually pulling it from the library so I can just say get centered directly so at this point I can pass in my coordinates okay this is looking pretty good now so what I'm going to do now is I'm going to Contour log Center and see what's actually inside that all right so at this point we should have an object which returns something like this an object with latitude longitude it should just have one value per each okay let's go ahead and do this let's go ahead and click on inspect element and now let's go ahead and go to our console you see the object down here look at that we get one value and that represents the central longitude and latitude between all of these search results so all of these are based in London right and this is going to be a central point which is going to actually perfectly map the center of all of them search results okay so at this point what we're going to do is so this one we've got a nice little center right so what we're going to do now is pass the center in as okay let's think about this let's think about this the viewport that actually the longitude that we start at okay so what I'm going to do is I'm actually going to declare this underneath over here so we actually have the center variable available so our Center latitude is going to be Center dot latitude and over here the longitude is going to be Center dot longitude okay nice right so what we should see now if I hit save if I refresh we should be able to see that this map will no longer be in some random place in the states it should be in the US so we've got the center so if I go ahead and hit save now and I go ahead and go to a full screen wait for it okay we are now in London that is the M25 that surrounds London okay so if I go ahead and zoom out now you're going to see look the city of London all right so wherever wherever we got zoomed into that is the exact center point of all of these longitude latitudes okay so the next ideal step is we need to see the markers for where each you know search result is otherwise it's kind of meaningless right if we don't know what's going on there or we don't know where it's actually on the map it's not much used to see that that's the center point right that where the hell can I actually see imagine I want to stay over in Edmonton how do I know where the actual sort of Airbnb is right I need to see it so that way I can do it right so what we're going to now build is we're going to upgrade this so that it can do the following so that way we can actually have the different locations uh popping up like this we can actually go ahead and click it so we can see this one is spacious peaceful button a modern room this is the five-star luxury apartment so in that case it would have been this one right so we're going to go ahead and actually show you how to do that right now so what I'm going to do is you know go ahead and hide this again and we're going to use something called markers right so I'm going to go ahead and actually save us a bit of time and I'm going to import two additional things I'm going to import the marker and I'm also going to import the pop-up so the marker is actually going to be responsible for you guessed it it's going to be that marker that pin right that that's a pin that's called a marker and the pop-up is this thing that kind of pops up around it right you can style that pop-up as well right so don't worry you're not stuck with that right so um um so what we're going to do now is we're going to go ahead and continue on so inside of the react map GL right so which is our react map that we're rendering on the screen I'm now going to go ahead and actually have markers so instead of rendering one marker okay all right so this one we're going to go ahead and say search results so I'm going to go ahead and run through the search results and for every search result I'm gonna you know put a marker on the screen so search results.map all right and we're going to map because we need to return a jsx value which is then shown on the screen okay so at this point I'm going to say return for every single result I'm doing parentheses not curly braces loads of you make this mistake and it's normal I've done it a thousand times trust me don't worry about it Jerome what's up did um so at this point you want to make sure you return something otherwise you're not going to see anything on the screen I've done it before and I was like why am I not seeing anything you know so at this point I'm going to go ahead and have a div and inside my div I'm going to have a marker okay and the reason why I'm doing that by the way is because this div you can't actually pass a marker Key here oh you can hear so I don't know why I wasn't freaking out before anyway we're gonna go ahead and put in a div and then you guys can we'll refactor if we need to okay so the key for the div that we're mapping through is going to be result dot long so we're going to use the actual longitude as a key because it's most likely you know that's actually a pretty good key to use because it's not likely it's not likely oh unless that hotel is in the exact same location it is the same steel I used to teach right unless it's the exact same longitude latitude then you know you're in a bit of a situation that means two airbnbs are stacked up on top of each other that's uh impressive but we're gonna carry around so we've got the search results here so we're going to actually pop out this marker now the marker as you can imagine takes a few things it takes a longitude and it takes a Latitude so these are require values so in this case you can destructure remember you can definitely destructure right so you can actually get them out through here so you can go ahead and destructure as long as it's your latitude and and all that stuff there but I'm going to go ahead and keep it on the screen because I think it might be simpler if you're tuning in later or something like that and you want to just go ahead and see it what is he actually looping through right so that might help you guys out so in this case we're then going to do the result dot long goes here and the latitude is result dot lat okay and then we're gonna say the offset now offset allows us to go ahead and have you know because I have a pin I actually want to kind of you know offset it slightly so that way the pin dot is actually dropping on the exact location right so what I'm doing is I'm offsetting it slightly on the left and slightly on the top so that way that pin actually drops perfectly on the dot right so let's continue on and you guys should see that we still don't have anything on the screen yet right that's because we don't actually have anything inside of that marker so the goal here now is to go ahead and you know put a custom marker now I'm going to actually put an anchor tag here I'm going to show you a few things that you can do if I go ahead and simply put a P tag and I put something like you know I'm just going to pop in an emoji of an a marker here right so I'm going to Simply pop it in like so right now let's see if that did anything I honestly have to first see if that did anything so oh we can actually see something was there right okay so we see it there right see that we've actually got those P tags popped up so already this is better so we have something working right but I can't click it that's not a clickable element so when you have a situation like this you can handle this in a bunch of different ways right you can actually have either an anchor tag or you can have a P tag or you can do it you know there's so many ways you can do this I'm going to firstly try try and do it with a P tag okay so at this point we're going to go ahead and say p and I'm going to say the class name of this P tag is going to be it's going to be cursor points it's not where it can actually be like it looks like a clickable element all right I'm going to make it a little bit bigger so it's text 2XL and then I'm going to say it's okay and this is the this is the cool part right if you want to make that thing bounce right so where's it going if you want to make that thing bounce you see now we've got the cursor pointer which is not nice we're going to make it bounce you can simply go ahead and use tell in CSS and it's got a lovely property called animate bounce and now if we go ahead and check this out we should see a lovely bouncing animation there you go that looks slick all right so now we can see look very nice right so what we're going to do here is when we click these links so here you can see that it's bouncing up and down right it's finally and you want to go ahead and actually make this clickable now to a degree all right so at this point we're going to go ahead and make this a clickable element right so what I'm going to do is how can I actually keep track of it so I could do something like that right how do we get that to work well what we need to do is we need to keep some State and this is where we need to go ahead and keep track so in this state I'm going to go ahead and actually you know set the selected location every time I click this now how do we do that well when we Loop through something we actually have access to the result object so what I can say here is firstly I'm going to create a piece of state and the piece of state is going to be responsible for the selected location so I'm going to say const selected location and this is the standard syntax is set selected location remember it's always set the variable name we say equals use State and in this point we're going to go ahead and pop in for the initial value we're going to go ahead and give it an empty object okay so it's an empty object to begin with right they can give it no you can give it whatever you want um in this point yes right that says you can we can also use image for the marker pins yeah you can put whatever you want in that marker pin by the way all right so at this point the selected location is there's no there's no object there right nothing actually shows on the screen so what I can do now is I can actually go ahead and say when I click that P tag all right so when I say on click of the P tag I can actually go ahead and do the following I can say that this is going to go ahead and this is going to be a little arrow function inside of it and I'm going to set the selected location and I'm going to set it to the actual result object right so what is actually happening now is when I go ahead and click on any of these pins inside the state I'm actually saying it as the object right so I'm going to show you this in action right by the way I'm going to do it is I'm going to go ahead and actually console log our selected go ahead and say Contour log selected location right and you guys will see this in action right now I'll go ahead and inspect and open up my terminal every time I click on that map so hopefully we should be able to get it to a degree where I can see it as well okay so let's go ahead and try and get it to a point where I can see this as well can we shrink it anymore okay I'm gonna go ahead and actually shrink this there we go right so now you can see that okay this is getting kind of you know huge right now but if I go ahead and click on this this is because I'm constantly re-rendering things but if I click here right now the latest thing was private room in the center of London if I click this one it changed to a spacious peaceful modern bedroom if I click this one it changes it to 30 minutes to Oxford Street so it's working okay so at this point we typically don't like having console logs in our rendering so it's yeah it gets a bit messy so what I'm going to do now is I'm going to go ahead and say the following so now we set it as this so now I can conditionally render so this is what we're going to do we click one of those pins and we save whatever result we click this means that we know what the selected location is and we have a bunch of information about we have the longitude the latitude the title description so forth so now I can conditionally render a pop-up which will check if we have a value then go ahead and show a pop-up and use those values to populate it pretty cool right that's what we're going to do there's a few things you can actually add on to that right so when you're coding there are actually a bunch of other things for accessibility if you have a pin you can go ahead and say Aria label and this is for like screen readers and all that other stuff you can go and say that this is a push pin and then if you have a screen reader it'll say there's push pin here and so forth like that just a little thing to know and if you have a you know if we're representing A P tag as an image you can go ahead and say that this P tag has a row of image as well so a little few things that you can do for more accessible things uh whilst if you're interested in that look into something called headless UI a Tailwind actually does it really nicely okay so at this point we go outside of the search results okay now what I'm going to do is actually we're going to stay inside our search results sorry we're going to stay inside the search results but inside or outside the marker now I'm now going to say okay this is the pop-up that should show if we click on a marker oops if we click on a marker okay if we click on the marker we should show a pop-up right now what I'm going to do here is I'm going to say okay the selected location right select if the if the selected location longitude right equals the result right so imagine what's happening now we're mapping through the results if the selected location matches the result so whatever we're mapping through that longitude right so if it matches then I want to go ahead and render so we can say then this is a ternary operator we can go ahead and say then I want to render something right if we don't so you can use that and and right but I found that this complained about something in some situations it complains so that would mean that you know we just put something here and it'll render if that condition is true in some cases you might have to do render this if true otherwise render false okay so there are times where you may want to do that right we can render first otherwise okay now at this point I'm going to say okay let's just quickly do something in the sense of like let's say let's have a pop-up yeah right we're gonna have a pop-up and this pop-up is simply going to have the result dot title which is going to be responsible for this stay at the Edwardian house and so forth now this pop-up can have a few other things and I'm gonna in and then to make it very simple just to begin with I'm going to say close on click yes so close on click true but whenever they click it as well I also want to reset my state okay so I'm going to say on close equals I'm going to go ahead and have Arrow function say set selected location I'm going to change it back to an empty object okay and the latitude and longitude of the pop-up that should show on the screen is going to be the one of the result okay so we can say result or you can use selected location it's up to you if they're going to match so it'll be the same thing so in this case we can say result dot lot and we can say longitude is going to be oops longitude maybe longitude longitude sorry longitude result a DOT long okay hit save and now let's go ahead and check out what happens if I go to a full screen and I go ahead and zoom out oh look at that right and if I click close boom it goes in and gets rid of it and if I go down here look at that already working right and this is a basic pop-up I think about it that pop-up is simply going ahead and rendering on the screen because it just has the latitude longitude that we specified and then we use the title to go ahead and render that well you could then go ahead and do is simply pop in a div at this point customize it make it look pretty slick make it look cool have some me off Xbox stuff happening and it will work as much as you need to outright so that's going to look awesome when you do that so that is honestly the map functionality we have the pin functionality and we have the pop-up functionality all working so the next step now is to go ahead and deploy this bad boy right so we're going to go ahead and put this on the internet so that way it works and again remember once we go ahead and deploy this now we have something called an environment variable so I need to account for that when I go ahead and deploy it to Versa okay so I need to actually tell my virtual environment what that environment variable is so that way it knows where to find it when we deploy remember this is local when we push to our deployment right it's going to be the a different environment so I'm going to have to go ahead and change that one as well all right so at this point we're going to go ahead and deploy this thing to get this up and going so let's go ahead and actually deploy this app so I'm going to go ahead and do command J go to my there we go we go right here I'm going to go ahead and say git add or all right and now I'm going to go ahead and say get status nice and I'm going to go ahead and say git commit Dash M and then we're going to go ahead and say uh day three oh day four sorry day four build right and then we're going to go ahead and hit enter on this thing and I'm going to say get push now before I do that I'm going to show you guys so if you go over to your virtual area so where's mine over here right this is the vassal deployment so we had where was it gone day two bird right so I'm gonna go ahead and push get push and this will go ahead and push it to my GitHub repo which will then go ahead and trigger a deployment okay so let's continue on let's go ahead and go to with the overview here and wait for it go and go to my builds and we've got here just now day four build this is the one I just went ahead and pushed you can see I went ahead and picked up that build we're gonna go ahead and deploy it and there you go it started to build it nice right and now I think we've actually committed the next config file which is okay because it's a public key but if you did want to go ahead and added an additional environment variable here is where you would do it okay so I'm going to show you guys actually in so that way you can do it if you want to you're going to click on environment variables for some reason why it's not actually click in so that's a bit annoying um there we go so it's loading right now give it a second maybe Safari doesn't play well with Russell starting a fight right here right so at this point it's loading anyway let it deploy and we'll see what happens all right but what you would do is you would click an environment variables you'll have a key then you would then put the map box key value there as in the actual you're literally going to put mapbox key and then as a value you're going to pop in the one that you got as a access token from mapbox okay and then what that's going to do guys is trigger a build so you can see this ready then you're going to go ahead and click into this to see what's going on here and go down here and everything looks good it says deploying build outputs nice okay wait for this build completed populating build cash or this sort of you know complicated sounding stuff that no one understands What's Happening Here let's go ahead and let it do its thing and I'm gonna go ahead and actually go into my YouTube bird while that's happening and I'm gonna go to settings and I'm gonna go to my environment and see if it loads now I don't know why that's not loading right now if it doesn't I could load up my Chrome but I don't want to risk for Logan Chrono right now okay but I'm going to explain it to you guys simply go there environment variables change the key to mapbox uh you know key and then you have the value you just paste it in there and then literally you hit okay you trigger a redeployment by going into deployments hitting this three button here and you say redeploy once you change the variables and it will literally do its thing okay I'm going to show you nice now let's go ahead and check it out see if it worked if it didn't I'm going to go and change it all right let's go ahead and say London 9th to 20th go ahead and do this hit search and let's see if that key came through and boom the key is there guys it's because it's the complete height that's why we have to zoom down look at that guys absolutely amazing stuff we have it working we have a nice a beautiful map happening right here are jumping animations right now provided by you know that tail in CSS power that is sick that is absolutely crazy with that said this is the actual finale for The Airbnb build right that's actually gonna wrap up the build itself so I'm gonna give a quick run through of the entire build we built an entire front-end page right so we had the front end front page then we had you know we thought we learned about state so we learned about props in day one when we had all of this stuff happening we had reusable Pro components where we passed through props and all that good stuff and then here we go ahead and you know we start typing in we have some we learned about State we go ahead and pop in some values we then learned about server-side rendering so not only did we do static side already on this one we'd had some you know servers I rendering before now we click search server side renders the results loads it up inside of mapbox at the same time pops it onto the screen and boom it works the way we need it to work and it looks perfect there we have it guys the Airbnb 2.0 clone if you enjoyed this make sure you smash and destroy that like button subscribe as always you now have a beautiful addition to go ahead and put on your portfolio and demonstrate that you can use the capabilities of next year such as server side rendering to improve SEO performance and your users overall experience you've actually built a beautiful website using Tailwind TSS and you've learned how to implement popular features such as maps and date and calendar Pickers so once you've reached this point I'd highly recommend you add more features to the build and add it to your portfolio so that way you can escape that tutorial hell feeling and let your employers know that you've followed the tutorial but then you added even more and added your own little Finishing Touch This is always a nice way to go ahead and showcase your skills throughout your portfolio as always guys this is your boy sunny I will see you in the next video peace I love you [Music]

Channel: Sonny Sangha

Views: 117,476

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: b8gBIphfCqw

Length: 282min 43sec (16963 seconds)

Published: Thu Oct 13 2022