🔴 Airbnb REACT.JS Challenge | Day 3 (Calendar & Search - Next.js, SSR, Date-picker, Tailwind CSS)

[Music] what's going on papa fam welcome to day three of the five day airbnb react js next year's challenge let's get this place going crazy today we went ahead and built airbnb the front page yesterday and today we're going to build search and calendar functionality go ahead and comment right now where you're watching from i'm gonna go ahead and give everyone just a second to get their energy up grab your i got my water right here we're gonna go ahead and have so much fun today enjoy it take your time replay the video twitch youtube facebook make sure you're part of this day three of the airbnb challenge guys welcome let's crush it peppa pham let's do it [Music] welcome to day three of the challenge hey we got germany india we got usa we've got canada bulgaria mexico tanzania hey this is sick milton keynes sri lanka norway there he go malaysia that's what i'm talking about guys it's absolutely crush this i'm gonna give you a demo of what we're gonna actually build today all right so this is what we actually went ahead and built yesterday we had a sick front end this thing looked amazing you guys crushed it on your homework we went ahead and built the entire front end guys this was so much fun and honestly you guys pulled through and i couldn't believe the submissions we're gonna go through them in just a second right but what we're gonna build today is the ability to actually go ahead and type in a search bar drop down a date picker all color scheme is going to match airbnb and you've even got this nice little tweaking punch look how sick that is guys we're going to go ahead and be able to select some dates number of guests click search then we're going to trigger a server-side render here you see a little nice loading indicator and then boom we're going to get real search results it says stays in london because i typed in london all the information i just entered comes up on the screen all this information is being pulled from an api we have the information over here oh it's going to be so much fun guys it's going to be so so much fun we're going to have this at the end of today's build if you're excited about that smash the thumbs up button hit the subscribe button if you haven't already and yeah this is gonna be sick this is gonna be fully responsive and uh yeah it's gonna be a hell of a learning curve so buckle up you're gonna learn all about server side rendering in today's build guys let's crack on with today three are you excited to day three are you excited for the challenge let's go ahead and get started guys time let's start day three in the comments right now and we can go ahead and kick it all right i love seeing how many people are actually you know tuning in again i'm starting to recognize people that are actually coming back to the challenge and guys oh man it's just you know i don't know how i come up with the energy but it's just you guys you guys inject me with life every time i come on these live streams and it's just unstoppable power from the proper fan tino what's up man ben carter said window what's up guys good to see you darwin good to see everyone in the house today if you haven't already reserve your spot do it right now links up upriot.com four if you're not already registered for the challenge you're gonna need to in order to get you know part of this prize pool and guys crucial we're approaching somewhat near the end now day five we're gonna have an absolute huge training so i want you guys to be there get a free ebook worth 50 pounds i'm gonna give you guys a complete react training teach you how to take all the skills that we've got done here and go ahead and land your first job i'm also going to open the doors to our exclusive community zero to full stack hero it's gonna be sick first link in the description register your place and let me know if you have already let's go on guys join the official papa fam discord server if you haven't already i'm gonna go through all the ground rules quickly and remember this is gonna go ahead and have time stamps on it so afterwards if you're watching it back you can skip all this part and crack on with the build but remember discord server if you want some help this link is in the description the official papa fam group this has been sick and amazing for so many of you guys honestly i can't believe how much you support each other we actually have 4.2 k members now not 3.8 so that's the fourth link in the description make sure you're part of the facebook group not just for the challenge because it's a sick place to hang out right save a share and use papa challenge hashtag pop challenge i can see you guys posting and remember as always guys pull out your phone snap this on instagram tag me and i will go ahead and repost you and if i do you get bonus points tino a couple of you other guys are killing it with those and you know even adam actually had the papa top which i found i found that so sick day five again sign up first link in the description the ultimate developer workshop is gonna be sick and honestly i've never shown this book to the world this book is it took ages that's 60 pages of javascript cheat sheet stuff so you guys want that i'm gonna make sure you get right you gotta turn up on the final day and that's it simple as that you get it for free we're learning all of this today you know we're gonna go ahead and recap on our react skills next yes we're gonna be touching on server side rendering today so it's going to be sick we've got tail in css because this is going to be responsive as always and then we're going to update our deployed url so we're going to actually push the app again to versatile so that way you can submit day three homework just like you guys have been killing it already and then we can go ahead and get you those bonus points now remember if you're ready to go ahead and start this thing let's type let's go time to focus guys turn your phones off well you know put more do not disturb and get ready to go ahead and actually dial in we're gonna get into a flow state together and we're gonna crush it today some quick reminders because this is a challenge all right thank you ulysses i see you dude shops rise what's up guys thank you for tuning in uh tina says looking forward to that ebook go dust exactly dude it's awesome this is today's build if you haven't already you know if you tuned in a little bit late this is what we're going to be building today it's going to be a hell of a lot of fun honestly it's going to be a real learning curve for a lot of you you're going to learn all about state in or react so again i broke it down for beginners and that's exactly what i'm going to do today we have hundreds of people watching and always i always notice this as the challenge goes on only the real ones who want to change their life continue on throughout the challenge so honestly if you guys are tuning in today props to you keep it up guys day three agenda we're gonna review all the homework submissions then we're gonna build the search and calendar date picker and the results page then we're gonna push our code deploy it so that way you guys can crack on with your homework you can code along with me today or you can watch afterwards it's all good do it at your own pace point system this is a competition this is a challenge this is why we push we push ourselves right we want to win something in the end of it one point for sending a message on any social media platform two points for tagging me on any social media platform you guys have been questioning it with that i honestly love it if you've been reposted shout yourself out right now and give yourself you know some fame time right now three points if you help someone with their homework now i see loads of you saying you know i suddenly i helped someone out and i actually saw an awesome one where somebody helps someone out i can't remember the name there's christensen and uh someone actually shouted him out saying make sure you give him the points that's the kind of positivity that we want to see guys it's all about helping each other keep on doing it four points if you refer someone and remember if they win uh if you win sorry they win the prize as well so it's gonna be sick five points for every homework submission so it's a no-brainer get your homework done you're gonna win this competition or you have a better chance of winning it okay reminder of what you can win diamond mentorship platinum winners and 50 off coupons a hell of a lot of prizes ten thousand pound prize pool ah it's gonna be so much sick it's gonna be so much fun right and again this is a beginner challenge so if you're tuning in do not worry remember if you haven't done yesterday's homework or any of that stuff just follow on today enjoy the challenge and then go ahead and actually catch up afterwards don't worry it's for beginners i'm going to break it down for you guys you can take your time with it and enjoy this thing and remember submit your homework if you want to be eligible for the prizes on day five okay this is where you can find it on the facebook group or the link in the description all of it is down there we pretty much go ahead and help you out pio says where can i ask for help in this challenge if you want to ask for help again discord facebook literally send a screenshot saying i'm stuck on that give enough information right i always see people saying i'm stuck you need to give enough information so that way people can actually help you out and then that's going to be your best chance at getting some support yesterday's homework day two the complete front end build you have to build a completely responsive mobile friendly front end of the airbnb homepage then you have to push it and deploy it now we're going to go ahead and feature a couple of builds we crushed it guys over 250 that's literally we're 350 for day one 250 for day two is incredible i couldn't believe i said to jails like whoa that if everyone's pulling through on the homework you guys are you guys are smashing it guys keep it up and i blocked out some of the email address i don't want you guys to get spammed like i do uh but yeah amazing stuff these guys look exactly like mine and you even implemented additional features which we're gonna highlight right now okay so let's check out some of the word dimensions right get get ready for this drum roll drum roll get ready for this this is going to be big if you do find yourself featured 10 bonus points okay we're gonna go ahead and crush this one check it out marco i can't pronounce the name surname sorry but i'm gonna say zeletovic maybe that was perfect i don't know but malcolm did that was an awesome build oh look at that he actually made his own little uh you know custom airbnb title fernando segre again apologize if i don't pronounce it right well done guys absolutely crushing it and again if you haven't already subscribed subscribe to the channel over 50 watch and don't subscribe i don't care i really don't all right we have alexander georgiov we have osada vidas and i love this one this one is like you know it's up to date he's actually probably gone to the local you know the actual airbnb site and taken inspiration from that but look how clean that design is well done dude ben carter he actually had a login a sign-in system right which was sick he actually implemented next thoughts which i didn't even teach but you must have watched my own build so well done for that and remember if you're not actually featured or mentioned doesn't mean i haven't seen you do not get offended we we try our best there's hundreds of people we do try our best we go through everyone don't worry i've seen you okay frederick peter amazing stuff dude absolutely crushed it camilo and monique absolutely crushing it once again you girls are coming back for day three make sure you go ahead and crush it today as well absolutely killing it guys and these are some of the additional worthy mentions i'm actually gonna demo okay dash santosh guys if you see dash he's always showing up in these challenges he always crush it look how sick this build is all right we have a few hundred people already tuning in smash the like button if you're enjoying this right now check this out look at that oh my god that is so sick all right how he's done that look how nice that is he's even added an additional card yes he's added even addition more additional fields look at that so so beautiful how he's done this i love that i can't get over the top look how beautiful that is oh just seamless experience right really really beautiful stuff well done dash extra 10 points tino tino i couldn't go on without mentioning tino if you guys have heard about tino he keeps popping up for good reason check this out right so not only did he go ahead and build the rest and what i do love about tino's build he's done something which is very modern right which you may not under we may not realize straight away but look how he's got a subtle difference from the background slight shadow that is modern design at its finest guys look how crisp look how clean that is absolutely crushed and my favorite part one he did the actual header which i think is so sick but guys look at this if i grab that what the hell look how amazing that is and to top it off the animation oh dude dude everyone smash the thumbs up button for tina right now absolutely killed it grab or scroll to fix bug this is sick take me to nirvana that is awesome man i love your creativity and also you've got a parallax effect in the background i saw that that is awesome your design skills are on point dude keep going with how you're doing it honestly overpowered killed it dean barber once again getting another mention absolutely killed it here we've got a few you know animations so he's gone ahead and you know chucked in some tailwind css animations and i thought this was pretty clean i think there's a little bit of overkill with the animations here i would say try and keep animations down to a minimum but i think he's trying to show me that you know something i can do the animations so you know what props to you for actually implementing them well done dude so this is looking really nice right now well done for that and you actually went ahead and added that little flashing indicator there i'd say the only thing i'd mention with this one chill a little bit with the you know the flashing you want to keep it subtle or when the user hovers over it but overall amazing amazing project dude well done okay and finally katherine savannah's and i think this was the dude who actually helped someone out so well done shout yourself out right now if you see yourself and look at this guy's awesome awesome stuff we've got the sticky top header oh look at that look at the way that flew in right there i'm going to do that one more time get ready for this we got the olympic background oh nice look at that nice clean dude and look how they just fly in oh oh my goodness that is so slick all right really really love this if i had to choose a preference out of these few builds that i have right here i would have to say i'm not going to lie i think it would be tino tino this one had me man this is like a i would honestly pay good money for that i would pay good money for that i think you've absolutely nailed the design this by far is my favorite that i've seen so far in terms of design i think you nailed it i think it's subtle effects i think you've absolutely crushed modern design here and if you carry on with this i don't know where the text went for this one uh oh okay all right we're there it's just that it's just my oh my god you can grab this i didn't even know you can grab that but there you go i guess you can grab the large cards as well that is awesome so i tried grabbing that as well but nice stuff dude really really awesome stuff pedro says are the animations also made with tailwind so these animations are made with i think it's he's using framer motion for this so if you guys want to interested in doing it frame of motion is the place to go but otherwise the little kind of flashing animations and little you know jumping up and down that was done with heroin yes right i'm awesome stuff guys well done for the mentions and again if i didn't mention you do not freak out we do see you doesn't mean we're not going to you know give a few bonus points here and there i see loads of you am and january a few i see loads of you guys absolutely crushing it do not worry right i see everyone so many impressive front ends go ahead and comment who your favorite was right now i want to see what your what the crowd favorite was out of all of those ones right we had these were the names dash tino dean and catherine and we also had a few others before go ahead and shout them out which one's your favorite out of those mentions right people have asked for help and the community came in clutch remember helping you helping everyone out gives you the bonus points honestly if i see you guys actually crushing it with the help it gives you actually a very high chance of helping out and this is because of the papa fam was created to eliminate that kind of you know feeling of being alone when you're developing so go ahead and keep on helping oh wow look at that tino you see yourself dude aaron sans says dash and hino prashun says tino crushed it kylie said they just crushed it all of them this is awesome guys well done tino have your moment of fame dude absolutely killed it and you deserve it rightfully let's have a look at some of the examples of help so we had a few things over here so you can see uh anuj was helping out over here rosen jumped in again i love rosen's energy by the way catherson this was the one guys he answered it and it helped me out a lot just wanna say if sonny or jay are seeing this please give this man plus four points guys come on he doesn't even wanna win himself he actually had the modesty to shout out someone else to give them the points because catherine helped him out so if you're casting if you're watching this firstly sorry if i pronounce your name wrong but secondly absolutely awesome support and you should be proud of yourself dude uh he says you're welcome bro amazing stuff and then we have a ben carter jumping in teaching all about the parentheses return over the curly brace return that's clutch because a lot of people were going to get stuck on that i knew that was coming actually but you know thank you so much for jumping in to help him out let's build a calendar and search you guys ready for day three of the five day airbnb challenge if you are and you want to learn all about next year server side rendering all that good stuff and some calendar functionality as then make sure you smash the thumbs up and subscribe because we're going to actually be extending this even further tomorrow and adding mapbox functionality so if you want to be a part of that hit the little bell notification so that way you don't go ahead and you know lose your spot uh or miss what's going on we're going to be live at the same time but remember reserve your place for day five day five is where the entire training kicks off we're gonna go live we're gonna go kill it right now we are gonna carry on guys from where we left off yesterday so yesterday we had the following build so you know we would have the front end over here and if i typed in you see nothing happened this is where we left off yesterday but we're gonna go ahead and extend so if you are stuck at all today or you know you're behind then watch today consume the information learn something new you know how does server side rendering work how do we get some kind of calendar day picker you know put inside of our app and then go ahead and do day two day three day four etc and you know catch up don't worry it's all a learning curve for you we're going to go ahead and crush it guys let's get the code up from yesterday here we had our code so this is what i want you to do pretty much resume from yesterday's build and again if you are not you know if you're not up to scratch or here do not worry toughwear says too late for me i missed day one and two don't worry dude watch and enjoy do not worry you can still submit all the homework and actually get points and everything like that so you can still have a chance to help uh to help a few other people out get bonus points and still have a chance of winning okay so let's go ahead and dial in i'm going to go ahead oh moltia rothman says i love my dream job google engineer and you helped me so much i still watch your videos today dude if you can send me a dm showing proof that you landed a job at google and i'm gonna jump on a zoom call with you straight after this so that's absolutely crushing it and i'm gonna go ahead and actually change the vibe up of the music and let's go ahead and get into our flow state quick little water break before we get started and again if you're enjoying this stuff smash the thumbs up button we smashed it with a thousand likes yesterday and i don't plan on slowing down anytime soon we're going to keep on going guys let's kill this pop fam and also if you haven't already seen there's a nice little join button on youtube now where you can become a special hubba fam member and get a nice little you know colored highlight and i can i i'll actually prioritize your comments because they actually come massive on my screen so i know if you comment and i can engage with you a bit more and it supports the channel so feel free to do so let's continue art three mixers something i didn't support submit my homework but can i do it later yes you can dude do not worry if you want a chance of winning the prizes make sure it's before day five and i got you dude all right so i'm gonna go ahead and quickly sort out our coding environment boom go ahead and make this veneer nice okay so at this point we just crushed over 200 likes let's go ahead and get to 300 let's get that number up guys 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 application is 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 traits and even here you can say look two day 12 days up to today or you know two days starting today and you can change all of these things up or 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 got a nice little selection over here really modern looking design then we have two buttons i cancel which actually goes ahead 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 state 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 did i say 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 and again devmentor live what's up we have a member in the house he goes yesterday was pretty epic a great way to demonstrate how powerful and deceptively easy tailwind css is yes and you guys are going to find out today as well that you're going to you know you're just going to fall in love with telling css even more guys so i'm going to 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 like a little variable called search input and that's going to be responsible for holding onto 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 setter 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 search input 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 seema says sick today's going to be killing it excited for map and calendar part oh that's mohib as well what's up guys welcome this is killing it guys we're almost at 300 likes let's keep going 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 no start your search now that's actually the place holder 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 and uh tio what's up dude good to see you here holik says i only know redux and you can find this one easy if you know redux but if you don't then do not worry 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 we're just connecting the two things okay so the first thing i want to do i'm saying 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 react that when you change the value you should update that string so react is saying no no no you are going to absolutely get stuck on that you know that value here so if i go 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 computer as or the browser as 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 search input remember if i want to update 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.value accesses this field and says whatever the user just typed in get that value and then map it to the search input 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 and uh oh nice yeah most here rahman says uh i tell something i work as google and you help me live my dream job yeah dude if you can show me honestly reach out to jay proper react.team gmail.com and let him know and we'll get you on an interview or a podcast that'll be awesome okay so at this point what we're gonna do is we're gonna 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 gonna go ahead and inspect the element okay i'm gonna go ahead and inspect it right here and if you're on safari 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 wrong with you and it 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 it updates the value right so that 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 it's 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 hello sunny today you are so handsome thank you so much tio uh they're the react hooks super clean thank you so much dude okay so now what we can do we need to go ahead and implement this beautiful calendar okay now don't get confused the 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 gonna 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 gonna do here is i'm gonna 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 set up of three so it was one two three and then the next div 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 world 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 react date 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 by 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 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 components props now remember we talked about props yesterday 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 gonna keep on cracking on at this pace and we're gonna keep on smashing this we're almost at 300 likes let's absolutely 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 going to go ahead and install it 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 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 and 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 save anymore but um yeah martin says hey sunny almost missed this thanks a lot has helped me with my react journey love from nigeria thank you so much for tuning in dude i'm glad you made it so we've installed that successfully the second one npm install dash just save or react and date fns even if we have react installed you know you can easily it will just know that it did that it's not it's not silly your guest says can i submit day to work on day three yes you can submit all the homework up until day five and if you're watching a replay of this still submit it we have loads of coaches inside our course that would love to go ahead and review it so make sure you go ahead and do that okay let's go ahead and continue on guys so we've actually installed the two dependencies that we need now you need to go ahead and install the 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 base 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 come on j to hide our terminal and what i love to do is i love to go back to my main terminal come on jr then and i'm gonna go ahead and import it we've got this react date range this styles tss and theme hit save you'll notice that nothing really changes out of the box okay well python says hi i'm an italian guy you are the best amazing stuff dude and i see your coding in python i hope i can you know sway you over to the javascript side but i love python too amazing stuff dude okay this looks pretty nice and at this point you see we've actually got a class-based component example here but we prefer to do and i would recommend you do everything in functional components if you do want to know the difference between a class base and function or if you've got that question you want to see how you can convert class based to functional because the future is functional components for many reasons it's much simpler for one and what i would recommend is there is a link in the description to a skillshare one month free access where you'll get my react basics 101 where you'll learn all of that stuff there's a three hour completely free course link is in the description go ahead and feel free to grab that and then watch it over and then you can come back and kind of you know tune in sabine says let's go sunny from new york i love to see international people jumping in man honestly welcome dude so rather than doing it this way i'm going to change 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 a class based on into a functional and again you can check out the react basics document 101 to go ahead and do that and um andy spence says is this live yeah it's live dude now you know right let's continue on uh so let's go ahead and grab this right here someone says why is your face shining every day i actually take good care of my skin guys airborne has me you know she's like don't use too many this that products and she she's very tailored on making the skin glow so it helps out quick water break guys because that is another thing which helps you stay fresh tia says hey sunny do you have a wife soon enough that bun is my gorgeous girlfriend right date range pickup we're going to 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 i write up in london oh that's not nice right doesn't look very nice so we need to give this some values in this case but 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 up okay so what i'm going to do right now um a value bev says i'm currently working directly if that's class-based component oh boys i hate to work with dude definitely check out the react basics and if you do watch that guys please leave a positive review on it because it really helps it reach more students and then it helps the world become a better place helps all our react devs so really helps everyone out okay let's continue on guys thank you so much andy spencer i appreciate it dude so here what we do is we pass something in called 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 ranging 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 date 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 sonny 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 date 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 going to copy this i'm going to change it to say end date so i'm going to 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 date and start date okay now we have our selection range right so at this point aspire to be best there's one ng man looking at comments coding speaking and giving replies appreciated 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 in the esx or 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 i'm 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 right here 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 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 and firstly i'm going to say the min date so i'm going to give a few attributes 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 now think about what 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 um dev mentor live says the music a bit okay no worries i'll drop the music a little bit lower and then we can go ahead and really dial in this is where i need to explain if you think so i got you dude all right so at this point we've got range colors a bit lower now over here we're gonna 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 unchanged now on change now i think the music's better at that point right uh ah developmental has got a nice little badge 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 called 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 there 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 right set the start date to the ranges dot selection dot start date and this subranges.selection.slide it 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 second 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 says undefined is not an object selection dot start date 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 check so we've got react date range 1.3 in this case i've got react data range 1.3 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 going 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 date right so that looks pretty good to me and let's go ahead and just double check and sign it there we go okay so what i'm actually going to do is i've got it 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 so you shouldn't do that okay so thank you so much to satoshi kawasui says it's a very helpful me to understand 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 unchanged event firing off so let's see everyone's saying selection s is in caps nope it's not actually s and caps oh here it is yes there you go guys that is the problem right there right so this selection range is actually the issue so you need a keen eye and that was actually awesome that was mahesh that popped that one out amazing stuff so when you're doing this you can keep this as an arrow function and that's the same thing as writing the old score 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 it lower case 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 let's go ahead dude did he just donate oh okay i thought he'd done it damn whatever you donated thank you so much dude let's go ahead and hit lun um london and wait for it boom uh 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 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 out okay um let's keep on going guys and remember it doesn't matter what you donate if you don't know anything that is huge honestly it could be one p and i would honestly say thank you it means everything we never ever look at the amount it's always just you know amazing and i'm grateful always for you guys supporting the channel so at this point we can go ahead and continue on pretty nice guys we're actually moving pretty fast so we're gonna go down to where the date range picker is actually rendering out i do like the music a little bit let me know if it's too loud at any point okay so we've got the date range picker over here and now what i'm gonna do is i'm actually gonna 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 grid 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 or 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 classes here i actually want this to be a flexbox 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 okay whoa someone just donated ten thousand cop what is cop well thank you so much it's crazy i appreciate you joan insignias appreciate you dude thank you so much we've got this uh the little donations flying through appreciate you guys so much for doing that right 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 right so what i'm going to do now is say 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 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 that was sick and honestly easier than you thought then go ahead and smash the thumbs up button and i hope you've learned something already today right we're almost at 400 likes right right so let's go ahead and continue on mo here but keep it positive dude otherwise there's a bang coming 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 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 that it's kind of connected um xavier says go in development appreciate you 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 you know 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 going to 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 going to 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 right uh dev metal life says i find it easier and it's more clear but i'm a functional program so it fits me well uh okay functional program for the win nice we're almost at 400 viewers this is crazy guys i love the the growth is just like you know it comes up and up and up and more people are tuning in as the days goes on so it's awesome to see all right almost at 400 likes guys 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 another donation of 10 pesos from crypto vickingo appreciate it dude thank you so much guys for the donations it actually means a huge amount huge massive massive support to the channel thank you so much dude hd we're going to go ahead and say that this should be text of 2 xl 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 xl and then we're going to say the padding on the left should be 2. i want it to kind of push a bit over and i want it to say uh what am i doing i want to be no i don't want to push it over i want to say text to xl and i want it to basically take up as much as possible of the container that it's in 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 grub which means that this will take up the most space they possibly can okay because we're next to it we're gonna have the input field cool and then we're gonna say border uh actually no i'm sorry we're going to say the font is semibug nice semi bone nice now if i go ahead and do that boom we've already got it looking pretty nice okay pretty nice so at this point we're going to go ahead amman says sunny makes things easy thank you so much dude all right so we've got the h2 popped up looks pretty simple now we've also got an icon that's the user's icon over here so i'm going to go ahead and pop this in now we did import that yesterday in 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 gonna say it's a self-closed icon i'm gonna say that the class name is gonna be a h of five so h of five which means height of five 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 that 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 margin bottom to push it away all of these things make it really really easy and then the kind of the visual aspect quite nice all right nikhil says dude how do you manage all this you're reading comments coding hats off joshua says something the fact that you're the best youtuber when it comes to react keep it up thank you so much guys for positivity i really appreciate it keep this energy and let's go ahead and question we almost have 400 likes let's get the number up guys let's go to a thousand again number of guests right now i want that input field next so underneath the user's icon input right now the 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 call number now that's kind of huge right oops i was scrolling 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 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 p padding left oh god i always do that i'm gonna go ahead and say panning left of two all right sam wants is just finished yesterday's challenge wow welcome sam iman and i hope you enjoyed today's as well over 400 people tuning in that's what i'm talking about guys that is what i'm saying you guys are crushing you turn up every day that's the energy we need in the papa fam padding left of two text 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 going to 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 looks pretty slick and that's actually very close to the airbnb so it pretty looks pretty good all right bosley says did you already make calendar yep we already did it dude so you guys can pretty much feel free to rewind it and check up on how that worked look how sick that is right now this right now if we is not actually mapped to state okay so we don't actually have that mapping remember the value and the unchanged 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 i enter in that input field so we're going to do the same principle that we did earlier guys we're going to 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 certain number of guests and what we do here is camel casing so that's where you start off with a lowercase and then you camel case up which means every like sort of new word there it's 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 defaulted to one because you typically wouldn't book a uh you're not going to book a you know a room for zero people or are you gonna book it always for one at least we're gonna say the default value is gonna be one yep jamie says oh that's what we use the state to set the default value yep that's why we do it so now you go down to number of guests and let's go down here and what i'm gonna do is i'm gonna say the input is actually gonna be a value of number of guests right i hope this is making sense right so if we go ahead and do london now you can see the default is that and here 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 they use that 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 we always want to kind of you know dev mentor says sensible defaults for the win always makes it easier on the user yes it's all about the user experience you always want to make it simple for your user let's go ahead and have a quick water break smash the like button almost 400 likes we have 400 people watching across platforms the answer is damn that was easy i just learned how state works yeah so in two days you've learned how state works and how props work and if you want to go even further skillshare literally a free entire three hour course on skillshare uh link is in the description for react basics 101 you're going to learn about user effects or other stuff okay so let's this keeps going 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 emmet right so if you do want to do that just google simply emit for react and then you'll be able to find it online and there's simply a little configuration that you're going to need to toggle in your settings to allow you to use emmet plenty of videos online about how to use emmet yeah i think we actually cover in the react 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 it's 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 so at this point remember if you haven't already guys final day subscribe oh sort of sign up for it right now crowdcast is on it's the actual final training first link in the description make sure you're there because i want you all to get that ebook and the full training and i'm also going to open the door so a huge course so go for it all right 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 button should 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 when i click cancel it goes ahead and does that when i 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 showing 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 flex growth just to show you that you can go ahead and push it all right shereta says nice little tips they're very helpful thank you so much 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 it's 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 valid syntax but this is the es6 way of doing it it's the 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 400 likes nice we're absolutely crushing it guys we have so many people tuning in today as well we just hit 400 across streams as well oh my god you guys are sick honestly thank you so much uh i think i can actually see across the different things multi-stream does that work i'm not gonna mess around with it too much i'm gonna see youtube on me alright so let's go ahead and uh hit save now we've mapped it so if i try this out cancel oh that happened because remember everything's connected right if i typed in a value here we have search input is 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 no which then goes ahead and hides it so click it goes away awesome stuff guys all 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 now this page oops that's actually going to be in the final day the map but in this case we're going to be doing only this today the map is on the next day the map is tomorrow right so 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 that 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 it 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 four or four 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 year's if we haven't built the page it gives us a nice 404. if you want to customize that page you 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 dot js keep it underscore underline on lowercase because you want to have it if we do uppercase it's literally forward slash uppercase but i'm going to go ahead and hit save right now we have this underscore rfce for a react functional component within 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 almost at 500 likes guys let's keep on moving let's go so here i'm going to say h1 i am the search page okay now let's see if he actually worked right or if i'm chatting absolutely rubbish so i'm gonna 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 next year's is a framework for react really nice parties it has this built-in router that i just demonstrated if you don't use nexus 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 gonna go ahead and actually pop in rather than this i'm gonna 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 it's as simple as you say sunny then we should be able to type in header auto import okay self closed header and then it should come up when i hit save right boom we literally get the header popping 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 you can see why you know we had that goku animation in the first few uh sort of lessons or first video because it literally is right it's very powerful quick little water break absolutely crushing it today guys still got 400 across platforms keep up the positivity guys all right let's go let's keep moving all right so at this point we're gonna go ahead and say we're gonna 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 okay so he says you're crushing it with the speed today wow thank you so much dude all right all right so boss mode over nine thousand andre again thank you so much dude appreciate you so at this point we're gonna 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 tomorrow we're going to have two elements side by side we're going to 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 going to 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 for 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 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 all right so we've got that at the top and i'm actually going to start 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 ended so if i said stays in london it's gonna be if i said it stays in new york we're gonna 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 you know we have a dummy endpoint 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 the challenge for you guys all right but we're going to show you how to implement everything in today's build 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 say the class name equals and here i'll say the text should be 3 xl okay text is 3xl and here i'm going to say that we have a font a semi boad 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 all 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 of place price rooms and bed 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 almost at 500 likes by the way let's keep question 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 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 hire the filters it's only after a certain point that we show them so what i'm going to do here is i'm going to say by default the class name is going to be hidden for 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 break point 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 gonna have a padding x of two a padding y of two i actually want to make the padding x4 okay so we're gonna give it a bit more padding around it and then i'm gonna 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 now if you want the border to be thin you just say 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 it 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 and when i 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 it 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 nice so i say 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 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 going to go ahead and do the following so you don't actually have to use jsx file names for this in written next json create react app is smart enough to know that you actually use jsx it got leveled up over the uh over the years so that's why you can do it right okay so joanne says why does my page reload live at sunny's yeah unless you've got you should have just do npm run dev um you may not be doing that or it just could be something preventing your browser from refreshing but in this case we do ease out to 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 styles 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 we're kind of you know it's highly coupled you see that we're gonna have to change everything here it's gonna be super annoying and in this one we're gonna 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 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 global singular.css this is going to be like a global css file right now inside of the css file i'm actually going to add in my own custom tailwind 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 taiwan's documentation if you want but we need to do this firstly 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 what i can say is i can actually just start writing my own custom classet and in this case i'm going to call it button i'm going to have it so when i add button it's going to do all of these styling things for me the way i can do this 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 want it right so in this case we've got and it should actually syntax highlight if 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 it by actually if i i've added that incorrectly yes i have yeah so 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 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 what 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 style 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 cannot 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 yeah i met saw it as well those of you jamie nice i like to see everyone you know they won't point with it 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 highest because i deactivated the css uh tailwind intellisense because it kept locking the page you guys should have it though i'm gonna go back to my you know search page and i'm gonna 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 going to 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 andre says gangster af i love that guys literally 12 lakhs away from 500 who's going to push it to 500. well i have a quick water break if you haven't already remember sign up for day five the link is in the description first link go ahead and do it right now let's continue on guys okay so we have the type of price now i want to make this look like that now how the hell 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 5 so it has some spacing underneath it right and 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 going to 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 wrap i do that now you can see on a 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 styling property to it and boom just like that looks absolutely amazing right really really nice boss layer says couldn't you just make those buttons be separate components yes you could you absolutely could and that's a very good point but this is basically the point the purpose of these you know demos and clones is to show you several ways of doing something so this was to demonstrate that you can have a custom utility class intel in css but yeah if you wanted to you can go ahead and check that into a component sometimes you don't want to go ahead and you know have too many components inside your app so this is another fixer for around it okay 500 likes that's what i'm talking about this keep going 400 viewers across platforms guys that's what i'm talking about let's keep on crushing and if you're looking forward to building this out then you know show some hype so we've done that now the next thing i'm going to do is actually go to the section itself 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 so squeezed together so at this point looks pretty nice okay looks pretty good so far so what i'm actually gonna 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 nexus 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 you have it so when we click on this it takes us over to the home page now how the hell 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 uh react we're going to say router equals use router this is a custom hook that they give us and you can see it as has a nice little intellisense if you didn't actually get the intellisense you import it 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 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 div and 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 and 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.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 are going to implement a little loader that will go ahead and do it the reason why you're wondering why wasn't it sudden sunny when i used regular reactors sudden that's because we're in developer mode right now for next.js which means that it's actually building up 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 if we do we're doing service i really spread it every request but i'm 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 let's do wait for it let's go over to my index right now and i'm going to go over to do to do my search now where the hell is my search my index page oh sorry it's in my header i was wondering where we're 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 boss there 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 out how 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 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 re your page reading once 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 redox or whatever but this is beginner friendly so what we're gonna do is and this is actually a pro to doing it this way as well right so i'm gonna show you exactly how we're gonna 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 homepage 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 you why don't you just use the nexus 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'm going 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 end date 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 redux 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 gonna do is we're gonna pass in a few parameters at this point so we're gonna 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 bridge sure but now you can see it's got ford 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 2 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 we'll do the same thing for end date now what you can see is if i go ahead and show you this dot dot to iso string and there's loads of different ones that to json all sorts 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 search okay now what we see is we see this little uh url it says force that's just location equals mars and start day equals we've got a string representation of the date and end date and we've got the string representation of the end date 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 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 router equals use router so this is why we love hooks we've gone ahead and imported the top constructor equals use rooter and inside of router we have access to something called router.query okay so at this point if i go ahead and say rooter dot query you can now see if i go ahead and console.log this so console.log router.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 10th and i say 4 guests search okay and now if i go ahead and inspect so i get my console up you're going to now see if i go to my console you're going to see an object okay now this object you can see has the end date location pluto number of guest 4 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 of let's go 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 rooter.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 rooted.query.startdate.query.nd now i've pulled out each of them so now if i want the location i can simply go ahead and say console.location this is called something called es6 destructuring all right this is 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 mohib for 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 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 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 gonna do is i'm gonna go ahead and correct the rest of the data 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 gonna 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 going to put the range so we're going to have the start date and end date here now i'm going to need the range in a couple of locations right i actually want to have the ranges so rather than saying start day end date blah blah blah i'm going to 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 that'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 say format i'm going to say new date 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 month which will actually say you know in text what the month is and then the year year 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 in quite a few ways then we're going to do the same for the end date for my eden day equals new format format new day end date same thing and i'm going then i'm going to create a string from these two values i'm going to say the range is going to be backticks backticks allows us to include javascript in a string so it's called string interpolation and then here i go ahead and say if i want to include a variable so i can add 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 now 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 that 300 plus days 9th of august 21 to the 12th of august 21 for 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 quick little water break we are about to push through 600 likes let's keep going guys if you're enjoying this right now smash the thumbs up button and you know keep going right let's continue on 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 so what we're going to do is we're going to go ahead and say and i get loads of questions as to you know do you prefer tailwind or do you prefer style components one million percent tailwind it's so much faster and it works way better with jsx it's a lot easier because you have to leave the file i would pick tailwind css every time plus it has responsive points for a lot easier development any day i'd pick it right so let's continue on 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 going to you know rather than saying prop stop placeholder i can actually destructure and like say we're going to include a new placeholder prop okay now this placeholder prop 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 somebody some information about the actual stay so in this case london ninth 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 backticks because i want to string interpolate here whoa sweden in the house much love brother from pasa calgalia i think i'll pronounce that i pronounced that wrong dude but thank you so much for tuning in all right all right so let's continue on um now uh style components suck compared to telling css dude 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 going to go ahead and say number of guests number of guests okay let's continue on 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 he'll say guests okay so i hit save and nothing happened now the reason why nothing happened is we're actually using the prop over here okay kosovo in the house as well what's up dude good to see you here valon um right uh maple leaf says no nothing no such thing as bad yeah keep an open mind by the way guys you might join a project where they use a style composer works perfectly for them i just prefer heroined right okay and i don't definitely don't like bootstrap i'll tell you that right now that's that's not even a you know opinionated thing bootstrap's crap compared to terrain i'll say it right so placeholder 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 where 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 you can say use the placeholder or so two pipes means or so if there is no value for placeholder it will default to this 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 says 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 if i do london pick another date select six so this blow hold on two 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 oh my god jim me coming in again with a 20 pound donation he says boom keep the energy high guys and another person trust on yamaki just joined the papa fam specialty that's the little youtube join button and thank you so much that's a 4.99 donation as well thank you so much dude i appreciate all the love and support jimmy dude you're coming in clutch every time man wow that is sick thank you so much man hey that's what happens when he comes in nice 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 chuck it in the comments right now so there we go we've got this working london science to this let's go ahead and say seven and search and now you can see london knights 26 7 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 serve a 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 yes 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 the users that when they go to the web page 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 gonna 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 static generation which i teach in zero to full stack euro but for today we're going to leave it with stack 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 server side rendering you go down to the bottom of the file and all we have to do is uh 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 we go ahead and say function get server side props and remember go on to you know have a look online online as to what what actually this means if you want to go and check out check out nextgs 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 popular forward slash i said if i go to this right now you're gonna 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 up 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 adjacent object that comes out which stands for javascript object and you get notation or some stuff it's basically javascript object then you can say then pass the response as a res.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 it 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 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 where how do we actually pass it back to the page we say return and then we say props so we saw this yesterday 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 and 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 and how 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 going to go ahead and prove it to you i'm going to log 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 one total all right so this is sick it's coming through it works okay uh decaf says bro you're too clutch thank you so much dude appreciate you man i love the positivity and he says do you code angelino i'm not sure what that is so probably not um so search results at this point we're gonna 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 going to be um let's have a look 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 map is how we go through an array and return some screens on uh some return something on the screen so i'm gonna go ahead and say jsx so it's curly braces search results dot 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 search 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 gonna 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 gonna go ahead and say um i'm going to create a component here and i'm going to call it the info card dot 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 process 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 all right reviews point says you're awesome bro thank you so much dude appreciate your positivity and guys remember if you haven't already first link in the description sign up for the day five and also get my react basics 101 class for free the skillshare link is also in the description you just gotta search around for it and we started a podcast you know go and just dive around that that uh you know that section right there info card so at this point for the info card i love this track man these songs get me hyped when i'm coding right so i'm going to go down to the search and what i'm going to do here is i'm going to 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.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 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 all 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 all 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 destruction you see why destruction comes in like clutch right uh jimmy's you know jimmy's absolutely right because if you like my teaching method then the skillshare course is fire go ahead and check it out absolutely free link in the description leave a positive review it helps it you know helps it grow all right let's continue on so uh we're gonna go ahead and say this now we don't 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 when 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 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 so what i'm gonna do now you know what vikram's right he goes okay so i've got a funny one boss says how's he not tired yeah i'm already tired what i'm doing is listening vikram said i think he even went to the gym it's an incredible flow state yeah do you know what i did go to the gym that's why i've got so much energy right now i don't know it gives me a nice boost and on top of that we are in a flow state i'm not gonna lie it's a complete flow state right now so i'm down in all right takes time to you know get to that point there's a lot of practice teaching to get to that point but yeah you guys can do it too i'm gonna surround all these search results in a div which is going to be a flexbox okay so i'm going to get all these search results and i'm going to pop it inside of a div that i'm going to 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 okay so before we continue on quick water break smash the thumbs up we're 10 likes away from 600 keep crushing guys honestly i love the support okay let's go guys joy samuel says first time on these lives intense dude yeah man i love it at this point we're gonna pull in the next js image component because we're gonna 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 going to 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 gonna 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 code with the sam says change the song to you don't want to sleep ah sick man no i will actually do it because you asked if i can find it i can't find it right now dude i'm gonna have to carry on but yeah well it's in the playlist somewhere right so let's continue on well 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 going to 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 that 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 high 24 and width of 40. nathan is from cheers from brazil what's up dude good to see you here 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 media 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 drink 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 all right that looks pretty good now what we're going to do oh congrats sonny finally 69 oh wow did we hit 69 000 subs 69 000 proper fam subs man that is i was about swear that was crazy dude nice holy all right guys we're also at 600 likes keep on smashing break the damn thumbs up button that's sick that is sick thank you guys all right so underneath that div now so the next step is we're going to 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 and we've already done the image div over here this is a div and then the overall bloody thing is a div as well right so this is the actual info card div that surrounds everything 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 following we're 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 in 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 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 in 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 i thought i changed that to be honest i thought it was actually different but um interesting okay anyway um so what i'm actually gonna do now is i'm actually gonna pull in a heart icon so we're gonna 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 icon 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 all right uh renato says the image component for nexus does some trick to optimize image yes it actually goes ahead and compresses it down to a webp format that's why we have to go ahead and let it know what the sizing is like okay 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 and 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 and then we're going to say justify between and then we're going to that would actually space it out so that way it flies across uses up the space it justifies some space between it okay you can put a skeleton loader for the image joseph tran says so i would like you to do that for your challenge homework dude i'll make it i'll be sick little addition that you can add on the overall div that surrounds everything i'm going to actually style that one a little bit as well i'm going to 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 overrule div we haven't actually applied a style 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 and it says independent luxury studio stay at the spacious edwardian house now these look exactly as the same as the rest of the text i'm gonna make it say text excel and now you can see 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 tailwind you can do a nice little trick here right you can actually just have a little div and i will have a little water breaking sect thank you andre we're gonna have this i'm gonna say a little div self enclosed and i'm gonna say class name equals and this is a very nice trick by the way i'm 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 tail and css and uh yeah andre smashed it let's have a quick water break guys almost at 700 likes keep crushing guys sharia actually that raj says i'm hydrated because it's sunny i say guys you've got to stay hydrated you'll go crazy when you're curling let's crack on 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 a description there so jsx description and then let's go ahead and say that p tag should have a class name which is thank you to all the new subscribers as well i see you guys popping in if you're enjoying it subscribe smash the like button i will keep delivering on these builds now you can see 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 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 at night 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 going to have a p tag for the star this is gonna be for the little star icon over here the star icon is gonna say star icon okay and i can see jason just joined the actual skillshare um react basics 101 class so make sure you check it out guys that's going to be dope if for you you can actually learn how to use all the basics of react for free link is in the description here we're going to say height of 5 and the text should be red with a shade of 400 let's hit save let's 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 grow 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 manage 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 so let's continue on eugene says good work thank you so much dude 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 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 going to happen all 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 it's taking a second to update give it a second now you can see it goes into a row then what we're gonna do is we're gonna 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 apart i'm also going to say items and to push it to the end in case it wasn't already which is but it's just safe there's a padding top of five and that will 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 gonna style the price and the total price in total so they look a bit weird we're gonna go get to 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 gonna 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 onto 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 style the next p tag the p tag over here so andre again says so much flexes so much flexibility exactly dude 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 little 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 invo 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 gonna see that we have a little bit more spacing now which already looks a hell of a lot better i'm going to 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 pointer will 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 we say hover opacity so when i hover the opacity of the container should become 80 okay now when you see that look that gives you a very nice kind of 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 all right uh at this point all right once again all right at this point we've got our guys almost at 700 likes by the way crushing right shadow lg so if i go here there you go look at that shadow large and that 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 could add in like if you wanted to 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 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. right duration 200 and ease 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 type 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 whatever done first oh bg oh god damn it first bg red5 just to show you that that's gonna work only for the first one right so you see it actually works in a very nice way so in this case we're gonna 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 this is sick guys this is looking really really nice right so at that point i think we've almost finished right we've almost done it we've almost got everything right you're probably wondering sunny but that looks perfect dude that looks everything is like you know where it needs to be well we're very close but we have one slight change now you're probably wondering where the hell does it change 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 got the loading indicator to go ahead and pop in and that's it suspended subscribers says hey sonny i got my new job today as a react developer i've followed you since a long time and i completed all your projects twice credit goes to that is sick dude well done i hope you enjoy the challenge just keep crushing dude so we're gonna have a content loader now lightning in my hand says yep go i have a content load exactly we're gonna 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 shout good shot someone called me out i need to be caught 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 that in 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 to add in 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 the sort 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 uh and it's actually from a very nice library from this dude over here so it's bad rap bar of progress this one 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 well we have chicago in the house code with azam what's up dude all right so i'm gonna go back i'm going to go ahead and pop in my zsh on my ssh we're going to go ahead and install it so mpmi 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 100 and that means it actually will be visible for the apparent future right now how do we go ahead and connect our progress bar to the next js router which handles all of that page routing right smash the thumbs up button and you're going to find out after the water break all right let's continue on guys going so strong sign up for the five day training and the first link in the bomb the first thing in the description is keep going guys it's awesome 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 progress that's it yeah all right so what we're gonna do now is we're gonna 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 an action that nexus 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 start and this is basically when you when when you initially you know push the user to a new page this is what nexus 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 it what is happening jimmy again with the 20 pound donation hope the contributions help keeping your videos free on youtube not everyone contributed but everyone can learn love and energy to everyone jimmy dude thank you so much that is huge is people like you that allow me to do this full-time providing value to the world so thank you so much i appreciate anyone that supports this channel any of the courses that we offer everything allows me to continue to deliver this value for free so you are absolutely incredible dude this is possible because of people like you thank you so much as you guys saw thank you man that's huge rooted.events are on route searching so when the route starts to change i'm going to go ahead and start the progress bar okay cool so now what i want to do anikanch thank you so much another donation 20 rupees appreciated 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 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 right so i'm also going to do it for the root change company and 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 going to go ahead and type in london i'm going to 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 a trigger a root change start event on nextgs 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 is literally showing us wow that is incredible that's absolutely incredible it's working now he's getting a bit stuck there wonder wondering why that is let's actually have a look what's happening there um i'm going to 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 ahead 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 new york oops new york uh new york 9th 11th okay that's a bit yeah okay i just need to refresh so i wanna 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 module like hot swap kind of a module so whatever the change the code change it 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 if we 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 bar's bigger nice all right looks so sick looks like a fast refresh caches um yeah so probably going to it 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 now we're going to give it a complete demo we've actually gone ahead and actually completed today's build so let's give it an entire demo right now right we've got the home page which we had from yesterday's homework then we go ahead and say uh london or something like that you could say in this case 9th to 20th let's go ahead and say 9 guests to prove that it works click search it triggers off this nice reloader we've got lazy loaded images that are popping in we've got the 9th to 20th of august 4 9 guests also we've got the placeholder working and once again everything is working the way we expect it to nice lazy loaded images which means it's going to be fast user experience we've got a nice beautiful footer there we've got all these interactive buttons where we use make use of tailwind css utility classes and we actually showed how you can create your own custom utility class this is sick this looks absolutely gorgeous it looks beautiful it is beautifully responsive looks really really nice the only thing to go ahead and do guys is to actually go ahead tomorrow and add in a juicy map right so this is basically what we'll be doing tomorrow but for today your homework is to get to this point now once you've done this how do you deploy it so i'm gonna run through the deployments again so that way you guys can actually see how to go ahead and push this code to the repo and then go ahead and you know get things set up so from yesterday you would have seen already how to push code to how to set up a repo push code to it so i'm going to go ahead and commit the code again today and what this will actually automatically do is when we commit the code it will go ahead and actually re-trigger a deployment so i'm going to show you all of this and how it works right now okay this is sick honestly lightning to my hand says i hope we name it juicy map guys also almost at 700 as well give us some someone give us 18 more likes and we'll smash it all right let's carry on tino says wasn't there a day off maybe i'm bugging the day off is after tomorrow right after tomorrow when we've completed the map then you have a day gap and then there's going to be the full massive training that i have prepared for you it's going to be sick that's where i'll give you guys an e-book for showing up for showing up and it's going to be it's going to be a lot of fun so let's go ahead and deploy this application so that way you guys can get on with your homework and crush it guys let's continue on so we've got the progress bar which i hope you guys like that little trick by the way it's actually really really clean marty says thank you for building this i'm going to start building epic stuff i'm already subbing thank you so much dude so let's go ahead and actually commit this code so we're going to type in get status to see the status of our branch we can see loads of dirty files which means that nothing's been added so to actually go ahead and pop these files to a commit we're going to say git add or get status again and now you can see everything's green because what we're saying is we're going to add these files to the next commit the commit is the one that we're going to go ahead and push to our github repo so i've already created the repo from yesterday right and i actually created it here so yesterday you see we've made a couple of commits and it was the day one build today i'm gonna recommit day two build okay so in this case i've got all these changes and it's gone green i'm gonna say git commit dash m and i'm going to go ahead and put some you know little uh quotes i'm going to say here day two build and then we hit enter that says seven files change and it go tells you the insertions unleashes and then they went ahead and done a bunch of cool stuff at that point you should see you know there's no number there it's all good so now we need to push this to the branch you see this was yesterday without pushing so i'm gonna go push these changes to our branch but before i do that i'm gonna go ahead and show you something right i'm gonna go to my versal deployment and i'm going to go over to the one that i deployed yesterday which was this one right here airbnb youtube demo i'm going to see deployments over here now you can see that it has day one build it's the last deployment now lots of magic stuff is going to happen here because we connected it to github if i go ahead and say get push right now it's going to push the code which goes ahead and pushes it to github which means if i refresh here it says day two build okay if i go to my versatile deployment it automatically detected that i pushed which means that it will actually go ahead and redeploy the application automatically or auto magically in this case it's going to go ahead and deploy it so that way you can actually uh go ahead and you don't have to do much work for the redeployment i would double check the url and grab the the new url after it's built up but let's go ahead and click into it and here you can see it's actually building out the application and it's going to go ahead and deploy it right jimmy says virtual was such an unreal platform so much better than lampsite days honestly it's so sick man it's really really powerful and what you can do with it and it's really nice for things like nexus because it provides that middle server that we need when we're creating xjs applications as opposed to you know when we typically deploy applications so it says deploying the build outputs nice right and here you can see if you look into this it says server you know server side rendering the search page whereas the actual normal page was wait a second no way andre again a 20 donation boss mode engage full speed towards success dude thank you so much man you guys get me hyped up i can't believe the energy again monique says this is going to be an all-nighter monique you've been crushing it two days in a row come on bring it through with day three let's keep crushing it guys it says done with package.json awesome stuff right status let's click visit let's click this out and again once again you're gonna get a url this is gonna be the key to going ahead and you know submitting your homework you're gonna need to show me that url let's go ahead and type in the search london okay good start we're our state that we learned about is taking effect we go ahead and click some dates which modifies the start date the end date change the number of guests and let's go ahead and hit search when i hit search we should see a loading indicator then we should see a server-side rendered search page click it boom beautiful everything worked the way we wanted it to work that guys is exactly what i want you guys to do or today absolutely keep on crushing it keep on doing what you're doing the homework link in the description is going to go ahead and take you to the homework page so i'm actually going to grab that right now and i'm gonna see um if i can show you where you're gonna what the page you're gonna see so that's actually in the facebook guides as well so you're in facebook guys you should see all the links that you're gonna need for your homework so i'm gonna go ahead and pull it up right now the homework link is in the description it's just you're going to go ahead and see this screen once you go and click that link and it says please follow all the links blah blah and then you go ahead and say go down to day 3 homework submission and down here guys you're going to see you just pop in your name email and the link to that newly deployed site and boom it will work okay and if you have any issues type in partially complete if you manage to do this and add additional features fully complete is the way that you want to go we just hit 700 likes absolutely crushing it papa fam this has been day three of the challenge as i mentioned before sign up to day five at the first link in the description it's gonna be crucial for you getting that full training that i prepared for you as well as the free e-book 60 pages it's crazy man honestly i've took ages to build out but tune in tomorrow at the same time to go ahead and build out the remainder of the application which is essentially where we go ahead and introduce that box at the large screen size which takes the longitude and latitude for everything that we've done today and goes ahead and actually pops in these clickable interactive bouncing map indicators right these markers on the map that's gonna be day four so guys we are so close to the end right we are so close to the end of this challenge just pull through one more day of homework right we've got today you're going to go ahead and build out the search page your calendar page all that good stuff and then we've got tomorrow where you're going to build out the map box and then after that we have a nice day break where you guys can breathe you know catch up get ready to go ahead and absorb all the information on day five on sunday which is gonna be absolutely huge it's gonna be so much fun smash the thumbs up button if you enjoyed this video and as always guys i'm gonna end this out the way that we always do with the papa fam anthem hope you enjoyed today subscribe if you haven't already watch my react basics 101 in the link in the description if you want any refresher on react it's a three hour free course on skillshare go ahead and check it out and as always guys this has been your boy papa react i will see you in day four of the airbnb react.js next year's challenge this is sick someone says what a way of teaching swami says thanks ali says yo that was a lot vincent says i learned a lot today thank you so much guys for turning up always a pleasure to teach you we're gonna go ahead and build this in tomorrow's world good luck with your homework and i'll see you tomorrow papa fam peace [Music] [Music] oh

Channel: Sonny Sangha

Views: 31,891

Rating: 4.9762259 out of 5

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

Id: CSQgyKRj_Fo

Length: 151min 54sec (9114 seconds)

Published: Thu Aug 05 2021