🔴 Airbnb REACT.JS Challenge | Day 4 (Mapbox Integration - Next.js, Tailwind CSS, Maps)

[Music] day four of the five day airbnb react next react and next js challenge let me know where you guys are watching from get ready it's going to be sick we're going to be doing so much new stuff today i've not done on this channel before so get hyped it's going to be fun guys it's going to be so so much fun we've got pedro in the house these are in the house amen sanjay zeeshan rudy natasha khalid mohib fernando what's up guys good to see everyone tuning in italy in the house prashune hey look at this get ready guys welcome to day four of the five day airbnb challenge let's kick start guys solomon tajwa juan hey welcome guys day four [Music] gintares tushar yusuf archit ahmet benka martin what's up guys i love seeing the growth over these couple of days you guys have been awesome coming back william's back natasha's back useless back hey this is awesome guys let me go ahead and give you a demo of what we're gonna be doing today so this is the airbnb five day challenge i'm gonna go ahead and show you guys what we're building in today's build so this is what we went ahead and built yesterday an awesome airbnb search results and calendar functionality build so it was pretty fun we actually went ahead and included this loading sort of indicator as well so we went ahead and your type in london we got 10th to the 20th let's go ahead and say two hit search load it over to the next page which server side rendered itself and then we went ahead and had this beautiful page so today papa fam today we are introducing mapbox into the world of you know the papa fam i've never done that before so we're going to go ahead and show you how you can go ahead and take your build and include this awesome map inside of it guys so this map is going to load the actual markers from the search results onto a map dynamically center it around all of the markers from the search results and then it's going to have some nice little styling behind it as well i'm going to teach you all of this today and how you can go ahead and have it just as responsive as i have it so i only show it on the larger screens it's going to be a lot of fun it's going to be so much fun awesome we have gustavo antonio welcome to all the new papa fam special tier members there's a new shiny join button at the bottom of the screen make sure you're here if you're going to support the pop fam i appreciate you guys so much this is awesome smash the bottoms up fine if you're excited for today and let's go ahead and jump into day four of the challenge guys if you're pumped up let me know right now by typing in i am ready for day four and only the real ones are going to keep on coming back because this is a five day challenge this is tiring right you make it through the days and you've got to push in you've got to dig deep that's why i don't make it two days that's why i don't make it three days that's why i make it five days okay so make sure you go ahead and get ready for this one we've got darwin web builders pedro says i'm ready nice party youssef as well oh my god look at that law if you're not watching this with the chat on i really recommend you turn the chat on when you're watching this and see the energy that we have flying through today so if you haven't already reserved your spot for sunday's training right so if you don't already know this is day four of the five day challenge we have a day break tomorrow that's because it's been intense right i want you guys to go ahead and finish off the matte box homework which you're going to go ahead and learn today and then i want you guys to go ahead and have a break submit all your homework get the best chance of winning all the prizes and that way we can go ahead and crush it with a full set of energy on sunday where most people are pretty much gonna have some free time available we're gonna go ahead and kill it with a free training okay and i'm gonna go ahead and release my ebook which you guys have never seen before so that's gonna be a hell of a lot of fun we've got oh this is nice we have so many new names matt larson what's up dude good to see you here are three minutes he goes i'm still here sunny let's go michael gerge is always coming in with the positivity on day five which is again on august 8th the day after tomorrow but you're gonna get a free e-book you have to turn up i know who turns up so many people register and they want that free ebook you have to turn up to get the book you have to turn up to get also i've got like a bunch of prizes going on right and everyone is going to get something on that day right not just one thing i've got about three or four different bonus prizes for everyone who participated as well as the prizes all right so make sure you turn up guys that is i put some of my heart and soul into that book okay so make sure you go there andre what's up dude he says a boss mode engaged that's what we're talking about join the official papa fam discord server if you want a bit of a support we actually have over five thousand i need to update this it's grown so quick five thousand plus members in the discord seven right now perfect place to go ahead and socialize it's gonna be so much fun we have the official papa fam facebook group fourth link in the description this is where you're gonna find all the information even this video is gonna be streamed over to that group as well as youtube and twitch so make sure you're there you can actually get all the homework links everything you need and you're gonna get support if you get stuck share a newspaper challenge you know increase your chances you know this stuff guys pull out your phone tell me that you're watching today tag me and put and hashtag papa challenge to make sure you represent this huge challenge we're killing it with so far what's that we've got kosovo in the house violent i'm tuning in again what's up dude we're gonna learn everything that you see here today so we've already touched on some react some next year some tailwind some versal but today guys today we're to learn mapbox and this is going to be something which you can take away and you know include it in your own build your freelancing gigs whether you go to a job if you ever need a map inside of a project mapbox is an awesome way to go so guys thank you for tuning in we have all crushing it today with the amount of people turning up and we have so many likes running in we've got over hundreds of likes right now let's go ahead and carry on who's ready to integrate the map box functionality and if you have already used mapbox let me know all right let me know and someone's saying where's that shot hey yeah where is dash santosh everyone knows that guy right now he's killing their dev mental alive what's up dude mexico in the house time to focus right time to focus i'm going to go ahead and actually put on a different song right now let's change it up change it up guys time to focus you know i want you to guys put on your phones and do not disturb that's what i do before i go ahead and kick start this training but we're going to go ahead and get dialed in right now let's go over some quick reminders it's a challenge there are some rules this is what we're going to be building today right so this is going to be your homework at the end of today's build whether you're watching it now live whether you're watching it you know in six months time whatever the case make sure you get the homework done and the reason being is because you show up you do the thing that we're teaching you to do today and then you're going to go ahead and learn so that's why i would say you need to go ahead and do this oh robin says i use mapbox for maps at my work that's awesome dude crazy crazy stuff carry on day 4 agenda we're going to review all the best submissions so we've got a nice little fun part going on to get things kick-started today we're going to reward those juicy bonus points we're going to integrate a fully functional map using mapbox and we're going to go ahead and complete the airbnb build now that doesn't mean we're completing the challenge like i said you have to go ahead and register for day five right that's a registration event in order to get the ebook you have to do that otherwise i don't know who's actually there or not right we will push the code to github after this and then you're gonna deploy it like you've already been doing in the last two days and then you're gonna submit that as your homework and we're gonna go ahead and check them out okay this is sick this is the point system reminder if you wanna go ahead and win some of the juicy prizes we have ten thousand pounds off of prizes in this challenge here's the point system quick reminder one point for sending a message two points for tagging me in any post so pull up your phone story almond says he's already done it amazing stuff oh we have dash santosh in the house what's up dude three points if you help someone out with your homework i really do like the fact you guys are showing up and helping people out by the way that's what the papa fam is about four points for referring someone to this challenge and if they win or if you win they're gonna win as well so you know it's a huge bonus point five points for every homework submission so naturally the best way to go ahead and actually win this thing is submit your homework right and all you need to do is submit before day five and then i can tally up your points and get you in for that winning chance reminders of what you can win first place diamond mentorship experience second place three platinum winners and third place is 50 off our platinum membership so we've got we got a bunch of winners guys it's gonna be fun this is what you need to do before day five we've got day one two three and four homework it's not a requirement you can still turn up to day five and learn a ton of stuff but i would really recommend you one you if you want to win the prize right you're going to win this challenge you do it and also if you want to go ahead and actually crush it as a developer you need to put in some work so make sure you go ahead and hustle and get that done this is where you can find the homework submission as well as the link in the description this was your homework for yesterday so we're going to go into the fun portion before we kick start this build your homework was to build out the search and calendar date pick up functionality where you can search for available places and load out the results now what am i talking about right this is all about how we use state to go ahead and load out a calendar date picker so how you can go ahead and select a couple of values hit search and then server side render results now you guys pulled through with this and you actually crushed it right tino's in the house what's up dude you've tuned in at the right time that's all i'm gonna say man we received over 200 builds for day three that's that's crazy i've never had that many people submit homework for the absolute the third day part of the challenge usually it kind of dips dip dip zip zip which naturally happens because you know people don't stick it out but 200 plus builds let's go ahead and check out some of these bills now if you get featured on a build it's gonna be an automatic 10 point point bonus to you right so jay get ready for these people who are about to show up on the screen right now we have ali makongo nathan downer if you guys are in the chat right now make some noise it's your moment of fame you guys crushed it literally implemented the homework perfectly right it was amazing i loved it it was super smooth and easy to use incredible stuff guys well done we have hao ming chang and again if i pronounce anything wrong i apologize and we have louise cruz you guys again crushed it guys and actually i noticed you actually went ahead and filled in the hearts over here so that's pretty cool nice little touch thank you so much guys for submitting your homework we have tanisha chargery camilo cabrera always every single day she's been featured because she's killing it you guys girl power absolutely crushing it keep on hustling and get today's work in as well because you guys are on a good rolling spree right now to go ahead and win the final prize keep it up guys we have jamie davies you're in the chat right now i saw you make some noise absolutely crushed it when we have it joanne i'm gonna give this one a try insignares right maybe pronounce that wrong but well done dude absolutely crushed it now here's the juicy builds okay the juicy juicy builds i'm gonna go ahead and quickly give them a demonstration you guys are gonna have some fun with it dash dash dash dash we all know dash if you've been here for any amount of time oh dash has been killing it andre gan welcome dude to the papa fam special tier he hit that little join button and now he is a loyal member of the papa fam on the youtube channel thank you so much dude appreciate you you stand out massive when you chat now it's crazy so that's why we did it but let's go ahead and click on dash santosh you ready for this guys look at this build we actually he got featured yesterday because he's done such a sick build but this already looks incredible now if i go ahead and type what the what i just clicked it and it worked look at this guys we can go ahead and click 9 to 13. we've got the adults we've even got children i didn't even do this children's section right so this is looking absolutely clean dude now i'm not sure what is happening here but i've actually went ahead and done this i did this earlier and it was actually working perfectly for some reason let's go ahead and give it a little refresher and let's do let's go to oh i didn't type in the destination that's why maybe perhaps yep that's why let's go ahead and hit search and then let me get the loading indicator good stuff dude and boom look at this looks awesome some reason your pictures aren't loading but nevertheless it looks incredible and he's gone ahead and added additional styling at the top as well as this lovely little you know we've got this little you know pictures you can select how many pictures you want there and we even have this little pagination tool which is more visual but it's an awesome little finishing touch i do want to mention guys by the way one he's added this little finishing touch there that's awesome as well as little border but if you ever do have buttons make sure you do curse the pointer please make sure you curse the pointer okay i always shout that out but well done dash don't touch you're absolutely killing it keep on doing what you're doing dean barber once again comes through clutch this is the one where i said the overuse of animations can come across a bit annoying but well done dude you've killed it let's check this out let's go ahead and say london ninth to twentieth and let's go ahead and hit two oh wow look at that you see i punch it oh that's cool and let's click on search we've got the nice and big loader in this case he wanted me to see it a nice little finishing touch on your one dude that looks awesome i really do like it really nice little finish now i just like oh nice look at that nice little spinning ball i think i was on the first one but anyway looks sick well done dude dean barber law sosa i'm gonna go ahead and show you on that that's what i like right that's from the portfolio i've seen a couple of portfolios doing that but it looks really nice ali makongo says thanks for the mention dude you're absolutely welcome crushed it oh he's taking some design inspiration from you know we have some we have some of tino's signature styling right here if you guys know who i'm saying right now you've been a loyal follower dimple matthew thank you for becoming a papa fam special tier member again hit the join button if you want to support the proper family get a nice little loyalty badge next to your name thank you so much dude for supporting the fam let's go ahead and type in london okay nice nice i would definitely say if you do this touch the bottom or maybe he did it's just a bit strange but yeah touch the bottom so that way you don't have this little gap let's click search okay i like the little transparency by the way okay nice nice we got a little transparent top right here so this was pretty good really good stuff dude well done for your effort law sosa ma long clay okay now this one i really did like again you know the one those of you who have actually gone ahead and implemented this design well done i have to say it looks so clean even the way you go ahead and do this transition let's go ahead and click on the okay one sec let's go ahead and click on the search so we've got london let's do 8 to 12. and let's go ahead and add three such nice and let's go okay so you've actually added a max width which i like and i would have actually suggested that to a lot of you it's a very good practice to add in a max width to your overall parent container awesome stuff dude continue going on oh marlon's in the chat as well nice good work dude awesome awesome stuff guys we actually have over 300 people tuning in right now that's crazy for day four i can't even believe it you guys are incredible we have romania in the house as well nice awesome stuff guys yeah that's looking clean well done dude and then my favorite till last right my absolute favorite and i don't know if you guys can guess it already but go ahead and try and guess it right now and also well done to everyone who has actually gone ahead and got a feature but you guys know who it is tino taylor dude absolute sick look how he's got a nice loader a preloader look at this so we already had our favorite yesterday right this was looking sick we had the little you know 3d animation we had the parallax effect from yesterday so i'm just going over yesterday's because it was so goddamn clean but look at this man honestly look at the design here and let's go ahead and hit search we can type in london and just did you oh my god look look at that it just makes you usually want to play and look we even have button design and he's even gone to the effort can you see how sleek and i noticed this stuff as a designer this is nice dude let's go ahead and do like a three and get hit such okay i need to oops i didn't actually put dates in so let's go ahead and pop it okay there we go got six i did do date i did it did the today that's fine and then we've got this oh my goodness look at that look how actually look dude that looks sick man it actually goes ahead and gives you a bigger view pops it in so you know that's the one that you're looking at in context right now guys give tino again some noise man that is you deserve it dude that was actually awesome and i love how you've kept the design language here you see he's kept the actual design language even to the point where the same shadow is being used for that box that's the small things that designers are going to pick up on and look at that we even use a responsive header over there that hero icon looking great tino well done absolutely crushing it every single day man you deserve it well done to everyone and to everyone i featured before 10 bonus points to you all so absolutely crushing it guys you guys are doing awesome really really great stuff so many impressive builds go ahead and let me know now let's pick a crowd favorite and give them an extra five points go ahead and name your favorite person right now what's your favorite build right i'm gonna go ahead and leave these on the screen just for a second while we have a water break so go ahead and let me know who's the favorite build right now smash the thumbs up button while you're at it right tino is one of the winners oh ho sam says how do you deal with hay fever you know it's a struggle dude that's the truth it's a struggle okay we have dash and tino a lot of them are going towards tina i'm gonna give tino the extra five points all right tino dude you deserve it five points incredible stuff jay if you just saw something as well that was jokes absolutely crushing it right let's keep on going so so many impressive builds and you guys have been helping each other out a ton i always see it lewis i saw you helping out here i'm going to armando sorry it was helping out lewis we had dimple matthew helping out pierce was absolutely awesome guys satya jumping in here and also you can just see like even in the discord community so much positivity and look roseanne's shouting himself out again amazing stuff guys no shame awesome stuff marco this is what we're talking about this is why we do what we do welcome as well baba tunde to the pop specialty guys so many members are joining the youtube membership make sure you join if you want to go ahead and get that nice little loyalty bachelor i can shout you out it makes it easy for me to see who you are when you're talking so i can actually spot you guys out in the craziness of chat right and if you're watching this back definitely turn on the chat you're gonna have a bit of fun let's continue on guys let's integrate the mapbox functionality right smash the thumbs up button if you're excited about how we're gonna do this or if you wanna even you know you've always wanted to know how to do this stuff but yeah yo love from nigeria sunny babatunde nice good stuff dude welcome we have a bien coda we have a michael ah this is cool man let's go ahead and kick it guys we're gonna go ahead and build the following in today's build we're gonna go ahead and build this beautiful map box now this is an interactive map box we can zoom in we can zoom out we can change the styling we have these markers they can be customized so much stuff which you can imagine what i'm going to do now all of this stuff is going to be customizable for your homework and it's going to give you a nice juicy and anyone who gets featured on the final day 20 points so this is your time to shine this is where you want to stand out against the rest make that map pop and i'm going to show you how you can go ahead and get that done we're going to go ahead and crush it today okay dean what's up dude you guys i can't believe i got featured today amazing stuff dude smash your thumbs up we're almost at a couple hundred likes let's keep it going guys so at this point we're going to go ahead and go to our previous build all right so the previous build that we had up and running yesterday was this build right here so if you haven't done this build then make sure you do go ahead and finish off the builds and if you haven't and you're going to go ahead and continue on then just make sure that you go ahead and you know enjoy today's build watch you along learn something new and then when you get some time go back and watch them in in sequence i'm going to making i'll be adding this to a playlist for the entire challenge will be easy for you to go ahead and watch these back afterwards so it's going to be ultimate right and i hope a lot of you have already fallen in love with next year's react and tailwind because you can see how powerful is in this build okay how do we go ahead and get this thing done so we're going to go ahead and use something called mapbox now what is mapbox well it's maps and locations for developers right you can go to their website have a little scroll around it's used by tons of different con apps and companies so you can see here instacart bmw strava all of these different companies the weather company we all know that one you know where we check the weather but you can see here they're responsive they work across devices now you can see it's not just 2d all right maps you've got nice 3d maps everything that we could possibly need and it's very customizable by the way it's all included in mapbox so this is where you know get your your focus face on and get ready for this and and i agree with dev mental life because madbox look 100 better than google maps also it sucks with the integration interact yes i agree with you dude on that one this is actually really easy to integrate as compared to google maps so let's continue on the map and the website looks sick as well and also boom navigation if you did the uber uh the uber clone you're gonna know about a navigation but this is actually very nice so i wonder if someone can beat me to it and build a you know fully formed formed fully formed navigation app right so this is gonna be sick let's continue on so what i'm going to want you to do go ahead and sign up right so you need to make an account on mapbox it's completely free you just have to fill in your name you know your last name your email if you have a company all that good stuff you want to go ahead and check that in and then sign up now once you've done that you can click go to account you'll be taken to this page right so we can go ahead and actually get everything we need now if you scroll down you're going to see access tokens and don't worry i'm going to refresh this so you guys can't use my access token but this is going to be very important for today now what is a public token a public token is basically r so once we have an account with mapbox we're going to go ahead and actually use the maps over at mapbox but how do we tell mapbox that we are who we logged in as how do i say i'm sunny the guy who just logged in five minutes ago whoever that is how do i know myself from anyone else well we use something called a public key and it's called public because we don't care if the world sees that right but you should always keep any kind of key in an environment file of some sort so let's go ahead and crush this right now okay guys so without further ado we're gonna have a quick wall break before we get started the the math is getting super thirsty today okay now this one is more of an intense kind of you know few few uh i'd say maybe give me an intense hour and we've got this down right let's go ahead and crush this so we've got our access token so make sure you go ahead and hit the copy button on this one right here i'm going to refresh this in a second so don't even try and copy it it's not going to work don't worry about it okay but what you want to do guys is you want to click on go to macbox studio all right so you want to click on go to macbook studio now here they've made it really nice as to how we can go ahead and build out our map so in this case what mapbox studio does is they give you styles so we're going to go ahead and create a new style so i'm going to click a new style now they give you these nice kind of variants so if you want you know a satellite street go ahead and do a satellite if you want a basic street you can have a basic view monochrome is kind of nice as well navigation is always pretty slick right but streets let's actually have a look at streets and what should we do guys you guys pick for me i'm gonna let you guys decide this is the one that i had before which i'm pretty sure was the navigation look or as close to it but go ahead and let me know which one should i pick right now basic monochrome outdoor navigation satellite or streets who knows all right we can go ahead and basic and we can even change it to galaxy that's what i had before okay so at this point i'm actually going to go ahead and pick streets right i'm going to pick streets and we're going to have this right now but you know what i can't do it to myself i'm gonna go ahead and do basic with the galaxy i like the dark theme i'm not gonna lie guys it looks sick arpeggio says navigation streets oh okay it's coming through satellite uh monochrome as soon as we get double navigation there we go navigation is all right so we're gonna click on customize now so once you've customized you it says welcome to the studio now you can click on learn more and look around but look what's really cool here guys you get all of these customizable layers colors so this is where i want you to customize your homework to make it look as cool as you need to make it look maybe you could go ahead and theme it i'm just throwing this out there you can go ahead and theme it so that way you have the airbnb color template right so that way you have all the airbnb styling that you would need for your map to match that would look sick so you can go ahead and actually change all the colors over here so where we have you know motorways and trunks we can go ahead and change that to a pink or something like that so let's go ahead and make it like a red let's go ahead and do something like this in fact where we got have we actually got the where i used the airbnb color yesterday so let's go ahead and find it and then i'm going to go ahead and actually pop that in because that would look pretty cool right so we've got textured okay i've got it here nice i've got the airbnb color right here i'm gonna go ahead and grab that i'm gonna pop it in like so okay now we have the airbnb color now obviously you can make yours look a little bit better but what we want to do now is go ahead and click on share right now we've clicked on share and we've got two things which are critical to what we need to do right we've got this style url and we've also got the access token you're going to need both of these things right here in order to get this map into your application okay so make sure you take your time get this one right i want you to style up your app and style out your application and then we're gonna come back here in just a second we're gonna get this style url and get this access token okay now what i'm going to do is i'm going to go ahead and refresh my style um refresh my token and then come back so that way you know that we don't get no like we don't get no annoying stuff happening in today's build but let's go ahead and i'm going to quickly do that right now and then i'll be right back so i'm going to go ahead and i'm actually refreshing my token right now so i have a shiny new token right now this is looking pretty nice i've got my you know there we go shiny new token i've copied it i'm now going over to my macbook studio once again and we are back and i go to my navigation and there you go so i'm back at the screen but i've got a new navi a new token we click on share and now i've got this right now obviously you can't see it also it's fine so at this point how do i go ahead and continue on with the build well we need to pull this into our app so what i'm actually going to do and in order to get this inside of our app is i'm going to create a map component right so this map component is going to be the one that resembles everything inside of our app once we get it working so it's going to be responsible for showing the map somewhere around here okay so what i'm going to do is i'm going to go ahead go into my folder structure go to my components and i'm going to create a map.js component okay underscore rfce which is our boilerplate to go ahead and get our component up and running so we've now got the map up and running and i love it because the minute i start actually going ahead and running with the build i see people go into that focus mode and i see that chat kind of you know everyone's like you know tensed up and getting they're probably coding along with me right now so you've got the map here right now where are we gonna put this map right so where i'm actually gonna put this map is over inside of the search screen so we're going to go to our search screen and i'm going to probably put it down here somewhere so i want to actually put the map underneath where we have main so we have the footer but right before we finish the main you see where we had everything in sections i'm actually going to go ahead and create a new section okay and this section is going to have the map component now if we scroll down you can see we get the components one where it says auto import so i'm going to go ahead and do that one right there okay and then our sun gets me hyped up all right so now we've got the map being rendered in and you can see up at the top we're pulling it in like so so here we have the section with the map like here like so right so this section i'm going to go ahead and say class name equals and what i actually want to do is i want to show this only on the large screens thank you so much syed first donation massive he says the knowledge you're sharing is priceless thanks mate appreciate that dude thank you so much for hopping in right now i'm watching along and uh yeah let's crush it guys we've got the section class name now i want this to be hidden so if we go back to the main board you can see on smaller screens it's hidden now what you could do is you could actually go ahead and reposition it but i'm going to leave that in your core right but what i'm doing is i'm making it hidden except when we get onto a larger screen where i get the actual enough screen real estate that we can go ahead and do it okay so in this point i'm going to go ahead and say hidden by default otherwise only when we're on an extra large screen should i go ahead and inline flex it but what i'm actually going to do here is i'm going to actually go ahead and probably not import and not add this just yet so we want to see it while i'm coding and then i'll go ahead and add it in okay van timmer and says great channel thank you so much dude if you're watching and you're and you're enjoying the content make sure you smash the like button and hit the subscribe because we are nearly at 70 000 subscribers which is absolutely incredible all right let's keep question let's go back to our map now how do i get you know this nice navigation map box into my app now well we're going to use a nice little helper package now this helper package is called react map gl okay so if we go over to our safari we're going to go ahead and pop in react map gl you're going to see this react friendly api wrapper and what this is is somebody's gone out there and actually wrapped up you know they've added a bit of code which actually gives us the nice react map geo component and what we can do is we can pass in a couple of things here that will actually go ahead and allow us to pop in our you know the things that we have so like the map style url which is the one that we just created in that style editor and we're also going to have the a access token so we can actually go ahead and pass that in like so so if you can see down here it says using mapbox tokens so i've gone ahead and done the documentation i've done all the hard work for this so you can now just go ahead and follow me to save yourself a bit of time so we're going to go ahead and import this but before we do it we need to install it so copy this line right here go back to your code command j to pull up your terminal and you're going to go ahead and do npm install save react map gl okay now while that's happening we're going to go ahead and copy the top line over here where it says import react map gl from react map gr library all right so let's go to the top over here paste it in and now we have this okay so what we want to do is this map if we don't actually require a div this whole component is going to be this map and that makes sense right it's called a map for a reason we want the entire component to actually be that map so what i'm going to do here is i'm going to go ahead and say okay let's pop in that component all right and this is this actually can have some children now what would the children be eventually is going to be the actual you know markers inside of the map hence why it's a child component so let's continue on we've got the react map gl so this actually takes a bunch of attributes now what do we pass in here right so i mentioned before we need to pass in the style url but we also need to pass in the access token okay so the first step is i'm i'm going to go ahead and actually pass in the map style and you see here when as soon as i have been mapped we get a bunch of drop downs right so what i'm looking for is mapbox api url right actually not this one sorry macbook style right now and what we're going to do here is we're going to go ahead and type in equals and i'm going to pop in the following right here style url i'm going to copy this i'm going to paste it right so we have this is our style url now what does that mean this is essentially going ahead and here like popping it it's grabbing this mapbox um style that we've created in the mapbox editor and now it connects it to our component right so this means our component will know that's the style that we want so all of these nice little colors that we've added you should be able to go ahead and pull them through the next thing is the mapbox access token so whenever we have any token or anything like that we should always consider playing it in something called an environment file right so typically when you're coding in react you can use something called a dot env file but when we're using nextgs if it's a public key right we can actually do something a level up we can use something called the next.config.js which we created earlier to go ahead and allow us to add pictures into our app so what we're going to do here is we're going to add an environment variable now what the hell is an environment variable you might be new to coding you may not have any idea you might be coding for years and you have still have no idea what an environment variable is this is basically when you're in your development environment so when we're coding at home in a computer that's called the development environment or your local environment but when you deploy your app to versal so it's up on the internet living somewhere that's what we refer to as a production environment the two environments can have different keys so imagine for many reasons you might want this you might have like a development that's sort of a dummy server which has a certain key and then when you push to your production server you have a live key right so this is why you might want to do this in this case we actually have one api you know an access token which we're going to keep the same across both but it doesn't really matter we're going to go ahead and set this up we just passed 200 likes that's awesome guys keep on smashing the thumbs up button and thank you so much for tuning in as always i appreciate you all all right let's continue on we're going to go ahead and rather than just adding the key here like i said we're going to make use of the next dot config.js file so what i'm going to do guys is we're going to actually use this file to go ahead and include a variable now this file i repeat this file should not be used to include any private keys no it's the mapbox key when we actually got it said a public key that's fine right but whenever you're dealing with something called a private key that should be in a secure environment file or in some kind of secure place so for example versa you can upload your environment variables and a lot of stuff that's a different time a different topic but in this case you want to go ahead and make sure it's public key that you're putting in this file because you're exposing it when the user loads your website so at this point i'm going to type in end and then i'm going to go ahead and say map box underscore key okay and in this case you simply put quotes and then you put in your super secret key all right you guys thought i was going to write it didn't you right so at this point i'm not going to write that key all right but where do you get your key you're going to get it from here the access token all right so this is your key this is your private key the access token right here so what you want to do is copy it and then you want to go ahead and paste it in here you guys keep thinking i'm doing it right but i'm not going to do it alright so at this point what i'm gonna do is go ahead and paste it in but when i do it i'm gonna hide the screen i'm gonna paste it and i'm gonna save the file and then close it right but this is what i'm doing the environment part map box key okay so pay close attention if you're following this along so i'm going to go ahead and paste in that value right now so i'm pasting it in and then i'm going ahead and i'm closing that file and now what i can do is if i go ahead and actually load up my terminal so let's go ahead and hit save right now so you can see we've got nothing here if i go ahead and load up my terminal go to my first terminal you can see here it says founded change in next config.js now whenever you change a configuration file you need to restart your server this is because next uses this stuff to go ahead and actually set up that server it can't fast refresh new variables in so at this point what we're going to do is we're going to do control c inside of our terminal to cut it then i'm going to do npm run dev to go ahead and run it again in the developer environment right so here you can see it should in a second go ahead and grab the environment variables it may say it may not i'm not sure if it actually says it i can't remember but when you can you can you can use environment variables if anyone's wondering in this case we're only using the ones loaded in from our configuration file so now that we have that loaded in what we want to do is go back to our map and how do i get the actual key right well what we're going to use is something called process okay so when we do this you can go ahead and actually uh it's actually built into react so process is something that you can go ahead and just type in and it will go ahead and know that you're tapping into this part of react so at this point i can say process dot environment okay and what this is doing is it goes into the environment variable so again as i mentioned if you're on your local environment wherever they're stored it'll grab them if you're in your production environment universal there is a place where you upload your keys i'm going to show you that as well so you're going to make sure you need to do that right so that's going to be super important for you guys nitin says i have taken your proper records is that enough to becoming a greater rent yes dude 100 if you already are learning a bunch from you know uh if you're learning a bunch from the youtube videos then hell yeah be inside there at full stack here you're gonna learn a bunch okay now what i would say is make sure you turn up on day five i have a nice treat for you all so that's gonna be sick for all of you who are interested so process.m and then here we're going to see you get a bunch of you know information out of the box already but what i'm actually going to use is something called my mapbox key so remember we gave it a key value before it said m and then we said mapbox key so that's how it knows okay we hit save right and we don't get an error at this point so if i hit refresh everything seems fine at this point okay if i make it full screen everything's fine there's no errors that we're seeing so at this point it's okay okay so now what we do is we have to pass in something called a viewport right a viewport is very important because it tells this map how it size itself okay so at this point what we need to do is go ahead and type in viewport but before we do we need to pass it in the value so i'm actually going to go ahead and create this variable beforehand so we say const view port okay if you're wondering how the hell does he know this right again i've gone through the documentation extensively to figure this one out you can see they actually have a viewport right here there's part of some state you can do the same thing we're going to do the exact same thing here we're going to have a viewport in our state set viewport which is the same standard we learned yesterday we actually learned how to do that yesterday right and then we went ahead and we're going to set it up with a latitude and a longitude right and then a zoom value now in our case if we just say as a hard-coded value that map is going to point in a random location or only that hard-coded value so i'm also going to teach you today how you can take all of the search results that you're seeing on your page find that the actual center of all of those results and then use that as a value so that's going to be super cool and you're going to use a library called geolib in order to do that so you guys are going to find out how to do this uh dev mentor says sonny when you guys are grading homework you only look at the browser view you don't read the cleanliness of the code so in this case when we have a huge challenge it all comes down to sort of we would have to go you know on on the basis of the browser and we quickly you know go ahead and check the responsiveness in terms of the code inside zero to full secure we do do code reviews so obviously when we have hundreds of people it's a lot harder to do a code review on a hundred people so that's that's the reason why so at this point but i would love to actually check that so very good good point if i had enough time i definitely would all right so we're going to go ahead and create a piece of state called viewport and where you know the standard is set viewport and then we go ahead and say equals use state and we're going to have to import this from react like so and here as a default value we're going to pass in an object right so this point we pass in an object now what we're going to say is the width and height of our map should be a hundred percent right because we want to use up a hundred percent of the container that it's inside of right and then we're going to say the height should also be 100 okay so this means that whatever container we put inside of it's going to go ahead and maximize it now to get things started i'm just going to put in a dummy latitude and longitude and the zoom value from the example okay and then we're going to go ahead and do that centering logic that i said before right so let's go ahead and chuck this in abu shake says sunny dude i got my first six-figure job landing react for me amazing stuff dude congratulations uh andre says i plan to learn the basics of here before jumping too deep interact however watching sonny has made me excited about react uh i want to know the basics to understand rihanna definitely check out the react basics 101 if you guys haven't that's in the description below it's a free one month and you're going to get full access to a three-hour course i've released there which i break down react in the simplest terms it's a three-hour segment of videos which are all 10 minutes each that's going to help you out a ton okay so i'm going to pop in the latitude longitude values like so and in this case we're going to go ahead and say it's a zoom of 11. you can mess around with that value if you want to play with it okay at this point what we're going to do is we're going to say right i'm going to actually pass in this viewport now what i'm going to do is in order to go ahead and pass in all of these values so what i want to do is i actually want to pass in these values here as if i was saying width is 100 latitude is this longitude is that the way you can do it in a very nice way is you can actually say we can put in our js brackets we can do spread viewport now what this is doing is it takes this object and it kind of like bursts like it bursts it open right so that way you have basically done this right where we go ahead and pop it in obviously we gotta say equals otherwise it doesn't work but that's essentially what we're doing when we do a spread operator right we open it up from the uh we open it up like so and then it goes ahead and works um so let's continue on so we go ahead and spread out the viewport stuff and now we're gonna go ahead and hit save now let's see what happened guys so at this point we still can't see a map right so what i'm gonna do is i'm actually gonna go ahead and check out where we render this map okay so we're going to go to our search right here and you can see we do actually put out the map but at this point we don't have anything inside of our section so what i'm going to do is go to my uh that class name and i'm going to add the following i'm going to say by default this is going to be a inline flex element okay so we hit save and then let's go ahead and check out still not seeing anything okay interesting and what we're going to say is on the uh we're actually going to make this responsive from the get-go i'm going to say it's hidden by default on the extra large screen i want to make it an inline flex element and then i want to make the minimum width right on the extra large screen so the minimum width that this is possibly allowed to be is going to be 600 pixels okay now once i add that in if i go back to my full screen you can see that it gives a min width so if i go ahead and actually get rid of all of this you'll see that it gets applied anyway oh that looks too squashed up right that's why we go ahead and only apply it you can put it on maybe that screen size if you don't mind it but i would recommend that you go ahead and you know you do it you do it in the way that i said it so it's on the extraction but already you guys can see that that is looking great right it's actually pulled through looks awesome so far and you can see we've got the little map looking really nice okay so at this point what we're gonna do is we're gonna go ahead and and the reason being is i can't move why can't i you know you said this was a fully responsive map but right now i can't actually move through i'm clicking it i'm grabbing it i can't do anything that's because we need to go ahead and stay up in the correct way so firstly what i'm going to do is i'm going to go ahead and add in that is hidden by default on a mobile view it only comes in as an inline flex element when we hit the xl breakpoint and then it has to be a minimum width of 600 in order to show on the screen so at this point looks pretty nice okay this is looking very very nice muhib says that is so sick that is wicked man right so it looks very good but what we need to do now is add a special function in which is actually called it's called on viewport change right so when i scroll up right now what's actually happening is if we go back to our map command j to hide the terminal the latitude and longitude are constantly set which means that even if i scroll around it's just not going to work right aven7us says on small screens i'd probably put on the bottom under all the cards exactly that's an awesome suggestion dude and i've left this up to you guys in terms of in terms of um what's it called you know you guys can extend the homework and do it as you feel i gave you a suggestion take it as far as you want feel free to okay so i'm going to go ahead and actually say here on viewportchange so on viewport change so you see we get two different ones i'm going to do on viewport change this gives me so every time we move through it actually gives us so it's actually an arrow function here which has a bunch of stuff and then this actually gives me each time the next viewport so imagine as you're scrolling every time you kind of scroll it fires off an event and that event is contained inside of something called next viewport we use that event to go ahead and update the ui okay so what i'm going to do is i'm going to go ahead and say set the viewport right to the next viewport and this means that these values will get changed hopefully as i go ahead and scroll through so if i go ahead and hit save now and i go ahead and refresh now aha now i can move nice and i can even zoom in i can zoom out whoa we're going really far then right but we can even zoom out and look we can go down to let's go over to the uk and you guys can scroll in and go wherever you guys want to go to all right so already we have these gorgeous looking maps available but if i refresh once again it's going to take me to that hard-coded default value which was in fact this one right here so what we want to do right is actually go ahead and actually you know like i said before we've got a bunch of search results that came back so this is actually these search results over here right each one came back with a latitude and longitude right if you didn't remember that i'll prove it to you guys i'll show you we go to search we go to our get service laptops where we did the server side render i can click on this link to go ahead and make a get request to the endpoint and you can see this is the objects that got returned back so this is an array of objects right and if i go ahead and show you guys in a bigger view now you can see that we've got an array of objects inside of it we had a longitude and latitude of each location this is how we're going to achieve the markers which go ahead and actually get pinpointed on the screen but before we do that i need to position the map and zoom in to a point where it will literally contain all the marker elements the way that we do that is we use a special library called geolib okay so we're gonna go ahead and use a library called geolib so at this point what i'm gonna do is i'm gonna go ahead and go back to my map and then i'm gonna go ahead and install a library that we're gonna need so this library is actually called geolib right and you can see it's an npm package and you can see here you've got zero dependency library blah blah blah in this case is you're looking for the one with a high number of stars that's always kind of you know your sanity check to make sure it's a decent library we're going to go ahead and install this right now i'm going to go ahead and say npm install right npm install glib this is going to go ahead and pop in the dependency right now let's go ahead and have a quick wall break guys smash the thumbs up button if you're enjoying this and if you've learned something new already right tino says sunny what's the best way for us to edit the jason should we just copy the data and make our own links you can if you want to what i would recommend is at this point i've just gone ahead and hosted some dummy jr but again you can go ahead and find an endpoint create your own endpoint and actually change the information i would recommend building you know an express backend or even like an xjs back end which you can do which is built in and serve the information from there instead that would be my approach that way you get kind of a full rounded experience developing it but we went ahead and installed geolib and now what we're going to do is we're only going to need a portion of it so in this case you see there's got a bunch of different very handy libraries i need something called get centered so they have actually quite extensive documentation here right what i'm looking for here is actually something called get center now here's the one i'm looking for get center you provide a bunch of coordinates okay and in this case you can see the coordinates of the are of a certain shape now pay attention here okay now this is where we're going to learn about transformation so if we have an object of a certain shape in an example what i can do is if i show you guys the uh the object that we actually just got back from jason the json file that we load up this has a bunch of additional information inside of it okay but the library requires that the objects only have longitude and latitude and even then the keys were actually longitude and latitude they weren't long and lat for sure so what we have to do is we have to take this object and transform it into this object right with different keys but it has to have the exact same values but we have to strip it apart and make it and plus not only that we're dealing with a list so how the hell is he going to figure that one out right i'm going to show you guys how to do a transformation of an array of objects so that way we can you know pass in an array of objects which looks like it one way and then we can go ahead and change it around and shape it away to the way that we need it it's going to be pretty cool actually all right so let's go ahead and do this right now so and presumes right if you're gonna go and know how to you know create an api with xjs go ahead and check out the amazon clone that i built all right so i've got you covered on all fronts guys so what we're gonna do actually first is go ahead and import getcenter from our library come on j to hide the terminal pop it in like so get center okay and then what we're going to do is we're going to go ahead and actually calculate the coordinates now we do actually get all of where how can i get these uh this this object into my map component firstly right i go to my search and remember yesterday the page did something called server side rendering so whenever the user goes to the search page it fetches all this information from that middle server which we introduced when we use an xjs and then it renders out the page to the the client or the browser right what we're going to do is we're going to take that information so those search results the ones that we see loaded on the screen and we're simply going to pass them through so these search results right here which came first we're going to pass these through down into the map okay i'm going to say map search results equals search results so i'm actually passing them through now you know you can argue in many ways here you can actually i'll take because you're only passing down one level of props it's completely fine to do that the minute you find yourself passing down two levels three levels four levels you're doing something called prop drilling do not do prop drilling okay like do not it's a bad practice when you start finding that that starts to happen you need to start looking at the approach which is called uh estate management so that's when you introduce something like redux or something like recoil or you know the context api that's when that comes in clutch but we're not going to be doing that today so in this case search results over here so i'm going to go ahead and click this over here okay so map nice right and then what we do is we get the props through here so we can destructure the props to get the search results okay so these search results right here we can go ahead and you know these are this will include all the information but it will look like this again right so what i need to do is oops i've actually loaded up a picture we need to do is actually transform the search results right object into the object that we require which is this right i'm going to say into the latitude longitude object so that i'm just putting it there for reference okay so we're going to transform it into an object which looks something like this oh we just got a donation who was that we have um i can't pronounce the name but he says he's the best teacher for baby react crowders and me thank you dude uh it's a i'm not gonna guess it but thank you so much dude appreciate that so much that's huge right let's continue on at this point we're gonna go ahead and yeah we're going to transform this into an object which looks something like this i'm going to take this and map it and transfer transform and map it into an object so what i can do here is i can go ahead and get the coordinates right so i'm going to create a variable called the coordinates now what i'm going to do is i'm going to get the search results okay and i'm going to do something called a map right now this is the part where i need you to pay attention all right this is a learning point here i need you to pay attention so a map can go ahead and loop through a list of objects or whatever is inside of an array right you can map through it now every time it maps through i can get a reference to the item that we're currently on so we can name it whatever we want we can call it the result in this case right so at this point i'm going to say map through and every single time i have a result i need to do something with it okay so at this point and this is where loads of people make the same mistake we're going to do a something called a direct return right so we're going to go ahead and do parentheses and then i'm going to put the curly brackets so pay attention to what that looks like right now i'm going to hit enter so what this is doing is it's going to return a object every time it loops through okay so what's happening is we get the entire result every time we look through so i'll have access to this object in the result variable now and what i'm doing is i'm actually returning a different object so what i'm going to return is an object which has a longitude where it's the result dot long right and this is because it's result.along here and then the latitude is going to be result dot lat okay and what this does guys is this one amazing piece of code actually goes ahead maps through it gets the result object and instead of returning the result object in this case if i simply return the result i would get the same object back what i'm doing is is i'm changing it so i'm returning an object where the key is longitude one of the keys launcher and this is the value one of the keys is latitude and this is result of that right so this will actually go ahead and return now an object with all of these values and you're probably thinking ah that's that's rubbish man you're not doing that so i'm going to go ahead and prove it to you i'm going to console log the coordinates right now and we should see all of this information in this format that we needed it in okay so i'm going to go ahead and check it right now i'm going to go ahead open this up and i'm going to go ahead and inspect the element so i can open up the console right now and you can see tina says this clarifies so much appreciate i do i hope it did help you out we click the array and boom you see that that is what we use a map for now you're probably wondering you could have used something like a for each now the reason why a map is different to our four reaches because at four each cannot return a value whereas a map can return a value right so when you loop through something what's actually happening is we're do we're going ahead and returning a value each time and it bubbles it up into this array that we get returned in the end result right now there's loads of very helpful functions that you can use in this case a map is perfect right there's so many useful functions like es6 functions that reduce filters and so forth in this case you do not need to use any of those things so philip says would not reduce not be bad a reduce is more when you want to accumulate some values up like for example if you have you know a bunch of numbers in each item that you want to you know kind of condense down or reduce into one number that's when you want to use a reduce in this case a map does the trick so now we have our data prepared in this structure okay so this means we have an array of objects look that looks exactly so that means i can use the geolib library okay so what i'm gonna do now is apprentice is good explanation as thank you so much dude appreciate that so at this point what we're going to do is we're going to we've got our coordinates so we've already done the transform step and then we've got it in this nice little coordinates object so now i'm going to go ahead and say const center now what the hell is the center point right this is actually going to be the longitude and latitude of the center of the local uh the locations or the results right so all these results that come through we go ahead and transform it into values which has long engine attitude and then what i want to do is on a map i want to show imagine if i've got loads of points around london right i want to just have that map centered around those points right so it's only going to be centered around those points so imagine the search results change and suddenly we're in the the states or in mexico or somewhere else it's going to go ahead and show you you know a center around those points you'll be looking at mexico you'll be looking at the states wherever the points are at okay let's continue on um so dev mentor for life says matt filter every sum reduced are your best yes they are honestly your best friends learn them inside out uh we do teach inside sir at full stack here so yeah very much worth learning it okay so const center equals and i'm to say get center and this is the function that we actually pulled from geolib you can see in their example they're doing geolib.getcenter i'm actually pulling it from the library so i can just say get centered directly so this one i can pass in my coordinates okay this is looking pretty good now so what i'm going to do now is i'm going to console.log center and see what's actually inside that all right so at this point we should have an object which returns something like this an object with latitude long change should just have one value for each okay let's go ahead and do this quentin says love your builds and you're a brilliant developer i've learned so much from thank you so much quentin i really appreciate you tuning in that means everything it makes my day whenever someone says that so i really do appreciate that let's go ahead and click on inspect element and now let's go ahead and go to our console you see the object down here look at that we get one value and that represents the central longitudinal latitude between all of these search results so all of these are based in london right and this is going to be a central point which is going to actually perfectly map the center of all of them search results okay so at this point what we're going to do is uh william says i'm smiling because before i used to be confused when i see code lights but sunny you make it so easy for me thanks for a million williams a party papa fam dude thank you so much man i appreciate you for tuning in every time george says we're back baby exactly dude so this one we've got nice little center right so what we're gonna do now is pass the center in as okay let's think about this let's think about this the viewport latitude and longitude that we start at okay so what i'm going to do is i'm actually going to declare this underneath over here so we actually have the center variable available so our center latitude is going to be center dot latitude and over here the longitude is going to be center dot longitude okay nice all right so what we should see now if i hit save if i refresh we should be able to see that this map will no longer be in some random place in the states it should be in the us oh nice jay london what's up i went to uni and he was actually a student on my course as well what's up dude thank you so much for the 10 pound donation appreciate you man that's huge and i hope you're doing well right that's awesome to see you know old friends coming in clutch thank you so much dude so we've got the center so if i go ahead and hit save now and i go ahead and go to a full screen wait for it okay we are now in london that is the m25 that surrounds london okay so if i go ahead and zoom out now you're going to see look the city of london all right so wherever wherever we got zoomed into that is the exact center point of all of these longitude latitudes okay so the next ideal step is we need to see the markers for where each you know search result is otherwise it's kind of meaningless right if we don't know what's going on there we don't know where it's actually on the map it's not much use to see that that's the center point right but where the hell can i actually see imagine i want to stay over in edmonton how do i know where the actual sort of airbnb is right i need to see it that way i can do it right so what we're gonna now build is we're gonna upgrade this so that it can do the following so that way we can actually have the different locations uh popping up like this we can actually go ahead and click it so we can see this one is spacious peaceful and modern room this is the five-star luxury apartment in that case it would have been this one right so we're gonna go ahead and actually show you how to do that right now so what i'm gonna do is you know go ahead and hide this again and we're gonna use something called markers right so i'm going to go ahead and actually save us a bit of time and i'm going to import two additional things i'm going to import the marker and i'm also going to import the pop-up so the marker is actually going to be responsible for you guessed it it's going to be that mark of that pin right that's a pin that's called a marker and the pop-up is this thing that kind of pops up around it right you can style that pop-up as well right so don't worry you're not stuck with that right so um i see loads of you i see this uh a few people spying don't spam it guys you know keep it clean right um so what we're going to do now is we're going to go ahead and continue on so inside of the react map gl right so which is our react map that we're rendering on the screen i'm now going to go ahead and actually have markers so instead of rendering one marker okay what i can do instead andrei says not loving that pop-up styling ish that's why i've left it for homework all right it wasn't laziness i promise you i'm going to show you how easy it is to actually style it but i want you guys to go ahead and customize it right so that way you guys can do what you want to do with it um abdullah sheikh what's up man i actually used to teach him as well what's that dude good to see you so at this point if it's the same one i'm thinking all right so this one we're going to go ahead and say search results so i'm going to go ahead and run through the search results and for every search result i'm going to you know put a marker on the screen so search results don't map all right and we're going to map because we need to return a jsx value which is then shown on the screen okay so at this point i'm going to say return for every single result i'm doing parentheses not curly braces loads of you make this mistake and it's normal i've done it a thousand times trust me don't worry about it jerome what's up dude um so at this point you want to make sure you return something otherwise you're not going to see anything on the screen i've done it before and i was like why am i not seeing anything you know so at this point i'm going to go ahead and have a div and inside my div i'm going to have a marker okay and the reason why i'm doing that by the way is because this div you can't actually pass a marker key here or you can here so i don't know why i wasn't freaking out before anyway we're gonna go ahead and put in a div and then you guys can we'll refactor if we need to okay so the key for the div that we're mapping through is going to be result.long so we're going to use the actual longitude as a key because it's most likely you know that's actually a pretty good key to use because it's not likely it's not likely at all unless that hotel is in the exact same location it is the same student i used to teach right unless it's the exact same longitudinal attitude then you know you're in a bit of a situation that means two airbnbs are stacked up on top of each other that's uh impressive but we're gonna carry around so we've got the search results here so we're going to actually pop out this marker now the marker as you can imagine takes a few things it takes a longitude and it takes a latitude so these are require values so in this case you can destructure remember you can definitely do structure right so you can actually get them out through here so you can go ahead and destruct your longitudinal attitude and and all that stuff there but i'm going to go ahead and keep it on the screen because i think it might be simpler if you're tuning in later or something like that and you want to just go ahead and see it what is he actually looping through right so that might help you guys out so in this case we're doing gonna do the result.long goes here and the latitude is result.lat okay and then we're gonna say the offset now offset allows us to go ahead and have you know because i have a pin i actually want to kind of you know offset it slightly so that way the pin dot is actually dropping on the exact location right so what i'm doing is i'm offsetting it slightly on the left and slightly on the top so that way that pin actually drops perfectly on the dot right so let's continue on and you guys should see that we still don't have anything on the screen yet right that's because we don't actually have anything inside of that marker so the goal here now is to go ahead and you know put a custom marker now i'm going to actually put an anchor tag here i'm going to show you a few things that you can do if i go ahead and simply put a p tag and i put something like you know i'm just going to pop in an emoji of a marker here right so i'm going to simply pop it in like so right now let's see if that did anything i want to see if the first if that did anything so oh we can actually see something was there right okay so we see it there right see that we've actually got those p tags popped up so already this is better so we have something working right but i can't click it that's not a clickable element so when you have a situation like this you can handle this in a bunch of different ways right you can actually have either an anchor tag or you can have a p tag or you can do it you know there's so many ways you can do this i'm going to firstly try and do it with a p tag okay so at this point we're going to go ahead and say p and i'm going to say the class name of this p tag is going to be it's going to be cursor pointer so that way it can actually be like it looks like a clickable element all right i'm going to make it a little bit bigger so it's text 2 xl and then i'm going to say it's okay and this is the this is the cool part right if you want to make that thing bounce right so where's it going if you want to make that thing bounce you see now we've got the cursor pointer which is a lot nicer make it bounce you can simply go ahead and use tell in css and it's got a lovely property called animate bounce and now if we go ahead and check this out we should see a lovely bouncing animation there you go that looks slick all right so now we can see look very nice right so what we're going to do here is when we click these links i love this baba tinde says stay well guys we need challenges for dash and tino yeah dash and tina are like you know racing towards the front together but you guys are actually killing it so here you can see that it's bouncing up and down right it's bound to happen and you want to go ahead and actually make this clickable now to a degree but we just passed 300 likes awesome stuff guys for day four of a challenge that is huge so keep smashing the thumbs up if you're enjoying this subscribe if you haven't already we're so close to 70 000 subs right if we get on this on this stream of oh my god i'll make some noise all right so at this point we're going to go ahead and make this a clickable element right so what i'm going to do is how can i actually keep track of it so i could do something like that how do we get that to work well what we need to do is we need to keep some state and this is where we need to go ahead and keep track so in this state i'm going to go ahead and actually you know set the selected location every time i click this now how do we do that well when we loop through something we actually have access to the result object so what i can say here is firstly i'm going to create a piece of state and the piece of state is going to be responsible for the selected location so i'm going to say const selected location and this is the standard syntax is set selected location remember it's always set the variable name we say equals use state and then this point we're going to go ahead and pop in for the initial value we're going to go ahead and give it an empty object okay so it's an empty object to begin with right you can give it no you can give it whatever you want um at this point yes surrender says you can we can also use image for the marker pins yeah you can put whatever you want in that marker pin by the way right so at this point the selected location is there's no there's no object there right nothing actually shows on the screen so what i can do now is i can actually go ahead and say when i click that p tag right so when i say on click of the p tag i can actually go ahead and do the following i can say that this is going to go ahead and this is going to be a little arrow function inside of it and i'm going to set the selected location and i'm going to set it to the actual result object right so what is actually happening now is when i go ahead and click on any of these pins inside the state i'm actually saying it as the object right so i'm going to show you this in action right but the way i'm going to do it is i'm going to go ahead and actually console.log our selected go ahead and say contour log selected location right and you guys will see this in action right now if i go ahead and inspect and i open up my terminal every time i click on that map so hopefully we should be able to get it to a degree where i can see it as well okay so let's go ahead and try and get it to a point where i can see this as well can we shrink any more okay i'm going to go ahead and actually shrink this there we go right so now you can see look okay this is getting kind of you know huge right now um but if i go ahead and click on this this is because i'm constantly re-rendering things but if i click it right now the latest thing was private room in center of london if i click this one it changed to a spacious peaceful modern bedroom if i click this one it changes it to 30 minutes to oxford street so it's working okay so at this point we typically don't like having console logs in our rendering so it's yeah it gets a bit messy so what i'm going to do now is i'm going to go ahead and say the following so now we set it as this so now i can conditionally render so this is what we're going to do we click one of those pins and we save whatever result we click this means that we know what the selected location is and we have a bunch of information about we have the longitude the latitude the title description so forth so now i can conditionally render a pop-up which will check if we have a value then go ahead and show a pop-up and use those values to populate it pretty cool right that's what we're going to do secando says uh hello sunny from germany what's up dude good to see you there's a few things you can actually add on to that right so when you're coding there are actually a bunch of other things for accessibility if you have a pin you can go ahead and say area label and this is for like screen readers and all the other stuff you can go and say that this is a push pin and then if you have a screen reader it'll say there is push pin here and so forth like that just a little thing to know and if you have a you know uh if we're representing a p tag as an image you can go ahead and say that this p tag has a row of image as well so a little few things that you can do for more accessible things uh what i'll say if you're interested in that look into something called headless ui a tailwind actually does it really nicely okay so at this point we go outside of the search results okay now what i'm gonna do is actually we're going to stay inside our search results sorry we're going to stay inside the search results but inside or outside the market now i'm now going to say okay this is the pop-up that should show if we click on a marker oops if we click on a marker okay if we click on the marker we should show a pop-up right now what i'm going to do here is i'm going to say okay the selected location right select if the if the selected location longitude right equals the result right so imagine what's happening now we're mapping through the results if the selected location matches the result so whatever we're mapping through that longitude right so if it matches then i want to go ahead and render so we can say then this is a ternary operator we can go ahead and say then i want to render something right if we don't so you can use that and and right but i found that this complained about something in some situations it complains so that would mean that you know we just put something here and it'll render if that condition is true in some cases you might have to do render this if true otherwise render false okay so there are times where you may want to do that right we can render false otherwise okay now at this point i'm going to say okay let's just quickly do something in the sense of like let's say let's have a pop-up yeah right we're gonna have a pop-up and this pop-up is simply gonna have the result.title which is gonna be responsible for this stay at the edwardian house and so forth now this pop-up can have a few other things and i'm gonna in and then to make it very simple just to begin with i'm going to say close on click yes so close on click true but whenever they click it as well i also want to reset my state okay i'm going to say on close equals i'm going to go ahead and arrow function say set selected location i'm going to change it back to an empty object okay and the latitude and longitude of the pop-up that should show on the screen is going to be the one of the result okay so we're going to say result you can use selected location it's up to you if too much they're going to match they'll be the same thing so in this case we can say result. and we can say longitude is going to be oops longitude maybe i'm pronouncing longitude longitude sorry longitude result long okay hit save and now let's go ahead and check out what happens if i go to a full screen and i go ahead and zoom out oh look at that right and if i click close boom it goes ahead and gets rid of it and if i go down here ah nice look at that already working right and this is a basic pop-up all right think about it that pop-up is simply going ahead and rendering on the screen because it just has the latitude and longitude that we specified and then we use the title to go ahead and render that what you could then go ahead and do is simply pop in a div at this point customize it make it look pretty slick make it look cool have some you know flexbox stuff happening and it will work as much as you need to work right so that's going to look awesome when you do that um yeah guys that's awesome someone's asking me to do visa paper youtube mascot all that other stuff i will try my best dude i'm going to try my best rudy duran says wow man so that is honestly the map functionality we have the pin functionality and we have the pop-up functionality all working and what is the time right now in one hour in one hour and 15 minutes we managed to get the map the markers and a nice little beautiful pop-up and a custom styled map using mapbox that's crazy right that is crazy and it works perfectly in the way we expect it so the next step now is to go ahead and deploy this bad boy right so we're going to go ahead and put this on the internet so that way it works and again remember once we go ahead and deploy this now we have something called an environment variable so i need to account for that when i go ahead and deploy it to versal okay so i need to actually tell my versa environment what that environment variable is so that way it knows where to find it when we deploy remember this is local when we push to our deployment right it's going to be the a different environment so i'm going to have to go ahead and change that one as well so let's continue on but before we do smash the thumbs up button to get this like to get this to 400 plus likes and uh let me know if you're enjoying this right now nice let's continue on so at this point jimbaran says the best of the best stream really appreciate it thank you so much dude massively appreciate you for tuning in and guys if you haven't already remember this is day four we actually have a day break so tomorrow's gonna be a rest day and then we have a huge training on day five you have to go ahead and reserve a place the first link in the description to be there we announce the winners we have a master trainer i give away a 50 pound free ebook you give another bonus for everyone who comes and on top of that i've got another massive surprise for everyone as well so yeah i've got a lot of stuff coming this is not going to go ahead and you know disappoint you let's continue on all right i did tr says british guy thank you so much all right so at this point we're going to go ahead and deploy this thing to get this up and going right so uh where's my music out let me go ahead and do it let's do this one i like this one andre says i woke up deploying good vibes that's it dude so let's go ahead and actually deploy this app so i'm going to go ahead and do command j go to my there we go we go here i'm going to go and say git add all right and now i'm going to go ahead and say get status nice and i'm gonna go ahead and say git commit dash m and then we're gonna go ahead and say uh day three oh day four sorry day four build right and then we're gonna go ahead and hit enter on this thing and now i'm going to say get pushed now before i do that i'm going to show you guys so if you go over to your versa area so where's mine over here right this is the versatile deployment so yesterday we had where was it gone day two bird right so i didn't think i don't think i pushed it yeah there's three i get so confused it was actually all right so i mixed it up right this is actually day four but it's fine so i'm gonna go ahead and push get push and this will go ahead and push it to my github repo which will then go ahead and trigger a deployment okay so let's continue on let's go ahead and go to with the overview here and wait for it go and go to my builds and we've got here just now day four build this is the one i just went ahead and pushed you can see it went ahead and picked up that build we're gonna go ahead and deploy it and there you go it decided to build it nice right and now i think we've actually committed the next config file which is okay because it's a public key but if you did want to go ahead and add added an additional environment variable here is where you would do it okay so i'm going to show you guys actually and so that way you can do it if you want to you're going to click on environment variables for some reason mine's not actually clicking so that's a bit annoying um there we go so it's loading right now give it a second maybe safari doesn't play well with vessel oh starting a fight right here right so at this point it's loading anyway let it deploy and we'll see what happens all right but what you would do is you're clicking environment variables you have a key and you would then put the mapbox key value there as in the actual you're literally gonna put mapbox key and then as a value you're gonna pop in the one that you've got as a access token from mapbox okay and then what that's gonna do guys is trigger build so you're gonna see this ready then you're gonna go ahead and click into this to see what's going on here and go down here and everything looks good it says deploying build outputs nice okay wait for this build completed populating build cache all this sort of you know complicated sounding stuff that no one understands what's happening here let's go ahead and let it do its thing and i'm going to go ahead and actually go into my youtube build while that's happening and i'm going to go to settings and i'm going to go to my environment let's see if it loads now i don't know why that's not loading right now if it doesn't i could load up my chrome but i don't want to risk reloading chrome right now okay but i'm going to explain it to you guys simply go there environment variables change your key to macbooks uh you know key and then you have the value you just paste it in there and then literally you hit ok you trigger a redeployment by going into deployments hitting this three button here and you say redeploy once you change the variables and it will literally do its thing okay i'm going to show you nice now let's go ahead and check it out see if it worked if it didn't i'm going to go ahead and change it right let's go ahead and say london 9th to 20th go ahead and do this hit search and let's see if that key came through and boom the key is there guys it's because it's the complete height that's why we have to zoom down look at that guys absolutely amazing stuff we have it working we have a nice beautiful map happening right here our jumping animations right now provided by you know that tail and css power that is sick that is absolutely crazy with that said this is the actual finale for the airbnb build right that's actually going to wrap up the build itself so i'm going to give a quick run through of the entire build we built an entire front-end page right so we had the front-end front page and you guys took it to above and beyond levels right and you actually crushed it with that then we had you know we thought we learned about state so we learned about props in day one when we had all of this stuff happening we have reusable pro uh components where we pass through props and a lot of good stuff and then here we go ahead and you know we start typing in we have some we learned about state we go ahead and pop in some values we then learn about server side rendering so not only did we do static site already on this one we'd had some you know servers i rendering before now we click search server side renders the results loads it up inside of mapbox at the same time pops it onto the screen and boom it works the way we need it to work and it looks perfect right that looks absolutely amazing and it's doing it exactly as we need it to you guys absolutely incredible stuff all right looks incredible why the point do we keep the same code next process to app yes you keep map box underscore key the exact same keyword and then it will work right so you need to go ahead and add that in reversal if you're using i think when you're using next config variables they're public like i said so we actually push that ahead and it's using the next config but if you want to go ahead and use a private key you would set in versa in that environment variable section that i mentioned and that's how you would go ahead and pick it up that's sick gaurav says can we host them on hostinger yes use code sunny if you want to definitely do it use code sunny and you're going to get me you know a nice little affiliate bonus there so go ahead and help me out with the channel if you're going to get a custom domain if you are going to do that you simply go here you go to settings you go to the domains tab and you literally add in a domain you buy your domain from hosting or using code sunny to get a discount and then you can go ahead and yeah pop it through here and that's it guys it would work just like that i have some reason that doesn't load up but yeah that would work just like that so with that said guys that is your homework for today now before we continue anywhere right and i show you how to submit your homework or anything like that i want you guys to go ahead and do the following for me number one i want you all right now to go over to the crowdcast registration page which is the first link in the description and i want you to sign up to the event on sunday which is in two days time so tomorrow we have a day break and then we have an absolutely massive training that is over at this point right so you guys go over there right now i see loads of you we have over a thousand people signed up to this event already so be there it's going to be sick i can see look look we see tom azedin sachin lucas verratt ali kudu frickety this is sick right there's so much energy over there it's going to be an absolute huge challenge i'm going to go ahead and teach ton of things on that day right i'm going to break down loads of stuff i'm going to give you a 50 pound free ebook if you turn up right on top of that i'm going to give you another bonus prize this is for everyone by the way and then on top of that i'm going to be doing something huge on this channel which i haven't done before so be there to see what that is right and this is going to be exclusive and my main goal here is to go ahead and provide as much value so if you've enjoyed day one through to four then you're gonna love day five it's gonna be a hell of a lot of fun be there you might even have a chance to speak to me you never know all right i'm gonna go ahead and keep that as a surprise whatever but it's gonna be an absolute game changer event muhammad just jumped in there nice i can see loads of people signing up registering right now first link in the description go there sign up that is the place to be if you haven't seen the screen already then what are you doing already and i want to mention as well if you haven't or if you ever get stuck at any point with your react basics knowledge skillshare link in the description is absolutely free i have a free three hour course on skillshare where it's broken up into ten minute segments that i go ahead and explain everything i explain state props you know use effect hooks all this other stuff how to build your own customers vet hooks if you want to do any of that there's a link in the description right now search for it somewhere it says too difficult to code and it says react basics and it says skillshare one month free access it is an affiliate link so it's gonna support the channel but that's gonna be huge if you wanna go ahead and actually help you out rudy says i have a hundred us to stop whoa damn dude that was incredible it's gonna be a hell of a lot of fun but as i mentioned guys tomorrow is a day off it's a break it's a rest time that's for your chance for you to get all of your homework done okay so you have a chance you have a day break to get all your homework done in the past we've done the day straight after the problem with that is i don't give you guys enough breathing space right you don't have time to actually get the homework in i want you guys to all have a fair chance of getting this done so make sure turn up the day after tomorrow sunday 8th of august same time 4 p.m bst it's going to be crazy all right with that said you guys know where to deploy your homework day 4 homework submission link simply go ahead and pop that versa deployment url down here into the link section enter your full name your email and then if you have any problems with it partially complete otherwise destroy the fully complete button and you guys know what to do guys we are going to go ahead and wrap up here today we crushed it we came we conquered with an absolute killer airbnb build customize your maps let me know what you guys are doing and on that note guys i'm going to wrap up the way that we always do day four of the airbnb challenge for one more day left i'm gonna announce winners ten thousand pounds worth of prizes i'm gonna give away so much free stuff i paid a lot of money to make so this stuff is going to be all going to be given out to the world so that way i can help introduce as many react developers next years and tailwind developers into the world as possible this has been your boy upper react aka sunny and i will see you all on august 8 day five of the reactions next year's airbnb challenge thank you and once again peace enjoy papa fam holmes patrick rahib karen angelino thank you everyone andre again [Music]

Channel: Sonny Sangha

Views: 21,908

Rating: 4.9667459 out of 5

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

Id: G5mmrBkCaP8

Length: 86min 49sec (5209 seconds)

Published: Fri Aug 06 2021