🔴 Let's Build a GOOGLE Clone with REACT JS for Beginners!

your boy sunny how's it going guys great to see you all guys i hope you are excited because today we're gonna be building the google clone what's absolutely insane about this build is that it's actually the google clone so this is not real google by the way so that's one thing i wanted to tell you guys this is not real google so for example let me just type in tesla and hit enter and take a look at this boom all the tesla stuff is open if i type in react and hit enter it didn't even refresh and you're here exactly and this is actually using the google uh custom search api so this is actually real google results so you can see even there we want like four trillion results that come up it actually shows you uh the exact value so it's actually pulling this from google guys yo i'm about to go on stack overflow and find value in an array damn it's actually oh yeah it's a working it's actually a fully working uh google cloud so this is a sick though i hope everyone's excited yep so there you guys go this is the app that we're going to be building i hope you guys are actually excited about this google uh clone i we have some people and they're like whoop whoop it's the sound of the police by adam and uh hajira is like yo hi everyone bojack is pumped felipe says clean he likes the app the build yeah and priyanshu says hey qazi you won't believe it but because of your hold on let me actually put this here holy crap he goes uh because of your skills i landed a job that's worth five lakh rupees that's actually 700 us dollars so that's actually no joke oh and he goes absolute thanks can't appreciate you more and he goes best part being that i'm only 14 years old that is actually huge wow congratulations priyanshu for you brother this is amazing guys keep showing up keep watching this banger content and your skills are going to go to the next level super pumped about this now with that dang we have over 500 people live we're actually about to hit 600 people live guys by the way if you are liking this right so let me actually just show you so if we type in tesla you know tesla let's just do tesla stocks let's do elon musk guys this is a google clone this is not real google all right and um this is massive so this is what we're going to be building if you guys are excited about this build what do they have to do sunny what can they do to help us out and reach out to so many more people all we need guys from you guys is that if you're enjoying this you find value in it just go ahead and smash that thumbs up button guys for us and this will help the video get out to as many people as possible yes so go ahead and just smash that button we worked um sunny worked really hard actually on this build and there are some amazing things that you're going to be learning in this build and we're going to share all of them with you in just a second all right so for sunny go ahead smash that like button uh thank you for the first donation and let's start talking about what uh this project is gonna cover so sunny what are we covering in this i know you said we're gonna be using context api which is kind of like redux and people are gonna be learning about that type of concept what else are we going to be covering so we're going to be using material ui for the icons and a lot of the design work so let me just pop that in so icons like this okay got it exactly those icons are coming straight from material ui which is google's design library and we're also going to be using react router so this is going to be something super powerful and useful for you guys to learn and this is how we go from the search page to that search results page right so we go how we go from this page to that search results page um and then we're going to be actually using an external api today so we're using google's custom search api and that's how we're getting all of that crazy functionality that you guys are seeing right now when you search something and you're actually pulling live information from google yeah so we're using actual google's official api and we're going to show you guys how to do that uh and then we're also actually we're actually doing something we've never done in a build before we're building our own custom hook today guys which is super cool all right so we all know about react hooks and if you don't you're going to find out what react hooks are in today's video but we actually went ahead and built our built our own custom hook today which is going to help us pull that information from the servers nice beautiful and then are we using firebase for anything yes so we're using five to set up the app we need to use fiber to set up the app so that we can connect it to google and then we're going to be using firebase deployment uh voice hosting to deploy our wow that is that those are a lot of things that we're going to be covering is there anything else that actually should add to the list sunny or this cover pretty much everything we're going to learn uh this is pretty much everything this is pretty much everything yeah oh we've got a bunch of flexbox guys a huge amount of flexboxes in today's video as well yep beautiful we just broke over 620 concurrent viewers thank you guys for jumping on here subscribe to the channel if you want to take your developer skills to the next level land jobs make more income also make sure to like this video smash that like button it's free for you and it sends the video out to many many other people who are trying to become developers our goal for this year is to produce 5 000 developers who get full-time jobs and our goal next year is going to be 10 000 developers or more that have full-time jobs we want to help produce the most amount of developers on the planet that's the number one goal and i also want to say this channel we clever programmers all of us the clever programmer fam is officially the number one fastest growing coding channel in the world it's faster than all it's growing faster officially now than any coding channel out there and that is a fact so indeed yep awesome so let's get going so should we jump straight into it sunny let's do it dude so right now to get started we are using vs code live share guys we're using vs4 livestream we've been doing this in every single one of our builds um so that me and kazi can code side by side together uh so to get started what we need to do is go ahead and pull up the command line so let's go ahead and open up vs liveshare when you're ready quasi uh think you're muted yup i should be good to go now can you hear me oh yeah yeah yeah now i can okay beautiful dope opened nice and let's get let's get a terminal up and running so let me type in and try and do ls and i'll request read right there we go so there we go and now we're going to do we're just going to create this app yep we're going to create the react app and this is going to be called the google clone yep okay and then i'm going to cd into this once it's done oh by the way thank you previn for your donation so that's pretty awesome so let's i'm gonna actually highlight that right over here and prevent says sunny and cosy enjoy your teaching style greatly thank you for excellent content all these react bills are inspiring keep the fire going nice thank you so much for everyone we appreciate you yeah awesome all right so we one while this is setting up guys we use create react app to get oh we got another donation nice shree swaminathan banasari i don't know if i spend that right because as you guys are awesome your live videos keep me motivated and energized nice damn thank you for that donate damn this is lit we're already starting out with banger donations thank you guys so much really appreciate it okay so this is where wow yep the app is being made right now so what should we do should we do firebase right now yeah so we're gonna need to set up firebase so that we can connect it to google and so that we can host it online okay cool yep all right here we go all right so we just hit over 750 views this is 750 live people right now that's crazy dude yeah that is absolutely insane so now guys you want to all you need is a gmail account to get started you want to go ahead and hit the add project button put in something like google dash clone to get started and then it will ask you if you need analytics you can just take yes or no depending on if you're interested in that but it's not really a major thing at that point but once this goes it hasn't get done the reason why we need to do this now is because this is we're not using the database today we're going to be using the hosting so this is actually going to be this is how you guys saw the website and this is how kazi was able to access the website from all the way in la because i deployed it online and then you can basically go ahead and go on it right so and then also we this will allow us to get our google custom search api key which we're going to be using later on in the build so now that that's done we'll still connecting a bunch of stuff uh we're still waiting for the build to finish and yeah perfect just finished nice yeah so let's go ahead and set up yeah all right so let's go ahead and i'm gonna go uh no we're done at this point on firebase got it okay we'll come back to this later all right awesome oh thank you for oh man this is freaking epic efosa just dropped a five euro donation and what did he say sunny he says i have seen tutorials but this takes everything to a whole new level keep popping in these legendary projects you guys are priceless we are massively appreciated that's a huge donation and that's insane nice yeah thank you brother appreciate that um all right so this is the build and yeah one thing i do want to let you guys know is if you want to take your training to the next freaking level then we have something really special for you uh make sure you guys go ahead and open up a new chrome tab right now and register for this okay so this is something you should just open up and register for we have a epic training uh top three mistakes to avoid when becoming a javascript developer so i know a lot of you guys are trying to learn because let's just talk for one second why you're doing this why you're even building this project and a lot of you people that are learning this is you want to add it to your portfolio and most of the people that we know sunny are trying to use these programming skills to get jobs just like that person we had earlier right that jumped on and said hey i landed 6 700 client so the whole point of this training that i have put together for you guys is so you can see the roadmap from the coding skills to actually making an income so definitely go register for that training and check it out i think it's going to bring you a lot of value and with that said let's keep going and man we just had two other amazing donations thank you yeah i'm gonna just pop them up and the first one it says you guys are amazing for me so meet yep yeah you deserve to be on time nice and the next one can you guys please build a medium clone yeah sure we can that's actually a good idea but on the way to build everything yeah really good idea yeah medium is actually a good idea we should do that yeah okay so let's keep let's keep it now going so boom we got the firebase uh set up correctly and this is the app over here on the right hand side and then on the left hand side the thing is built so i'm just going to cd into it and then we can go ahead and get started now what i'm going to do is i'm going to do npm start npm start so on the right hand side the local host should pop up with the react logo spinning that essentially just means that our app that we just built on localhost is up and running and then we're gonna do a few things for the regular cleanup process that we normally do so here we can see this app is already running you guys now what i want to do is grab the logo grab the test and grab this test file here and delete it because just to clean it up a little bit because we don't need that right now and then we're going to go in app.js and it'll delete this line because that's what it's giving an error about and then let me go full screen here real quick and we're going to delete everything that's inside of the headers and i'm just going to go h1 and here we are building so let's say hey clever programmer fam let's build the google clone another donation thank you so much psy really appreciate it i'm gonna hit save here yeah and you guys can see that this app is now up and running it is showing our everything that we want to look at but what it's not what i don't like about it right now is that it has some styling kind of built into it so this is like centered and then also we have a little margin so we can just go ahead and get rid of that so let's go over here into our app.css and i'm just going to remove everything now when i hit save you'll see that i got removed of that centers you know how i was centering it and now it's just all left aligned and kind of default and then i'm going to go in my index.css and i want to remove that invisible margin that uh react often adds by default a margin of 10. so we're gonna just go ahead and give it give everything a margin of zero like this wow lots of donations come in you guys thank you gopi thank you romel for five dollars and um thank you buscar so i'm going to hit save right here now you saw that that margin actually just went away okay so i'm going to hit undo here so just just so you guys can actually see it happen live right and you saw that that margin now is gone i'm going to go back to my app.js for bam naming convention i'm going to lower case this i'll write that down here and with that said we're pretty much now ready to get started this is usually the cleanup process that you guys have seen multiple times already and uh let's continue that was dope dude that was a nice little entry there so nice once you get to this point guys you have a really nice clean starting template that you can work from so once we have this up and running what i like to do is get everything essentially sort of drafted out right so everything kind of should be a little bit drafted out so let's go ahead and just do a rough draft so we're going to have two pages in this app all right we're going to have a the home page and this is going to be the one with the search on right so this is going to be the one with the search on so start and then we're gonna before you continue before you continue all right so i just want to visualize everything sunny is saying because i love visuals and i hope you guys enjoy them as much as i do but sunny is about to like write all the components out here in comments so the home over here is essentially you're referring to this entire page here right exactly yeah got it okay so that's the home exactly i'm on board with you so let's go to the next thing yeah they're awesome so we have the home page and then we have the search page right so the search page like this right and this is going to be essentially the results page so this is where we have all the search results so let me type in something like uh let's type in joe rogan okay so let's go back boom i think you might have done the api i know i know yeah i think so yeah yeah right so in that case yes so this will be the results page that you would see right so this would be definitely pretty much it so it's this page let's just show it over here so let's i mean let me write in joe rogan so it'll be this page over here you guys it'll be this page okay yeah okay quite good there's so cause you're second broadcast just donated two dollars and he says this is awesome waiting for the day you guys do twitch let's go nice let's go we've also actually opened the other day we've been difficult to so you're interested in that no sunny your internet is acting really bad my friend you might want to just quit kill your video and i don't know maybe tell people in your house to stop using internet still bad now i can hear the audio a little bit better right what i might do is if we take questions for five minutes like just do five minutes and then i'll uh i'll quickly restart you're actually you're actually sounding a lot better right now by the way maybe maybe later maybe try it later yeah all right cool so we've got the search page now here um so we have the homepage and the search page and also kazi if you go back to the deployed version now uh-huh so let's go and then refresh it but do a hard refresh okay hard refresh yeah now what i've done is i've got a masked response so if you type in something like um type in tesla for example and hit enter yep nice go ahead and hit so you see now i'm pulling like rather than doing it's not going to be tesla but what i did is i pulled a like a default response so it doesn't ping the database every time it's ping the google search so that way you can develop with this result so this is just a sort of good idea for yeah just so you guys know like behind the scenes why this is happening is we're doing it in a way where we have a limit of a hundred requests and what actually has happened is people who are watching this live stream right now when on the url that's up there and spam the search to be over 100 requests and that's why it didn't open earlier so that's why sunny just built that like mass response and now it's good to go and viral just dropped freaking damn thank you viral that is huge viral just said we're all just dropped ten dollar donation thank you so much oh nice yeah that's insane thank you dude thank you yep and 800 viewers let's go 800 viewers and 800 likes damn you guys are freaking amazing guys you are representing that clever programmer family that clever programmer squad you know the deal smash that like button please and let's get this video out and let's bang it over 800 let's break that thousand concurrent viewers okay guys nice so you see now that's the screen we're talking about so the results page right yeah and what we do is i love you but we're gonna do a few minutes of questions so you guys drop in your questions sonny just please refresh your computer or restart your computer and we will be good to go you guys all right we got another two dollar donation by priyank and priyank says waiting for a dropbox clone love all their series thank you so much appreciate that so let me go ahead and do this so guys start dropping in let me go here and go let me take them out here real quick and i will okay so let's go boom [Music] uh sumeet says your ai face detection app landed me a great high paying job and just changed to a new company holy crap that is absolutely amazing damn um for some reason i am unable to zoom in which is fine which is fine okay guys so drop your questions that you have below i want to start taking on your questions and answering for you guys people are asking when are you going to make a uber clone we're going to be making an uber clone um at some point it's not on the agenda for this upcoming week but definitely today we just want to focus in on this google app that you guys are going to be building and then we have a few big clones lined up one of them is discord because i know a lot of you guys keep asking for it and then we're also gonna add new technologies like node.js node.js and start teaching as mongodb and i know a lot of you are trying to learn those skills as well behind me right now is actually frankie and i want to show you guys a little bit behind the scenes some of you guys might have known that we got a new place so this is actually our current studio setup right now so this is a new place that we have gotten for a clever programmer we call this the team cp mansion we can probably call it the high pass or the drip house you know but this is the studio and we're trying to set it up and this is actually where i'm live streaming and even if you see right now i have that cup of coffee that you saw in that photo i have that in my hands right now so this picture was actually taken today and um damn everybody says that's so sick thank you hey all right i think yo boy he's back that's better maybe just uh you can leave the video on yes give it a go all right let's go let's go so sunny is back i'm showing them my studio right now so let me actually share the screen with you too so you can see it so this is what the studio is looking like right now dude check it out oh dope holy crap that's nice dude yeah it's gonna get better but all right so let's keep going i was basically showing yo pick up homie that you said that yeah yeah that's hilarious it's kind of like how i imagine your ghost would be if you actually died i think you would speak to me through react comments that's how i think you would talk to it and like i would just see like you know freaking i would be like coding and react and i'll just see something like this and be like you're the best quasi i'm still here bro i'm still here you'll be like you're you'll be like you're not following them holy crap i was gonna just say that bro i was just gonna say that oh i peeked and broke some people's ears probably that's so funny damn good guys we're back all right we're back we're back to jump in the build let's go so talk to me what's going on here and let's keep going bro let's do it so now what we do is usually guys what we do is we i like to drop things out uh in a component layout right but today what we're doing is i'm actually going to show you how you can lay out your project in like in in pages and in components right so this is going to help you break down your projects and it's actually how they do it in a professional environment so it's going to be some good experience for you guys today so let's go ahead and go to our uh folders i can't see our photos for some reason oh man all right let's see this should load in a sec um yeah so kazi if i'll just run you through this as and i'll rejoin the live share so basically go to uh you want to go to your folders in source add a folder called pages all right yes i had a photo called i'll call i call i'll add a folder called pages all right dude all types of technical difficulties are happening it's kind of crazy my tv just shut down frank you want to help with that and uh all right let's keep going so paige it says it says the live i think you need to uh restart a live show because it says the host is offline yeah but basically we're gonna have pages and then we're gonna have components and we're to break things down into separate pages and break things down into separate components can you not you can't see it right now because it is live shared so maybe it just says it says the host of the work say seems to be offline so i think maybe what we'll do is if you press command shift p all right so let me actually go ahead and do that command shift p and let me add you to this screen over here so everybody can see oh let me actually flip that around boom boom there we go all right so command shift p and what else yeah and then type in uh live live share and stop so i think it'll be live share and stop okay so stop stop collaboration session exactly and then restart another one that should kick you out somebody just said they landed a job by the way from our like face detection clone no way see all right there we go oh nice i just got your message there you go so let's go ahead yes i can see yeah all right we survived that we survived that hopefully you're good are you in here i am in here i'm waiting for the file tree to load up it says opening session and we're in hey nice beautiful yeah there you go you got pages right here yep nice so with that said let's go ahead and do the following so let me get rid of this comment there we go so uh now we've got pages right so what we're going to do now is we're going to have pages and we're also going to create another folder and i'm going to call this one components right so this one's going to be pages and components and the reason why we're going to do this so if you open up your uh yeah there we go we've got pages and components and the components are going to be reusable components like we know right so we're going to refer to things like the search bar as a component but the pages are going to refer to the home page and the search page right so this is something which they actually do in professional environments i thought it was a good project to show you on this right so the first one that we're going to do is we're going to actually go ahead and build the home page right so i'm going to go ahead and type in home and what we're going to do is cause if you want to build the first component and then after that we can streamline it so let's go ahead and create a new component and we're going to call this one home all right home.js boom yeah and then we're going to use a really nice trick here guys and it's called rfce and it's from es7 snippet so that's an extension that's going to allow you to do what kazi just did and you just type in rfce and you get all of that code just pop out for you so once we do that we're going to basically get used to setting our apps up like this so it's going to be cast name home i'm also going to create a see a css file for this we're going to say import home dot css like that right and then i'm going to create the css file for this so notice how this one actually went into the wrong folder so what we're going to do now to fix this is uh we are going to go ahead and move this so we're going to go ahead and move these two so because if you want to do it so it's visual do what move home and home.css those two files push them into pages all right there we go push them yeah and then click move uh-huh yeah and the reason why we're doing this guys is because it's actually a page right it's not a component it's a page so it is a component but if we're referring to it as one of the pages on on our site so that's that done and what we can do now is go back to app.js and go ahead and import this so i can go ahead and import this like so so i go here and i say import um i think you have to follow me again quasi i'm in app.js now say import home from home like this right so now we have the component being pulled in and let's go ahead and double check that it's actually working so we can say h1 so i haven't got my snippets which is fine i say h1 this is home page right like this right and if i save that now we go to 3000 let's go ahead and see what's happening here so we can see ahead so now it's saying there's a problem because in the import now we have to do this we have to say forward slash pages home right and we save it there we go nice nice okay right so this is the home right and then what we're gonna also do is have a search page right so we're gonna have a home page and a search page we can leave the search page for now so let's go ahead and build some functionality uh so that way we can get everything up and running uh and then we'll go ahead and so is this technically still a component like home yes yep so it's still a component but your folder structure changes and this is what they kind of do in in production builds so you would have a pages folder and the reason why i thought it was good to bring up because in our coaching course a lot of students ask about this so i think it would be really valuable for everyone um to see another hold on jared says i am proud he goes i'm proud to be one among the 5 000 members who landed a full-time job love you clever programmers um dude that's insane i think we just hit a thousand likes dude damn thank you guys we are at forty dollars in revenue on this a stream thank you guys so much for that that is huge we are over a thousand likes and uh we're so pumped because one of our big goals is to get 5 000 people to become developers this year and then next year we want it to be 10 000 or more people to become full-time developers so this is a huge uh this is a huge accomplishment for us thank you for sharing that yeah that's insane love that right so now what we're going to do is in the home page in the home component we're going to go ahead and basically draft out what the home page is right so let's go ahead and do this so now i'm inside the um oops what's going on here so i'm inside the home.js one sec can you see that quasi so let me go ahead and reconnect yeah we'll give it two secs it's just doing a reconnect all kinds of tech today we're fighting against the skies it's a sync issue but we'll get past it it's all good it's impressive how much tech is coming in how many issues we're having exactly all right so you've got the home page now so what we're going to do is in the home page of google we have a header and we have a body right so the header so if we go ahead and pop open our deployed version kazi so let's pop open okay so let's open up the deployed version right here okay so what i'm going to do is draft it out now so we have a header so i'm going to go ahead and say div home um i'm just going to score header like this oh okay i don't get my snippets so i'm going to say div and this one's going to have a class name of home header like this right and then i'm also going to have a another one which is going to be home body right so this is going to be two sections of the web page and we can draw circles around this to show them uh what we're visually doing here so we have the header which is where we see about store gmail images and the user avatar and then we have everything below it so anything below it we're going to call it the body and anything in that top banner we're gonna be referring to as the header okay so hold on just so i'm gonna draw it out visually and sometimes if you're speaking about these things just you can let me know to draw the visuals i'll be your [ __ ] on the live stream that's okay yeah so i i actually did say uh but i'll say it again just wake me up like yo cause you're not paying attention because i'm looking at the comments and everything so when you say header this is what you're referring to yeah yeah exactly okay beautiful and then when you say body is it on everything underneath there so it's this yeah everything underneath we're referring to as the body got it yeah now i always talk about containerizing things because containers allow us to start things easily right so at the top we have like a header left which has about and store and on on the top right we have uh header right so i'm going to go ahead and create and i love this comment by the way this guy goes how goes alert investment the moment these two create a company put all your money and enjoy your retirement within five years hey that's what we're talking about guys that is what we're talking about that's actually 100 uh true like i feel that if we just went hard dude like real talk like we just went all in i do think a lot of people can just invest and retire yeah i think so we can make we can make tipple come alive yeah we will go we go public on the stock market yeah yeah nice so we've got um the header left and header right so here i mean we make tin dev and we're a lot like we're live company yeah exactly tinder oh yeah was it tinder and there's another one um oh yeah two that's so funny all right so we've got a class name here and i'm going to do header left so home underscore underscore header left oops left and then i'm going to copy this so i'm going to go ahead and copy this and i'm going to do header right right so these are going to be basically imagine we're drawing mini containers so now we've got one mini container in the header left and one mini container header right okay then what we're going to do is inside of here we're going to have two links so this is going to be the first link which is going to say that we're going to have two links here and then we're gonna have a link link so this is gonna be the gmail link the images link and then the icon the icon and then the avatar right so i'm gonna go ahead and draft this out so we've got the avatar after that right so how do we get this working now so uh we're going to need a few things to get these links we're going to have to use something called react router and to get these icons and avatars we're going to have to use something called material ui so we're gonna have to install a bunch of dependencies at this point and we do this once and we don't have to do it again so kazi let's go ahead and install material ui to begin with uh you're muted quasi material ui so we gotta do npm install uh you material ui core so i'm just gonna go here open up a new terminal cd in here anyway just paste this and install now next up what we need to do is we need to go to icons now once we're inside here cert click to search the full list of icons and here are going to be all your icons now one more install you guys need to do is if you open up you can open up another one or just wait for the first one to finish change the chord icons this will get you all the icons that you're going to use and why are we using these icons these icons are going to be used for this mic symbol here this search one that right gallery view and a few other things so that's why we're going to need this yeah even the buttons that you saw there where it says google search and i'm feeling lucky are actually being pulled from material ui so they get that nice little ripple effect ah nice so these buttons are coming from material ui so this is not material ui icons but it's still material ui yup dope okay so got it this is how you install it you guys once your installation is done you should be good to go exactly now because you want to show them how we can so yeah also you can just go here and this is the code that you can just copy and paste and you can search for the icons just by typing in whatever you're really looking for so for example here if i want the search i go here type in search hit enter this comes up copy this code go back to my app paste it in right over here and then i can actually use it exactly and that's how when you see me importing a bunch of like icons and stuff like that that's where we're getting them from so if you do get lost at any point know that that's how we found those icons right so with that said we now have material ui so i can go ahead and pop in the icon and the avatar so the icon uh actually before we do that let's go ahead and do one more step so we need to set up react router to get these links all right so i need a few links on the top um so let's go ahead and uh so if you go to react rear on google uh huh let's do it so okay yep so reactor uh and then you're gonna click on web and there should be i think it's yeah there we go in npm install react we're done that's the one we need dope all right and while that's loading what we can do is we can go ahead and actually write the rest of the code so heading over to app.js react requires that we set up something beforehand right and it's very simple how we use react through what we do is we essentially wrap our app in something called a router right so we need to import the required dependencies so at the top of the file i'm going to go ahead and pull this in so we have a bunch of dependencies that we put in at this point so we've got the router the switch and the route right and then what we do is everything inside of our app right everything inside of our app we're essentially going to go ahead and pop the following in so i'll explain exactly what we're doing here and i'll do it step by step so we basically first need to add a router right so we first need to add a router and then basically everything is going to go inside of that router so everything goes inside the rear at this point right then what we're going to do is we are going to add a switch because basically what we actually allows us to do is it allows us to render certain components based on if uh based on the route that we're in so at this point i'm going to add a switch here like this and then i'm going to add the roots so the roots that we're interested in are the following ones so this these two roots right so i can go ahead and get rid of this now what i've done here guys is very simple so i'm going to go ahead and assume that here we will say is this is the search page so let's go ahead and do this is the search page and i will show you exactly what we've done here so if you did get lost i'll explain what's happening right so let's go ahead and save this and we'll save this file nice so because this go ahead and open up localhost nope oh localhost okay okay whenever you see that i want to go to the command line nice so now we've got the homepage right but you see what we did is it says if your route is at the forward slash so if your route is at the home page right so we have forward slash which refers to the home page then it's going to render the home component right now if we go to forward slash search it will render this component so in this case i've just got h1 where it says this is a search page so cause if you want to go ahead and add a forward slash search to the url so i had a full slash search a a see that right and it's it's instant right yeah it's instant so super fast yeah super super fast and what we can do now is any component that sits inside here so we're talking root we're talking the home component the search page component we can use something called react router links inside of that component right so let's go ahead and go back to home now what do i mean by react rear links so let's go ahead and import the the correct thing that we need so we need the link from reactor or dom and this is actually a really really powerful piece of tech now guys so i'm going to go ahead and replace this link right here and i'm going to say the first link goes to the about page i think it was the about page like this right so we do this and then if i go ahead and sorry if i go ahead and basically what this is going to do is it basically replaces it's like an a tag so it's like a link right but it's just like a react ruler link so here if i just write about and then hit save and if we go to the let's just go to forward slash causes let's get rid of the search nice so you see there's a link now right and i've said it goes to the forward slash about so it needs to go to forward slash about so let's go ahead and click on about yeah there can you see the url the url changed yep it does yeah as soon as i click it boom it changes it exactly so what we can do now is we can go ahead and pop in the remaining two things we can have this one and this one and we can go ahead and have another link here another link here so i think it was about um what was the other links let me go ahead and pull up the app as well so i can see oops oh my alfred shot down looks like there you go your heart rate has shut down what'd you say my alfred oh okay i was like dude i really hope your heart rate is fine yeah let's go ahead and do the following so let's go ahead and check this out so we have about we have store right at the top so on the left side we have about and store and store goes to forward slash store this one goes to gmail here we have gmail and this one goes to images like this right and this one goes to images so you see that's it guys there's four four links and the reason why we're not using an a tag here is because if i use an a tag what's going to happen guys it's going to actually go to that page and refresh and we don't want that we want to use the link tag so it has no refresh and it does it instantly so the react way is to use link exactly exactly um oh man i don't know why i can't actually see the the the photos are so annoying you can't see the folders and my tv just died again so give me one second yeah i'm gonna rejoin the session guys so give me two seconds i'll rejoin that session that cause he was doing so [Music] oh guys i think we deserve i deserve to smash the like button for this today because this is a lot of techies a lot of tech issues like just in everything that has never happened before yeah like now i'm back in i'm back in nice damn holy crap guys when you're live this is this is trickier than it looks to debug this stuff so yeah nice awesome so we have that up and running um let's go ahead and follow me again quasi yep let me actually just go ahead and uh follow you and lift up a 55-inch tv and hit the on button at the same time nice so let's go ahead and do this and now yep it's nice following me so what we're going to do now guys is we're going to start this so it looks a little bit like what we want to get it to so the first step is let's go ahead and actually give this the appropriate style so we have we're inside of home header right that's where everything that we want to style is living so let's go ahead and do the following we say target home header give it display flex and what we should see at this point is everything inside that header should go in a row right because by default when you do flex uh everything goes into a row so if we do that we are importing the file we are using this home header there we go why is that not refreshing let's go ahead and see let's get rid of the this is home page go ahead and save this file and we've got oh yeah so right now this is actually correct so about and store uh yep we've done that so home header and then we're going to do is we're going to say justify content so justify content space between right it's going to do this save it and then what should happen here is if we refresh cozy let's go ahead and refresh is the app is the app running it is running right i'm on the about page i'm on the bob page that's fine yep that's all right so i feel like let's go ahead and double check so it seems to like that the changes that we're making aren't being home header home header should be i mean it's it seems fine i just saved it let me go ahead and do display flex on the home and we go ahead and do a flex direction column and a view of a hundred view height so it takes up the entire way hold on i'm where are you doing this because i'm following you are you on a css file right now yeah i mean home.css um it's showing me that you're in home.js yeah i can i can see you you can see that go ahead listen so now you can see me right in home.js i can see you in home.js right so unfollow me and follow me again i did many times but i'll do it again and let's go ahead and see if it follows me properly into home to css no yeah it does now now yeah you went to app.js so now i'm in app.js with you but now i'm in home.css um it doesn't want to go to any css files with you maybe maybe i'll just manually just call it out right now it's not even it didn't actually push the code that i wrote in here okay so you know what give me one say i'm gonna rejoin one more time it's good yeah this feels like somebody's just spanking me like left and right i know what it feels like it doesn't feel good at all like against my will somebody's just spanking me this guy can you see now can you see with me now if it's hyping hello cedric is like if you have any doubt just reboot he did that already let me actually try uh following you again try now moving around to different things okay so abc worked that's good never going to home.css no if i go into index or css what is okay so index.css worked but home.css didn't work app.js what the hell okay all right i have an idea i have a hunch pull everything out of pages yeah let's just pull this out of pages and let's go ahead all right let me let me test it i'll pull oh you're pulling it out yep i'll pull it out and let's get rid of pages let's get rid of components so we'll just do a flat hierarchy for today's world and then let's go ahead and fix our imports so we done four slash home here we have home there we go nice okay i think we're good yeah holy crap dude flute your code is like live sure completely drops when you have poor internet connection future code what happened we were supposed to do airbnb build the airbnb clone i was so excited and then i just stopped hearing from you i still want to build it um there we go finally there we go it's working yeah so these are the changes i made guys uh yeah so i guess it was a flat hierarchy i guess vs code didn't like that so yeah so now what we're going to do guys is i set on the home container itself i said display flex flex direction column and give it a height of 100 view height now what that did is if i go ahead and give this a background color of say red now you should see the entire thing goes red so let's go ahead and add semicolon nice that's what this height right here did and there that's it we're done that's it we're done that's that's that's good thumbs up that's actually how most developers show it you know that right like most developers will build something that looks like this and it'll be like well this just to give you an idea what's possible and they'll be like join my course and then i'll show you more exactly they get you like half in nice so we got that and then the home header guys so the header itself as well the links are living i wanted to do display flex this justify content if i go ahead and remove that you'll see it pulls all the header left and header right together so we need that to space between it padding means that 20 20 pixels top and bottom 30 pixels left and right right and then align them centrally so that they're all uh vertically aligned so now that we're back up to speed what i want to do is all of those links right by default they look like links which looks ugly right we don't want that so i'm going to add the following inside of here so i'm going to say in home header all of the links right so home header a tags because remember these links that you guys saw so these ones right here these actually convert to a tags but they're just like clever a tags right so what i'm going to do is to style it i'm going to say go ahead go into home header target the a tag give it a margin right 20 pixels this makes it actually go ahead and it fixes the uh the way that it gets rid of that underline by default and then this is the color that they use on google so it's a really strange car i tried to color picker it and i couldn't so i just literally grabbed the the source code color that they had and then the font size of 15 pixels now i'm gonna show you guys why i did this line as well so let's go ahead and save that and you can see it looks a lot cleaner right now cause if you hover over don't hover over what oh i'm hovering over it yeah it looks good yes and if you click it the links actually take you to uh to sort of new urls so if you go to the fourth search so i i see so i see the url and you guys should see that too yep yeah so that works but we want it to also show like an underline for it so what we do is because we removed all the styling with text decoration inherit now if we add this hover text decoration underline if you hover over it now check out what happens mmm nice it so we get the link functionality back and then we sort of uh man goes what about the data layer so we are using god damn [ __ ] jacked girlfriend girlfriend's getting jacked so now what we're going to do is we need to finish off the header right and the header right with the icon it seems like she's like dead serious too which makes it more hilarious and jacked sometimes she sends me text messages and they send me way off and i'm like god damn it so now i want to have like a grid right so i'm going to have a grid uh sort of icon and the grid icon that we're using in material ui is called apps icon so what i need to do is this one here apps icon and what we can do is we can go ahead and import that from material ui with the following line so apps icon from material ui icons apps so if i save that now you should see an icon pop in so that's how simple it is to get an icon in your app guys so it's very very clean very slick and then for the avatar basically i'm not going to go i'm actually going to use a blank avatar for now so we're going to go ahead and pop this in uh i need to go ahead and import that from material ui and when we say avatar we're talking about when you're logged in you know that little sort of circle icon rather than messing around with radiuses and circles and stuff we literally can use an avatar from material ui and it fixes all that headache for us uh if we save that um save that should what is that advertisement yes save that saved refresh guys saved it so wait why is that hold on hold on why is that thing happening because then we do um in settings didn't we set it up to be in a way where it auto saves let's go to auto save yeah yeah we did after yeah strange okay yeah really strange oh man today is just like this freaking strange day so guys we have the header right right now you see the header right doesn't look quite okay so i'm going to go ahead and do this so i'm going to target i'm going to say display flex yeah do that and you'll see it pops into a row so it's saved before there we go it pops into a row but everything's not vertically aligned right so i'm going to go ahead and do a line item centrally and watch what this one does so this will pull everything in the center on the vertical axes which is good then what i'm going to do is i'm going to say give it a minimum width of 13 view it because if you want to be responsive and then you see it didn't look like it did much but now if i say go ahead and space the i all of the children between itself if we do justify content space between it should have done uh it will do a good job when it goes bigger all right now what i'm going to do is i'm going to make sure that when we target any of the icons so this is how you target any icon inside so this is saying go inside header right and this is the class that material ui gives you by default right we can go ahead and do margin right of 20 pixels hold on hold up hold up hold up i don't think it's following you were you doing a lot of styling uh i think you're looking at it yeah i could see that one no now now it's following it wasn't following you for a little bit so i don't know how much styling you did in the last two three minutes but here it is i have no look at look at the comments they're saying we can't see the css don't see the css so they're the comments are coming in i caught i just i caught it pretty much right away but oh damn it okay that's cool i don't know how much css now here it is yeah this is what we're doing here guys so i've added header right so display flex align item centrally minimum width of 13 view it justify content space between and then to give that icon so that grid icon some space between that and the circle avatar i target the icon because this is the class name that material ui gives every icon and i add a margin right to it so that's why we're doing that okay uh awesome and then there we go we actually have like a the the top portion of the header done so cause if you go ahead and resize it now you'll see it's fully responsive that top uh that top uh header hey it is i'm just putting it through a stress test you know yeah that looks clean man i like it i like what you do bro yeah awesome uh oh frank says uh frank's in our inside of the prophet javascript course and won the coaching because he says the flexbox froggy website was great for learning flexbox foggy i was like nice yeah that that is a good um that's a really good resource by the way okay people are telling me i should put the title on top and i was kind of being lazy but i will do it because this is the second or third comment so i love that actually for calling me out let's do it so what are we working on right now sonny we just finished the header i imagine yeah so now we are working on adding the search bar functionality so we're actually adding the body of the the search page search bar yeah add google's box there we go the most english way of writing the title is possible boom sorry i exploited somebody's ear but it's right it's not nice so now what we're going to do guys is we've got the uh go back to home here and we've got inside the body right so inside the body i'm gonna add first i'm gonna add an image because we all love images so i'm gonna go ahead and add an image and that's gonna be the google logo so i've got a link here and this is simply the google logo okay so if we go ahead and save that you'll see massive google logo popped in then what i'm going to do is i'm going to target that and style it right so i'm going to go into home.css and i'm going to go and say that uh we should go ahead and that body so we're going to target the body we're going to target the image and say contain it but make it a height of 100 pixels right so that will actually go ahead and um make it a lot more smaller and object fit contain keeps the aspect ratio so it doesn't like stretch and look weird then what we're going to do is here we have home body so like this i'm going to go ahead and target the home body and this is a neat little trick that you guys can do so i'm going to say the breath the body should take up the remainder of the space now the reason why it's going to work is because homebody sits inside of the home parent which we made flex uh and we've done the flex direction column so this is by saying flex 1 it's going to take up the majority of the space now margin top of 10 gives it a little bit of spacing from the top which is why if i remove it you'll see google goes up yo how'd you how did you center how did you center it so it was centered from that was actually from we did that with uh where did we do that um we centered that with let me go ahead and double check where did we do that yeah i was like how does this thing get centered so perfectly all right time for air horn [Music] says guys take a rest these bills are exhausting you guys deserve it i say we triple down on these guys we're trying to get to like seven bills a day yeah so oh this is why this is why it's very yeah because we're doing flex direction column so it spans the entire width so the direct child is is this uh home body so that's where you see the image tag hold on hold on so what's making it centered are you giving me like a politician roundabout answer or okay yeah you see that yeah so flex if i added flex direction column by default it's going to take up the entire row in that column right oh that is weird dude i would never think about that that like flex column like flex direction column would be used as centered yeah so like now if i add like a h2 or h1 tag or something oh why is my emit not working i say test you'll see now let's go ahead and do test so test so image won't but like if i take if i go ahead and pop another image in right you'll see that the image will sit and it should sit in the middle there we go got it okay got it um it would be doing it would actually be using the width but you would do text align center to get it centered yep yep oh i see what you're saying i see what you're saying okay it's still using the width with the text it's taking up the whole width but it's left aligned by default so even if the text is like boom this big the text is just taking up all the space to the left but with an image you're saying it will actually put the image in the middle exactly yeah but you see if i do a center tag it actually uses that and then i sent a tag and then h1 h1 yeah send today or that's how i center stuff dude that's how that's i was going to say because yes this uh double check if you go into um vs code settings quickly just double check that the prettier's on all right yeah that'll make developing a lot quicker so let's go ahead and do uh do s format on save so type in format on save all right so let's go all right format right there one save yep i got it okay and then you see it at the top it says uh go to so it says no right so click that and you want to click on oh my god which one is it default oh my mine's nose oh interesting prettier this one right here right i want to say yeah but i don't trust it so maybe i mean that looks right let's try it that's right let's try it yeah let's give it a shot um i don't really know i mean it didn't i don't know what it did bro but it seems like it's good yeah that's fine cool so there we go so then we have the image tag there and then what we're going to do is we have the i'm going to basically add a an input container here right so it's going to be input container and this one we're going to basically put a placeholder here for the search and the reason why so this is going to be like a search all i want to do is have a one search component and once that's built that will sit there and that will have the buttons it will have everything we need in that one search component the reason why i want it to be a component is that we can reuse that component then on the page the results page right so that will help us use have some reusability there so with that said what i'm going to do is go over to create a search search component so i'm going to create a file called search.js so search.js and we should pop in now um yep and i'm do rfce and my snippets aren't working so you're going to oh there it is there we go nice and then i can do class name search i'm gonna set up my css file so i'm gonna say import search dot css nice i'm gonna go ahead and create the search.css file so search.css boom and we should be inside there now all right awesome so we've got our search file set up and then what we're going to do now is we are going to go ahead and actually lay this one out so the search field right so the first thing we have in the search field is the input field so i'm going to go ahead and create create a container for that some say class name equals search this one's gonna be called input right and inside of here i'm gonna have three things i'm gonna have the search icon uh so i'm gonna have a search icon which is gonna be the hourglass so this one i'm gonna give that a class name of search input icon i'm going to have an input right so i'm going to actually have an input like this and that's going to be basically be where you type in some information and then you want to google something and then i'm going to have a mic icon right so i'm going to have three things inside of here and i'm going to import those at the top so we have access to them so let's go ahead and import them save the file go back to home and let's import it here so we can actually see our search working so let's go ahead and say import search from [Music] search like this right now we should see some kind of input and some icons pop on the screen in a second so let's go ahead and see it says import function home there we go you can see you got that little it's very ugly at the moment but you can see that it's there right so we've got the search input and the rest of the stuff so what i'm going to do is style that now so it doesn't look as ugly as we can see it there and the way we do that is i'm going to go inside of my search.css and i'm basically going to go ahead and type the following so i'm going to say search input to go ahead and target that and then i'm going to say display flex align item center right so let's go ahead and see that and i love doing this as we do it like this because then you'll see as things sort of get started the difference that it's going to make so if i go ahead and add a border around this of light gray so i'm going to go ahead and do border one pixel solid light gray and you can see it adds a border around it i'm going to set the height of this to be 30 pixels right so it should get a little taller i'm going to give it some padding and i bought a radius of 999 pixels right and the reason why i do 999 is i want that perfect curvature right so i added some padding i've done 10 pixels top and bottom 20 pixels left and right i'm going to do the width is going to be dynamic so it's going to say 75 view width which means so you always use 75 in the screen width then i'm going to do margin 0 auto and this is a trick to make it horizontally centered okay so if i do this you should now see a centers horizontally then i'm going to do margin top 40 pixels and that will push it away from the google uh icon and then i'm going to do a max width of 560 pixels so that way it never grows past a certain high uh width so even if you're on a huge screen it's not gonna like basically take up like if you're on a 4k monitor which is like 50 inches you know you don't want that search bar to be huge so you give it a max width all right so very very clean uh look and feel there then what we're going to do is we're going to target the inner input field right that inner input fold and what i can do is i can say flex one because i want that input field to take up the majority of the space inside of it so you see it expand right then what i can do is i can say give it some padding so i want to do the same thing 10 pixels up and bottom top and bottom 20 pixels left and right i want to say make it a font size of medium so medium by default is one that they provide and it'll make the text that we type a little bigger i'm going to say give it a border of none so now you can see the input field has a little border around it but as soon as i add this line watch how everything snaps together so if i go ahead and pop this in there we go look at that you see how that like one simple change and now it's looking very clean right now kazi if you want to click on the input field right now why the hell do we see that blue ugly nastiness right you see that like outline yeah we don't want that and you don't see that in google so what we can do is if we target the input field and we say go to the input field and say colon focus so when you're focusing on the input so when you click it if we set a property called outline width to zero oh look at that that is nice that's cool right you do outline with two one uh let's do like one pixel uh-huh oh do it to 20 pixels yeah i wonder what happens if we do that is that hold on i don't know maybe it just has like it's either on or off you know yeah i think it's like a it's like a boolean i guess maybe yeah it's a boolean okay cool yeah zero is what we want right now it looks clean yeah so that's really nice right so that it's already looking super crisp like google right now we gave the search icon a um a color a class name of search input icon so i'm going to go ahead and target that because i want to make that color gray right so i'm just using default colors here they're kind of close to google's ones and it makes your life a little easier when you're making this so color gray there we go and then what we are going to do is we are actually going to go ahead and add some buttons okay so we're going to add some advanced underneath it because as you guys can see like it was very quick to sort of get to this point but like it's just all these little tricks and hacks and stuff like that that you sort of pick up along the way it's very important to get good at those so that way you can build at that speed as well that's why the greatest ever even he says the damn this outline width thing will be very helpful yeah really handy and honestly in some other builds i wish i did put in there because it is a really nice finishing touch to us especially to a search bar when you're making um when you have like an icon on the side and things like that so what we're going to do now is we're going to actually create a so underneath this div i'm gonna have a div called search buttons right and these buttons are gonna be primarily responsible for the two things that you see on google it says google search and it says i'm feeling lucky so let's go ahead and check all one that we built quasi all right let's go to it you want to go to the home page uh no so the one that we deployed oh i see okay yeah right over here yep so you see these two buttons google search and i'm feeling lucky right we need to get those working so i'm going to show you guys are we done with the search bar no yeah so this is all part of the search bar got it okay cool yeah this is all part of the search bar so we're almost we are we'll be done pretty quick um so now what we're going to do is we're going to add a button and the way we can do it and thank you deepak for that uh nice little donation and thank you come on nice because thank you for an amazing tutorial small contribution from my side massively appreciate that dude thank you debunk and thank you yeah that is amazing oh two donations like right at the same time that is odd unless they were friends and coordinated it together nice so what we're going to do now is add a button but we're adding it with a capital b because it's from material ui so i need to go ahead and import that from material ui so let's go ahead and pop that in and this button is going to say google search google search and i'm going to have another button which is going to say i'm feeling lucky right and you see i added a variant outline to this one so this is a google property so let's go ahead and open localhost all right so you see the second one had varian outlined and the first one didn't so this goes to show you that google actually can go ahead and provide you the material ui library design that we provide you with different props one of them is variant so in this case if we add variant outlined you can see that we get this by default which looks pretty clean yeah so we can go ahead and add that now what we're going to do is somebody says i suggest you use sas preprocessor for css guys that's why we use bam so trust me i used to use sas but bem's a lot cleaner when you get used to using it and it's a lot faster um yep so now what we're gonna do is we are going to add um okay so i actually i actually want to make the entire search field actually we'll do that afterwards with it afterwards so what these two buttons here google search and i'm feeling lucky let's go ahead and style these so they look like we want them to look right so let's go ahead and firstly let's go and style the search buttons container so i'm going to hop over to the css and say go ahead and pop in a margin top of 30 pixels display flat nice justify content so justify content center was important here if i don't have that it's left aligned so it's flex start by default and we want to center it right and then what we do is we target the button and this is how we do that is we say inside the search bar container target and normal button because that's what gets rendered our material ui's button i'm going to say give it a margin of 5 pixels a padding of 7 pixels top and bottom 15 pixels left and right let's go ahead and add that you can see it automatically spaces it apart give it a background color of a light gray and give it a white pic uh one pixel solid border so let's go ahead and do that and there you go like we started to look a lot more and you see by default material ui actually goes ahead and makes everything like capital letters which isn't very nice that we don't want to do that in our case so what we can do is we can override that by saying um uh checks transform inherit so if i go ahead and do that you'll see it drops down to the lower size right to finish it off i'm going to say color is this nice little gray and there we go we get a very nice sort of finishing touch right now uh please don't spam the chat guys you're just gonna get blocked so yeah yeah yeah so now um let's go ahead so now if you go ahead and hover over that button it's fun for me to block i just sit there and a lot of my work is blocking no i'm kidding yeah okay click here yeah so if you hover over the uh the buttons google search and i'm feeling lucky uh-huh and look at how nice it looks when i click it dude look at that so the click looks really nice but the hover doesn't it doesn't look like google's yet right yeah so wait what does google server look like let's see so let's look at the deployed oh yeah we can use this one yeah so you see that it gets like a nice hovered look right yeah but i like how even theirs is not responsive and ours is more responsive than actual google right yeah this is something i found yeah i was like i couldn't believe that it wasn't responsive when i saw it that's embarrassing dude that's actually embarrassing yeah like then they should literally like with a few lines of code look how much better that looks like yeah and i'm like zoomed in wow yeah so guys this shows you like even companies like google sometimes they don't get the responsiveness right you know um nice so what we're going to do now is actually add a hover functionality for the buttons so we target the same thing at the top so we say to go ahead target the buttons but the hover state and i'm going to add a box shadow so i'm going to add a little box shadow here so because if you just want to hover your mouse over it and then we can see it as as we uh as it changes yes yeah so just keep it hovered up there we go and then what we'll say is i'll say a background color wait wait wait wait wait wait wait wait wait anytime your screen is not showing like i'm gonna give it a shout cool yeah go for it so a background color of gray so now if you hover over it yep yes you see it's slightly changed right it's very hard to tell but it's like i can do it and comment it out and put it back uh i'll do these three and then and then you so these these three together are the ones that will be much more apparent to show so if i do that you see that yeah i can see it yep yeah because in that that way you can see a lot clearer when we do that so now um when we sort of hover over it you get that very very nice look and feel now there is a little other line that they added on the google button so this actually came directly from google button and it says add a linear gradient from the top to the bottom and it's basically a gray it's like a white color and it's very subtle like it's so so uncommented i mean comment it so you can see here here it's just like a gray but here if you do this it's actually oh nice it like yeah looks like more solid yeah you see that that's a flat button and then this has some kind of like shine to it looks like a little 3d button yeah it's so it's just it's really subtle but i can experience the difference yeah insane like small small tweaks like that are going to make a difference um yeah so we've got that in place now what i'm going to do is i'm going to say when you click this button so on click i'm going to say fire off the search function so fire off the search function and we need to obviously write the search function so con search equals it takes an event whenever we have an on click and we're gonna do e dot prevent default and what this will do guys is when you click that button we don't want it to refresh or do anything funky um so i'm gonna add that by default and some of you guys might be wondering that only happens in a form we are going to be making it form very soon so that's why i'm going to add that now um so now when whenever kazi types inside the the search bar so inside that middle bar we don't capture or save the input the input text right we need to keep track of it so in order to keep track of the input text we're going to basically use something called state and state essentially is how you write a variable inside of react so here i can say const this is the syntax for writing a piece of state and this is a functional component so we're using the use state hook so we say input set input and this is how we modify that value and we just got another donation thank you whoa nice thank you oh we just got 20 donation dude wait what where hold on wait for it to load bro you're too fast on your phone holy crap whoa thank you so much damn freaking 20 donation and he goes thanks for the valuable content you got it we're gonna keep banging this content out so thank you for the love really appreciate you yeah that's huge dude thank you so much yeah so now we're gonna do um we have the search would you educate oh yeah we were saying up the state so input set input and then we say use state right and then by default we want that to be a blank string because you have nothing in the input field when you start off we need to import this so we can go ahead and do this so import oh yeah i'm gonna do the air horn because that's a good donation you guys and it's a little delayed but here it is that's where i got it from bro yeah yeah nice um there we go so now now what we're going to do is we have we are going to change the are we going to map that input to the input field right so we go to do that we say input value equals input and what this does is it maps the input here right so we're saying this input and state is always going to be mapped to this input but right now it's always going to be mapped to your blank string but we want to basically keep track of it as kazi types in so in order to do that we say on change so on change equals unchanged fires off an event right so we're gonna it fires off an event but we can just shorthand this and say e and then what we can say is this is an arrow function so we can say set the input text to be whatever cause you typed in which is e.target.value that's how we get that value right now what this means is if we've done it correctly if kazi types now it will just type normally but behind the scenes it's actually been captured in the state so kazi go ahead and type in the the input field nice can i okay cool so that's all good that means that we are we've connected it correctly if you guys get to this point and then you don't uh actually see the field being updated then you haven't done the unchanged correctly right so be sure to do that correctly now what when we click that google search button how do i connect the google search button so that whenever kazi types in and hits the enter key like it detects it and then something actually triggers by the way real real quick amanda's just joined and he goes wait what i just joined in after an interview is that really google or is it a clone nice he just joined after an interview dude he's 17. he's crushing it holy crap he's in pwj he's 17 and he's just he's yeah he's got a lot of talent like i'm really pumped to have him on our team dude yeah he's insane nice another donation thank you so much sayantan he says you guys are amazing dude your work inspires me a lot thank you for these live streams i made some of the projects by watching these live streams let's get it nice awesome all right so this is looking good i'm liking this now so input is the variable where everything i'm typing into this blah blah blah like whatever i'm typing in here right that's going straight into input yeah okay and then you can use that and you're probably using that right over here in the form we just got another twenty dollar donation what from dj spouse you guys are dope keep up the great work thank you so much bro thank you dude that's insane love that damn we're at eighty dollars we're about to break a hundred soon this is huge this is gonna be our like what eighth live stream if we did that yeah that's crazy so guys i'm gonna get back into the explanation i know i keep getting distracted by donations but i can't help it i always will appreciate it until i'm in the ground so um let's go here so for example so this is the input whatever i type gets stored in here and then it's also being stored in here giving giving it to as a value and then you're using set input to give it the actual value right to store an input you're pulling the value out of whatever i type in the form or the search bar and then you're making sure that when that search functionality runs you are um you're making sure that it's actually preventing the refresh yeah we're using this function we're using the search function uh so this is actually connected to when we click the google search button oh right here my bad okay i missed that what i'm trying to do now is i'm going to show you guys a really neat trick right now this trick is basically how to um how to make it so that when you hit the enter key when you're typing in the input field when you hit the enter key they will actually trigger this google search button right so how do we do that with very minimal lines of code and i'll show you and it's very impressive when we actually do this so to prove that this isn't working i'm going to do a console log and i'm going to say you hit search you hit the search button right so i'm going to do this so now because if you go ahead and open the terminal uh open the terminal sorry the inspector let me go ahead and open the inspector so i will go here inspect and uh console yep and this refresh and then let's type in all right so i'm gonna go ahead and do that so let's get out of here yeah and if you hit the enter key yeah i just did yeah nothing happened right nothing happened and i can prove it to you guys by showing the keyboard yep okay if you click the google search button this one here it actually says you search the button right so what we're going to do now is map it so that we can so that when kazi hits the enter key and i'm going to show you it will actually submit that that function so to do that in super super easy way let's go ahead and change this div to a form right which means you have to close the closing make the closing tag of form as well and then all we have to do guys is make the button type the submit and literally with that said whoa my god what's happening you oh god oh my god that's insane whoa okay let's go back on the screen uh frank says guys i just landed a six-figure consulting project for sonos that's insane holy crap [Music] that's crazy dude holy crap holy [ __ ] all right based on the spotify clown okay he goes to make their new react uh to make their new react and react native radio station prod wait what am i doing hold on people can't see the thing my bad so to make their new react and react native radio station product they hired me based on the spotify clone i built using sonny's live video on youtube bro that's insane holy crap oh my god bro bigger concerning project damn dude i'm so incredibly grateful for clever programmer team yo let's get this bread bro insane and guys just a reminder frank was i was speaking to frank on tuesday in a coaching call so right after we finished the whatsapp build i jumped straight on a coaching call and frank was in there talking with him so that's insane that's so so cool yo sonny let's get on let's get on a call after this bro i got some got some good news to share with you but let's get on a call after this yeah dude oh my god that's increds crazy nice so anyanya says definitely joining pwj let's get it yo the cp gang coming in guys profit with javascript join that course you guys already know the deal that's it love that guys love that everybody is wishing him uh let me see if i can do this all right so everybody's wishing him they're like well done frank you guys are rocking anonymous is definitely joining pwj uh good looking giving back frank best of luck that's crazy real motivation guys you are making it rain felipe says little john says oh [ __ ] sonos really uh you guys are doing a really good job awesome damn bro i'm just i'm too hyped man i'm too hyped i know saying that yeah that's like a six-figure job a six-figure con and with sonos sonos is such a big company like oh my god hey dude you know what we should do we should have a counter at the top how many people have landed how many people has clever programmer helped land jobs we should have a counter at the top i want to get to 5 000 this year 5 000 and then next year i want us to get to 10 000 people getting jobs yeah because honestly the amount of people especially in that coaching course or in live streams that say they landed a job like 100 we should keep track of that that'd be awesome yeah i think that would be amazing if we did that i'm pumped yeah i definitely want to add a lot of those things in here super super legit and let's get back into the training nice this is crazy right so we changed the outer div into a form right so a form and the class name was search and what we're going to do now is we change the button type the one that we want to trigger when we have the enter key here we change that type to submit so now cause if you type if you i think you might need to refresh but if you type and what i'm gonna do is also i'm gonna say you hit the search button and i'm also gonna show what the input was at that point so let's go ahead and do this one sec one sec let me go ahead and save this uh there we go now if you refresh all right i'm gonna refresh okay so now if you type in and then you hit the enter key so type in some some stuff i see it oh it says you hit the search button and it pulled out what i said which is elon musk dude yeah we were yeah we were looking at your code right i just want to make sure we're following you properly okay yeah yeah so we changed the to get that working guys all we did was change the outer div to a form and change and change the button that we want to trigger on the enter key to type submit that's insane like uh if a lot of people end up doing this hacky way of listening to when the key is pressed don't do any of that just do this simple trick and that will save you uh so much what's the trick type submit so you change the div that you're in to a form so the entire all the children are part of the form and then you change the button type of the thing that you want to sort of submit so if we click that button it will launch uh the search function right but if you make the button type submit it also means when you're in any input field inside of that form and you hit the enter key it will submit this button which means it basically triggers the young click got it now why um i don't want to go too much down a rabbit hole but why do we have to make the entire thing oh because this whole thing is a form you want this entire input to act like a form yeah i want the entire that's okay okay got it got it yep so so even the yeah so you know the our input field is actually kind of a custom input field at this point so yeah so that's how you do it which is pretty cool nice so at that point guys what we're going to do is i'm basically going to say do something with the input right so we're going to come back to this point so i'm going to say come back and fix basically at this point right and then what we're going to do is here i'm going to say uh so so we're actually going to use react viewer gives us something called history right so in order to get the history i'm going to explain what this is but we pretty much need to import the history uh and i'll explain all of this in a sec so import use history this is a hook and this provides us with the browser's history right so what it does is it what we can say at this point is when you hit the search button let's go ahead and take you so we're saying push this page into your history so it's essentially redirecting you right so so push this page and then we're pushing you to the search page right so we're pushing into the search page now remember app.js we said if you go to the search page it renders this out right which means that now cause if you refresh all right let's go ahead and refresh here yep refresh and you type in something into that search bar why isn't it showing up okay there we go yep yeah so type something in and then you hit the enter key oh nice okay so now it's actually routing me to the search page and this is where you're gonna build the actual search page that's gonna have all the results i imagine exactly result one result two result three the little like bar at the top yep exactly but let's go back now so let's go back to forward slash so i'm going to make this component reusable now so i'm going to make a i'm going to slightly modify this component so that we can use it in other places right so in the next page on the results page we don't we want the we want that search bar but we don't want the buttons we don't want the google search and i'm feeling lucky button so what i can do is inside of search i can basically go ahead and this is where we pass in something called props right so i can actually pass a prop in called hide buttons right high buttons and by default that value is false so if we don't pass anything in i'm going to just assume it's false right and then what i can say is i can say right this is where the buttons are getting rendered so i can say if we don't pass the option to hide the buttons then i will render out this this is called a ternary yeah let's go tenory opera so you can go then i can go ahead and do this right so then i can show the buttons otherwise i can go ahead and show the same thing where i can show the same thing but i want to hide the buttons right so here very important thing now the buttons here we have in order to get the uh the enter functionality you still need to render the button but you just have to hide it in a very clever way okay so the way we do that now is i will show you so the way we do that is we pretty much go ahead and do search buttons hidden like this uh sorry we just do a button type i can go ahead and give the um a class name to this button so i can go ahead and give these buttons a class name i can say class name buttons hidden and then what i'm going to do is to hide it but keep its functionality i can go ahead and do this i can say search buttons hidden i can say display none important like this right and what this will do is you see now if i go ahead and where we render that if i go ahead and do the following if i say hide buttons you'll see on the right hand side the button should disappear so kazi check this one out yep this is quite a cool sort of reusability tray so now you see what we did is uh if we go inside so you see at the bottom it says hide buttons yep right i'm passing this prop in so if i if i don't hide the buttons then and i save it down this yeah and then if i hide the buttons oh nice so you can okay that's sick so you can use that search bar in the search that bar that you created you can use it in the search page and remove the google search and i'm feeling lucky buttons and then just be good to go exactly but if we refresh here you'll see that it actually does work right so it actually works and even if you type something in the hit the enter key so let's go ahead and type something in and hit enter key you see it still worked wow yeah even without the buttons present because the buttons are actually there on the dom so they're actually there on the web page yeah we're choosing to display none so we're actually hiding them right wow so that's a really cool important point and we do yeah that's pretty clean like in the ternary operator that you're using basically just goes if the height buttons prop is passed use this class that class displays none exactly damn boy really clean yeah really really clean and what we could do is this could actually be you can actually make this a quite easy like a quite neat um you can actually clean a lot of this up by putting it all inside of uh here so you can actually say class name but i mean we'll leave it as this because this is very explicit you can actually see what's going on but yeah you could make this even cleaner so what we're going to do at this point is we have done the search component right so we actually finished the search component so we have the search component down now what we want to do is whenever we whenever we essentially uh type something in the search field and we go to the search page we want to essentially push this search term into the data layer right we want to push this into the data so that we can use it in the search page right now the reason why you could do this in a number of ways you could use this you could also use react router to do this and pass the search term but it's always cool to show you guys how to use a sort of when i say the data layer i'm referring to the react context api yeah so the react context api is essentially where you can push information into it and you can pull information from internet and it's not and it doesn't matter where you are inside of your app right so it's essentially the redux pattern so what we're going to do now is i'm going to show you how to set up the data and i'm going to do it pretty fast and the reason why we're going to do it pretty fast is because we actually have an amazing little snippet where we explain how to use the entire react context api which we actually uploaded very recently which you can go out and check out after this if you get confused so let's go ahead and do the following so we need to introduce a few things here so inside of index.js we need to go ahead and do the following so this is our app we essentially need to wrap it in something called a state provider right so what this is going to do is essentially going to provide a data layer around our around our app right so it's going to be provide the data layer around our app and our app's going to break because it doesn't know what we're talking about here it's saying hang on but you don't have a state provider what is that so what we need to do is go ahead and create a file called state provider dot js right and inside of here i'm going to basically drop a snippet of code right and i'm going to explain each of the lines and like i said guys at this point if you get confused then remember we did we dropped a video which we explained the entire thing in a lot more detail about how you use the react context api right but i'll explain it right here ever in detail so that anyone watching can actually follow along so this is just importing the required dependencies this right here is basically preparing what we like to call the data layer so i i've referred to it as a data layer so it's actually easy to understand but this is essentially preparing the data layer right and then this right here is what we call a higher order component so you see it says state context and then children now the children that it's referring to is this so the app right the app is essentially the children that we're referring to here and then we pass two things we passed a reducer and an initial state a reducer an initial state you can see here i'll explain what they are in a second but essentially the initial state is what that data layer looks like when the app is loaded right the reducer is something which is clever and it listens to changes uh for the that will be needed from there that now this is a hook so this is a hook this is a hook which allows us which allows us to pull information from the data right so this is a hook which allows us to pull information from the data layer so with all of this information so this is again this is just one of those pieces of codes which is very very it's like a snippet of code which is going to allow you to actually set everything up so quick and easily right so make sure you do go ahead and check out that video that we talked about uh that we dropped and it's all about how you can pretty much understand the redux plan and understand the react context api but i'm going to show you the next thing that we need and we need the initial state and the reducer and all of this is going to live in a file called reducer.js it's lowercase because it's not a component so now we're inside of reducer.js so inside of here we're going to have a few things the first thing is we're going to have an initial state an initial state this is essentially what the date what does the data layer look like and you can notice as an object right and all we have inside this object is a term and in the beginning the term is no right but when we sort of add in so when you type in like elon musk you want this to change to something like this elon musk right so this is where the data is going to live inside of initial state right but initial state is essentially what it looks like when that first loads then we have something interesting called action types now here whenever we want to change the data layer we need to dispatch an action so imagine like if you whenever kazi types in the input field and hits the enter key i want to basically dispatch an action which says go ahead and change or set the search term right so this is what the action type is right so this is very important this is what the action type is in here we're just using set search term as our action type now to get all of this working we have one final piece of magic that goes along with everything and this is the reducer okay so this is the final bit and once we're done with this yeah everything will come together okay so so stick with me here so this is the final bit we have a reducer the state is the state of the data layer and the action is whatever we're dispatching into the into the data layer so into the the context api right i like to add a console log here for debugging purposes so that way whenever we do any manipulation to the data layer it will change um it will change it will actually log out the action that we dispatched right now what we do is inside the data layer so the reducer's job is to listen for any dispatched actions that's all it does if we don't know what the dispatch action is it just returns the initial whatever the state currently was but say for example if we know what it is so say for example if i dispatch an action called set search term like this one it's going to return what the new data layer should look like so this is saying return whatever the state currently looks like this is called a spread operator and then also change the term inside of the data with whatever action term you dispatched right so again this will make a lot of sense once we actually come into practice and we actually want to actually show you how this works and again just to reiterate this is um this is actually really broken down nicely and in a visual representation in one of the videos that we dropped previously and it says uh i think it's the missing explanation to the react context api uh or for slash redux so make sure you go and check that out because if somebody said you guys um i do you guys sell hoodies we should we should actually we should surely should yeah we should make some clever programming hoodies that'd be good that'd be nice yeah i would totally cop me as a cover program already yeah that'd be dope if somebody's good at that stuff designing uh hoodies and designing shirts and you also know about how things like teespring works just design it reach out to us on instagram like dm me and then i can actually we can have a conversation because that's something we want to launch we want to actually have a merch and so if you just dm me and you show me this stuff then we can actually like talk and make it kind of go live that'd be really really cool that'd be awesome nice so we've set up the reducer and now what we're going to do is to use this it's quite simple to actually so that was the hard part guys that was the that was the hardest part of the build right setting up this stuff and again we have a video which runs you through the entire thing so i recommend you go and check that out so we need to uh import some of the dependencies here so i'm going to import the reducer and the initial state from that reducer file and import the state provider from that magic statement provider file that we created earlier and you should have and you shouldn't have any errors when you get to this point so you should see the app continues to work as we expect it to but now what we've done is we've essentially wrapped the app inside of a data layer so we can push information into this data lab whenever we want so the search term for example and then we can also pull that data whenever we need to right so now let's go back into search and here what we do is to get that information remember that hook that we built inside of here so this one use state value all right we're going to go ahead and use that now inside of the search dot js so let's go ahead and go to search dot js over here and what i'm going to do is i'm going to go ahead and say this so i'm going to go ahead and pop this line in and basically we need to import the state value so that hook that i just showed you i need to import that and what we're doing here is this is actually it gives us two things it gives us the state so whatever the data layer looks like and a dispatch and this is like a gun that allows us to shoot actions into the data so that we can change it right so here what i'm going to say is break apart the state and give me the search term but in this case we don't need it right now but so i can just leave this blank all i need is a dispatch so whenever we type in the search field what i'm going to do is i'm going to dispatch right i'm going to dispatch an action and the type of the action so i need to insert i need to import the action types from the reducer so this was this thing right here i need to import that so we have those i need to say dispatch a type of action and the type of the action is going to be action types dot set search term right and you can do it like you can do it as a loose string but the reason why we do an object is so that they match perfectly from here to here so if we use an object we don't actually make any string mistakes so that's why i do i do action types dot set search term and then remember inside the reducer here we had term and then we actually changed the term inside the the state with this action.term right so the action.term that we're talking about is here so term so if i pass an abc it's going to be abc but remember we actually track the input up here right so we want the term to be whatever the input was because that makes sense right that makes a lot of sense we just got another donation thank you rb gaming squad he says good work guys love your videos give some project ideas on react awesome dude thank you yeah so now what this does is it dispatches an action so not only are we going to push the user to the search page but now we've pushed them to the search page and we've also said here put the search term inside the data there right and then what that allows us to do then is inside the search component we can now pull the search term that they had when they were at the home page in that google input field so with that said qazi let's go ahead and uh refresh why is this freaking out it's saying you state there we go nice yeah so now let's go back to uh forward slash yep oh somebody said update the title yeah we should uh i guess we still are doing the search term but we yeah we basically just set up we just set up the react context api yeah i mean i guess the whole freaking thing is a google search you know like we're building google search i feel like we're never gonna change that we might as well just change it yeah so now what functionality are we building um so now what we're doing is where we well we just set up the react context api but we're going to be moving to building the search page okay yeah that's really good build search page yeah search results page right yep cool all right i think that is that i think that's clean like that looks really good i'm just gonna put a little yeah that's the official sound of we're on on to the new stuff awesome so steve mccarthy says also somebody has to keep an eye on sonny i'm not sure what he means so now yeah so now what we're gonna do is um we are going to go ahead and test this so because if you type in something like let's type in uh this is a google clone inside the input field okay okay yeah and now if you hit enter we should redirect and we should see that it dispatched an action do you see yeah so that means that now we actually updated the term inside of our data layer to google clone which means inside this component now inside the search component we should be able to pull it right we should be able to put it so how do we do that let's go ahead and go to our home.js go to your app.js this is the search page that we see at the moment this is a search page but this is useless we want to see a search page component we want to see something like this yeah this is the search page right so let's go ahead and create that component so i'm going to go ahead and do search page dot js and then once that loads up i'm going to do rfce so rfce and boom like this i just want to share something so i dropped it in our pwj community uh that frank just landed a hundred thousand a year consulting project at sonos to build their new react uh our radio station product with react and react native and then david jonathan who was actually on these live streams if you remember yeah he's now in pwj and he's like congrats frank really excited for you my friend so uh soren who's awesome and then devin gray who also was on these live streams goes that's dope especially because i hate their current radio station apps please fix it so i can enjoy it sonos soon again and then frank um you know the person who actually got this one he goes i'm so excited to share this win with the entire community damn that's amazing dude it makes me so happy guys like i like the video for frank yeah exactly so guys like it's it's really like a no-brainer when you see that kind of stuff like the course whatever the course costs frank just made six figures inside right and literally and i shared this too with everybody like two weeks before that jen got an offer for 96k a year based on the covet tracker project so these are like i said here these projects that we're showing you are as real world as it gets yeah and like truth be told like what we're offering the course for at the moment is hugely underpriced like we will be pushing the price up soon so it should be 5 000 10 000 like you know coding boot camps but we are offering it in a way where more people can actually join it exactly exactly so that guy's like jump in why you got a chance because it will go up eventually and and because i mean like it's so much like the price is guaranteed it already went up and now it's gonna go up again when we do the react challenge in one to two weeks from now yeah exactly and also if you're pumped about that drop a thumbs up nice that would be fun yeah yeah so we're going to add a class name for bam so let's say class search page let's carry on guys so let's go ahead and do import search page dot css over here i'm going to go ahead and create that page so search page dot css search page css over there and we should go inside sonny if you get the 2k likes i'll buy you dinner tomorrow oh nice [Laughter] let's go guys oh man that's so funny you heard it here first guys get me those 500 likes yeah what if like that was your biggest driver i know right it's getting free dinner [Laughter] he's just on the streets like homeless bum coding in php building clones oh man let's go so we got the search page uh and now inside the search okay so the search page is one of the most sort of like fun components to build and we'll go through it and we'll break it down bit by bit um but basically it consists of a bunch of different sections so we'll stick to the way we do things typically and the search page currently has a header so let's go ahead and add that so we've got a div of the class name of search page this is search page underscore underscore uh header like this and i don't know why it does that but here we go so we've got this right so we've got the header at the top of the search page and then we have the search results underneath it right so the search results are going to be essentially underneath it here so we have the header and we have the results so two sections inside of here like this right we've got the header and the results and what we can do guys to test this out and have a little bit of fun remember we just pushed a value into the data layer so let's go ahead and actually check if that value came through so remember i said that when we whenever we grab a value from the data layer it gives us the state and the dispatch right so what i can do is firstly i need to go ahead and import the state value hook so use state value like this and here what i'm going to do is i'm going to destructure the state and say get me the search term which we put inside the state and now what i'm going to do is just to test if this works i'm going to say render a h1 tag with that search term inside of it if it exists right so this should be correct like this and then here so now if i go ahead and do say it says search page is not defined so now if we go to home.js and we go here search page inside of home hey ananya says he goes qazi i will be joining pwj in a few awesome once you're in there i will know you're in there in slack just give a shout out and tag me and i'm going to respond to you and then tomorrow livestream uh will definitely show that you have joined it i think that's going to be epic yeah that would be dope that'd be awesome search page no no that's fine yeah i'm good i'm good so if we save this now what we should see is inside i think hajira and the youtube comments will know what i'm talking about and maybe like one one or two people might but i'm not gonna say anything let's keep going yeah right so now if i save it what we should have is it says module okay yeah oops somebody actually pointed that out before so i saw that thank you guys uh so if i do that now so because if you want to go to the forward slash so let's go back to the forward slash yeah and now this go ahead and type in like any search term history tesla stock or something like that nice you're muted for a while okay all right so i basically said a robin hood app i mean that's not that interesting anymore and i said i love that you're actually pulling the search term man and showing it on the screen now we're actually able to uh get the search and actually query it and i'm sure the part that's coming up soon is going to be the google search api yeah exactly exactly yeah so guys dude frank this is awesome frank just said i can make uh hold up hold up i'm i'm getting uh ajira's like i know right all right frank basically says um i can make the shopify site for the cp shirts and hoodies that is awesome frank actually that would be really dope would love to like share it with everybody well it says easy i can make the shop oh nice kenny oh sick yeah so yeah that would be sick um awesome so we've got the rubbing head up being pulled through so the search term gets pulled through now which is nice right now obviously what we want to do at this point is we just want to kind of run a search on that right so i want to actually go ahead and connect to google and run a search on it right so what do we need to do in order to get that working so firstly we actually need a key so we're going to be using something called the custom search api so kazi if you go ahead and go over to this link right now i'm going to drop it inside of i'm going to drop it inside of um inside of here so you see it got it yes let's go let's go to that link command t command v enter by the way guys all of you guys should be doing that exactly people move way too slowly on their computers yeah all right here we go oh kareem the crew just said kazi how do i join pwj link in the description uh you can actually go ahead and check out and there will be a link where you can go ahead and here's how you can join it cleverprogrammer.com pwj that's it yeah and then you go here watch that badass video we have it's going to give you exactly what you're going to get inside of this program and then you know once you like it just jump in that's it that's it yeah cool let's keep going we also have a free training in the description guys so there's a link to the program and the free training in the description make sure you check that out um awesome so i'm here so yep so now you're here so if you go down to all right let's go down and it should say at some point uh go back up sorry so you actually need where is this it was in this page so let me go ahead and find this what are you looking for basically we need to get a api key so what you want to do is click on that um okay yeah so click on the identify your application so go up to the top so you see where i didn't i got it so you're going to click on that guys go to this link yeah click on get a key so this is the custom search api should i have it uh yeah yeah so you want to hide the screen yeah i'm hiding the screen yeah so at this point so you could probably show this bit quasi but don't click next yeah all right i'll show this bit right over here api okay so um let me actually switch to my other account real quick and now give me one second you guys now i'm gonna click get a key all right and um here on the create a project i'll choose the project that we're creating right now yeah the google clone yep and don't click next once you've done that but google click on the google chrome now i'm going to click next i'm gonna click all right i'll hide my screen next yeah it's gonna hide your screen and then click next and then what will happen here guys is you will get an api key right so you want to save this key and the reason why we're not showing you guys the key is because you have a free limit of 100 queries a day right which is enough for a portfolio but we don't want to like it's just it's just oh that's nice dude come on bro your boy is clean guys your key will look like this you know i didn't do that doing a little bit of live editing so that's what that page should look like by the way i'm just hiding mine yeah yeah hide it before you click save and copy here cool all right so now what are we doing sonny what do i do with that now awesome so once you have that key guys what you're going to do is let's go ahead and create a keys.js file so i'm going to go ahead and create keys dot js file okay like this yeah and what i'm going to do here is i'm basically going to hold on hold on hold on we're not looking at anything you're doing bro one second oh yeah so i just i just created the keys.js file i see it yeah so now what i'm going to do is i'm going to go ahead and give me one sec let's go ahead and do the following so you want to write the following inside of that so export const right so export cons api key and it equals your api key right and then export default api key so this is going to allow you to essentially uh put that value here and then use the api key throughout your app all right so at this point what we're going to do is uh i'm going to leave this screen so so and i'm going to ask quasi to replace this on his key actually unfollow me quasi for a sec bro do you want me to create like an end file and then pop it in there no we can do m-files but i think for this build we'll do it this way because they won't see this are you gonna you're gonna remember never to go into that file yeah all right let's do it bro i'm ready let's go hey i just pasted it nobody can see it oh wait okay [Laughter] level like you got to actually add and add in some hand eye coordination like mobility yeah just pretty cool so you want to basically you want to hide that so because you want to close that file just in case okay i just saved it i'm closed out of it all right okay so now we have access to our api key right so wherever we are we can access access to it so i think you might need to follow me again after that stuff somebody says qazi you're looking sexy bro thank you bro i appreciate it i appreciate it yeah john john james valencia cardona says one click away and you're busted yeah no it's all good you know i like to be smooth like that we like to live on the edge guys nice so with that what we're going to do now is go ahead and we're going to create a custom hook right so we've never done this before yeah we're at 184 dollars in super chats today dude that is crazy that is absolutely crazy i mean we might we might even break 200 today but you know let's keep going insane so guys what we're going to do now is we are going to go over to so in order to actually use the uh the google search uh sort of search uh api you actually have to do one more step right so you have to go ahead and go over to this link causey so this one here this is cse.google.com for cse create new so click that one okay i'm gonna and i can share i'm gonna show that on the computer right yeah yeah this this stuff we can share all right because this even if they have this i hate how nothing in google is responsive like look at that yeah it's super cool like firebase was actually frank told me this firebase was a startup company and i remember because i actually followed them when they were start before they got acquired by google yeah quick question yup um so uh should does it should it be all under the same email or does it not matter because this is a different email i'm looking at right now then you know what i'm saying oh uh yeah let's make it the same let's just just so because we ran into some stuff on the live but let's change it yeah i mean i want to change it but it's kind of not allowing me to like you know what i mean like it doesn't even give me the option right here if you're seeing that uh click sign out um okay god i hate doing that okay like my whole sinking is paused and my entire bookmarks oh my god what are you doing to me bro you know what you know what hold on hold on i'm not going to do that i'm i'm going to stay locked in oh you don't get incognito maybe yeah i was just going to do the incognito all right because your approach is it's too costly all right here we go create new let's open up incognito paste boom there we go now type in my email okay that should be good to go in a second okay it's asking me to verify on my phone nice and guys if you're enjoying this and you found like quite valuable whether it be like the react context api whether it be like this stuff what we're doing right now just literally all we ask is you smash the thumbs up button oh man that will help get this video out to as many people as we possibly can i wish there were more hurdles for me to jump over to get to this page but all right what do we do now right now what we're going to do is we're going to type in www.google.com so google.com and then what we're going to do is we'll just name this one google click create but we're not done there because they don't make it that easy this is kind of like aws so you want to basically go to edit search engine what where on the left on the left so yep and then click on setup yep and here you see where it says so let's go down uh down and then search the entire web click uh toggle that oh wow nice yeah and what's it called and then what we're going to do is uh we're going to go up let's go up to a search engine id so you see where it says search engine id you just want to grab that id got it yeah and let's just uh let's paste that inside so keep hold of that for now yeah so guys you're going to need that so keep a part of that and what i'm going to do is i'm going to create a file called use google search right use google search dot js so you anything that has used in front of it is a hook right so hey come on bro exactly so here i'm going to say rfce so like this and i'm actually going to go ahead and change a few things i want to say con so i want this to be an es6 function it doesn't make a difference but it's going to be super clean are we still live okay yeah should still be uh okay it says my chat is disconnected so i'm just gonna refresh hopefully um hopefully everything keep going keep going sunny and then yeah i'm just joking okay no worries so now we where we have used google search i'm going to go ahead and it's not we don't need any of this stuff because it's not actually like a component like that as such but what we do need is we don't even need to import react because it's actually we need to use state and use effect so i'm going to import those two things and then i'm going to import the api key that we just sort of set up earlier from our keys so i'm going to import that key from our keys and then what i'm going to do is um save it oh kazi can you see my i can't see my code on your screen um okay let me wait why is that i'm fine yep we're back now we're back yeah yeah so now where it says use google search what i'm going to do here is i'm going to basically go ahead and put in the context key over here so i'm going to make a const contact uh context key and then cause if you want to replace this key with so this one right here replace that with our key that we just had got it let me do that boom done yeah so you're going to need this context key and that basically tells google which search engine to use so the one that we just created which searches the entire web that's the one that we want now what we're going to do is we're going to create a piece of states this is how you use it this is how you make a custom hook right so here what we're going to do is this hook is going to have its own piece of state called data right it's gonna have its own piece of state called data right so like it's just like a functional component does it's gonna have its own and this hook whenever we use it has a use effect right so whenever we use this hook it's gonna fire off a use effect and this use effect is dependent on term so term here right now so what we're saying is whenever and term we pass in by the way and we pass the term as a value inside the hook so what we're doing here is we're saying we pass in term to this inside of this uh this hook and then whenever term changes we're going to fire off this code inside of here okay it's essentially what we're saying now we need to do an async fetch right so some kind of function sunny real quick sunny real quick do i need this open any longer this here no okay yeah i'm just gonna keep it there like accessible anyway and then let's go to our local host now what your so what you're explaining about this term what you mean by this is if so the term is going to be whatever somebody types in here yes yep is that is that right or am i making that up no no that's correct yeah because remember what we do is we type it in there then we dispatch it into the data layer so it's now sitting in the data layer and then when the search page we're going to be doing is pulling that term and we're just going to be using this is a data layer variable so this will be the this will be a data layer variable yes got it okay so data layer and then whenever this changes is when we want this use effect to be called this hook to be called exactly yeah so for example if we not only typed in a new search not only did we hit enter on this new search but we passed it to our data layer our data layer got a new term like elon musk or whatever and then it fires this use effect and this use effect basically will get all the search results using the google yeah right and then take you to the search results page uh so it doesn't it doesn't take you to the search results but it'll get the search results yeah this is responsible for getting the search so when you get the search results are we putting that in the data layer as well where are we putting the results when we get them no no so this is actually a hook which means that like so imagine inside of the so this will return some data so you see here and then what happens is we pretty much will use it like this we'll say got it got it data equals use google search okay okay got it so it'll return the data and then we have access to it and then we just display it on the page okay exactly yeah so it's a really clean hook like this is i'm i was quite proud of him when i wrote this today like it's a really really nice hook and it's super clean like at the end result is really nice so um what we do is here we need to basically we want to do some kind of async fetch inside of and use effect and now whenever you have an async use a async function or async any action inside the user effect you have to make a function so for example here i do const fetch data and this is going to be an async function all right so it's an async function and what we're saying is um uh we're saying fetch right and then we're gonna put the url so i'm gonna use backticks because i'm gonna do string interpolation and i'm basically gonna go ahead and pop in uh the following so this is the url you guys are going to need right so this is the url that you guys are going to need so you can pretty much pause the video copy it do what you got to do and this is the endpoint that connects to google's custom search api and what happens is we pass in a key right we pass in a context which is the search engine the cx and this is takes the context key that we just put at the top and it takes a term so this is q stands for query and this is the term that we pass in right so that what because we set everything up what we can say is we can say make the response when you get back a response so when you get the response back go ahead and change the response into a response.json so basically get the json from the response right and this shouldn't be capitals it should be so i'm going to make this very clear i'm going to say response hey let's go you don't need marabon to buy you dinner anymore frankie frank it says sonny and qazi would love to send you guys an uber eats credit as a little thank you for helping me land a sonos gig let's go tonight that's so dope thank you dude that's insane thank you bro yeah thanks for saying thank you dude all right so now what we're gonna do is we are going to so we basically said when we get the response back we want to say change the response to get the json from the response and then what we're going to do is once we do that you can chain the ends up by the way guys so you can actually chain them up so we're going to say then whatever the result is so that json that you're talking about we're going to basically set that we're going to set the data to that result right so this is very interesting what we're doing here we're saying the data the piece of state that is par inside of this hook right we're setting that data right and then what we're doing is we need to execute that function so we're saying fetch there so this is actually a custom hook so this entire thing is a custom hook this is an example of like like you have use state use effect use everything whatever you want to do this is an example of a use google search we just created a custom hook okay and like the power of this is insane because what we're doing at the end is we're saying return data as an object it returns an object okay got it yes it returns an object yeah so now what we can do is we can actually go ahead and test this so we can go ahead and do this we can say go back to search page and we can say const data so whatever's returned as an object like what we saw use google search like this right and remember google search took a term right so it took some kind of time and that term we're pulling from the data layer right so that's going to be it's by default it's going to do this right so now what we can say is we can say i need to import the use google search so let's go ahead and do that so use google search let's go ahead and import that from the top here nice and now hold on one minute where did you import it at the top oh wait um how come i don't see it uh oh it's gonna have sync one sec um can you fix that i'm gonna highlight this comment this is a good comment by frank oh a good idea is to start with fetch since you don't need external dependencies and i recommend that as well once you start getting more familiar you guys can use axios as a powerful upgrade so that's what i would recommend for you guys like use axios later just first do it like this and here is the import use google search from use google search yeah exactly so i agree with uh with what firing said so you want to actually use fetch first because it just keeps everything clean axios is something really good though once you once you sort of get used to it and you get used to how it works um so we have this constant area called use google search term right so now what we're going to do is just to test this as well so i'm going to console.log the data right so my snippets are working console.log data like this right now if i save this let's go ahead and save this right so kazi if you want to type in like tesla for example right yeah so now before you don't hit insane uh sorry don't hit um enter yeah what the hell i don't know something something popped up and it was like insane content it was like a notification oh yeah yeah so something popped up i kind of was like but here don't hit enter yet uh type in like tesla or something got it so let's go to tesla oh don't hit enter yet you said right oh that's fine so you know okay you so so let's clear the uh the search so let's clear the the sort of um inspector no no no so so go back so go back to uh okay yeah nice so now they're typing tesla yeah and what we do now is whenever when we hit enter a few things are going to happen right we're going to hit enter it's going to redirect us to the forward slash search page right then what's going to happen is it's going to push tesla the search term into the data layer where it's going to push that into the data layer once that's in the data layer you can see in search page we pull it by using use state value so now we have that search term and then we use our custom hook that we created called use google search we pass that term and then we extra that will end up making a call to the google uh custom search api and then we return the data as an object right so it's a super super clean implementation of this now kazi if you want to go ahead and hit enter hit enter now boom yep so hit enter and if you see it passed so let's go ahead and click that yeah so this entire response is from google now so let's go ahead and click item hold on my face is blocking a lot of stuff yo damn tay has just donated a hundred uh rupees thank you so much for that it's crazy because uh because yeah earlier it got wild in there and i booted him out of chat because i got like i'm like man i don't like the vibes here but then he explained that he was following our content and been viewing it and i was like okay okay and then he came from another account so you know and thank you for the donation i really really appreciate that so i'm gonna what i'm gonna do is i'm blocking it a little bit right now so let's go like this and i think i'll make it even bigger so everybody can really see it clearly and this is what we're getting back you guys yeah so let's click on the items drop down so that's the one that will show us some interesting stuff so we search for tesla right so let's go ahead and click on the first item in the array okay so let's go ahead and click it so when you say first item you mean zeroth item yeah zero okay okay got it not trying to be a dick it's got like it's got like some tesla stuff inside there right so you can see that's actually returning a search term like a search result which and it has a bunch of information wow even the display link teslatheban.com the first one is tesla.com that would make sense yeah so he's actually going ahead it's using google to actually go ahead and do this right so remember don't spam this because you're gonna have a hundred limit i think it's a hundred limit free limit a day and then you can pretty much put a card on and then you can if you want to pay for it you have a huge limit after that for like five dollars but i would say stick to the three quarter and i'll show you a little trick now right so that entire response that cars you just got right so if you go ahead and open up the network final quasi ah okay i will yeah so go up network and click on um the so let's go ahead and make that a little bigger and let's just put the camera on us for a second because i don't want to show something it's going to check if it's good yeah yeah so let's go to all all okay so you know the camera is on us right now right yeah yeah that's fine i just want to check one thing before we do it so you see that bottom the on where it says v1 key equals yeah yeah click that so you see it it's going to end up showing the key here so if you click that and then you um make this bigger yes so click down click on response yep right there yeah so what we can do here is uh you can actually say if you drop blur this so make a screenshot of this and blur out the key on the left on the bottom left hold on is this the key yeah so basically let's do it let's do a screenshot of this and show them how we got to this so just draw some arrows that you click on the network tab you click on that um and then you click on the response to see does that make sense yeah all right so all right cool hold on i got you bro i got you don't worry don't even trip dog all right we got this here yeah all right now i'm gonna do this very carefully by the way i'm not showing it right now right it's good it's good it's good all right cool yeah so step one click network guys and then step two make sure you click response over here and then this is gonna show you and these are all the results right here yeah so this is really important guys so the reason why i was making this a point because once you see this response i want you to go ahead and do command a on that response and actually copy everything right so copy everything now this is really handy for when you're developing because you don't want to keep attacking the the api because you run out of your quota if we keep doing that while we're developing we're going to easily use up 100 requests so we basically should we should we put it in so command a to select everything go into your actual response command a to select everything and then command c to copy everything now where should i put it should i just make a new file with like response yep so response.js response.js so i'm going to pop it the entire response into here and i will go and get out of my network tab and i'll go back to console hit x now i'm going to share my screen with everybody and now here this is the full response that we got back now what are we getting back in this response you guys like it's everything that you would type in if you typed in tesla that's kind of what you would get from google itself so if i just go to google.com and i type in tesla i imagine i would get the what would i get so there's tesla.com so let's see if it actually has that so let me look up tesla.com it has that yep and tesla is accelerating the world's transition to sustainable so see tesla is accelerating the world's transition to sustainable energy with electric so it's like actually giving me what the real google would give me yeah and you see this the display link is www.tesla.com which is you can see it right there which is awesome yeah exactly displaylink is tesla.com and then the display link for the next one is also yeah let's go down yeah tesla the band starts to show up soon dope okay so it may not be exactly to what the what google has done but it is is pulling it from google because remember they might have set their the engine up slightly different but yeah the point is it will get the majority of the search terms right thank you thank you tejas for another donation thank you onorak for another donation and anurag actually says check the dm for merch that he made for us so that is awesome all right so with that said guys we got that massive response right so how do we actually let's pass that response into something that we can use and the way we can do that is if i go ahead to the top of the file and i say export default right now what we just did is if i save this uh prettier's not going to do this the way i need it okay so what i'm going to do now is i'm actually going to basically take it to your printer in your computer save it there and bring it back genius that's good [ __ ] man i'm gonna do that save this [Music] nice that's smart okay so now what we're going to do is we have the tesla search right so you basically want to prettier guys if you install printer into your computer it will do that for you so you actually just make this into an object that you can use and then we say export default right export default and then that will allow us to use this response as a as an object right so now the reason why that's good is because what we can do is we can actually develop using that response so because you need to follow me again all right yeah so now if you if we go into a search page right so here is the live call right so this is our super powerful live course i'm going to say this is a live api call this one yeah and to make that super clear for you guys what i'm going to do is i'm going to chuck that above here like this that's the live api call this one yeah but we don't necessarily want to always do the live api call so what we can do is we can say cons data get the data from our response instead and our response could be from our local response file so this will actually go ahead and it's the exact same shape the exact same everything but it's just pulling it from this data instead so now um if i do console.log data so cause if we go to the search and we open the inspector i will open the inspector right now so boom okay now if we refresh and we open the console okay refresh yeah and now you should see we still get an object right but we're not pinging the the the google search term we're just getting that tesla search that you've done previously yeah so we basically this is like uh this is called um uh i can't remember it's called masking no it's not asking yes um yeah anyway it's got a name for it but basically what we're doing is we're mocking that's it we're mocking the api call right so now you can see that that search term so if you click that downward arrow kazi insert in the in the console there you go we've got we've got that exact same response so now what we can do is we we don't have to worry about using our quota up and what we can do is at the end of it we just can comment this out and uncomment the actual live one and it'll work right nice that's a very that's a nice little trick that you guys can do to sort of get around quotas and stuff like that because i know that can become quite a headache especially when you're developing all right so we now have the data from google we have the good stuff right so let's go ahead and make this all sort of pretty and look nice now so the search page header what we're going to do now is at the at the top of the page we're going to have a link and inside that link we're going to have a search page logo so i'm going to go ahead and save this so we have the link at the top and then we have an image this has a class name of search page logo and this is just the google logo right so link is not defined so we need to go ahead and import that from material from react group dom like this save that and then what i'm going to do is i'm going to go ahead and go to searchpage.css and i'm going to do the following i'm going to say go and target the search page logo search page logo and apply the following to it so i'm going to go ahead and do this so i'm going to go ahead and give it uh contain height 50 margin right 50 pixels so that way whatever's next to it it's not going to touch it okay then what we're going to do is we're going to go back and we're going to carry on so we've got the link at the top so that's cool and we want the next part is i think there's something wrong with the google like the search engine what you made uh so josh patel actually said that he searched um find me a better duo than sonny and kazi and he goes it responded with the 404 not found nice [Laughter] [Music] i was thinking i was like oh [ __ ] what happened nice that's awesome thanks bro thanks nice so now what we're going to do is and guys let's push the 2k likes come on give me that free lunch let's go so let's go and next what we're going to do next is inside the search page header i'm going to basically go ahead and add a div here and i'm going to do this so i'm going to add a div with search page header and i'm going to change this one to the header body right so this is where the search is going to be in a bunch of other things so remember we built the search out earlier so to get it working here very simple i literally just do this i say search hide the buttons i don't want the buttons in there so it's as simple as that and this is the power of react so we just coded that up earlier and boom i can push that in there and everything will work so let's go ahead and see why that's not working it's because i've done two dots and we don't have it in components we have inside search so i can go ahead and save that and now we can see that look at that we have the search bar at the top which is awesome right we have that working and then what we can do is we have a bunch of like options underneath it so first i'm going to go ahead and style some of this stuff so the actual header itself i'm going to give the following to it i'm going to say it's display flex position is sticky because when we scroll down i want it to basically stick i'm going to say top of zero so it's going to stick to the top background color white z index of 100 so that way when we're scrolling down it always stays at the top of the screen so it'll be on top of any elements underneath it align items flex start i'll show explain what that does in a sec padding of 30 pixels and border bottom of one pixel which is why we have that little gray uh border color because we might need to do a 50 50 split now um for the responsiveness because i didn't the search page is a little bit less responsive so um let's go ahead and i think we're muted camera when you said 50 50 split so got it okay you mean boom like that yeah let's do a 50 50 yep nice uh and then what we're gonna do now is go to so we have that yep nice so now what i'm gonna say is inside of the header body what we can actually do at this point is the search itself so that search box uh so the search input item and this is where bem comes in really handy what we can say is go inside the header body right so where we have our search so this one here go inside the header body where we have our search here and basically go and override those search styles so in search we had search and search input so go inside find that change the margin top to zero unset the width unset the margins that we applied before and unset the max width and what it does is it overrides the style right so it overrides the styles that we previously put on it which is kind of nice right so that means we can reuse it but we can actually just from our css go ahead and change the styling of that search box um so that's really clean and then underneath there we have a bunch of options so let's go ahead and check out the deployed version kazi let's go ahead and check out the deployed version yep so boom and then let's type in the search terms like abc is it going to take us to that page uh no because i'm using a mock i did i redeployed it with a mock so i got it we did it yep so now you can see at the top of the page we've got uh where it says all news instagram images shopping maps and et cetera those things those are the options right so we're going to refer to those as like options okay so now what we're going to do so hold on let me just draw that out let me draw that out what you just said and just dropped a huge donation dude whoa that is damn thank you jessica jessica says guys you're so handsome and she goes moreover you're super talented in code thanks your stream i found how easy it is using firebase with react please keep doing it thank you so much i really really appreciate that that is huge i get my handsomeness from my dad and i'm sure sunny gets this from his mom and uh yeah you know my mom was handsome too you know yeah that's insane thank you so much jessica that means that means a world like i mean is that i think that's a hundred dollars dude that's crazy thank you so much thank you we're about to we're gonna break 200 soon i'm pumped yeah oh my god thank you yeah um so now we have the header um the header body wait wait wait wait wait wait before we do that so we were gonna try this so when we go to search what were you saying we're gonna work on oh yeah so we're working on those um search page uh options so they're all news images shopping maps okay let me just draw that out it's very clear so okay so uh what about tools and settings uh yeah so all of that comes under the uh the uh options basically search page options yeah all right so this is going to be search page options okay is there any reason why it's called options yeah it's just when you're coding like this really quick in the library the namings the names always get a bit of a headache so in this case i just called it an option got it okay okay no worries no worries i understand now so yeah perfect okay i think that's pretty good so basically should we write working on the things under the search for our search page options working on search page options yeah working on the let's just maybe working on the search page because this is literally going to be building out the search page well that's what i'm yeah i have at the top working on bill search results page so this one we could do we could do uh building the search page options yeah okay cool building items yeah build items under yeah search bar i like that yeah i just like it when it's just plain english and i think like even developers right if you're writing commit messages it's better to just write plain english yeah exactly it's very true all right cool so this is looking good awesome so you want me to just go to the search page yeah and then just stay there yeah so go to the search page and remember guys we are actually mocking the response so we will see like uh once we start coding up it will just be pulling that mock tesla response so now and guys i saw a question earlier are we pulling from the google uh custom search api yes this is coming from google so it's going to be a complete build so with that said next what we're going to do is we're going to say div so div it's going to be class name equals search page options search page options like this right and this is going to be a container which can hold all of that stuff together right so now what we're going to do is i'm going to say um so i'm going to say dev search page options nice wait one sec what's going on here wait has it gone out of sync again i think it has mine looks super weird compared to yours let me go ahead and close that search page search page results wait i didn't like that oh yeah that was underneath right that was underneath this is the divs yeah oh dude it's because of that it's an annoying thing you know when it adds the extra closing tag yeah yeah yeah i don't know why it does that i don't understand super annoying yeah yeah right so now we've got the search page options so here i'm going to write oh thank you very much phenom just dropped a donation awesome dude he goes do you make android apps too we're we're going to be dropping react native soon so that that will actually be both ios and android yep so now what we're going to have is i'm going to split this into two containers i'm going to have options left and options right all right so options left is going to be inside of this container so it's going to div like this and then i'm going to have another one options right and options right is going to have the stuff on the right hand side options left is going to have the stuff on the left hand side so with that said let's go ahead and start pushing in the thing so every single option i'm going to make it easier for us later on frank just dropped another bite oh my god he just sent you both some ubereats credits nice nice i'm gonna order uber eats today thank you frank yeah thank you so much dude he goes thanks for all the work you do treat yourself yep i will and i'm now trying to um get back to my fitness fitness grind frank so i gotta be eating clean you know you know how clean stuff gets expensive so i can use those credits that's insane thank you dude so now what we're gonna do is we have options left so every single option i'm going to put inside of a container called search page option right so i know we're getting a bit nested here but it will make life a lot easier right so the first one i'm going to have a search icon and a link so we're using a react router link search i got a link to all and the option is just going to be all okay so i'm going to go ahead and import that here and you guys will see an example of what that looks like so let's go ahead and drop that in and also we need link from reactor or dom so let's go ahead and pull that we we are we do have that already so you can see it says all right so we have it there and i'm going to go ahead and copy a snippet now so i'm just going to keep the screen to the third just because i want everybody able to see the code i think people understand that this part might not be completely mobile responsive but once it goes full but neither is google but this is still more responsive than google so it's fine i think people will get that now yeah one thing i was gonna say was once you do want me to switch to it being bigger screen just in case there's something we need to show then let me know and i'll do that so nice damn we're at 198 we're two dollars away from hitting the 200 donation goal we've never hit that so that is epic thank you guys that's insane nice so we added the search icon and this link so i basically added a bunch more here so this is what i've gone ahead and added a snippet from our code um so you can see here right here we have the rest of the the stuff here so you've got all of these icons description image local offer room and more vertical and i'll show you what each one comes out to be and this one is the news image shopping maps and more all right so let's go ahead and make the appropriate imports so let's go ahead and do the imports at the top so here you go save that file and now we'll see that those icons should be there alongside the uh the text right so that looks pretty good right so we have all that stuff um and then what we can do is we have options right so options right we're gonna have the same thing but we don't have the icons in this case so and so what i'm going to do here is drop it in like this and this internet so we've got the search page option but this one's just going to have a link sync settings and this one's just to have tools it doesn't have like an icon like these ones okay so i'm going to save that as well and you can see right now the layout is pretty crap it just looks like it just sits on top of everything right so i'm going to go ahead and start styling at this point before it gets a bit too crazy so i'm going to say for the options so for all of the options let's go ahead and apply the following display flex align the item center and make the color gray so if i do that you can see header options left and options right get pushed side by side because now it's in a row right so that's the first reason then what i'm going to say is for both for both options right and options left do display flex so that's why you can see now that everything goes into that into a row right so that's really clean then i'm going to say for the options anchor tags and for the options right anchor tags so for everything basically all of the anchor tags change the text decoration to none and the color to gray and that means it gets rid of that link look and feel so we don't want that link fill right and then i'm going to have options right so i'm going to target options right and i'm going to say it shouldn't touch right now settings is right next to that more icon it shouldn't touch if we want a margin left of 80 pixels so kazia's make it full screen i'll make it uh let's do the let's do half and half just for this point there we go so half and half just for this point and then we're good yep so here we have that and then what i'm going to do is i'm going to say for the option itself i'm going to say display flex and a line item center with a margin right of 20 pixels so this should get all of the icons centered centered with the text and it will give a margin right of 20 pixels which will space it out right so there we go see the sign already starts to look a lot cleaner yeah now we're going to say for the anchor tags inside of those options so for those links given that it's looking really clean look at that yeah so for margin uh left so give a margin left to that anchor tag so that they're sort of all news images shops and maps etc give that a five pixel margin let's say it pushes itself away a little bit from that text and with that guys that's pretty much that done so that's pretty nice and they're actually clickable links which take you to forward slash all four sessions news etc so um you can go ahead and build out those pages if you want to do that right um so that's cool so we've actually got the the options part finished so now we've got the final part which is the search page results so let's update the top bar because it is a final page building the search page results all right and this is where the nice last bit of magic happens hey so we're finished that part let's hear it with the air horns guys if you enjoyed that part smash that like button subscribe to the channel and turn on the notification bells because i think this is important to let you know that we're going to be doing these types of bills on a very regular basis and next week even though we don't have it completely mapped out but we're going to be building some amazing projects some of the things that are on our agenda are linkedin clone facebook clone um what do we what else do we got i think we're thinking about discord clone yep yep so we got some heavy hitter projects coming up so make sure you subscribe to the channel turn on the notification bell and uh keep helping us be the number one fastest growing coding channel on the planet yeah exactly and guys i saw a few questions there saying can you guys build a project using the man stack oh yeah so uh yeah me and nars are actually going to be building a few apps on that and and a few of the other team members so yeah 100 damn dude you can even pair up with david rokosi like this guy is putting in some serious work yeah that would be dope i i i asked him about tinder and tick tock and he already built tank uh tick-tock clone completely like already and it's using express and other things nice i love that dude yeah 100 we could do that that would be fun yeah all right so travel zayn says wow it's so scary how real it looks compared to the actual one beautiful work kazzy and sunny we love you he's talking about how similar this looks to actual google yeah it's insane i actually got confused i was telling kazi before we went live oh yeah i actually got confused a bunch of times because i was googling stuff and i was like oh hang on i'm using localhost yeah it has a phenom says i'm my android developer here but you guys are op hell yeah nice thank you bro thank you so much and guys all we ask is if you're enjoying the video and you haven't already done so just please smash the thumbs up button and it will just help the video get out to as many people so that so many that that extra person would just get that value from this video yep dope nice all right let's keep this bad boy going so now what we're going to do is we're going to say we only want to render so we're going to put a protective block and we're going to only render that the search results if you provided a search term so we're actually protecting ourselves here uh by doing this so we're saying do that right and because at this point we can actually do a quarter or we could do we could do a half half split maybe i think that would be good yep so half off skin now what we're going to do here is we have um so yeah so we have the research page results so the first thing we're going to do is the result count right so where it says about 5 million results or however how the hell google do that i don't know but basically we're going to put that at the top so we're going to do that first we're going to say search page result count and here we say about so something like this about three million results or something yeah remember the results and then it's got brackets and saying something seconds would be like 0.3 seconds or something and then it will say four and then it'll say whatever search term you put in so it'll be like for tesla for example right so if we save this and we refresh the search page so this refresh to search it boom so now we should see underneath uh oh tom wasn't biased yeah so here i'm going to just say i'm just going to replace this with true for now and then we'll put that in at the end yeah so you see it says about 3 million seconds or something 0.3 seconds for tesla right so i want to actually pull this from the information so this information is actually coming in from that response and i've actually done the hard work of diving into that object for you guys and this is what you need to type in so data and this and we put the optional trainings because data might be no for a little bit while it's fetching right and then what we're going to do is we're going to say search information so it gives us back a search information object and then it gives us back something called formatted total results so if we save this now you see it's actually 266 million that came from directly from the results right the next one we're going to do is for the seconds so for seconds we can go ahead and replace this with the seconds and let me go ahead and just do this so we've got data search information formatted search time so we need to refresh the search um i don't know why it doesn't do that yeah hey guys i got a quick i got a quick question i want us i want to just ask this to everybody um i want to see if our twitch has finally started working properly because our twitch kept being broken so i dropped the link in the chat and um if you guys want to check out our twitch it's right here whoa what's happening so let me bring that it's right here it's a twitch.tv clever programmer this is the url so if you guys can just go and take a look at that and just see if that's working properly and having weird feedback or issues because that'd be huge because we want to grow on twitch and we were having trouble last time because our stream just kept giving us tons of errors yeah that'd be massively useful guys nice so let's go ahead so we saw we were pulling the information we had data search information formatted search time there we go and now what we're going to do is we're also going to say 4 and rather than here doing tesla we're going to say term right so whatever the search term was and what we can do is we can replace term here and i can actually go up and protect um i can actually just say term equals by default let's just do tesla right so if you don't pass in the time we we protect him we say oh passing tesla uh that should work yeah so now if we refresh cozy i think i don't know why it doesn't it's not doing the refreshing in a nice way but we're gonna have to refresh identity oh we did right okay so this doesn't work this protection thing so i'm just gonna say true here and it will say four and it'll be blank right so let's go ahead and do this and i'll say four blank but that's fine because it will be mapped to the term right so at this point what we can do is we want to basically map through all the items remember we got like a list of items back right so here what i'm going to do is i'm going to say uh we want to map through all of them right so i'm going to say here um i'm going to say data remember optional training so it doesn't sort of crash itself or whatever say optional data dot items data.items.map and we'll say each item should get rendered out in the following way so i'm going to basically give each item a div right and that div let's do a closing all right so each item has a div and it's a class name and that class name is going to have search page results like this search page results okay now inside of that class uh inside of that result we're going to have an anchor right so an anchor tag and this anchor tag is going to have a few things right so it's going to say it's going to have the display link mainly right so firstly what we're going to do is we're going to say the item itself has a display link right and then it has this little carrot next to it so let's go ahead and do that and now you can see so guys you can you see it says um oh oops it says tesla tesla the band tesla.com wikipedia tesla shop.tesla yep i see it yes it's really cool this part like as you start to see everything pop in and then the next one is going to be an oh so that should have been an anchor tag sorry that should have been inside of an anchor tag so anchor like this and then this line of code should have gone in here and then the href so where does this anchor tag go to what's the link we say href equals and this is going to be item dot link right so that's where the link comes from so if we go ahead and we can save that and now you can see all of those are active links uh and then what we're gonna do is oh ingrid carson enrolled angry if that was a viewer let us know if you joined nice yeah that's epic ingrid carlson just joined profit with javascript welcome to the course yeah paul bento said landed a job by watching your videos and i'm so pumped to be here that's insane dude damn that is a beautiful comment yeah that's really nice uh let's see yep landed a job by watching your videos i'm so pumped to be here welcome paul and thank you for sharing that as another developer ding ding [Music] awesome so now what we're going to do is we have data items then we have another anchor tag and thank you guys for checking twitch i know joe diaz and everybody went and checked lauren and swann and checked and teja says it's okay so thank you guys for that yeah thank you guys so now if we go ahead and do this so an anchor tag here and what this one's gonna be for the result title so i'm giving it a class name a result out that link is going to be the same so it's hf to the item link because a few things are clickable right then here we're going to have a h2 which has the item dot title so now once it says and it should save in a sec we'll see the actual text come as in the actual titles come in so you can see model three tesla the band has their incorporated model s all of these things right so that's really clean and really nice and then the last thing for this is we want to snip it so p tag sort of p tag which uh has a class name of result snippet so this is actually something pretty cool uh the google api provides a snippet back and basically what it does is they'll have some information like a description or something and they'll actually go ahead and it'll truncate it so i have dot dot if it's too big right so item dot snippet here so now if i save this now what we can see yes because i think you need to refresh okay so i'm gonna go ahead and boom do it yep so now you can see we've got the actual uh p tag so the actual description so you see this is all coming from that search term so it's really really nice and now the beautiful thing is that we've actually written a lot of what we need and we can actually go ahead and start styling this to make it look like the final product right so the first thing is we're going to do is we're going to make the result itself so the div which is actually each of those results so this one right here we're going to go ahead and style this and say make it have a margin 40 pixels and uh so forty pixels top and bottom and zero on left and right oh and tejas just dropped another donation he said keep it up guys stream is lit since i found this channel in recommendation i watched almost every video um everything is perfect except management hiding channel 4 is no reason good night that's great wow thank you tank thank you there's he's like stream is lit and this is amazing because he might have yes we broke 200. let's go wow thank you you guys we really really appreciate it that is awesome thank you yeah huge wow that's a mile that's a milestone that's our first honey yeah 200 dude insane wow we should invest it into um doing giveaways for everybody for shirts yeah that'll be insane let me show you some merch that'd be cool so now what we're going to have is we have the result link yeah so the result count is next so i'm going to change it so it says search page result count and this one you can see the result count now became this little gray so that's kind of cool and then what we're going to do is we're going to say the results so the actual container holding all of the results is going to say we're going to say max width of 650 pixels margin top is 20 pixels margin left of 240 pixels and a margin bottom of 100 so you see what it will do is it will pull everything in so that's how google do it they pull everything in and yeah that's awesome maybe there's 300 more likes and sunny gets dinner on me i'm thinking oh don't don't worry maribon i think frank's already got the dinner i think i'm good i think we're good let's go frank actually yeah thanks frank gaming clutch with the the uber we got that we got the google credits that's insane nice so uh now we have the results styled um uh yeah so now what we're gonna do is for the result title so you can see the result title we have um text decoration none so as soon as i add that you'll see the underline goes right so that's cool but we want to keep the hovering so we want it to when you hover over it we want to underline it so if i do this then what we do is it says so now when we when we hover over it it will be a case of it will basically show you an underline right so that's really nice and then what we're going to do is we're going to target the h2 we're going to target the h2 and then we're going to do this and it says the font weight will change now so it becomes less bold so that's really clean at the end and then the final thing is the results snippet so that description is too close to the actual text so let's give it a margin 10 pixel away from it right so this is awesome it's looking really really clean and it's looking really really nice right so what we're going to do now is we're going to actually add a sort of um we're going to actually add an image to some of the values so some of these uh search page results actually return a really nice sort of image right so what we're gonna do here is and this is like a finishing touch on this right we're gonna go ahead over to the anchor tag over here all right i really like this message i want to give this a shout out the greatest ever says he goes sunny man whoops let me actually remove this he goes this is some amazing stuff qazi thanks for the platform as well every time i think about how i have been able to apply these lessons i get super grateful and almost teary thank you fam that's insane i love that dude that's insane i love seeing like when you actually see that people are really really like watching and even the donations like holy crap i remember when me and kazi started we got four dollars i think it was in the donation and we were like whoa yeah we lost our minds for because that was the most that we've ever done i was like yeah damn bro exactly all right so now what we're gonna do is we have the final thing so that that image right so that image that we were talking about so what we need to do is here i need to actually provide a check so i'm going to say uh inside of this a tag so i actually have it next to the a tag i'm going to say here so i'm going to add this right so i'm going to say if so this is actually where the image is located is strange it's weird i'm not sure what this all stands for but it's page maps yes the image.length i'm saying if there is an image in there right so if the length of that is longer than zero then go and access the source so then go ahead and go and access the source right and render the following so this is a bit of a messy bit of code but it will work and then what we're going to say is render an image like this where i say render the following image this image is a search page it has a search bar it says search page result image and the source is again that what we wrote earlier right so we don't actually need this one we can just use this and it will work awesome like that and now what we can do is we can go ahead and it says passing error line 87. let's go ahead and see why that's happening we see this we see this let's save it item all right double check what is happening so the anchor tag i'm going to go ahead and copy this in a bit replace this there we go nice so with that said i'm gonna go ahead and do a final finishing touch and i'm gonna copy this class name and basically style it with the following so i'm going to say for that image i'm going to do object fit contain height at 20 pixels width of 20 pixels and a margin right of 10 pixels so you notice how on the google on the actual app now because you check out it actually renders out like a little thumbnail it was meant to be a thumbnail if you scroll down they've all got like this sort of this look like these sort of images right so i'm going to add some rules to it so i'm going to say object fit height and width of 20 pixels and margin might have 10 pixels and then we do that and we get this nice little finishing touch so check that out so it adds that little image next to these oh yes i like that yeah that little clean image yep yep now to finish it we go back to our code change this back to term we go back to our mock and we take it away from the mock so this one was the mock api call so this one was the mock api call and we basically undo and we keep the live api call all right let me save it and now as you go ahead and click the google button firstly all right boom right and let's type something in so let's type in not tesla but let's type in something different that's typing maybe ssd hard drives oh yeah nice you would have never guessed me saying that so that possibly couldn't have been a mock or setup awesome right dude that is looking clean okay let's let's type in clever programmer now whoa that is clean that's insane right let's type in clever programmer google clown let's see if it comes out damn let's build a let's it's too good right here i can see the image i can see the image too i can zoom in on that image the clever programmer whatsapp let's check that type that in let's go awesome right very so super clean and guys notice how there wasn't a uh um there was no refresh when we did that when we navigated between the pages it just worked really nice and we're using um react context api to store the information inside of there um so hey just says look at the message you will laugh and i didn't see which message i was reading that too and i was like maybe i should have sonny read this but i don't understand hey i don't understand what it is oh nice dude she's got another donation wait what from miranda damn 50 mexican dollars or pesos thank you you did yo mx frankie mx is mexican yeah pesos right yeah damn nice allen says i love these projects thank you so much ellen we love you too yeah oh man frank i love that yeah yeah yeah i wanted to put that up too yeah so go ahead read it yes he says this is so mata uh meta googling yourself inside your own google cloud yeah that is hilarious that's really oh it's another donation william cruz appreciate that dude thank you so much whoa damn we're just oh my god we're we're broke i think we just what is this chief keef what is this um what is the currency what currencies are we getting into now chf uh william gave us five chf uh five that thank you dude really yeah what does that convert to 5.5 5.5 damn that's bigger than dollars that's more than five dollars yeah oh damn thanks appreciate it yeah yeah steve says swiss francs frank sets five swiss francs thank you that is huge yo we're about to be we're over like 210 now you guys this is unbelievable it's a new record new record damn global donation crazy guys okay i see the problem that's happening with the twitch i'll fix it on the next one big man says this guy said chief keef i know man i just chef and i just thought chief keef nice so guys with that said we could do it now i think kazi i think we're actually at the point of deploying tv is turned off all right let's get to the flooring bro let's go donation bro another donation i can't even give me one second let me pop it up stephen k thank you so much he says great job guys i massively appreciate you watching dude that's insane thank you what is happening why is this happening thank you thank you stephen king hey or stephen that is legendary bro thank you all right with that said let's we're ready to deploy let's get into it i'm going to change the bar at the top to let's deploy the damn thing all right there we go i wasn't kidding it's actually that and now what do we need to so now the process is pretty simple you guys know the deal by the way i got confused i thought it was actual real google but it's not are you ever gonna put the buttons i'm feeling lucky and stuff or no why did we style them oh right we got rid of that yeah so so we need to go back get app.js uh good catch good catch such guys the home yeah here we should have homegojs and we should not hide the buttons here yeah yeah all right but there we go okay let's do it mm-hmm yeah awesome now what we have is there we go beautiful now we're ready thank you dude thank you for everything very inspirational series guys cheers oh my god this is insane another donation ali parasharama says thank you very inspirational series guys cheers thank you so much for that another donation by ali damn we're never gonna deploy this thing thank you bro all right all right seriously frank gave another one hold on i don't see it yet i don't see it [Applause] deploy the google clone in firebase owned by google let's go all right i like it i like it all right guys i'm gonna speed through this before all these other donations start coming in i want this app to be live for all of you beautiful people to see and the first hundred people will get to actually use it after the first hundred people you will not get to use it please don't spam the search bar with that said let's do it so we're going to do firebase in it make sure you have to do firebase yeah make sure you guys log in with firebase and also install firebase tools yeah should we show them yeah should we show them the firebase tool command firebase tools wait hold on let's just go like this tools so this is the command you need to do to install it sudo npm install global fireplace firebase tools they'll get you that then you need to do firebase login but i'm already logged in so i'm not going to do that and then you're going to do init so now when we're going through this process over here thank you for another donation man wow jesus christ five euro what is happening and it's a five pound donation content out there oh yeah let me actually add his message here so we can actually show it yep best react content out there thank you brother all right here we go and uh let's go some we gotta go to hosting all right so we're gonna click hosting here now under we're gonna hit enter now that's all we need now we're gonna do use an existing project so hit enter and we are going to go to google clone so look for a g um ah right there weird sonata g apparently cool there we're gonna do build another donation brazil loves you say hi to us awesome job amazing what do you think about an xjs will it place really replace react it works with react dude but thank you so much attila yeah yeah it will definitely work with it yup thank you so much hit why so make sure you choose y and hit yes on a single page app it's it's a single page app all react apps are now if i go into this folder i will see something called build all right build is where everything is going to build so we're going to do npm run build yes honey yep cool so let's do npm run build and you guys are going to watch this folder over here start to get all the files now these are the files that go online and this excludes things that make you do hot reloading and all that stuff so it's going to be a much lighter optimized version you're going to put online so we're going to wait for that to finish building and then we're going to pretty much hit deploy and then we're going to be good to go in the meantime i will read out some comments because we're pretty much at the end finishing touchline emmanuel says the amount of knowledge you guys are giving to develop and inspire every developer is awesome and i can't thank you enough i would have made my donation but that option is not supported in my country well guess what thank you so much regardless of whether you donate or not we appreciate everybody equally okay whether you donate a hundred dollars or one dollar we appreciate all of you so thank you so much like even the sentiment really really matters like we just love your guys appreciation and love so thank you all right now it's done so now i'm going to do uh firebase deploy wait wait wait wait wait don't do it don't do it all right guys if you're excited and you're super pumped for this right like i want you all to pull out your phones right now and if you're literally watching this with us because i love this part right i love this part go ahead and shoot an instagram story and tag me and quasi in right here so there's always a case of trying to find it oh yeah you're doing a great job oh wow you're freaking your best perfect dude how are you how do you know that um okay so there we go that so he can't even see that shoot a story and then yeah tag me and quasi and then let's go ahead and deploy this thing dude yeah tag us in there uh one thing i noticed people keep making posts and tagging us in there and we never see those whoa adam just dropped a 10 pound donation jesus christ and he goes these clans these clones are sick bros where would you recommend freelance developers to go get gigs and projects and jobs like frank and others did so thank you so much few platforms i'm going to shoot out rapidly code mentor is a good one upwork is another great one outside of that build a solid network of people there's a reason why frank is inside of profit with javascript so for example that's another area you guys could join to build a deep network of people you don't have to join that program there are many other places but those are a few resources with that said i'm just going to continue and deploy guys because i don't want to i know if you're watching this is replay you kind of want to just get to the deploy so let's go ahead and do it yeah let's do it all right so i'm going to hit deploy and it's going to be deployed in five four three two [Music] one and oh my god oh my god you don't have a progress bar in windows whenever you're installing something it just 99 and it just stops like yeah it goes to 99 like instantly and then it's just like forever there usually it beats us on the countdown yeah oh well yeah that's it oh it's going let's go [Music] all right i'm gonna open it up the first hundred people that jump on this or is gonna be less than 100 people guys don't spam it only one person once do just a few searches you know but this is the app it's up and running and it's online so go ahead and check it out should be good to go i think it okay let's do elon musk hey look at that nice there we go so you guys can look at the domain right that's the domain the same domain as we deployed to that's proof damn did it sunny we did it bro wow great work you guys and great work sunny this is phenomenal bro appreciate it dude like that was a that was a fun cool man that was insane and the energy from everyone today was just like off to the charts i loved it so meat says dude i've been here the entire afternoon watching you guys and it's totally worth it i might have to work overtime and do my workplace work now absolutely no regrets let's go nice wow thank you guys for all the love and all the appreciation really appreciate all of you guys here thank you for being here sunny do you want to add anything before we end this live stream i just want to again end it on saying thank you to each and every one of you guys or and girls for watching this stream right now like even the ones watching the replay of this like you guys are amazing for sticking with us massive shout out to zhao polo who just dropped another donation oh great job guys dude we are at 243 in donation thank you let me actually pop that up wait hold on that does looks funny let me ah there we go wow thank you for the 20 what's 20 r dude i feel like i'm finding out that another 10 donation hold on i don't see it yet oh my god this is it thank you thank you hal paolo really appreciate it i'm gonna why don't i see it dude we're 253. what mohan reddy says wow mohan ready wait i wasn't showing it my bad you guys i'm sorry mohan reddy says i am watching your videos for my interview prep this is really helpful in pair programming interview rounds thank you so much that's insane appreciate you so much dude when you land that job mohan let us know because we want that counter how many developers we've gotten jobs we want that counter showing up the clever programmer fam counter yeah that'll be insane love that guys that's huge damn dude this is insane the energy today is is unreal and we had some like we had some tech headaches and stuff like that so we appreciate you guys like even more in this video like you guys through the end yeah that is huge you guys thank you so much for sticking through everything for being here for not leaving during those because yeah that was uh quite a lot of work and yeah guys if you want definitely jump into this free training that we have for you the link is in the description below it's an epic one hour long webinar i think you're going to get a lot of value out of it so take a look into this and register other than that anything else sunny uh again just want to say massive thank you and yeah i think that's good because yeah should we wrap up all right with that said guys make sure to hit that like button if you haven't already subscribe to the channels and turn on your notification bells so then when we go and do the projects next week like discord clone like facebook clone or like linkedin clone we want it to pop up a notification on your phone right over here and give you a little bell and then whether you're bored you want to just watch netflix but you'd rather also do something that makes you six figures like our boy frank you can just click it and watch that and have fun but the only way you can get access to that is by subscribing hitting that bell notification so it comes straight to you with that said we love you guys we really appreciate you this is qazi this is sunny and we will see you in the next in the next video peace peace guys

Channel: Clever Programmer

Views: 144,164

Rating: 4.9539561 out of 5

Keywords:

Id: DAWWf7q8sqM

Length: 205min 4sec (12304 seconds)

Published: Thu Aug 20 2020