🔴 Build an Airbnb Clone with REACT JS for Beginners!

boy sunny how's it going guys good to see you again and today we're going to be building the react clone of airbnb super pumped about this guys uh we're going to clone everything one day that's the ultimate goal but we're gonna be building the airbnb clone and sunny i gotta tell you bro this is an amazing build i mean just look at the experience of this as i hover over everything you guys see that little nice shrink and grow and how epic that looks for some of you who are there for the netflix build it has some of that functionality and now this slick functionality that you added in to search dates i absolutely love this i can go this week boom last week boom this month yesterday today what i'm gonna do is i'm actually gonna pick between 26th through 30th and uh let's just say i can pick any number of guests right but i'll just put for a guess instead of 62 i'll put two guests and then i can just go ahead and click search yeah yeah that's it all right i'll go and do that damn look at that look at that i can actually hover over all of this so talk me through it what are we looking at here right so right here guys we have right here guys we have material ui being used across so that's why you get those nice looking buttons at the top but we've got this reusable component that we show several times for the results so you're using material ui here we are using react hooks to get everything managed within the state we're using react router so react bruto was how when kazi hit the search button it actually pushed us over to the search page so you can see in the url it says forward slash search we got that using react rule that was awesome we are also using firebase hosting to deploy this thing so that's how we were able to get this from running yeah so we have a bunch of stuff going on here guys flexbox is being used this app is completely responsive um and yeah like if you guys are pumped for this we even have like those growing animations so you saw like when kazi was hovering over those cards you had that growing effect going on um yeah i think this is going to be a massive but the actually something we've never done in these bills before it's actually gone ahead and added a date picker so this is going to be something this is a game changer because this date picker is going to be massively useful to a lot of people um who are sort of getting involved in this stuff damn man this one is a really really nice build i absolutely love i'm loving this one so far and how it looks i mean to me this looks 100 like airbnb and even if i go down here we have the nights the total that's added up we got all the listings that we were looking for so that looks awesome is everything so now if i go i can go back and forth and it all happens instantly so i think that is absolutely amazing i'm gonna just check out what's going on here all right let's go like this so let me try something sonny maybe i can call you are you guys able to hear me clearly by the way on in the video hopefully i can't hear you bro okay what we're gonna do is sunny i will give you a call on your actual phone and maybe this will work we'll see it's gonna be a terrible idea as well all right but i'm gonna keep showing you guys the app all right sunny's gonna be jumping back on guys but this is gonna be an awesome build and we're pretty much gonna get started right away so what we're gonna do is we got our build open on one side so i'm just gonna actually leave this open here i don't i don't need this chrome here and i'll refresh this boom we should be good to go right now i'll go back to the main page and i'll have this open here now until sunny comes back we're just gonna go ahead and get started with a few things so make sure that if you're in here let's actually do npx create react app and we're just gonna call this the airbnb clone all right so oh let me i've just removed the comment so you guys are not bothered by that okay sunny should be back on in a second okay so make sure you guys install the app and get it up and running that's really important okay i think we're good now i think we're good now we can see you you should be good to go all right so people are saying kazi put up the volume a little bit great so what we're doing right now sunny is we're getting the app installed up and running we're pretty much uh getting ready to go over here so you guys can see we have the airbnb clone folder already made and it's also installing a bunch of other stuff in the meantime and should we go ahead and set up firebase in the meantime too yes we're going to go ahead and set up firebase and if you can just share skype with me that'll be awesome okay nice i'll do it yeah guys so all you need to go ahead and set up firebase is a gmail account so you just need to set up a free gmail account and that should get everything up and running for you guys and you need to go over to firebase.com which is a suite of google tools and where the reason why we're going to be using we're using fibers today is pretty much to host the app so we're going to show you once we build this thing how easy it is to go ahead and host it and we're going to show you a live deployment uh today so you guys will be able to access the app and play with it yes welcome yeah all right we're at 522 viewers guys go ahead and do us a massive favor and if you want to help other developers get this exact thing that you're learning go ahead and smash that like button because it sends the video out to everybody all right it really really helps us out so this is your cue when you hear this to go ahead and smash that like button it's massively gonna help this video reach as many people as it possibly can yeah with that said i think we just touched over 500 people watching beautiful we're at 542 now so thank you guys for that and i'm going to call this airbnb clone so boom yep hit google just select whatever you want for analytics you should be good to go you can actually also just not have analytics if you don't need that i'm seeing the likes going up 455 likes somebody just donated so i see the chat going oh wow clayton santos says i feel motivated thank you very much i don't understand english but i understand the coding that's awesome dude hey that's the only language that's going to matter in freaking 10 to 100 years from now let me actually show this on the screen so thank you for that 10 donation clayton i feel motivated thank you very much i don't understand english but i understand coding that is awesome he's saying that he uses a translator he's using a translator got it do we need anything uh from here should i set up firebase hosting sonny yeah so we need to register the app we don't actually need to do this but i think this will show everyone this step so yeah go ahead and click register app no we can skip through these parts that's it all right so next next if you guys don't have firebase tools installed go ahead and make sure you do that you can just go ahead and do that now so you make sure you have it and then um outside of that i think we're good with this let's hop back onto our app and what we're going to what i'm going to do is do npm start uh why did it not so i'll have to cd into it now npm start so now if your app is up and running locally it should actually pop up on the right hand side and you should see a spinning react logo if you guys have been here with us you know that's going to come up and you know also what we do next so we're just going to get to the next part which is let's remove all the test stuff that we don't actually need so i'm gonna actually remove this logo right now too i'm just gonna do i'm gonna go ahead here and select um where do we go all right uh yep what the heck just go something maybe click their refresh button um i don't know what just happened i'll bring it back in a second frank just donated he said let's go send sonny an awesome update on a react client project uh i saw dude so frank has actually got an awesome client right now and he sent me some work that he's doing and guys it's insane he landed a six-figure contract and he's in pwg so if you want to get involved in that join the pwg community and you get to speak to people like frank which is awesome yo i'm not sure what the hell happened here uh when i click on the refresh icon oh okay i just did refresh is it no no and why why is there also why is there a public folder in here you know we didn't do anything with no no public's fine public will be there okay okay right right right okay but i think we might have accidentally deleted the okay so you i think you accidentally deleted source so what i'm going to do is i'm going to go right i think so i'm going to undo it i'm undoing it but it's not undoing it for some reason okay beautiful beautiful okay so we're not going delete the source you guys we're just gonna delete the test file the logo and the setup test file command delete okay there we go so the logo is gonna complain here because well we don't have the logo anymore so for those of you guys who've been here with us you know the deal already we're going to remove this line from here and we're going to remove everything that's inside of that div replace it with let's build airbnb clone nice um and let's just do hey clever programmer build the airbnb clone that should be good to go you just got another donation from naveen thank you so much i appreciate that dude oh wow thank you for that donation naveen appreciate it brother i go full screen now one thing i want to show you guys here is this is something we always talk about if i look on this side see how it's centered and also at the top we have a little bit of margin so we're going to get rid of all of those things right now so i'm going to put this on the right hand side um i'm gonna go inside of app css i'm gonna remove all of this that should left align it and then i'm gonna go ahead in my index.css and i'm going to just get rid of the margin everywhere so we're just going to do this that should get rid of that top margin that you just saw it go up with that i'm going to go back into our app.js because of bem let's rename it to app like this so we'll write bam you guys will also learn a lot of bam stuff in this build because it's pretty heavy on the front end and um with that said guys we're ready to now start working on this app awesome stuff bro nice so we once like a machine bro exactly i love that dude so i'm just gonna load up so we've got the app running here so cause if you just wanna follow me yeah we can get started with this so guys like we so once you get to this point firstly well done because this is going to be your clean slate to getting started with everything boom we're at 656 people let's keep it going guys i'm sorry i cut you off nice i love that so what i like to do is i like to draft out sort of what we're going to be building right so in the initially what we're going to build is the oh we've got a nice new donation from uh mauricio para whoa thank you so much dude amazing we just got 2 000 cops awesome i don't i don't know can somebody tell us what cop is cope man we really need to learn about the world but thank you so much for 2 000 cops really appreciate you mauricio you're a legend yeah really colombian pesos oh nice nice so at this point guys what we're going to do is we're going to pretty much draft out what we're going to be building right so the first page that we're going to build we're going to build some kind of header so let's get the actual app open on the right and we can see i got it we've got the header at the top right so so this is when you say header i'm going to just draw it out so when you say header you're talking about this right here exactly so we're going to open that header so that's going to be the header yep and then we're going to be building the banner and the banner if you can see is where it says get out and stretch your imagination and you've also got that image behind it so we're going to be building that right so banner is this whole thing right here yes exactly where search dates is that in the header or in the banner so search date is actually in good question let me double check that is actually inside of the banner yeah make sure that that is part of the banner so boom that's the banner so that's what we're going to build afterwards thank you for another donation keep going guys we're at 684 concurrent viewers let's get this thing banging to a thousand how you can help is by smashing that like button below it doesn't cost you anything we don't charge you anything for that but you help change the world so if you want to change the world smash that like button let's get this video out guys for right now the number one uh growing coding channel in the world and we're also the best live streaming coding channel in the world and this is thanks to you guys for being here and supporting us exactly we massively appreciate every single one of you guys watching this so again smash the thumbs up button and enjoy the content yeah nice so we have the header the banner and then we also have the um sort of what we see underneath so basically what we have underneath is a bunch of cards right yeah so we have a bunch of cards underneath there and then right at the bottom we have a footer right so if we scroll all the way down so i'll scroll down right here we got so we got these cards here and then besides these cards we have a footer at the bottom got it oh that footer is clean man nice work on that no rights reserved this is a demo thank you awesome covering yeah exactly nice so with that said guys let's go ahead and jump right in so to make this a bit simpler are you gonna are you gonna put any comments right i was just gonna ask are you gonna put comments for the card yep so we have this we have cards and we have a footer right so these are four components right now all of this stuff right here guys we pretty much have this imagine all of this is inside of the home component so imagine we push all of this inside of a component called home right and then then we'll have another component called the search page right and that will have its own that will have its own list of stuff going on but we'll come to the search page when we get to that but at this point we're going to build a home component which consists of four different things a header a banner of cards and a and a footer and that nice little search that kazi was talking about will actually live inside of the search did that live inside of the banner itself so you see this is a nice little tree about how we're going to basically build out yeah that's got it yeah so with that said and search page let me just go to the search page so everybody can see what you're talking about so i'll just search from 26th to 30th and do this and this is what i got by the way super responsive so it looks amazing and when you say search page you're really referring to this page right exactly yeah that's exactly what i'm referring to whoa 10 that is awesome and we just broke 700 viewers with a 10 donation you guys you're the best thank you so much and smash that like button let's keep this rocking and rolling nice let's go guys so the first thing we're going to do is build a home.js component so because if you're going to go ahead and create the first file and then what we can do is i can create it after that but sure thing just to show them so what do you home.js exactly nice and once we have home.js we're going to use our nice little trick called rfce and rfce is a is a really handy extension that we it's called es7 react snippets and to get that it's very simple you just go to the vs code extensions type in es7 snippets and it will come up and that will give you that rfce functionality which is nice so at this point what we're going to do is we are going to actually go ahead and give this a class name of home so we give this a class name of home just like this and we are going to go ahead and import the appropriate css file so we're going to say import home.css like this right and obviously with that said we're going to have to go ahead and create the css file so i'm going to go ahead and create home.css and we should be popped in right here so uh i think you have to follow me cozzy so let's go ahead and re-follow me there we go so now you guys can see i'm inside of home.css and we've imported it at the top here and that will allow us guys to do a few things that allow us to actually write css which only belongs to the home folder uh home component sorry so with that what we're going to do now is we're going to pull this onto so let's just prove that this is the home we're going to say h1 um oh no my snippets don't seem to work that's fine we can do h1 and here i'm going to say uh home component like this right save this file and i'm going to go back to your app and here we're actually going to pull it in the home component so i'm going to say home like so and what we can do is we need to import the home component so i'm going to say import home from home like this right and save the file and what that will go ahead and do is it should now we should now see on the we should now see on the uh on the right side so let's go ahead and give me one second my itunes is going nuts so just shutting out my itunes and now you guys should be actually good to go oh and i just realized i got my phone as a thing so i'm gonna actually probably use that at some point but for now let's keep going nice so uh let's go ahead and pull up localhost on the right okay so we're gonna do that so we got localhost and the actual final build right here so everybody can see it nice and are we sharing the screen yeah nice awesome so now we've got uh you can see it says home component right so what i'm going to go ahead and do just prove this we're going to get rid of the h1 over here and now you should be able to just see home component right so it should be super clean we might need to refresh localhost because it doesn't seem to be coming up somebody says sunny check your voice is too low so let me go ahead and turn the gain up a little bit if you guys i'll turn you up a little don't turn your gain up your audio is pretty awesome i'll turn you up here more your audio today is like really clean okay awesome now you're better nice so now what we're going to do is we are actually going to go ahead and build out the home component so the first thing we want to build inside the home component is um the actually no before we do that so we actually added the home component but we actually want to always show so think of it this way the header component is actually going to live in both the home and the um the search page right so it's going to exist in both of these things so what we can do is we just built the home component but we're actually going to go ahead and build the header component and this is always going to show so let's go ahead and add this in right here right here so yeah what we need to do is create header.js so header.js and we should snap into that file in a second uh let's go in it's just loading so we're now inside the header.json we'll do rfce and we're inside and i'm going to do class name equals header like so and we're going to do import header.css and then i'm going to go ahead and do header.css so we've created a header.css file as well and you should see me snap in any second no there we go so inside and inside of the header file let's go ahead and start sort of drafting out what it's going to look like so the header file has an image tag so i've actually gone ahead and grabbed an image and this is just an image of the um the uh airbnb logo so let's go ahead and pop this in here and what we're going to do is you can see i've given it a class name of header underscore underscore icon so this is bem this is a header component and it's the icon element so that's why we've done this and now we should actually go ahead and see that if we okay so it's freaking out because we haven't imported it so we need to go ahead and import it here so we can say header like this save the file and we should now see a massive airbnb logo right so obviously we don't want it to be that big it looks a bit ugly when we have it like that so so how do we get that to look a bit smaller right so we go to header.css and we basically are going to target the header icon so we're going to target the header icon and i'm going to say give it an object fit contain so this is going to keep the aspect ratio so it doesn't stretch i'm going to say the height is 100 pixels so now you can see it's a very small size and then we're going to go ahead and give it margin left of 80 pixels so that should push it a little bit from the side so let's go ahead and decrease this a little bit for now so let's just say 20 pixels to make it a little bit subtle and we have the image tag up and running so that's all handy and that's done now we're going to create a div for the center stuff so that that search input field that you see and the header right so let's go ahead and pull out the deployed version quasi so this is a deployed version yep so this is the deployed version and you can see it in the middle of that deployed version so that's actually going to give it half and half uh so because right now let's start stretch there we go so you can see in the middle of the the top bar we have that search input field so we're going to go ahead and build that first and then we're going to add a header right section which is which has those uh icons that you see on the right so the first thing so hold on so in the in the header this is going to be one so i'm just imagining this this is one container that will just keep the logo and that one container has only one child yeah so this is really good by the way guys because my um css skills suck so it's good because if you're a beginner in css you'll pick it up this way too i imagine this is one container with two children one is the search input and one is the search icon exactly nice okay dope and then we got another one here and this has four one container with four children text logo icon icon icon yep exactly and the middle container we're going to apply flex 1 to it so it's actually going to span all of that gap that you see in the middle so this is going to apply flex 1 and so hold on let me get this straight so this container here is actually really like this uh right yes exactly [Music] nice and that happens when you do when you do flex one exactly so it's giving that the importance and then the the ones on the right and left are only taking up as much space as they need exactly that now another question for you sunny how do they know to be centered how does airbnb logo know to be kind of centered you know what i mean like why isn't it left aligned so what we do is we say that the um header so we say that entire container should be display flex which will pop everything into a row and then what we say is align item center and that will align everything centrally ah so this is because of a line items uh center something like that yep exactly dope okay dude this is actually a really cool way for me to learn yeah it's nice okay and when you do a line item center it will center every single one of these items in the entire header we're applying a line item center to the header yeah so the actual um we're applying it to the direct children of the parents so that they had a parent so we should make sense when we do it but what will happen is for that middle one for example that will have its own display flex and then that will have to have its own align item center got it so every single container has to behave you have to give the rules to that container so um yeah we'll be able to show it out but that's a really good example of a line item center beautiful okay okay let's keep going nice so with that said what we're going to do now is go over to here and we're going to create a div so i'm going to go ahead and do div um so let's make a div and this div oh man why is he snippets no i'm going to say div class name equals and then here i'm going to do header center right so this will be header center and it's being a bit laggy so this is actually going to go ahead and do this so header center and here we're going to have two things we're going to have an input type as text so here's going to have an input type as text and a search icon now it's going to freak out because this search icon i mean where are we getting this from right so in order to get the search icon we're going to have to pull in material ui so let's go ahead and actually do that at this point so kazi let's head over to materialui.com and show them how to install material ui core and material ui icons yep so you guys make sure when you're at material ui grab this come back to your command line i'm gonna just open up a new one and then install this how you install core now i'm going to go here type in icons and in the me and then also i think install core really fast damn and then over here choose icons because my download is what 900 900 download speed actually right now 900 megabits nice uh so make sure you also install icons you'll need this on this page make sure you click here which says search the full list of icons and yeah until somebody finds a better way to do that and then go in here here are all your icons so for example when you guys are looking at these icons here right um whoops there we go so sunny has this avatar icon at the top right i i can probably did you actually pick it from here uh no so the avatar is actually a component because you can pass something but let's look at the globe for example okay let's type in globe okay there we go yep so that's coming from right there dope and then what about that drop drop arrow drop error that's that's actually if you type in uh i think it's if you type in down down or something yeah there we go another is that one that one expand more it's expand yeah yeah right there and then yeah i mean everything else oh the is i mean obvious so then what sunny would do is once he finds search right here we got search we match it up to that one dope and now click here this will give you the actual code you can copy it paste it into your app and you're good to go exactly and then that's how when you see me using snippets like search icon language icon expand more icon that's where we're getting them from right so if you do get confused at any point you can be sure to check out material ui that icon search tool all right i'm going to give you access i'm going to give you read and write access to both terminals as well awesome nice so with that said guys this search icon is freaking out right now because it doesn't know where to pull it from so let's go to the top of the file import the search icon like that and that will actually go ahead and it should save the file and we should have the search icon so you can see now everything by default is display blocks which means it stacks up on top of each other we don't actually want that behavior all right so in order to get rid of that what we can do is we can go here and we can say header and we can say display flex so if i do this display flex check out what happens as soon as we hit save everything goes into a row so you can now see that the airbnb and the top has gone into a row let's go ahead and remove that home component let's just comment that out for now so it gets a bit confusing there we go so inside of the header now we've got the search icon and we've got an input field text uh input field yeah so what we're going to do now is also remember we said you have to treat every single container with its own rules so in order to do that we can target the header center say display flex and look what happens when i do this guys so if i say display flex align item center like this look how the uh search icon is now central center with the input field so that's really clean and that's the way that you do that all right now what i'm going to also do is go ahead and add a the right section so the right section i'm going to go ahead and do a div and this div is going to have a class name of let's go ahead and say header underscore right there we go and here i'm going to go ahead and add in a few things it's going to have a p tag so this p tag is going to say become a host because that's what they have on airbnb and for those of you who don't actually know what airbnb is it's a place where you can pretty much rent out a room it's like a hotels or booking website um so yeah so that's where you can become a host as well so we're going to import the two icons at the top so you've got language icon expand more icon and also this is not an icon but it's it's a component called avatar now that's how we achieve that sort of circular profile image a very very powerful component you can actually pass it a source we use it in a lot of other builds so be sure to check that out but what we're going to do is we're going to go ahead and pop in those three icons here like so so i'm going to go ahead and do this and now we should see those things pop in and now you can see in the header right container you as you guessed it it's display block which means they stack up on top of each other by default we again don't want this behavior so what we can do is we can say header right we can go ahead and write and then what we can do is we can say header right display flex display flex like this right now if i go ahead and do this we can go ahead and save it and you should be able to see everything goes into into its own line right now if again let's stick with our rule let's do a line item center and we will be able to see again that everything goes center central with each other which is really nice and it's a really good way of doing this now for the header what we're going to do is we're going to space out those components components as much as they can go so we're going to say justify content space between and that will actually push the components apart as far as they can go from each other and then for the central element remember we said that we want that center one to take up as much room as it can so we're going to go ahead and give that a flex one rule and that will do that and you can't actually see what this is doing unless we actually make it a little bit bigger but you need to trust at this point so because let's go ahead and make it a little bit bigger now you can see the input field is actually taking up the majority of that room but it doesn't look like it right now right so it actually doesn't look like it and the way we fix this right now is we're gonna add a few things in and um in order to do that uh what we need to do at this point is firstly we need to go ahead and do the following so we're going to say align items uh center which we've done let's go ahead and do that first align item center at the top uh william cruz again with the um five i think that's uh what was that one he always says it every time i can't remember but thank you so much for that donation massively appreciate donation awesome i always actually i call it the chief keef donation but i forget what the chf man every time swiss franc how in the world does chf stand for swiss franc bro but thank you so much that is huge yeah i always get lost with that one i wish it had a better acronym like sf swiss franc that would be so much easier but thank you brother i appreciate it absolutely appreciate that so nice so now what we're going to do is let's go ahead and do the following so for the uh header we're going to go ahead and add the following rules so i'll explain each of these ones as we do it so we're doing a line item center we're doing position sticky and what we're doing here is if when we do position sticky with the top of xero what this does is if you go to the deployed apkazi and let's go ahead and scroll down on the deployed app so let's open up the deployed app and let's scroll down can you notice how the header is actually sticking to the top yeah i can see it's very yeah like yeah so it does that because we've done position sticky and then top zero so it sticks to the top and that's how we get to look like that now an important role that we have to add is the z index so you have to say z index of 100 uh 100 because and if we gave something else like 99 we want it to be going to be like sort of on top of everything else so it covers everything we're gonna give it a background color of white which is what we see and expect and a width of 100 because we want to span the entire width so that's going to do that for us the next thing we want to do is we've already started the header icon which is awesome we want to basically william cruz says the best of the best you both are amazing sunny would be nice to see you working with react native challenge accepted dude we will get on to that and we will start building something really native i haven't used it in a while so i mean we can definitely i'm excited to go back into it i know people are asking what happened yesterday because i wasn't on the live stream i was i shared like my dog got hurt so um i'm gonna share some of that with you guys so this is actually our puppy her name is pudgy and she ended up like really breaking her nail pretty bad so that's why yesterday we had to go to the er frankie ended up taking over the stream uh then we were waiting at the um at the vets for hours and here that's my girlfriend that's amber lee that's pudgy right there uh she was pretty hurt and then we pretty much got her back and this is this is what she's up to now so you can see she's passed out she got a little like cast on her arm right there and yeah got a call so she can't bite it off but yeah she's getting big really really fast um dude it's horrible when you see a little one like a little dog sort of injured that's crazy they gave her a little car yeah a little like tiny cone she's so adorable she's probably playing with it so like she's just sitting there like she's out of action with her crazy stuff was going on man and then yesterday like our freaking whole alarm like our sewage system like making crazy sounds and stuff and then releasing smell i'm like what is happening can we just get back to coding good damn it man at least we are back guys and i think that deserves to smash your thumbs up man yeah guys if you yeah for the little puppy you know yeah go ahead and smash that like button thank you people are saying blessing her a you says blessing for her courtney says beautiful dog she's a english bulldog she's four months old so to see her and then like the nail got broken so they had to like actually pull it out completely so that's why they put the cast on top of it but uh yeah other than that let's keep in rocking and rolling now i'm back and ready to go guys and we're here and let's crush it it so what we're going to add now for the center is we're going to say give it a max width and fix and fit the content so let's go ahead and do this so fit content like that and what we're going to do is boom and here i'm going to give it a bit of styling so we'll say panning at 10 pixels a height of 30 pixels so let's go ahead and do that save the file and you can now see that it should change a little bit uh oh oops i've added that to the wrong thing we should add it over here there we go add it to the header center and that will actually go ahead and pad that out a little bit now for the top right so the center element we're going to go ahead and give it a border radius of 999 which is a perfect oval we're going to give it a one pixel solid light gray board and you can see now it's got a so very subtle light like sort of um light gray border around the top but we don't want that input field to actually have the border around itself so what we need to do is target it like this we say header center the direct charge which is an input and we're going to say border none so we're going to go ahead and do border none and what i'm going to do at this point is i'm going to say width of 250 pixels like this and now guys you can see if we go ahead and do this so actually at this point we'll keep it responsive let's go ahead and get rid of this for a second but what we can actually say is we can say um let's leave it as with 250 for now let's go ahead and do that and then on the header right what we're going to do is we're going to say justify content space between those icons we want to give some space between them uh we're also going to give it a width of 15 view it and a margin right of 80 pixels so i'm going to go ahead and do that right now and this will go ahead and it should space it out a little bit more and there we go so let's go ahead and do this for now because let's actually make it a big screen uh sure thing boom there we go nice now you guys can see everything is spaced out evenly we've got a nice little bit of spacing and what you can do at this point for desktop support you can do a width of 250 pixels and you see the middle goes into that but for now to keep it super responsive i'm gonna actually comment now so let's go ahead and do half half again nice and what we're gonna do now is for that input field what i want to actually say is give it a padding of 10 pixels and then outline width of zero and what this does guys is now because if you go ahead and click the input field damn a foster just dropped five pounds he says damn you guys are just awesome enough said hope you make a web app with an admin interface someday i've actually heard a lot of people say that so we will go ahead and actually make some kind of admin crud functionality app or something by the way i figured out finally how to actually increase the size of this thing that was thanks to leif i was on the coaching call for a profitable shortcut and he was like dude you can increase the size of this and i'm like oh oh nice that makes life so much easier so yeah thank you fosa really appreciate it and yeah this is another reason i actually really like django as a web framework because it comes in with a badass built-in admin interface which is so freaking nice too but i think a django and react combo could be really fun that would be awesome dude because i want to learn a lot of django that would be awesome to do that nice so kazi go ahead and click the input field yep and now can you see there's no blue outline right you don't get any blue out there but if i if i actually uh comment out the outline width uh oh no oops i'm on the wrong code editor if i go and comment out the outline with this one and we now do can you see you get that nasty outline right yeah kind of defeats the entire ui so what you need to do is outline width of zero and that actually gets rid of it and now it just looks plain yeah and that's how you get that sort of desire right and it's a boolean type of thing right so whether you're zero and one that's the same even if you had a hundred it'll be the same exactly yeah okay dope yeah so that we're gonna switch to zero and then you'll be able to get that so that's really clean and with that said the header is pretty much done at this point right so the header at this point is done uh which is awesome so now we can actually go back to the app.js file and we can see that we've got our header over here and now we're going to focus on the home component right so let's go back into home and previously we had this where we said home components let's go ahead and see now you can see the home component renders in underneath um underneath the the header and i can see some people have just completed the google clone that's awesome oh yeah i love seeing people that oh damn louise eduardo just dropped 20 us dollars wait hold on hold on whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa whoa damn thank you so much luis eduardo really appreciate it holy crap you guys i mean yesterday i had to pay 400 for my dog so this is actually helping out you know this is actually oh my gosh thank you so much really appreciate it that's insane thank you so much louise wow somebody said we have 20 dislikes on the video so i think he paid 20 dollars to make up for all those dislikes nice i appreciate it appreciate that dude so with that said let's go to the home.js component right so what we're going to be building next is a fun component is the banner right so that really beautiful banner that we see so to get that banner up and running let's go ahead and create banner.js so i've just created that file and we should pop into it in just a second and we are in that file now and if i do rfc e and the snippets should load there we go and we can see banner and then let's do our little setup so we say class name equals banner and at the top of the file i'm going to go ahead and import oops import banner dot css there we go save the file and it's going to complain because it doesn't have a banner.css so let's go ahead and create that file oh we just got another donation dude by x i'm gonna i'm gonna bring that in a second but jose said qazi i just wanted to say that your content is the best out there actually spending the time to read and see your sts stats result uh see your results as speechless thank you clever programmer of course guys we're reading every single message and we're trying to respond to every single uh message as long as you guys are actually putting in the time and asking good questions we will reply to most of people and thank you so much ex lee lou for the six pound donation holy crap euro six euro donation and he goes uh awesome hi qazi and sunny in the future do you have any responsive mobile project or a tutorial on how to use media media queries in react what are you thinking sunny dude we just got another one i'll let that pop in when you see that but yeah we are going to be doing a responsive oh my god we'll definitely be doing i would definitely be doing uh some builds with media queries so stay tuned for that and you guys know you guys know that song on tick tock i should be playing that here remind me actually to put that on after this frankie but like that one goes what you do you have you heard that on tick-tock ever i want to play that when we had that is a 10 pound donation and he says waiting to see a facebook clone and we will be making a facebook clone with every option including live and marketplace tech one react with typescript sunny typescript is coming up i know you're gonna enjoy it two redux three apollo four graphql and five docker damn bro i think you might be asking a lot for ten dollars bro i think you're pushing it now but we'll try we'll try to add some of the things in there but thank you bro no pressure no pressure guys so with that said we've got we got holy they're gonna start asking for blood from me yeah bro just for now yeah yeah all right for banner so inside of the banner component now it says banner is not defined and that's because inside of here we need to do an import so let's go ahead and say import import architect i've got a new keyboard import banner from banner.css [Music] there we go save that somebody else message they're like could you make an app that includes react graphql scikit learn and tensorflow like damn holy so it's freaking out if we if you give it an empty thing right it's going to start freaking out so this would just say hello for now something like that and then it will actually go ahead and not give you an error so it should be working completely fine once we put that in and it saves and refreshes um let's go ahead and refresh logos 3000 quasi all right i will go ahead and refresh localhost 3000 oh oops i've done it wrong this should be banner here should be sorry import from banner that's why that was happening inside of here we do import from banner css that's nice so there we go we've got hello and let's just say i am banner okay i am the banner now what we're gonna do is i love how people actually spot that out as well like it shows how much you guys are watching it's insane to see that yeah seriously yeah like when i see people like you forgot an import i'm like holy crap they're really like nailing in on that so now inside of banner.js we're going to have a few things right we've got the search so we're going to ignore the search just for now but for the info right so the actual banner itself let's get that looking the way that you've that the majority of it that you see i found it i found it so i'm just gonna show it real quick uh i was trying to spend some time looking for it uh and i found the song in the compilation uh this is what it is let me play it actually real quick hopefully it doesn't blow your ears guys be prepared be prepared oh god yeah i got here i mean uh it's i don't know how this trend started it's all about like splashing water on people and oh yeah yeah yeah i've seen a few people do that yeah but i love that song that i love jesus christ yeah so you guys can look that up it's called what you doing with that yeah i'll definitely clip it and have it in our videos playing next time nice sean dawn says great what you guys do i made the netflix and google watching your video thank you yeah pretty sick names oh damn yeah sean dean maybe yeah oh damn it david jonathan said that wasn't sound wait are you serious yeah i might have not actually came through on the sound i think the sound was there but it might have been too quiet let me let me try it one more time i think it should be good guys someone jumps in like is this the place where we learn reaction did somebody say that no no the audio is there i mean audio should be there you guys all right all right let's keep coding my bad but yeah that's where the song comes from so and now what we're gonna do is we have the banner and we want to basically get this to a point so let's go ahead and put the banner over here so we've got banana.css and just going to target the banner and what i'm going to say here is that the banner should have a height of 50 view height so this is going to be pretty much say it's got 50 percent of the screen is going to be its height right so we're going to say that we want to be position relative because we're going to have some things positioned inside of it and we want to do some funky stuff with that and then what i'm going to do is i'm going to set the background to an image right so the background of this i'm going to set it to an image and this background i'm going to set it to is actually an image of like a sort of airbnb looking building right so let's go ahead and do this and save it and now you can actually see if we go ahead and actually make that a bit bigger quasi so let's go ahead and make that a bit bigger we should be able to see why is it looking like oh yeah oops so we've got that right now you can see the image is there but it's not centered right so all we need to do is add these two lines at the end saying center center and this will center it horizontally vertically and you can see boom there you go you get like a very nice centered image yeah so that's really cool looks super clean let's go ahead and do half half again nice and what we're going to do now is where it says i am a banner you notice how it's the background of the div that we actually set right so i'm going to actually go here and change this now so we actually have inside of it i'm going to have no i am a banner but i'm going to create a div so i'm going to say div and this div is going to have a class name so i'm going to say class name and this is going to be banner info right so it's going to be banner info and this is going to be responsible for the text that you see so that black block of text that you guys saw in the previous uh build so what we're going to have inside of here is a h1 which says get out and stretch your imagination the reason why we don't i didn't think of that that was what was on the website that's what's actually on the airbnb website and then we're going to have a h5 um i think you're muted quasi yeah very good no i know but i wasn't talking oh yeah i thought i saw you talking to the camera oh no no i was just i was just staring everybody down in the live stream making sure they were they knew i was paying attention and watching them nice so now you can see let's go ahead and refresh localhost because there's some reason it does this when we pair program um let's go ahead and refresh quasi localhost 3000 and then what we're going to do is we are going to have so now you can see it says get out and stretch your imagination here's some good comments by the way i just want to shout them out malwaniki says after trying tons of boot camps i found my yoda you guys are the best and robert says thanks your streams and videos are great keep going guys learned a lot from you nice and you know what guys even if you're a beginner just follow along with the builds and i say this even to the students inside the course follow along with these builds it's pattern recognition just by following along with the build every single time you start to pick this stuff up naturally like if you go along with every single build it's impossible not to learn right so go ahead and make sure you do that and you guys will naturally pick up these skills nice so with that said let's actually go ahead and add an explore nearby button right so let's go ahead and add that button in so let's go ahead and do it here so say button and it's a capital b because we're using the material ui button so we need to go ahead and import that at the top of the file let's go ahead and pop that in at the top and then here i'm going to say explore explore nearby oops explore there by like this and then i'm going to go ahead and give this a variant so i'm going to say this is a variant of outlined so material ui allows you to pass props to its components this one changes the look and feel of that button so the explore button you can't actually see it very well but you can actually see it now and everyone's in the chat hey she goes sorry fashionably late the girlfriend's always supporting nice and so now we've got explore nearby um and now what we're gonna do is actually go ahead and style this banner info so it looks um a lot nicer than what we're seeing right now right so let's go ahead and do banner on the squad score info and let's do this so balance for info oops info and let's actually go ahead and change the background color of this to black so let's change the background color to black and let's do this so we're going to say color of white as well so change the color because now we remember we just set the background color to bright to black so the text is also going to be hidden so we need to make the color white and you can see now we can see that the color of that stuff right so um now what we're going to do is confused uh now so let's go ahead and do color white and what we're going to do is we're going to add some padding right so these are different values we're going to be using i'll run you guys through what each one is so padding top i'm saying give it 25 padding top i want padding left 50 pixels padding right 50 pixels padding bottom 40 pixels um and then i'm going to say the width should be 300 pixels max right so the width of 300 pixels and that will actually tie in a little bit and now what's really nice about this design guys is that if you actually go ahead and make this uh bigger kazi we should be able to see that this will actually it's a very nice sort of overlay right so let's go ahead and make it bigger you see it like it kind of looks pretty neat how it's in there right um so you can kind of get that thing and then like yeah looks super neat by the way ramrod says please consider adding tracked module in the pwg course what's tracked maybe he misspelled react i don't know yeah i think you might be talking about react inside the pwg course we actually do have a bunch of content we have a loads of coaching calls on inside the course and we're actually dropping some modules on react so everything is going to be inside that course yeah and apparently ashish uh enjoyed marabon and sunny's dance video on savage love on tick tock hey nice quick getting that clout damn yeah there we go all right so because do you teach hacking oh man if you if you consider debugging hacking let's go yeah right so now what we're going to do is we're going to change the style of that button right so let's go ahead and target the buttons we're going to say banner info the direct child which is a button and i'm going to go ahead and do background color and i went and actually saved you guys some time and i found the color of airbnb which is this right here so if we do that you can see the button pops in right now i you can see by default material ui makes everything uppercase for some weird reason so to get rid of that you do text transform inherit and that'll get rid of the uppercase oh just about another donation by manav aurora i think i've seen him in a few of these videos awesome he says pwa or react native what will be great for a project depends on what you're doing dude so pwa is progressive web app i would recommend go with that until you need a native app and i love what ram raj is saying he goes i'm loving the pwg course already way to go thanks for the awesome content and i actually want to share something pretty epic that happened in uh in pwj yesterday actually so i'm gonna show that also i know i know i know i know i will i will i i will address that in just one second i'm gonna lose my actually so i'm actually trying to hide that from myself for just one second so i can show this because we have bunch of awesome things to show you guys uh where did he post it where did devin post it trying to find uh let me actually try this uh okay let's try this here we go here we go awesome so i just found it right now i'm gonna full screen this and hopefully you guys should be able to see this so devin is our student in profit with javascript and he goes i'm not normally used to posting stuff about myself uh this is devin by the way he was coming on the live streams as well he goes but i know it's important to share wins so i'm sharing mine while i have them first of all i love my new job it's my first six figure job and i'm learning so first of all damn devin congrats on your first six-figure job and he goes and i'm learning a lot of different things that i don't ever get to practice when i work for smaller companies i've only been working this job for a little over a week but it's awesome second i just got accepted to the second round of interviews with google yes that google and he goes i am so pumped when i first joined the group i was working for a and mom-and-pop agency doing wordpress sites making like one third of what i'm making now and i only joined pwj back in june july is there a correlation i'll let you decide i want to thank everyone in the channel for their support because i'm mostly here for the community and it's helped me in a large way dude that is so freaking awesome that is insane dude and look frank is here too on stage nice that's awesome guys if you want to know how to get inside this community link in the description and david is here david is also on the live chat with us right now yeah david's always watching solid guy he was actually in the coaching call yesterday yeah we spoke loads and we'll be working quite closely together so david's awesome dude inside the course yeah and what the hell the greatest ever you should be in the course right now you're the only one left who's our biggest supporter but not joining the course you should jump in so 100 dude that is sick this is for you devin i just played the air horn and that is a massive massive win to be in the second round of training and also kiera robinson is in her round of interviews with google as well and she's in pwj i'm actually coaching her dude oh snap yeah i'm giving up hand with those interviews yeah so she's doing a google interview as well and she reached out to me to get some help on that so yeah that's another student inside the course who's doing google interviews so this is like mind-blowing stuff guys like seriously it's insane that the jobs these people are getting like frank even got a six-figure contract blew my mind like for company and if you guys have heard of sonos then that's the company that he got it for so amazing stuff yeah we're just having massive wins left and right so if you guys are serious about taking your career to the next level guys i'm telling you this jump on this course before we increase the price and just for fairness so all of you know we know that this program is worth over two thousand dollars it because most people send us messages telling us how much this work this program is worth more than the boot camps that they paid for and in about in next week we're going to be doing a challenge for react and during that challenge we're going to be increasing the price of the course and then it's permanently increasing it's going to keep going up so if you find it for less than 2 000 and you're serious about this you should 1 000 join so for all of you who are here just letting me know because i think this would be a good deal for you guys before the price actually goes up in a week or less exactly and guys if you're on the fence and you can't make the decision yeah or like you're just you're tempted or whatever make sure you check out in the in the description we actually are offering a completely free training on the three top mistakes that developers make completely free training go ahead and check that out and and yeah yeah so you guys have the links in the description you guys can go to this page anytime you want and make sure you just check out this video over here for profit javascript this is the page cleverprogrammer.com pwj and it will tell you everything about this program but you guys know you're going to be getting sunny on the program on the live coaching calls you know you're going to be getting gnaws so it's a brilliant program guys with so much just heart and soul we put this together join it your mind will be blown that's all i can say yeah and guys like i can't stress enough like if you think that you if you enjoy the live streams me qazi nas the entire team frankie we put our heart into this this into this program so like everything that we love and we aspire to like to to make an impact in this sort of uh in this community is inside that program so like if you want to be a part of that then just jump in yeah 100 percent let's keep rocking rolling nice with that said guys we were on the banner right so we just added in the text transform inherit line of code which actually changes the button text to lowercase because we don't want it to be super everything like screaming at you right now it's touching the top text so i'm going to do is margin top of 20 pixels font weight of 600 and you'll see that pushes the button slightly away from the um top of the text which is awesome so we want to make sure that that's done also the h5 tags so the one which says plan a different kind of get away to uncover the hidden gems near you gonna go ahead and target that and give it a margin top of five pixels um because we need to actually set up prettier because for some reason priya doesn't do it when we save um which is a bit annoying but will not work bro i think live share causes these problems yeah it's fine we can we can carry them without this one so we've got the h5 and what we want to do guys is when we hover over that button right so right now when we hover over that button it's not very responsive right so um it's going to actually change to a different color so kazi if we actually go ahead and hover over the explore nearby button um yeah so guys that p that slack group bhara just asked do we need to be a member uh of profit with javascript to join the slack group yes you have to be because that the way we keep the quality just incredible in that group is by whoever joins profit javascript gets access to our community as well and i think community is actually one of the best parts of that program so what did you want me to do sonny uh if you just hover over the explorer i saw some people in the comment in the comments saying who's the guy in the back frankie frankie oh yeah guys that's frankie over here uh he's getting some sick shots actually so let me show you guys actually the photo that he just took and look at the setup here i mean that looks amazing this is my setup right now to do this live stream this is all we have to do to actually make the make it come true nice dude awesome were you sharing your pho oh nice yeah i see it oh awesome yeah nice dope so yeah that's thank you guys uh so no it's been cause you hovered over the explore nearby button it went black right we don't actually want it to go black because it doesn't look very clean what we're going to do instead is target it so that when we hover over it so when we add this hover attribute it's going to change the background color to white and then the text to so it's basically going to invert one second i forgot i'm sorry i keep doing this but i don't want to miss this so i forgot about this comment somebody in the chat reminded me thank you about that but louis donated five dollars thank you so much and he goes my donation of 20 was for your little dog damn thank you thank you so much he goes this one is for you guys great job let's go thank you luis thank you lewis that's amazing dude nice so with that said so if you hover over the explore nearby you'll see the colors should invert now yeah oh nice that looks clean like a crisp little look to that uh and what we're gonna do now is actually go ahead and have so we've done that sort of very nice sort of look and feel to that part what we're gonna do is have an actual search button at the top so search bomb which says search dates right so at this point to add that search button i'm going to go ahead add a another div on on top of this and this one we're going to call someone say div like here i'm going to give it a class name so i'm going to say class name last name of banner and this is going to be banner underscore underscore search like this and here i'm going to basically add in a button so i'm going to say a button will exist here and this button will essentially say at this point we're going to say just search dates right so something like this button search dates and what i want to do is i'm going to give it a variant of outline so i'm going to go ahead and do this oops i've forgot that we don't have previous i'm going to go ahead and do variant of outlined oops variant of outline like this awesome and then what i'm going to do is give it a class name as well so i'm going to go ahead and say class name of banner underscore underscore search button so we can start this later on so banner search button and with that said it should we should have a button on top and you can see it's actually there it's a little bit difficult to see but it's actually sitting there at the top and it says search dates at the top so that's very clean now we're going to go ahead and style that so whenever we give a material ui class a class we actually need to style it with the important properties so i'm going to go ahead and add the following styles to that button i'm going to say a background color of white i'm going to say the font weight should be 900 and it should have a text transform so to get rid of the uppercase text and we're going to give it the text itself a color of the airbnb pink so that's how we get that look and feel and then what i'm going to say is for the banner search so the actual div surrounding it i want to say go ahead and do the following so i'm going to say give it a top of zero so it should be attached to the top give it a display flex so actually let's go ahead and get rid of this one we can do display flex and then we're going to say flex direction column and this will actually span the entire width of the screen so display column and now you should see it takes up the top of the column so you see at the top now we have that search dates and i'm going to get rid of the home component text over there because that's just ugly right now so boom there we go you've got the search dates at the top right so that looks clean but what we want to do now is have it so that when you click search dates we essentially change it so it says search dates and then hide search dates and hide and now to demonstrate this go to the deployed version qazi yeah let's go and if you click on search dates so you see it says hide at the top and then it says search dates every time you click the button it changes the state right right so we want to get that functionality and then basically we and that nice little like nice little animation when i click it at the top yeah so that's actually already in there at the moment so if you go ahead and go to r1 so so that's the reason why we get that is because we're using the material ui button nice okay yeah so that's why we get that one right there so awesome so now what we're going to do is we are going to go to the um search days and what we've got to do to get this functionality is actually add in a piece of state so the piece of state that we're going to add in so state is essentially just how you write a variable inside of react uh here we're going to have a piece of state which is called show search right and the reason why we're going to do this is because we want this but we want this variable to keep track of if we click that button or not and by default initially when we click it we're going to have false and the reason why we want to do this is because we're going to say if you click it so let's just say for example um whenever it says show search so if so show search is true then i basically want to render out the search element that you guys saw earlier so let's just say show such uh show date picker let's show show date because that's what we're trying to do here um exactly now if we go ahead and say it says use state is not defined we need to import that so we need to import that as such at the top of the file there we go save it and then we should be able to see now if we save that so cozy now if we actually change this to true you should be able to see that it should say show date picker awesome and if i change this to false it goes ahead and it hides that right so now we have some kind of functionality to it right so what we need to do is that button we're going to tie the functionality to that button so i'm going to say on click of that button whenever you click that button i'm going to shoot off an arrow function so it's going to shoot off a function and this is going to say set show search to whatever the opposite of show search currently so if it's currently true it's going to become false if it's currently false it's going to become true so now to show this in practice kazi go ahead and hit the search date button or search yeah search dates and now you can see show date picker there we go so you see we have some kind of functionality to it now right and now that is gonna that basically sets us up for the next part this the next part is essentially building that beautiful date picker that you guys see in the final build which is a really nice all right i'll add that i'll add that to the top so currently we're working on building the date picker yep we're building the date picker at the moment okay i just added that to the top awesome so now what we're going to do is let's go ahead and go to um let's go ahead and actually go to we need to basically we're going to replace this show date picker with some kind of component which looks like this so we're going to have a search component right and this search component should render out to be essentially what we see in the final product so let's go ahead and create search.js so we should snap into that file any second now i've just created a search.js file and boom we are in it and if we do rfce we should get our es7 snippet and let's go ahead and do our normal bem naming convention so we say search let's go ahead and create the appropriate css file so we're going to import from search.css save that create the search.css file nice um by the way we just broke 1 000 likes yeah thank you guys so much for that that is huge and meriban says that if sunny could he would shower with the airpods chris cavern chris thanks so much for the five dollar donation really really appreciate you damn and he goes finishing up the hulu shadow clone you did yesterday but wanted to show some love hey that's awesome dude glad you're doing that because yeah the hulu clone was the hooligan was one of the funnest builds i didn't think it would be that fun but it was free if you guys yeah if you guys haven't that's something which like just looks so nice on your portfolio like the hulu clone um it might already be deployed actually so you might have it um is it clone let me go ahead and see if i've got it so i've got the actual link here i can drop it to you and let's go ahead and do it i'll drop it in the code quasi so go ahead and check out that okay boom all right got it so this is the one you guys built yesterday damn it just looks so freaking slick like look at that wow insane yeah and it's completely uh connected to an api so if you go to the top and you actually go ahead and click because i was wondering i'm like how much accurate dummy text and data did you guys add like holy crap oh wow so if i actually change horror romance it changes yo this build is actually sick kind of regret that i wasn't like here for this build this one was pretty fun yeah like look at how juicy it all looks like even for the even the animations like me and frankie were saying adding those animations changes it from a website to an app yeah yeah true true true yeah that's true so this is the kind this is the kind of app that you guys would see on like a fire stick tv app or something you know like this is the kind of thing that you would be used to seeing as opposed to just a website like you see you could probably build this deploy on some kind of fire stick app and yeah that'd be awesome nice somebody asked luke says why don't you guys work at google guys we're not the guys who work at google we get the guys who work at google at google those guys yeah yeah hopefully in the next one or two years like the probability of somebody asking like how'd you get a job at google like and somebody were like saying clever programmer would be like massive like hey it was clever programmer exactly nice so with that said let's go ahead and build the search functionality so let's go back to search and here this is where this is going to be an intricate part of it where hold on so are we building search or date picker yeah uh so we're building the date picker but this is it's part basically the date picker is the search component [Music] [Laughter] okay all right i mean i i don't underst how does that work this is the date picker component yeah right so are we working are we not working on the data picker component then okay okay all right i'll just let you keep going yeah oh yeah we are yeah the search component going to add this in here date picker component there we go all right nice so um now we've got the i think maybe loves your chair this is this new chair by the way i suppose i think i've seen this in the previous one oh yeah thank you guys by the way this is a brand new chair i just got actually it has a nice little pillow here for me to sleep on look at that you know there's a purple stream streaming yeah yeah yeah and then it has like this back support thing which is hard to show right now but it's right here this thing right there nice so it has yeah because what was happening with other chairs was i couldn't like i couldn't actually sit with my back on it so that was the problem i'm laughing because meanwhile frankie's gone like yeah frankie's chair no frankie has a pretty cool chair right this is a mess he has like a wooden chair look at his set you up yeah you know hey man when you live stream you know you got you need all this i just walk around like this now i don't even let my neck go from oh here i try to keep my neck glued [Laughter] all right here we go back back to the date picker nice so inside the date picker we need to do a few things right so the thing that actually allows all that date picker magic to happen is um the react date range so i'm trying to kill the laughter [Laughter] uh so it's the mpm i uh oh wait can i do it yeah npm i so let's open up the terminal kazi whoops there we go raphael says honey is that your amg that is my amg thank you dude hey that guy's name is but his name is mine what the hell is going on here i'm rafi oh yeah nice frank goes frankie has he friend goes frankie has the junior dev chair because he has a senior dev chair yeah let's go to the second terminal um okay so second terminal right here type in here npm i i see you yep npm i and then react date range so this one right here and it doesn't matter if you're in that folder or in the actual app folder right yeah it doesn't matter which one well cd anyways bro cause we're gonna forget when we're about to deploy oh damn wait no hold up did i do it oh okay good shot dude good job yeah make sure you're in the right one because otherwise that will be an issue uh it's being super slow [Music] make sure you're in the right photo guys because that will i don't know my terminals being so slow who retracted that message damn dude why are they that's funny dude somebody's message just got retracted they're like i don't know what he said but he's like am i the only one who thinks sunny is looking fat today i don't know how people think that you're more than everybody here i'm the one who's actually fat i gotta work on my my belly you know gotta work on it i'm trying to box every day hey like oh i'm actually starting mma again hey let's go bro yeah doing krav maga which is like an israeli style of mma yeah damn yeah it'd be dope man yeah yeah so i'll show you jiu-jitsu you can show me some krav maga let's do it dude i'm down i want to learn jiu-jitsu as well i'll be sick yeah so now guys we're gonna import the date range picker so this is like a very handy npm module uh that i found um and we've got we're gonna import and now you also need to import two other files so these are css files that the guys who made this module recommend that you you bring in and this is because basically this is this is going to give you all that styling that you guys saw in the final one that's how the date picker looks the way it looks sharia sharma said try capoeira that'd be fun that's fun and ashish says mma tutorials coming soon yeah just to see us doing react one day in jiu jitsu the next unboxing the the day after that that's it nice so we've we imported the date range picker and to use it there's a few things we need to do now right so we need to add two pieces of state and to add those pieces of state it's very simple one is going to be for the start date and one is going to be for the end date so here we just done that so we've added in the start date and date let's go ahead and do yep that's it nice and for the start date we're going to give it a we're just using today's date as the initial value and for the end date we're doing today's date as well now once we've done that we need to actually add in the following object so here we basically say cons selection range now this stuff you don't really need to know why when you do it this way the main thing is is somebody said sonny can't stop laughing at frankie's chair it does make me laugh yeah frankie show us your chair again oh it's because oh what happened here yo who's manning the live chat damn guys it's because you're like this you're like super stern on your jet you know bro i'm not leaving this thing bro i'm just glued to this thing because i've learned my lesson my neck starts breaking after doing the live streams yeah it does it does we need to add this selection range and this is something that they want you to do if you're using this so you need to do section range start date end date and then the key which is just selection i'm not sure what the key is for in this situation but you need to have it so add that in and then we're going to create a function and this function is basically responsible for this function is responsible for when you basically select a date so here we're saying whenever you select a date set the start date to whatever range you selected the start date and then set the end date to whatever range you selected the end date now this is all done um by the library itself so we just need to have this function in here and then they handle everything else um so manava roy says are you going to launch any react native course and he just dropped a donation thank you for that thank you um yeah not a react native course at this point but react we're covering so uh yeah so we'll actually be dropping some content on react native very soon nice so we have the search here and now what we're gonna do is we are actually going to go ahead and add in the following line of code now this is the date range picker itself so date range picker ranges we basically pass an array with selection range so this one here and that's an object and then on change we pass in our handle select function okay so this is stuff that i would recommend you guys just follow you literally just follow it along you do it as i've written it and everything will just work for you as well inside your project so cozy let's go ahead and open up our localhost and what i'm going to do is i'm going to import the search so import import search from search here there we go and now what we should be able to see is it says use state is undefined okay so use today is not fine we need to go ahead and do this nice save it and now it also says i can't read that it says cannot resolve something what does that say cannot resolve um let me go ahead and pop this in because oh yeah i've got it localhost 3000. nice but but it says cannot reserve date fns oh yes okay so this actually requires something called fns so you need to do mpmi so let's go ahead and pull it up npm i date fns so it's a peer dependency to be honest they should have set the the modules up to actually do this for you but you need to do this step guys because you need that otherwise you're going to run into this issue so that's they're bad but it should be fine so now once that installs that should fix this issue for us um okay there we go so now if we actually see it should be loading up for us in a second so nice so now if we click search dates awesome because we go ahead and click search days hey nice it's opening that thing up bro let me refresh and let's click it again boom look at that got yesterday this week damn bro that they built all of that out of the box i was like i don't know why but i was thinking man i'm like sonny must have done a lot of math here to make this stuff work like damn bro i should have just made up some excuse me like yeah dude you know what to be honest i have built one of these manually at a previous job and guys it's actually a headache to build that so using a package like this is actually really really handy and this one is actually looks beautiful it looks it looks really nice it's a really really good library to use because there's a lot of edge cases that you have to account for when you're doing this guys stop recording questions in the chat we are gonna block all you so now what we're going to do is let's go ahead and add in um let's go ahead and add in the following so i need to actually i want to check something actually i wonder if we removed this from underneath here and changed it over here and then we tried it so let's go ahead and save i just want to try something quickly so now if we go ahead and try and click the search dates okay that's pretty clean but it's not as nice as we want all right anyway so going back to the point so let's go ahead and we've added in this the this date picker functionality so we need to style it to look the way that we want it to look right um so in order to get it to look like that we need to do a bunch of styling to this thing um and in order to do that just go ahead and do the following so inside of search this target search let's do the following so we're going to say position absolute uh top 35 pixels left 25 width of 100 view it so um because if you go ahead and click on the search dates yo thanks adam whoa what happened to my voice there yo thanks adam for the 79 cent uh pound is it 79 euro what is this that's a pence [Laughter] wait are you serious it's like pennies yeah 79 pennies 79 pence it's like it's like you know pounds and pens and dollars and cents oh bro i did not know this thank you for the 79 pence really appreciate it thank you dude so here we're going to do so click on search dates all right boom clicked yep and now as we style it you'll be able to see everything sort of move around as we need it so click leave that open uh what we're going to do you want me to make it half the screen yeah let's do half enough nice so now what i'm going to do is i'm going to add in boom i'm going to add in this and we're going to make it so now it's saying top 35 pixels from the top left 25 pixels and then width 100 view it let's do half an hour quasi for this bit all right i will somebody is like yo if you guys are making so much money why do these little donations impress you guys that's the humility that actually got us here today exactly yeah and that would never change guys like even if somebody sent us one like literally no like even if you hit the thumbs up button yeah hitting the thumbs up button we're so grateful for like it literally doesn't like i remember in the beginning we started off and it was like a four dollar donation and it was like it blew our mind so yeah yeah dude is that what mike pence is he's a one yeah one uh pound one one cent one pounds i'm not just a bad joke but okay got it nice so now i was talking about this guy mike mike pence but i'll just remove it all right so now we're going to do the we're going to target the h2 uh which is so right now we don't actually have a h2 element so i'm going to go back to our search i'm going to add in a h2 which is basically going to be the number of guests so we're going to have that number of guests pop in underneath and then we're going to have number of guests and also we're going to have an input field for the number of guests so here we're going to have an input field for like how many guests you want to have and they're also going to have a button which says search airbnb right so i'm going to add a button so here i'm going to say i'm going to say button and i need to do an import for that and here i'm going to say search airbnb so let's go ahead and do that search airbnb let's go ahead and import that at the top so boom like that save the file and it says people icon is not defined because the people icon is an icon that we need to import from material ui so go ahead and save that hey adam tate just dropped another donation of two pounds he says thanks for taking your evenings up to do this dude you're welcome like it's insane the amount of value that we see you guys like you know thank you bro this guy's working his way up from pence to multiple pens thank you really appreciate it i think the first one was just a feeler you know yeah damn all right thank you bro so now what we're going to do is we have the dates popping up um so again if you could just click on the search dates button reason why we have to click it is because yeah it refreshes at times so now you can see it says search uh at the moment oh salman fazad uh for faizal has dropped five canadian dollars nice so we'll be coming back to this later at my own pace just passing by to say thank you hold on let me pop that in let me pop that in okay now i'll cover it so he says we'll be coming back to code this later on at my own pace just passing by to say thank you from everyone by the way will we be coding react native anytime soon of course dude we will be definitely calling react native soon so stay tuned for that and again massive thank you for donating that's it we really appreciate that thank you bro awesome so let's go ahead and do um h2 yeah so now for the h2 what i'm going to do is i'm going to do this i'm going to copy a bunch of styles in here and i'm going to explain through what they're doing so as soon as i hit save on this you actually see the style looked a bit different there right and the reason why that happened is because i don't display flex align item center which means that the um we now have that icon so that people icon pushed to the right so um we now have the people uh cause you might need to move our face on the uh on on ecam so let's move our face to maybe the center you got it because right now it's covering the number of guests um so that should be you should go you guys should be obscene now on the drop down it says the number of guests and then it actually has that people icon and then we got that with justify content space between and display flex so now they're spaced apart and we gave it a width of five five nine padding of 10 pixels background color of white position absolute left of zero and top of 380 pixels and the parent we actually gave it um position relative so that's why it stays in its place so the next thing is i'm just going to go ahead and style the input so the input field is this one here so this one over here and this one i'm going to go ahead and do this so i'm going to say a width of 539 padding at 20 pixels position absolute left 0 height 30 pixels top 420 and border of none so you guys can just go ahead and actually just use these styles and copy us and it will work for you um and that actually drops it down to the next line and that's actually a very nice um uh number sort of that you can now select and it will show you uh and the final thing that we're going to do well not the final thing but obviously now when you click the number of guests because you click on the number two and you'll see that you'll see that nasty outline so uh not not that one number of guests yeah so you get that nasty outline so to get rid of that we add in this we say when we focus make the outline with zero so you can see it's gone now oh that is but now i can't hold on yeah it's definitely gone yeah it's true it's gone but the date picker kind of blends into the page a little bit so i can't see where it's ending but yeah definitely it looks much better yeah so right now that's fine because we will be adding a button which you'll be able to see in a sec yeah so for the button to style we need to do the following we're going to say go ahead and target that button and do the following so position absolute left of zero but top four a text transform inherit and that's because we don't want to be uppercase background color of the airbnb color and then color white and width of 579 and that will give you the exact perfect dimensions that you guys are going to need and it should do what we want so there you go you've got it looking pretty good but when you hover over so because if you hover over search airbnb right now you see it kind of goes transparent which is nasty like so that the search airbnb yeah we see that kind of we don't want that we want it to basically invert the colors right so to do so to do that we add this in we say when we hover whenever we hover over it we want to basically do a background color of white and a color text to be that so now if you do it and you hover over that you actually see it so if you click uh hover over search airbnb click it nice not looks clean you want me to click it uh not yet not yet got it got it because i i will click it danny finkelstein says keep up the awesome work guys i will watch this oh snap damn thank you bro for that five dollar donation and say whoa okay nice danny thoroughly tonight hey let's go [Music] emotional code coming in with the heavy hidden 20 donation thank you so much and all he said was that was his message to us thank you whenever i see like a 20 donation or something i just picture somebody coming in swinging everything's frank yeah this is just epic thank you for that we are at 111 dollars in super chat thank you so much we just broke a hundred dollars and uh you guys are awesome that's insane thank you so much guys let's keep this going all right so now what we're gonna do is we are gonna have it so now we actually have that date picker component looking beautiful it looks really nice but when we click search dates we want to change the text and we want to change that text so that it actually says hide right so how do we do that we go back to banner and here where we had the search dates what we can do here is we can actually go ahead and change this now so that it says the following we can actually say we can do this we can get rid of this right and inside of here what we can do is we can say if show search is true then show hold up otherwise sunny one second so sunny yeah hold up hold up hold up hold up how do we is there a way we can hide the sidebar completely which one the status i think it's the is it the activity bar or the status bar oh you're talking about that blue stuff at the bottom on the left hand side i think that's the status on the left hand side the one that with the file and the icons because the code is getting way too rap like it's getting wrapped up way too much um what we can do i think what i mean like it's looking too goofy now yeah i think we can do like what is this show sidebar i mean i can make it smaller but i think then it becomes really hard to read unless everybody's okay with reading that i think that's okay i think that's okay because yeah i think that would be pretty good okay if you guys are okay with that tax just let me know otherwise i can change it back yeah and thank you so much devon for the five your euro donation thank you so much brother i really appreciate it awesome that's nice thank you dude so now what we're going to do is we have the search dates added on and if you click on uh the search dates guys you saw in localhost 3000 you'll notice it says hide so it's a search date and then it says hi yeah that's awesome so we have this oh yes yeah okay if you make it bigger there you go it centers perfectly so you get a nice like little look to it awesome so now what we're going to do is we're going to make it so that we are actually no actually at this point i think what we need to do is add in the cards right so the cards are what we see underneath those like those really nice looking cards um and what we need to do is we go to home and essentially what we're going gonna do inside of home another epic donation by path re sfl four dollar donation thank you so much my man really appreciate you and guys if like pastor you've also been enjoying this video so far what can they do sunny they can smash the thumbs up button guys make sure it's blue so it's done and yeah we appreciate that it'll get the video out to as many people as it possibly can and it will help more people out there so go ahead and smash that thumbs up button do it guys thank you awesome so with that said guys now what we're gonna do is we oh damn dude this is the donations are flying today let me let me find it first let me find it let's open oh wow sarin always comes in hot searing calden just dropped one and what does he say sonny he says sharing is caring thanks guys for sharing your knowledge you guys are helping everyone a lot keep it coming please have this project pushed together all right okay we'll do it thank you so much nice thank you dude um so now what we're going to do is we have inside of our home uh file what i'm going to do is i'm going to have a um a so we're going to restructure this a little bit so it says we have a div and this div is going to be called like a section right so it's going to be called so we're going to get a class name and this is going to be called uh home underscore section and what we're going to consider a section is going to be like a row of three cards for example so inside of here we're going to have three of those cards because let's go ahead and open up the actual app so the actual deployed version okay and we should be able to see inside inside the deployed version you can see we've got three cards in a row and then if we go down below we've got another three cards and this is fully responsive so they grow right so you can consider a section to be three cards right so we're gonna have two sections um and then basically we're gonna make it fully responsive so in this bit here we're going to have a card component which takes a bunch of props and it's basically going to be three so one we're going to hold another section so hold up hold up so one section is going to be three yep all right got it nice so these three and another section t3 dude holy crap whoa what is happening we just got two more donations one by what is bam can anybody i mean all i know is horus is a badass for giving us 195. that's the ban it stands for and frank just sent 20 donation he goes sending some love the work you guys are doing awesome airbnb build thank you frank always appreciate you brother and god damn red we just broke 154 in the super chat this is insane thank you so much frank thank you so much this is insane holy crap nice thank you now damn dude so now what we're going to do the greatest the greatest ever goes frank i knew you were coming it's about that time we should have like suspenseful music start queuing up like later in the stream kind of know yeah frank is coming exactly right so inside of home what we're going to do is i'm going to add in a snippet of code so it says home section and for those sections so those cards that you saw they're going to be inside of a row so it's going to be displayed flex and you're going to give it a padding of 30 pixels right so each one is going to have a pattern of 30 pixels another great donation from shubham pandey thank you so much um we've got a home section over here so the card we actually need to create a card component so let's go ahead and do card.js over here i'm going to create cod.js and it we should be inside of it stop it for a second bro and here we go gotem goes i recently completed your reels clone hey uh and he goes and believe me i got an internship in a local agency thank you so much damn i think yeah the rules come as well interesting that's nice dude check your phone all right that's awesome right so now what we're going to do is we have the card component so i'm going to do rfce like this and then i'm going to create a class name so class name i'm going to do here card and we're going to go ahead and do oops we're going to go ahead and do import [Music] card.css like this oh no what did it happen to card.css there we go save the file and then inside of our card so the card is an interesting one it's going to take a few props so props in a functional component appear here so props basically our properties that we can pass the components which make them look different but we can reuse them so this one we're going to destructure at this point and we're going to say it takes a source it takes a tile it takes a description it takes a price right and these are the different properties that we're going to be using um for when we reuse the uh card component which is awesome so now inside of the card what we're going to have is we're going to have an image tag so the image tag is going to basically take whatever prop whatever um source we pass in and that's going to be the source and then i'm going to create a div so we are we're done with the date picker right yeah we're sorry we're done with the day pick and now we're building the card components all right airbnb card components here we go nice awesome i changed it and i'm going to drop this [Music] all right and the greatest ever says i just started applying today oh dude that is nice so let me share that real quick he goes i just started applying today and when i get employed i will know for sure that it was because of these amazing lives and the amazing value shared will be sharing that story in pwj chat soon let's go let's go dude that's amazing the greatest ever has been on these live chat every single time yeah we know it's you guys yeah i know hajera i've seen her very often on these live streams um alexandros joins on these live streams quite a bit so thank you guys we really do appreciate you yeah exactly manav i think i've seen a few times there's definitely a few people here which we know is and we see you guys every time so that's awesome now we had the so we're saying uh card is not defined right that's because what we need to do is actually go ahead and import the card so let's go ahead and change this and let's do card like that now it will actually should fix that issue that we're having and inside over here what we can do is it says cannot resolve card.css so i need to go ahead and create card.css and we should pop into that right now uh in a second there we go card.css and now we should get rid of that error so it's all part of getting rid of these errors guys uh so for the card we have an image right then we have a card info so cars let's go ahead and pop open the deployed version and i'll give you a visual breakdown of what we're actually doing right now so the card info section is actually so you see we've got the image at the top and then underneath it we've got something like i'm just making a div called card info and now that contains the title the description and the price in some cases so if you go to the box hold up hold up what's the card so card info is this here yep all right so that's going to be this title that description and then if you scroll down for the bottom cards they also have a price uh okay got it so boom there we go yeah and the way that we do that is i just popped it in here so we basically render out those things if they exist as a prop nice okay dope yeah and then inside of home so i'm actually saved you guys a bunch of times so i've actually gone ahead and pre-populated some of this stuff with some props so i'm going to go ahead and swap these out with some properties that i've basically went ahead and found it's going to do some annoying stuff right now but let's go ahead and format this but what you guys can actually do at this point is go ahead and um you can pause the video and you can pretty much grab these what i've written for these different uh components the props that we're using but if i go ahead and save that now and let's go to our local host yeah so let's go right here nice hey soham just came in clutch thank you so much and he goes awesome guys i have started to learn javascript inspired by your clone videos great content keep up the great work thank you so much really appreciate it and now we are over 160 dollars thanks to you guys always love and massive massive appreciation for all of you guys and if you guys are enjoying this and you want us to go out to other people make sure you smash that like button so it just keeps going out guys exactly massively appreciate if you guys do that nice so we're going to go ahead and style some of these card components so let's go to our card and for card the css what we're going to do is for the top one we're going to say we're going to target the card and i'm going to say give it a margin of 10 pixels david rakosi is in the chat now oh damn dude what's up he's a crazy student inside of pwj awesome student and it's good to see you dude yo david let's go david has a few builds for you guys already built we're either going to be delivering it live or dropping it as a video this week hopefully so really excited about that and powell now came in hot uh and just dropped all right 10 pollens and he goes you are the best greetings from poland thank you so much nice oh scripting like hiro just said i watch your tutorials and i got a job in my city thank you wow that is beautiful guys we're trying to get to 10 5 000 developers 5 000 people getting jobs as developers that's our number one goal this year in 2020 so that is amazing we should have like a counter going seriously like at the top and it should always be increasing every time we find out you guys either get a client or a job but this one is going to be one of them that would be awesome we should definitely do that or on the pwj website or something i have like a live counter yeah so right now you can see that image is huge right so i don't want it to be the one at the bottom this one here yeah and there's actually a few and they're in a row right now but you just can't see it so what i'm going to do is i'm going to i'm going to say card image and i'm going to go ahead and style this so let's go back to half and half and then we do this we say card image and i'm going to say oh nice object that works whatever you did just work so object fit fill and that should do that for us now and what i'm gonna then do is go ahead and do um i am now gonna go ahead and do so 300 pixels min width min height of 200 pixels and yep 100 and then i'm going to go ahead and say for the card component itself we're going to say that it should have the following properties so let's go ahead and add this in so i'm going to go ahead and add in a margin of 10 pixels a border of zero pixels and a solid black so this is very important because this actually gives it it gives it zero so we don't actually need that one we can give a border radius of 10 pixels you see you get the rounded corners right the overflow is hidden so that if i don't have overflow hidden here guys you'll see even if i round the corners you see what it did like it just gets it doesn't do it as we want it you want to make sure overflow is hidden then you need box shadow now this box shadow gives it that 3d effect we're doing a transition a transform and this will actually come in because we're going to add a hover property here so let's go ahead and add this in and now what you can see is if cause if you go ahead and hover over those cards i'll do that right now oh nice they got that little feel to it yeah but i think they're doing it yeah go ahead the reason why we did uh we get the sort of animation with it is because we added in transition transform 100 milliseconds which says that that that animation should actually take 100 milliseconds if i get rid of that let's go ahead and check out what it does as you can see it's very snappy ugly yeah you don't want that you want that silky buttery smooth transition oh silky buttery smooth dude like that almost like releases some taste in my mouth when you say those words you know you're not the first one who said that somebody else actually said that in a coaching call they were like i wha what really made me get inside of pwj is when you said that the buttery smoother animations and i was like oh you might you just start saying that just like random times like all the times actually um also and 0.1 is gonna also do the same thing too right 0.1 seconds that should be 100 milliseconds yeah exactly okay dope so let's leave it like this nice right now what we're gonna do is we have those things uh and the good thing is guys is that here it's doing it very clever so let's go ahead and make this uh make it big big now cozy no it's how it's gonna use up this is really awesome uh the greatest ever said something really nice and he goes sarah and calden he was talking to sarin and he goes yeah these guys may not even realize just how valuable they truly are and just how much more value they're sharing as opposed to what they think they're doing for us so yeah like right like we're we're putting in the effort for you guys we're making this as valuable as possible but for the right people and it goes both ways right because we can give you value but also how much value do you pull and extract out of it so we love having people like the greatest ever in our community who are like really feeling like they're getting their money's worth and a ton of value out of it so exactly exactly that guys because you go ahead and make the airbnb so the localhost a little bit bigger and that's how it grows now um yeah let me go ahead oh this one right here yeah oh to make that nice dude but if you grab the actual edge of the screen and to start pulling it you'll notice that like you get a really nice sort of uh so look at that look at that that is nice yes it looks really slick yeah dude i love that that is excellent yeah so you get that sort of responsiveness frank says cozy making the buttery smooth thing weird now nice so now what we're going to do that's funny all right keep going we're gonna basically for the card info we're gonna go ahead and do the following so we're gonna say margin top minus nine that'll pull the margin up for the uh info on the text uh and then we're gonna say border radius of ten pixels padding 20 padding top 20 and margin uh a border 10. a border of one right so let's go ahead and add those things and then the c and now what i'm going to do is i'm going to i'm going to style the text inside all right so i'm going to start with the text so we've got a h2 and h4 inside so inside of card.js we've got a h2 and h4 the title in the description so making the font size 18 pixels font weight of 600 and the h4 font size of 14 font weight of 300 margin top of eight margin bottom of eight as well so let's go ahead and save that and now you can see you get a much nicer look and feel to it so that looks really clean now with that said let me go ahead and just check something so let's go ahead and because you zoomed in by any chance on your on your local host are you zoomed in zoomed into what bro what are you talking about as in have you got a zoom on right now so go ahead and press like command uh so zoom into that screen so press command so okay yes that's perfect nice nice yeah i was a little zoomed in i think yeah i was a little zoomed in but uh it seems like that is a me with just today we actually right now we got somebody to join profit with javascript arnold tomboy nice dude and you're on youtube with python that's awesome dude is he watching right now i don't know but if you are watching drop it in the comments i don't remember reading arnold in the comments i've been looking at the comments pretty consistently i don't recall so he might not be on here but yeah he's famous hey nice so now we can see that we've got the first row up and running so this is very simple now uh if we go to our home.js we can see the second one we've got the outlines for them so guys let's go ahead and scroll down low post yep i'm going to scroll down all here yep so now you can see we've got the outlines there so i need to give in the props right so let's go ahead and pass in the proxy again i've gone ahead and done this hard work for us so we can go ahead and go here and just paste these props so these are another set of props that we have right here and i'm going to go ahead and just align this in a bit more and you can see here we've got it aligned here's another source and here's another one boom and if we go ahead and save this file now we should be able to see the rest of the so i'm going to go ahead and just zoom up and down a little bit let's scroll up now so you guys can see this but now because let's scroll down and you can see that we've got those two tiles like those two rows of the cards right so we've got two rows of cards and the bottom one says 139 it's got even got the prices on the bottom one uh really clean yeah really super clean yeah nice so now we've got that done what we need to do is go ahead and add the footer in so for the footer what we need to do is inside of app.js yeah inside of app.js let's go back to app.js so here here we have so you can see it's very very nice labs we've got the header we've got the home page and then we're going to add pretty much a footer we're going to add a footer so this will actually satisfy the last bit here so the footer and let's go ahead and create that photo.js oh i was wondering okay it's picking up my phone sound okay i muted it because i was uh messaging the student to join and people are like holy crap your phone sounds are jacked okay got it nice so now for the photo uh json the rfce yeah and then i'm gonna do class name so class name footer like that and then here i'm going to do import css so import the folder wait so footer.css css save it let's go ahead and create the photo.css file support.css like this and we should pop into that power any second now nice so once we have the footer guys what we're going to do essentially is we're just going to jump in here and we're just going to this will be very simple guys we're going to have two p tags all right we have two p tags one is going to say that little sort of no rights reserve this is a demo at the bottom of the page one is going to say privacy term sitemap company details that's what you see at the bottom of the um the airbnb app at a very simple level so i'm going to go ahead and pull this into our component here's by saying footer that should get rid of the error that we're facing save that and it should go ahead and drop to the bottom of the screen now so let's go ahead and scroll down quasi yep i'm gonna go ahead and scroll down on our app or the code yeah uh on there and the app and you can see at the bottom we've got the footer pop in so are we now working on the footer yeah damn bro you got to tell me we're done with stuff all right here comes the horn sound we're done with the cards [Music] the photo will actually take pretty quick so we've only got one thing to add so far but let's go ahead and so for the footer we're going to add the following styling i just added a foot emoji on the title nice so here what we're going to do is we've got the footer so here we're going to say border top one pixel solid light gray padding of 20 pixels background color of white uh it's like a gray off gray the bottom zero so it's going to stick to the bottom and then we're going to say text align center uh here we don't actually need bottom zero text line center and then for the uh we're going to target the p tags so that text we're going to say padding of five pixels font size of 14. so now if we scroll down quasi we should see the the bomb so that footer should actually show us and there we go that looks okay hold on it's not showing up for the people watching so i'm gonna do this and now it should show up there we go showing up now there is it showing now it's perfect yep now it's showing perfectly nice so now you guys can see the footer we just got another uh euro we got one euro donation from ita punjabi thank you so much thank you bro appreciate that that is amazing we're at 163 now nice that's crazy dude damn wow all right so we've got that up and running which is awesome um and then what we're gonna do is guys if you if you write a message and you do it all in caps capitals it's gonna the nightbot which is like a it's gonna like block you so don't try not to write in all caps yeah sorry about that it's the bot is really aggressive so we can't even control him he has a mind of his own all right now what we're going to do guys is we've pretty much done the home page the home page is done like it looks very slick the thing is working um now we want to move over to the search page right so how do we get the search page functionality how do we do routing or any of that stuff so to get that working we need to use something called a react router so in order to get react router working what we're going to do is we're going to go ahead and install something called react rear dom so to do that what i'm going to do is i'm going to go to the terminal and i'm going to write the following so i'm going to say mpm i so cause let's go ahead and pull up the terminal all right command j let's go mpmi and we're going to do react root or dom i'm going to hit enter on that and that will pull in the dependencies that we need to have routing now rooting let's give them an example of what we're going to do here kazi and let's also change the title to say set up react router yep all right changed it nicely so whoa duh i'm gonna wait what's happening here damn oi coming in hot that's dope dude he says hello hold on hold on let me put it up here bro you got to give it respect no damn 10 donation go for it hello from new york learned a lot from you guys appreciate it dude we massively appreciate you for dropping that that's insane and we're glad you'll find the value from this that's nice dude thank you so much appreciate that wow that's amazing then we're 173 let's go we might break 200 today again yeah it's just insane like the growth oh my god yeah i'm excited dude every time every build it just gets me more and more hyped we got a breakthrough on twitch man we will fix the twitch stuff after this live stream yeah we'll switch out so now what we're going to do is we're going to import a bunch of things from react router so let's go ahead and do a bunch of imports so this is the stuff that we need from react router and what we're doing here is we need to now basically so react the way it works guys is you wrap your app in something called a router right so let's go ahead and wrap the app inside of a roof so let's go ahead and get rid of our annotations so we wrap the app inside of a router like this like this and then what we do is you can see everything sits inside of arua and then what we're going to do is we have something called a switch right so what we want we always want to show the header so we're going to keep this outside the switch we always want to show the footer so i'm going to keep that as i switch but then i basically want to conditionally render so so imagine if i'm if i'm at the home page right so if i'm at the home page so forward slash then i'm going to render this but if i might like forward slash search then i want to render the search page right the search page then i want to render something like this by the way sunny we're done with the home page right yeah we were done with the homepage a little while ago yeah pretty much so as soon as we did the footer we got done with it yeah yeah so now we're actually moving up to react router which is uh how we are going to incorporate the search page for sure yeah if somebody can drop the time stamp to exactly when sonny got done building the footer of the homepage that'd be awesome because we're trying to make a clip out of you know how to build airbnb homepage and we're going to clip that as its own video nice and freedy raffleman says after listening to sunny every day i've adapted the great british accent as well nice dude the nitty-gritty you know what i started saying a lot is yeah i'll be talking to my girlfriend i'll be like so this happened yeah and then this other thing happened yeah and then i went worked out yeah so i say that a lot yeah it's true it's weird because i'm picking up stuff from you guys you pick it up for me it's so funny like man i say dude a lot more now i don't know we're like stop the canadians the canadians like honestly honestly bro yeah honestly um sorry they'll always say that they say that a lot sorry i love their sword i'm so sorry this happened so sorry and then they also apologize a lot too yeah it is it's a british thing as well to apologize i think yeah all right so now for this to have these roots right we need to add something called a switch so to add we need to add in a switch here so we're going to go ahead and drop in a switch so you can see right now we're kind of getting this nested effect right so we're nesting in some stuff so this again goes in a level now again we always are going to render the footer we're always going to render the header but depending on which route we're in we're going to render these things so in order to get that functionality what we do is we change essentially the this one to be oops we change this one to be this we say root path is this and then we render the home which means that if we're at this part on the website let's go ahead and render the home page right so that works really nicely and then we're going to add another route and well this one is going to say if we're at the forward slash search part on the website then i want you to render the search page so can you see how this guy this is working guys the switch checks the path that we're at so if it's four star charts or forward slash and it's going to render the appropriate component but it always renders the header always renders the footer all right and it does it in that way so this is a really clean way of doing this um so now what we're going to do is we're actually going to create this search page component because it's going to freak out because we haven't got it so i'm going to do searchpage.js and this will actually go ahead and chuck it in so here we go and i have to do rfce boom we get the search page and i'm going to do class name of search page like this and i'm going to go ahead and do import search page oops import search page dot css save the file and let's go ahead and do search page let's create that search page.css file like this nice so that is so there we go now let's go back to search page back to app and this actually import that so we go ahead and import the search page here so import the search page like so and we should see now that the app should work it shouldn't it should stop crying freaking out and then it should actually work so there we go now one thing to test this out is we're basically going to test it so i'm going to create something on search bridge and say let's have like a h1 that says i am the search page so let's go ahead and say i am the search page and kazi for this bit i'm gonna need you to go to so you guys can see it renders the header the footer always but the middle part is where we are conditionally rendering it based on what route we're in so now cause if you go to forward slash search it should render the search page instead of home so let's go to search yes beautiful and no refresh it was instant exactly so you see now it always renders the header and it always renders the footer but based on what we're here like what we see here is based on which route we're in it will render the appropriate component so in this case it only rendered the search page because we hit this route but we want to hit this one and guys as a good rule always have your your default fallback group so like your home page root at the bottom because if it doesn't match any of these it will just naturally fall back to this one um so that's a really good practice to put in place uh and you also might find that it might not work if you put this one here because it will find it or render the home and then it will be like oh i'm done so you need to have it in this order so with that said now what we're going to do is we're actually going to code up the search page so the search page is pretty cool let's go ahead and actually build it out so here what we have is we essentially at the top of the page we have some let's go ahead and check it out so the top of the page because they show them the deployed version and i will sort of do a little masking process where we draw things out so they show them the deployed version let's click on explore nearby and let's make this half of the screen nice and now what we can see guys is just click explore nearby on half the screen yep so now let's go to the top and let's sort of draft it out so inside of search page here we have at the top you can see we have that information where it says uh stays nearby right so at the top i'm going to say div i'm going to create a div and this div is going to have a class name and this is going to say search page under squad squad info and this is basically responsible for this where it says stays nearby where it says 62 stays a day it says cancellation flexibility type of place price rooms and beds and more filters where it has all of that oh damn item punjabi just dropped another donation of five euros 49 it says cover from italy love you bro how to use adsense let me let me pop that up on the screen first okay now go for it bro it says cover from italy love you bro how to use adsense or facebook ads to monetize react.js wow thank you so much bro that is epic that's pound man i'm getting confused that's euro you're right yeah okay got it yeah thank you so much for this that's huge um do you know what he saw i have a i have an idea about what he's talking about but do you know what he's talking about um not really i feel like he may be getting i think yeah yeah i think he's getting maybe mixed up a few things but there are things where guys if you build the app with anything react or whatever you want you can monetize anything with ads you can put google ads um he's talking about like you know when you go to blogs and you see these like random ads coming up on the screen those i'm sure react has some kind of library like literally if we pick it up right now right react ads library or something i'm sure there's going to be something like react ads i'm sure you could use something along the lines of this so type in type in react adsense and it will come up yeah react adsense yep you can use this for it so there you go this will allow it's getting 2 000 downloads weekly and i'm sure you could just boom install here you go drop in your google adsense and you're good to go it's everywhere inside of your app and you're now monetizing your app yep exactly and that's how you do that guys like you can do things like that i would always just google it and see and type in react and then things that are things that might be really good to monetize if you guys make one of those like calculators you know like those interest calculator or one of those you're going to get a lot of traffic to your website because people are going to come to it to do calculations or projections and then just have ads playing there and those you can passively generate some income i know multiple people who do that yeah yeah definitely someone says we can use dom purifier um i'm not sure if that's related that sounds jacked nice so now guys we have search page info which is the top section right so inside of here i'm gonna have a few things i'm gonna have a p tag and a h one and the p tag is gonna say it's going to say like for now we're not going to actually do a dynamic date generation we're just going to have some hard-coded numbers and we're going to say two guests so let's go ahead and pop that and it's going to say stays nearby like that right so that pops in the top i love this as well by the way basil says to be honest you guys are giving most university courses to rethink their academic approach if you keep up this quality most computer science courses will be outdated yeah 100 i reckon and guys i mean like i've been to university i did all that and i would say like honestly this just follow our tutorials instead you'll save yourself so much money and you'll have you literally come out of this with um with more experience than somebody who just graduated like in terms of actual coding practical knowledge oh yeah people are getting jobs left and right with all this uh material already dude so that is yeah somebody just read yesterday um what was that guy's name adam reeves he was messaging me he just got a job with the apollo's i.t actually let me see if i can find him on my um yeah let's see here i think i'll be able to pop them up yeah so i was asking people if they want to work with clever programmer and he sent me this long message he's like i would love to work with you guys and he got uh apollo city solutions called them an hour ago and he passed the test with them nice and then um he and then check out i'll show you his portfolio this is what his portfolio actually looks like okay so adam rdev.com i think is his website so i hit this is his portfolio right here so adam if you click portfolio check out all his projects actually i'll just zoom in he built the covet tracker the instagram clone with you uh amazon clone and the netflix clone awesome dude and then um i was like and then this guy could not hold on give me one second i'm gonna find this because this is pretty epic actually let's see give me one second here boom boom boom boom boom yep and then he messaged me this morning and uh this is his message and he goes oh actually i uh i don't wanna reveal his phone number or anything so i'm just gonna give it a dummy name just for now i just did that right this second and he goes yup so he just got a job from them and he goes so no worries i got a job offer today to start training tomorrow with the paulus and i had to take it 55k for the first year with a 10k bonus after completing 2000 working hours full medical dental vision and 401k and he goes i'm beyond stoked whoa that's insane man holy damn dude like it's crazy to see that like from from these live builds they they like people are putting inside their portfolio and then they actually land jobs and the guys these aren't normal jobs these are damn good paying jobs like really good yeah like this is above the average of what you would see in sort of like uh just when you compare it to other industries if you're getting 55k plus like you said he's getting a bonus after 2000 working hours that's insane like that's really really nice here come the air horns and we got another message by um holy crap i'm gonna have trouble reading that name huh he gave us 100 rubles and he goes hello i don't speak english well but i understand you you're making incredible streams you're the best guys hello from russia thank you so much bro appreciate you thank you so much whoa prem sagar he just dropped 20 new zealand dollars that's actually almost twenty dollars by the way i just did the math yeah so he goes hey kazzy and sonny you guys are revolutionary you guys have set new standards [Applause] [Music] we're almost about to break 200 as well by the way and he goes that how to teach development and it's great when you schedule these streams in advance so sunny let's keep scheduling them in advance and he goes i took day off from work just to attend this session ho crap i love that dude yeah actually guys just to let you all know there is a session tomorrow and we are building the facebook clone so right after this we're going to schedule that uh yeah and that will be up to you guys to see so we are building tomorrow again yeah we're building tomorrow we're literally building the facebook like the modern facebook that is built with react that actually created the react so this is what we're going to be building tomorrow you guys actual facebook clone so make sure you guys uh schedule it on your calendar for tomorrow at 10 15 a.m pacific time los angeles time it's gonna be freaking awesome yeah it'd be all it'll be a crazy crazy build dude this community is too good this community just yeah exactly it's actually crazy guys and if you're enjoying this all we ask guys is is more than enough what do they need to do quasi guys please smash the like button and this thing goes out everywhere and also subscribe to the channel because we are trying to hit a hundred thousand subscribers in august which is very very difficult and that's going to happen but we that's what we want to get to we are right now on track to hit some really really massive numbers what are we at today let's see we're at 2000 subscribers today but we want to hit 100 000 this month um i think we're at 87 000 so if you we keep subscribing guys i think it's possible we might be able to break 100k uh for those of you guys know peter mckinnon with like 5 million youtube subs we're growing faster than him so let's go peter mckinnon keep up oh my god and i love peter mckinnon i love his questions he's awesome so man peter mckinnon let's do a collab you know what i'm saying let's do a collab yeah he can shoot some dope like programmer content oh yeah nice so we have we are working on the search page right so we had the search bridge info we had two things at the top we had dp and the h1 tag we're going to be adding a bunch of buttons in that so i'm just going to go ahead and pop a snippet in here so let's go ahead and just chuck this in these are all material ui buttons so we're giving a variant outline so this will make the change the appearance of the button but we need to actually go ahead and import this because we're pulling sorry these comments are too good i'm sorry i love you but yeah i'm gonna keep them coming but still says to be honest guys why get yourselves into massive debts with student loans and no job guarantees just get yourself registered with clever programmer end of story you get quality tutorials with experience and job offers exactly literally and you guys have seen it i think in like just today's session how many people have we seen get jobs like man we're about to lose track if somebody can keep track for us that would be huge i know the greatest ever you come a lot to these live streams if you can keep track of this bro please that'd be amazing or anybody who's here you know um i know some of you are lath i was just about to say leif's name and then leif hits us up with the freaking 8 dollar 26 cents donation thank you bro thank you so much we just broke 200 let's go this is crazy so bro thank you so much i was gonna say it's life's birthday today yo frankie jumping happy birthday to you happy birthday to you happy birthday dearly happy birthday to you [Music] yeah happy birthday enjoy and we dropped the air horns in there too somewhere so that's gonna be extra you know icing on the cake guys this is an amazing community we all love this i hope you guys are loving this too this is crazy man this is awesome but somebody please keep track hopefully life you can keep track of the people that are getting the job oh leif is making his post too on instagram all right we're gonna give him a shout out on that let's keep going and then we'll come back nice yo the greatest ever since he goes i'm singing here as well nice nice oh nice so now what we're going to do is we are going to type in for the uh let's go to searchpage.css so over here and what i'm going to do now is i'm going to go to search page info so right here and i'm going to do the following so search page so we need to actually create that file so search page info now we've got search for css sorry yeah go and what we're going to do is at the top so where we've got that text we where we've got the p tag in the h1 we're going to style it like this so i'm going to say give it a padding of 20 pixels and right now it's freaking out why is it free oh because we didn't import material ui like this and that will actually go ahead and change that so you can see the buttons popped in and you can see it gives it a padding of 20 pixels in that section and then we're going to go ahead and target the p tag give it a margin bottom of 10 pixels and a font size of 14. so let's go ahead and do that boom and let's do the following like this save it and what i'm going to do is for the i'm going to make a h1 so like this and for this one i'm going to give it a margin bottom of 30 pixels so this just pushes things out a bit and then for those buttons we're going to give it a border radius we want it to look more rounded than it is right now and i want to keep the text right now is screaming at us because it's all in uppercase and the text and then we want to give it a margin of 5 pixels so they're not all touching each other so let's go ahead and do that with this so we're going to say border radius 30 pixels text transform inherit margin 5 pixels and there you go we get those nice looking buttons and these buttons are material ui buttons which means by default when you hover over them causing click the button you get that nice little ripple effect so when you click it there you go that is beautiful yep yeah i know i was muted you were about to say that the greatest ever goes yeah i recently got into some discord communities and i was so shocked to see how amazing this community really is most other communities are so toxic and unproductive nice yeah it's true honestly it's true like think of stack overflow that is the most like toxic yeah makes you feel like yeah every time i posted a question there i just felt so small yeah like they really have a bad way of making developers like feel like but i mean it's a good resource but as an overall place to go especially when you're learning it can be a scary thing and it can like knock your confidence so make sure you're inside of a community like pwj and yeah you can go ahead and boost yourself so now guys oh the next thing we're focusing on is this let's go ahead and open the deployed version of the app all right so boom right here so right now let's change the top uh so the title so that what we're working on right now to we are working on the search result component so you see the search result component each one of those ones is a search result so you see where it says stay at this spectac spacious edwardian house that is actually a search result component so we're going to create one component and then reuse it a bunch of times all right added it at the top uh the greatest ever says stack overflow can make you feel like quitting which is so weird because of how used it is yeah that is i think for a lot of new people it's a very intimidating and kind of like to look down on you yeah and guys like even after all these years of coding like me and carsi can give you guys like a true first impression here of like we will still go to stack overflow and feel like that like if we look at stuff like that so that feeling really never really goes so like get yourself inside of a community instead because stackoverflow just it always has that effect on you um like you get better at dealing with it but it does always have that effect on you like there's times where i'll go to stackoverflow i'm like holy i don't understand this code and it does make you just it knocks your confidence but don't get disheartened by that and every time i would post a question there they'll be like your message has been deleted it's a duplicate you used one english word that has been used once before on this entire forum not like guys what word did i use they're like you use the word duh again yeah exactly exactly so now let's go ahead oh that's literally yo who retracted frank's message i was just about to screenshot it yeah i was gonna say i was about to point now as well like i was just about because i was laughing because that's literally what i was talking about and frank and i said that exact same thing about being marked as a duplicate question at the same time but basically he said look at me i'm a senior developer with like 10 years of experience and he goes anytime i post a question it gets um marked as a duplicate but okay sunny silly yeah my bad okay go ahead go ahead you can you can add your your thing to it oh no no i was just gonna say um yeah because he wrote somewhere on there on in that uh message that he dropped and got retracted it said imagine a developer who has apps that are in the top 10 um like global apps in the in the app store but his the question gets taken down because it's a duplicate like it is basically adding on to what cause he said so it's honestly a case of it's really stupid sometimes in stack overflow how it works um yeah so it really doesn't make a lot of sense sometimes all right so everybody is like everybody in the comments is like yeah hajira's like yeah i was thinking how it got retracted you were like yeah i was wondering i got retracted i was wondering and then the greatest ever is like he goes yeah lol i was surprised at how frank's thing was retracted damn and alhassan says ben who retracted frank message to him you should just relax i think he retracted it himself yeah i think of i think if you retract it is you yourself right like crazy you guys can't even see it because it was hidden but he started saying some crazy stuff yeah right so now let's go ahead and create the search result component so here i'm going to go ahead and do that so we're going to say search search result like this this will take a bunch of props as well but we're going to pop that in as we do it so i'm going to go ahead and create the search result component so let's go ahead and create search result.js boom we'll pop into that in a second so we should be inside of it now under rfc and then like that and then i'm going to say class name equals search results so search result singular and then i'm going to do the css file so i'm going to say import boom search result dot css like this we're going to create that file so i'm going to say search result dot css and then um then what we're going to do is we are going to go to search result.js and then at the top we are going to have inside of search result uh we're going to do a bunch of different imports so a bunch of different things inside the prop so this is where the props comes in so we're going to destructure the props here and then we are going to them okay nice yeah then we're going to basically do these things here so one thing we just figured out sunny and i in slack we're messaging each other messages you guys can't see but basically i just messaged sunny and i was like hey let's actually take all the q and a's that we can't answer right now so for example we got one that was really good but sg707 tech and she or i is it a he i can't tell he goes how do you troubleshoot unnecessary rendering uh and then the question keeps going on we're gonna address questions like that at the end of the live stream once we're done with the build so keep sending good questions we're going to keep curating them and then we're going to attack it at the end yep exactly yeah we'll keep sending them in and if we can't take it now we'll add it to a list and then we can uh attack those at the end nice so now what we're gonna do is we have the search result so again we accept a few props we're gonna have the image location title description number of stars price and the total price right so all of these things are going to be crucial to rendering this out on the page so i'm going to go ahead and where we had the actual component rendering so inside of the search page here i'm going to actually go ahead and imagine we just pop in like a dummy component so i'm going to pre-filled a search result here so this is a search result with an image a location saying private room in center of london title saying stay at this spacious edwardian house description star is 4.73 price is 30 pounds a night and total is 117 in total um and then what i'm going to do is i'm going to import that into the into the component so i'm going to go here and i'm going to say import search result from search result like that and then what we're going to do is we're going to jump into our search result over here and what we do now is we go into our search result and we need to basically uh build out so the first thing we're going to have is an image tag the image tag is going to take the image that we pass in so this one here and then what we do is we basically just indent that correctly the next thing we're going to have is a favorite heart icon so you see on the right side we have that favorite heart icon so i'm going to pop that in here we need to import that as such we're going to import that here like this import here like that nice and then we're going to save it and then we're going to have so we've got the favorite heart icon then we're going to have search page uh so now for the rest of the text we're going to create a div because we like containerizing things so here i'm going to have a div and this div is going to have a class name of so this has to be class name sorry of search result info right and all the text is going to go inside of it now inside of here we're going to have essentially two divs we're going to have info top and input bottom info top refers to everything that we have which is basically the text at the top but everything inside of info bottom is going to be the star rating and the price is where it says 35 pounds a night and those sort of things or 40 pounds a night so let's go ahead and pop that in here so we're going to say we're going to have an info top and an info bottom so here we're gonna have info top and here we're gonna have info bottom okay so this is info top and that'll be a div in itself and then we're gonna have info bottom underneath and here i'm gonna go ahead and pop in like so we've got info top and info bottom so inside of info top we're going to have the following we're going to have the location we're going to have the title we're going to have ap tag with like an underscore because that's what they have in their one i just it's a very simple way of doing this and we're going to have the description and then in info bottom we're going to have we're going to have a div so we're going to have two things we're going to have two divs we're going to have one div which says the following so it's gonna one day which says uh search results stars and inside of there so let's go ahead and close this off just go ahead and close this one off inside of this div we are gonna have a star icon and a p tag so we're gonna have a star icon over here and remember keep your indentations correct otherwise it can mess you up now the star icon need to import that that means let's go ahead and do a star icon so over here and here we've got a p tag and inside of that we've got strong to emphasize like a bold effect in the number of stars that we have so this will actually render out a star with the number next to it and then we've got search results price so inside of this info bottom so let's go inside of here so we're going to say we've got another div and this one's going to have a class name of search results price and inside of here we're going to have the following we're gonna have a h2 with the price and we're gonna have a p tag with the total amount so just follow along with that guys and you actually go ahead and once you've got all of this set up basically on the right hand side of the screen we've got the deployed version right but cause let's go to our local host and it won't look like that it will look different and we're gonna get it to look like this so let's go to our local host yup let's go to the local host right now boom and this refresh refresh and you can see it doesn't look anything like the deployed version right so that search result doesn't look anything like the deployed version at the moment and what we're going to do is to exaggerate it we're pretty much going to have two of those search results so that way we can actually style it and and assume that like imagine here's a good question i would like to address real quick so get guilds guile says i just can't decide whether to enroll in the js or python course i don't really have a preference in what i do i just want to master second language if you don't have a preference one thousand percent i would recommend that you actually join profit with javascript that's yeah crazy amount of focus right now is dedicated there our whole team is behind it like with the live coaching calls and everything we have like three to four live coaching calls at this point which is just it's silly i mean it's silly but yeah we're just kind of going crazy with the amount of value we want to bring to you so if you're deciding and you want to pick one both are phenomenal courses you know python course made with you know by your boy with just a lot of love so it's going to be good but with the community support and everything the you know if you have to pick one definitely join the pwg course exactly yeah pwj course we have the entire team just going crazy right now on the pwj course and it's going to be a huge amount of value for you and like we said guys this is going to go up in price so if you're on the fence and you and you miss this now it does not go back down once it goes up like if that price is here to stay it's massively underpriced at the moment to be honest um and once it goes up which is in i think it's nearly i think it may be two weeks i think we actually go up in price so once that goes up guys there's no coming back down so make sure you grab it now if you're on the fence nice so um yes says do you guys do programming too yes there's plenty of pair of programming inside pwj and this coaching course like as he said there's four to five a week so um yeah there's massive massive amount of working with people and also you have a community of fifteen hundred people guys so fifteen hundred people that yes you can compare program with any single one of those people so yeah definitely go ahead and check it out so now what we're going to do is we have the search page we want to make this search page look and feel sorry the search result look and feel like what we see in the final product right so there's a lot of styling here so pay attention guys we've got the search result over here and we have our css file over here so we've done a lot of containerization here so make sure you've actually gone ahead and given everything class names just like we have inside of search results sorry so inside of here we've got the search result container we have the image inside we have the search result heart we have the search result info container which contains all the text we broke that up into two divs at info top and info bottom info top is very simple we just had some text with different tags info bottom we had two containers inside we had search results stars and search result price and then here we had the search result star icon with the number of stars that somebody had given it and then inside the price we had the price and the total so with that said we're gonna go ahead and style all of this in one go right so you're gonna you guys are gonna see this change and become that final finished product so the actual search result itself we're going to go ahead and add the following so we're going to say search result display flex position relative uh margin 20 pixels padding 20 pixels border bottom one pixel solid grey opacity one so this one isn't actually needed for now we're gonna say cursor pointer and you can already see guys with that one line of code that changes a lot because now the image is on the left so notice how the image is on the left we have the heart icon in the middle and then we have the other div which is all the text because everything's been positioned in a row right now we're going to add the next effect which is this one which we say if we hover over this it's going to change the opacity to 0.8 and now this is just a neat little effect so cause if you want to go and hover over the uh component oh nice yeah so it gives it that sort of like effect right the opacity changing effect and then what we want to do is once we have that in place we want to target those images so we want to keep those images one we want to round them off we want to get them a set width and height so that way no matter what image is put inside there it won't actually break and we want to sort of round off the edges so that it doesn't show once we round them off so let's go ahead and add the following so now you should see they grew a little bit and then it also actually rounded off the the corners a little bit so it gives it a bit of a cleaner look and now what we're going to do is for that text so that text consists so inside of sidebar search result info all that text consists of search result info top and search result info bottom so we want to position those two children with a display flex we want to say change it to a column direction and we want to say give the so space between them so if we go ahead and save that now you should see it actually didn't show much but it actually did do a little bit of a difference there um and this will come into play in a second but for the actual heart the heart icon that you guys can see the heart shouldn't be in the middle it should be on the top right so because we gave the parent position relative if i give this absolute positioning it will be absolute to this container or this component which means if i do top and of 20 pixels it'll be 20 pixels from the top of the component and right 40 pixels it'll stick to the right and it'll push itself out 40 pixels away from it which is going to be super clean so that gets the heart over in the corner now for the info top right we don't want it to span across the way with the text like it's doing right now we want to basically have it with 40 of the width right now so let's go ahead and do that and you should see that it then goes ahead and it drops in and the text actually wraps a little bit more so that's a lot cleaner so then what we're going to do is so then what we're going to do is we are going to go ahead and we've got h3 so we're going to target the h3 inside of info top so the title uh and we're going to target that with a font weight of 300 and a margin top of 10 pixels let's go ahead and do that so you can go ahead and do that now the indentation is all messed up so because we're not using pre-order but i would recommend you guys just use prayer save yourself this time uh we're using pair programming right now and it's not working so that's why it doesn't fix itself like that but with that said we were going to go ahead and why did it just do that so the button search page info button i've just added i didn't add that oops so we've got search page search results sorry search result here we're back h3 like this so now i'm going to target the p tag as well so the p tag over here so i'm going to say search result info top target the p tag give it a margin top of 10 font size 13 color gray and you can see everything starts to slowly take shape by the way real quick i just want to say uh guys leif who's always in our comments he's war paint nine something like that his name and the username and uh he just made his instagram he and we i had a talk with him a few days ago and he was gonna actually work on his instagram posts and he was kind of slacking on it so he felt really down that he wasn't working on it then we came up with a plan we came up with what post he's gonna make and he said he's gonna do it this week and i didn't believe him that he was going to actually do it because i know it requires a lot to make this content and just now i'm actually looking at an instagram and i'm really proud of him check it out um leif action not only one post but actually four posts on his channel and uh i thought they were all a mistake like duplicated but they're actually four parts that he actually dropped on his instagram platform so each post if you click on it has copy so this is part one here's part two and it's deep copy part three so i mean this is his first day and he dropped four posts with long copy leif that is amazing you killed it and guys please it would mean the world if you guys just go and give him a follow because he's part of this clever programmer family so we all should be there to support each other i'm going to just hit follow back on him right now i just followed him guys i want to see that number go up all right if you're here you're getting value from us let's and we're here supporting you let's all support each other all right so give him a follow and it's his birthday today so make sure you guys go and comment on his post too and show some love okay nice let's go ahead and show leif some love guys and go to his instagram uh he dropped it in the chat right um oh he uh his username is i'll just pop in his username so that's his username guys so just go to that and i'll also drop it in the comments here awesome nice and yeah his latest birthday so another happy birthday little present right there for him that'll be awesome yep uh he goes the greatest ever just goes all right give us that handle so we can hit it up and yeah he goes best present ever nice there you go we want to see the follower account go up we're up to 25 now we were at 19. let's keep that thing exciting awesome nice guys so now what we're going to do is i need to add in so you see at the bottom so with the top half is looking good right the top half of the texture can go but the bottom where we have the stars the price everything looks weird right everything doesn't look right so we're going to go ahead and target that we're going to say info bottom and we're going to say display flex so let's go ahead and do that and you can see everything separates to the side that's a lot cleaner now let's go target that star and change it to a red so let's go ahead and pop that in right here so we say search results star change that to a red save it now you see the star change to red right now to get that in line with the text all we need to do is do this we say search we say we target the container and make it a display flex center everything on the axis and then what we're going to do is for the price i'm going to target the p tag i'm going to say text align right for the price and that will be a lot so i'll push the total amount to the side and then the finishing touch for that price bottom part is essentially we're going to just go ahead and do this we're going to say position absolute bottom right 20 pixels and uh right 30 pixels and bottom 20 pixels and that'll push it to the bottom right and the reason why it does this guys is because we set the parent search result to position relative if i go ahead and get rid of this it breaks everything so this will actually make it all weird and it will go ahead and change everything so you see it goes to the bottom of the page you need to make it position relative uh at the top which will prevent that from happening so with that said now what i'm going to do is i'm going to go in and i've already saved you guys a bunch of time and i've actually gone ahead and wrote out a bunch of props which i'm going to go ahead and paste in right now into our search page so let's go ahead and swap this out with some with some props some components with some props inside of it so let's go ahead and do this and let's push this forward a little bit like so and then let's save that and now i will go through this so i'll scroll through this guys and you guys can actually see this and you guys can copy this out if you would like to uh so that's it i'm just scrolling through that right now you guys can see that awesome and you guys can pause the video and see the different props that we used at this point because with that said let's actually go ahead and check out the finished search page all right let's do it so i'm right here let's go to wow this is actually looking freaking fantastic bro yeah so we haven't done the routing yet so we're going to add the routing next um but the actual search page is done bro which is super clean yeah this is absolutely incredible thank you i mean this is an epic freaking build i was just gonna say frankie dropped he goes let's make our own stack over stack overflow with no haters i love that hey that would be sick damn this is baller um wait did you tell me something actually sunny yeah i was gonna say now we're gonna basically be adding in the routing so basically how do we get to the search page from the main page nice so i'm gonna i'm gonna play the airport because we're done with this part and now we're gonna get to the uh get to results page without refreshing yeah all right exactly so let's go back to the home page yep click airbnb that should uh do you want to make the airbnb a link yeah so that's part of the the steps that we're doing now so to make that airbnb a link to go back to the home page what we need to do is we go to our header so this one right here header and all we need to do here guys is go ahead and surround this inside of a link tag so we can do that very simply by doing this we say link and this is ins we get the link tag from react rooter so react router actually gives us some single page uh routing uh functionality so now if i go to header.js i import the link tag so i go here and i say import link from react rear dom and then i say now we need to give it one sort of attribute which is two so where are we linking to so we just say the home page so if i save this now now if we click on that icon uh or that logo we should actually be able to it should take us to the home page so let's refresh nice boom and with the react guys we try not to use a tags link tank so it does it without refreshing i'm sure you mentioned it but i'm just throwing that in there again i didn't so that was actually a good thing you mentioned that so a tags we don't want to use a tags because that will actually refresh the page we don't want to do that we want it to instead do it this way so now we've got two areas where we can direct the person to a search page we've got when you click search dates and you click on the button and we've also got when you click on the explore nearby and we're going to make it very simple we just want to have it so when you click the explore nearby or when you click the search dates drop down and that time picker club so when you click on the search airbnb button that will actually throw you over to the search page so two things where we want navigation so the first one is where we have the explore nearby so let's go into banner and here what we can do is react through it gives us something called the history right it gives us something called history and what this is is essentially we write this piece of code at the top so we say const history equals use history and we pull use history this is a hook provided by reactor to be clear the sage the search page is done right we're just working on the functionality to go to it but it's done yep exactly yeah so at this point we've got the history here uh and now what we're going to do is this this history is essentially imagine your browser keeps track right it keeps a history or like a record of the pages that you're at so if you push something into the history it's essentially redirecting you to that page right so in this case what we can say is i want it to say that when we click on the explore nearby button so on click i want to say we're going to fire off an arrow function which is going to say okay history let's push something into the history and let's push in the forward slash search page so literally just like that programmatically we can actually use react rules so we can actually say at this point if we click on explore nearby so let's wait until this loads up so we might need to hit the refresh there we go so you might need to refresh kazi nice so now if you click on explore new button nearby boom we get that and if we click on the airbnb logo look at that guys like it's super fast all right so super super fast functionality there no refresh this is the insane thing about react rear it does it without the refresh it does it very very fast now we want to add this also in so if we go back to the home screen we click on search dates and you see that button at the bottom where it says search yeah yeah we also want to attach it to that one so we're going to go inside of the search.js and here we have the search airbnb button so i need to go ahead and do the same thing i need to pull in the history and then i need to go to the top and i need to import use history from react rear dom and then down here what i'm going to say is i'm going to say on click so when we click that i want to shoot off an arrow function which says history.push so history.push oops.push and i'm going to push in the search page like that let's say if we save this now we should be able to see that the same thing happens now once this finally refreshes and it reloads the app what we should be able to see now is that when we click the search dates button uh so let's go ahead and refresh localhost yep and now if we click the search dates button uh let's click here boom and then yes oh there we go guys that is slick so now we get paige nice this is so fast and here's a nice comment by lei duran du raf and he goes literally can't believe it's a clone looks so much like the actual airbnb this is so dope exactly and cause you know just to show them uh if you grab the actual app so grab like the side of it and just make it bigger and smaller like just drag it and pull it make it bigger smaller like you'll see like look at that guys like look how clean that is how responsive that is right like look at that wow yeah like it's super responsive super clean everything looks nice and sharp like it's just a really really clean build um yeah dude on that note we actually just finished the build damn that is beautiful yeah now when we go ahead we just finished the build and once we finish the builds what are we going to do next quasi bro we're going to deploy this bad boy to firebase exactly there we go um let's go ahead and do that um and guys you know the drill by this point so first of all i'm just going to show you guys the structure of all the files just so i know you guys haven't seen it in a while so that's right here and uh let's go ahead and deploy this to firebase so we just need to do a few things so one of the things we need to do is uh firebase init yep and you would you may have to log in if you haven't already logged you have to install firebase if you haven't already so do that so firebase tools and then log in as well i'm just going to show it anyway so here's so you got to use sudo npm install global firebase tools like that and then you got to do firebase login okay once you've done all those things you're now ready to do firebase init and in here what we're going to do is we're going to choose hosting that's what we're looking for then we're going to say use an existing project and for existing project this is our airbnb clone so we're going to click that and here instead of saying public we're going to say build now on the left hand side i'll also show you guys the structure a little bit so let's go here and make sure so let me close out of source and now let's go ahead and hit y so it's a single page application all right now we got this build folder right here and we're gonna run the command npm run build and now what you're gonna see and it's gonna build an optimized version and it's gonna put it in this build folder here and it's going to remove things like hot reloading etc to make sure your app is extremely fast once deployed and once that is done you guys we're ready to pretty much deploy it and you guys are then going to be able to check out the app use it yourself and i think it's going to be awesome exactly what's up guys dude i am pumped and right after this video is done sunny and once we're done with the whole thing let's go ahead and also uh host it on github and then drop the link in the description so everybody can see it okay olango francis just dropped a awesome five dollar five canadian dollar donation and he goes because it's so fast does it mean all the data is pre-loaded if not why don't any of these official websites actually have this speed um so there's a few reasons why one is because we actually use some very like cutting edge stuff to do this like we used uh like functional components everything streamlined is built in a very nice optimal way so that's the first thing too uh websites who are like production websites actually pull the information from servers so there is a delay to account for and most likely they haven't optimized everything so sometimes that's a lot of the reason why but yeah so a lot of this it wasn't pre-loaded there um we are all the images are pulled in yeah react uses some clever things like caching to make sure that it doesn't re-download those images yeah we're about to deploy the damn thing are you guys ready let's do it if you are ready wait wait if you're already pull out your phones right now shoot a story and tag me in kazi over here tag me in kazi if you're watching and let us know right now and go ahead and check out the website once we do it right here guys right here um so guys we're gonna be deploying this in five four three two one and hold on that one second is gonna be a little longer than i expected because i just hit deploy hold on it's almost done and let's go this app is up and running i'm gonna hit open on it and let's see if it's up and running like we expected if it is we're gonna send you guys to it if it isn't that's gonna be embarrassing but it's all good hey here is the app i just dropped the link in the chat below so go ahead and check that out but guys check it out it is responsive it is beautiful it has that nice slick shrink and grow that we were looking for and we can search dates go ahead sunny yeah if you guys like it all we ask is smash the thumbs up button once you've actually gone ahead and check like played with the app yeah go ahead and smash the like button and guys keep in mind this is mostly a front-end build all right if we were to build a full back-end and database and everything that would take bajillion hours all right so those are the things that we can go deep into our course profit with javascript it's just sometimes hard to do those builds on youtube because they're going to be 12 hour long bills and most people don't have the time or the energy for that so yeah go play with it see how fast and instant it is it has to router so just to kind of um rehash everything that we talked about all the logos and everything that's done is using material ui right yeah how we're able to switch to the search page and come back we're using react router um we have the reactor we have the react date picker we have the react date picker yep so that was awesome to use um we also have a lot of flexbox being used in this build yeah it's extremely responsive design and then also guys keep in mind we are using firebase for the hosting exactly yeah so firebase to host this thing and guys like once it's hosted on firebase it's so fast to load that thing like it's really really fast and you can pretty much do a bunch of stuff um maybelline actually dropped a really good uh suggestion she said deliveroo clone that would be awesome dude a delivery clown what is that deliver oh delivery you guys don't have it in the states it's like ubereats oh wow okay deliveroo yeah yeah all right so that's pretty sick check this out i got my phone out so guys what you can do is take a story like this i'll show you all right so uh you can go like this boom you could take a story it could be like check it out guys building the airbnb clone with react javascript with sunny and causey all right so that's your story now you can be like you can type on here area clone with react js right and put an emoji or something if you want to all right boom that's now here and then what you can do is you can tag us so go here grab sonny tag him swipe up click mention again get clever quasi and tag right there and then just hit publish and once you do that it's gonna pop into all of our dms and then sunny and i will actually start chatting with you exactly and we love doing that guys because you the amount of people that we speak with when when you guys do this is insane like the our inboxes get flooded we can just have a chat with you guys and it's just cool because it changes from just seeing a number of people watching to actually seeing you guys yourselves actually go ahead and do that so check this out here's a good example somebody shared a photo with us and it's epic and gates whitmer and he goes nothing else better to do than figure out react for e-commerce amazon clone while waiting on the dreaded cod big updates on six megabits internet so check it out he took a photo and he is on a screen monitor and he's coding here and on the right hand side he got sunny and me and he's he's got a pretty slick setup so nice that's amazing bro so we reply to a lot of these people and i'll also send him a voice message that's amazing gates thank you so much for sharing this and dude make sure you're coming to all the live streams because today we just built uh airbnb clone and i don't think we saw you here so make sure you're coming tomorrow for the facebook clone amazing to have you thanks brother so that's an example i just dropped a voice message so we make sure that we're communicating with all of you guys it's a community here okay it's a family so make sure guys be a part of all of this exactly and we'd love to chat to you guys and like you said like cars you just showed you guys we do respond to you guys so it's actually really really fun for us to go ahead and chat with the people watching our content and who find it valuable so it's awesome to do that yep um awesome guys with that said sunny are we done we are done bro this has been in the crazy build we have completely built out the airbnb front end portion of this build and yeah like it's insane it's a lot of fun and thank you everyone for watching i really appreciate you guys watching this thank you guys so much for coming appreciate your beautiful face this setup over here the studio setup i'm going to keep you guys updated but i got a new chair we got some speakers um we're going to be setting it up and making it really nice you guys are going to see the studio set up constantly changing and evolving over the next few weeks as always love you guys so much thank you for the over 200 donations we got over 20 000 views and because of you guys for the fastest growing coding channel tomorrow we are going to be building the facebook clone make sure you show up at 10 15 a.m pacific los angeles time it's gonna be awesome you're gonna regret it if you don't show up tell your friends get everybody here leif happy birthday and let's see where leif is at right now leif is at 37 followers so thank you guys for going and giving him a follow because he was at 19 when he started so appreciate you guys he just made another post on instagram damn he's all nice all in ass um actually i did say we're gonna take a few questions at the end so is that cool if we can take a few questions sonny let's do it bro um so we got one question i've didn't store the name of the person actually g707 and um they said hey maybe i can just make it full screen and pop it up on the screen here so said how do you troubleshoot unnecessary rendering many times in react i find many components re-render due to like passing either inline generated function or object configuration like styles right so my first bit of advice is switch to a functional component so when you have a class based component a lot of the stuff when it comes down to what's re-rendering what's not re-rendering can get confusing it can get very confusing as to what's actually happening so by switching to a functional component and using the use effect hook instead of using the life cycle methods it will allow you to control that re-rendering a lot easier user effects are a lot more sort of you can see what's going on it's very clear as to what's happening um and yeah we actually do a lot of this inside of pwj so we do we do cover this sort of stuff in the coaching course so um that's a very that's a really really good question um but i would definitely as a first step switch to a functional component yeah so do that muhammad says hey shout out to the best developers in the world i've watched almost all your bills you make masterpieces thank you for inspiring me keep up the proper work thank you so much for that brother nice thank you dude here is another question by kevin mason i have a question this is an error i get warning can't perform or react state update on an unmounted component this is a no op but indicates a memory leak in your application have any idea about this this is pretty weird so i have a question answer okay when you can't perform a react stay up there on an unmounted component uh it's most likely the way you've written your component or the way you're updating your state on that component so firstly if you have a component make sure that your uh you've written the component correctly itself and then when you actually use the component make sure you you write it out correctly also the next step there is to make sure that you set up your state correctly so if you've set up a variable make sure that you um go ahead and you've set that up correctly using the use state hook so i always recommend using functional components it'll make things a lot easier guys and basically break it down very simply and if you need to a good practice of doing this is use create react up build a fresh app and then just test it out so just build the component that you're trying to test and then and then see if you still get that same error and you'll start to see the patterns as to where that error occurs yep um guys we have one idea that our team came up with i think yesterday logan federally who actually comes to these live streams often he's also part of prophet javascript and the community and he dropped this and he said what if you guys had a special q a at the end of the livestream and i think on twitch you can have subs and i think how it works is people just subscribe for five dollars a month and it's kind of like a donation but people just sub and at the end of the live stream we could have it where we just have a long q a and everybody who subscribed to the channel just because it ends up taking so long already for the bills for three to four hours q and a's end up taking really long and we also want to make sure they're crafted and good quality so what we're thinking of doing is maybe for all the people who subscribe to the channel for five dollars a month they can stay and they can ask all the questions and we'll be answering all of the questions of everybody who subscribed and hopefully they'll bring value to everyone watching and that's something we could do at the end of the live streams if you guys think it's a garbage idea let us know we won't do it if you think it's a good idea and would be something that's actually helpful to clever programmer also helpful to you guys let us know and we'll figure out how to do it then we'll get that working yeah that would be awesome actually yeah to do something on that yeah because then we can actually just stay and answer most people's questions um all that stuff so yeah here's another question by hajera and she asks do we need more padding and header right so for example i'll show you what she's talking about so when it's in responsive mode it gets a little crunched up and that's why i think she was asking that question and i think she's talking about um this whoops she's talking about anything oh my god this stuff right here yeah so the reason why is because the limitation of today's live stream was just showing you flexbox right which is why it cramps up a little bit you could add some padding to it yes but what i would recommend in this case is textbox is going to take you so far when you get to a situation like this i would recommend going into uh using media queries so media queries will actually allow you to then because what you could do at this point is you could have a sandwich bar right so a media query could say hide this normal navigation bar or this normal top header bar and instead show the airbnb logo and a burger menu so you know those three lines that you usually see and then there'll be like a drop down menu and you can click it that would be my approach because that's the sort of way that you do in industry as opposed to sort of making things super small or padded out because think about if you add padding it's going to bun it's going to start to push into the middle uh container so you want to start thinking of it like that because because i really like sunny's t-shirt today hey hey let's go these are different t-shirts by the way guys they're just they're just fresh black chests yeah nice you know i kind of want to do that too mark zuckerberg did that what what i want to do is i hate thinking about clothes it takes so much of my freaking valuable energy and time so i'm i've been telling my girlfriend she says i'm crazy but what i'm thinking is to go one day and just get like go to h m one day just buy like 365 shirts yeah like the cheapest shirts possible but like maybe just they're distinct not all black and um i literally want to wear one new shirt every single day without ever having to wash it again because it's just one shirt a day for 365 days and then after they're all done just go and burn them in a big fire and then go buy another 365 shirts i was gonna say maybe wash them yeah yeah it's i think much more fun to just burn them and then go just get new ones yeah melvin dropped a good idea she said uh we should drop uh we should get some clever programming t-shirts i think that'll be dope dude i think like i should get a black t-shirt saying clever program with the black t-shirt i think that would be yeah i feel like a shirt or like yeah a shirt or like even a hoodie would be sick yeah yeah we should do that definitely that'd be sick people are saying donate them donate it uh i think that's a good idea i think that might actually be better to donate it um yeah yeah a lot of people are saying donate yeah actually guys i changed my mind i think instead of burning them i'll donate them i think that's much much much better yeah um but yeah that would be awesome because then you just never have to think about it just 365 days of clothes and you're good to go exactly guys by the way take a look at this beautiful face and by tomorrow actually tomorrow i won't be on the live stream because this face will be changing i'll be changing it up a little bit and on friday i'll be live and i think you guys will have a little bit of trouble recognizing me but you know just letting you know yeah skinny little yeah people are like sell cp clothing the cp logo would be so cool on a hoodie yeah that would be awesome oh franco send me the new cp logo i'll make a teespring damn that would be sick i think we can do that yeah you could just drop it here baby thank you nice i just got my food reinforcements um awesome i think that's it guys hopefully you guys got value out of it we love your beautiful face this is kazi this is sunny and as always we will see you in the next video peace peace guys

Channel: Clever Programmer

Views: 157,809

Keywords:

Id: BtJeH_-XYaA

Length: 198min 52sec (11932 seconds)

Published: Wed Aug 26 2020