🔴 Let's build Google 2.0 with Tailwind CSS & NEXT.JS! (Responsive, SSR React, Pagination)

[Music] what's going on guys how's it going it's your boy papa react and we are back with another fire build today we're going to be learning tailwind css which is gonna be so much fun and now i have i get excited when we have builds right but this one is oh my god this one is gonna be fun because i personally i'm now a huge fan of css and by the end of this video it's my mission to make you guys not only have your own little google search engine but also be loving tailwind css what's up guys tell me where you're tuning in from smash that thumbs up button if you haven't already and i'm gonna go ahead and show you guys what we're gonna be building in today's build now if you do want a sneak peek go ahead and head over to sunnysanga.com and you're going to see the google search yourself now i have got the dummy key on the sunny sangha website but i'm going to go ahead and show you guys what we're going to build today so this is google 2.0 with next.js remember guys we love nexus now next js server side rendering okay and we have our infamous search bar which is using the google api okay so i'm going to go ahead and type in sunny sanger i hit enter boom this is this is not the actual google guys this is our google that we built and also guys just to add a little bit of icing on the cake this build is fully yes i said it fully responsive okay so this is gonna be a hell of a lot of fun you guys are gonna learn so much in today's world if you're excited just smash that thumbs up button and let's get into this okay now let me go ahead and show you the responsive features of today's build so when we go ahead and resize the page check out what happens guys so you can see everything is going to go ahead and resize now i want you to pay close attention to these icons at the top right here okay now check out what happens as i go ahead and shrink it boom hits a break point changes perfectly resizes even the text changes size and look at this guys we have nice little hover animations and everything like that okay and also guys to top it off your boy couldn't just leave it there right i had to go ahead and add an additional functionality we have pagination yes i said it we have pagination thank you praveen for the lovely donation look at this guys if i go ahead and hit the next button then we get the next page and then it goes ahead and says previous or next so if i go ahead and click next page boom we go ahead and we'll get a third additional page and so forth okay now if i click previous there you go it works right now you guys can go ahead and check this out for yourself if you want right now if you go ahead and head over to sunnysanga.com oh there you go that's a donation came in hey from france tell me where you guys are tuning in from guys let me know i'm excited to hear now guys i'm gonna go ahead and break down this build before we get started but before we get started guys today's build is sponsored by the amazing guys over at hostinger now hostinger is a beautiful platform and if you didn't already see we used it in whatsapp 2.0 but let me go ahead and just jump in as to why i think you should be using hostinger because what we're going to do at the end of today's build is deploy google 2.0 just like you see it right now on sunnysanga.com you guys are going to be able to do the exact same thing and your boy sorry you out with a nice little discount if you use code sunny at checkout okay so let's go ahead and show you guys this is hosting uh these guys are the ones who are making today's video possible and guys what you need oh wow we've got loads of people tuning in from around the world this is awesome guys i love seeing everyone from international space this is incredible now guys a few things to mention firstly they're so cheap they are honestly so cheap right this is a hosting platform and the best thing about these guys is that one i've used them so your boy is vouching from himself it's easy to set up they're just insanely fast websites there's no slow you know once you get your site up is it really crap and slow nope they're extremely quick if you have experience with wordpress it's to work out of the box we have 24 7 chat over at hostinger now this is something that me and jay also use so i can vouch for it it's pretty damn good okay and uh and there's a bunch of other stuff now one thing i will mention is their h panel now the h panel if you've ever used a hosting platform the cpanel is what you usually deal with that's where you typically get a bit of a headache because it doesn't make sense it just gets confusing i'm going to break it down and show you guys just how easy it is right so they do offer a 30 money 30 day money back guarantee and you're going to get free ssl certificates when you deploy your website which is again saving you money bit of money okay so first link in the description if you want to go ahead and set up a hosting account use sunny at checkout for 7 off your annual plan and those guys made today's video possible okay so let's go ahead use that link your boy sorted you out second link in the description and without further ado i think we should get started guys let me know shall we get started in this build let's go ahead and drop this one right so i'm gonna go ahead and show you guys one more time what we're building today and we're going to break this down really nicely okay so we have a sticky tab at the top of the page right here we have our server side rendering so if you've never done server side rendering today is the day that you're gonna learn it okay so you're gonna learn about server side rendering today now i do wanna mention we have a few extra things here so let's go ahead and resize even on the home page and you can see down here guys guess what we're using css grid we're using css grid today as well as flexbox so again it's just it's just so much it's so much in a video and it's going to be so much fun i promise you it's going to be so so much fun and uh yeah i'm going to teach you guys how to go ahead and do amazing little animations like this when you hover over and you click in as well as these buttons we aren't using material ui today we're using literally tailwind css to make all of this possible so yeah this is going to be an absolutely crazy build you can see we've got loads of functionality in the side of this build today and uh guys like i said smash the thumbs up button let's go ahead and get started in today's build now i am going to go ahead and drop the papa fam playlist because i know you guys love that you can go ahead and actually get access to the entire playlist if you sign up to the newsletter the newsletter is in the description and it makes the whole thing oh it just makes it so nice to code with okay so i'm going to go ahead and start off our you know our proper fan playlist and then we can go ahead and jump into our coding so let's do this guys first thing we want to do is set up our next app okay so i'm going to go ahead pop open my terminal let's do this let's open up a terminal and then i'm going to go ahead and get into my correct directory so i'm going to go ahead and go into my documents documents there we go and build photo nice and then once we're inside of it we're going to be using something called create next app okay now if you haven't ever used next i'm going to make it extremely simple for you to actually go ahead and use next okay so next js what is it and why should you be concerned with it the xjs is a platform it's a framework for react right and it's gonna allow you to do server side rendering now server side rendering is incredibly powerful and i'm gonna break it down for you today so if you don't know what server side rendering is do not be afraid this is gonna be beginner friendly and i will make sense of it you guys will be literally be able to deploy an app at the end of this build we're gonna deploy using versa and then i'm gonna show you how to link it to hosting us it's gonna be a lot of fun but yeah it's gonna be so much fun guys okay so we're gonna go ahead and get started you can go ahead and click on the getting started point if you don't know where to get started but all you need is this mpx create next app command okay so once you've got that open all we need to do is go ahead and say create mpx create next app and we're going to call r1 google to i'm going to say youtube okay i'm going to hit enter now once that's going to go ahead and and once you hit enter on that it's going to go ahead and spin up the build process so this will go ahead and prepare a next js app okay now for those of you asking about typescript your boy always is learning new things always going ahead and making that knowledge digested so that way i can simplify it to teach it to you guys i i do know and i do use typescript but i will be dropping that in a future video to come so stay tuned subscribe hit that bell icon and you know how your boys gonna do i'm gonna always deliver on that stuff okay so guys let's go ahead and carry on so i'm gonna go ahead and go into my folder google to youtube there we go and then i'm going to go ahead and hit code okay so i'm going to type in code dot to pull up vs code in the in the desired directory okay so this will go ahead and get everything set up nicely for me now i am going to have it in a separate window like so okay and then once we've got this open guys if you knew if okay so in order to keep up with today's build because it will be a bit intense it will be a bit fast okay so your guy not only when i go and get you a coupon code for hosting or but i also sorted you out with the guys over at tab nine tab nine is gonna help you keep up with today's build so i highly recommend you go ahead and install it before we get started just hit the extension on the side click on tab nine and click on the enable or install button and it's going to pretty much go ahead and kickstart your tab 9 experience okay so that's how you go ahead and get started and now what you're going to love about tab 9 is this auto complete ai as you type there is machine learning behind it guessing what you're going to type next and providing suggestions now i don't typically recommend this stuff but tab 9 is a game changer 1.76 million people agree with me and guys i again i've helped you out with that one so drop hit the first link in the description go ahead and it's completely free okay so completely free to go ahead and get started with that it's extremely powerful it supports all the modern programming languages so even if you want to touch on some python down the line it has a free forever basic plan i'm on the pro plan because you know that's how we do and it has access to a deep like deep machine learning model okay so if you've ever heard of open ai gp2 it's got that behind it okay so it's really really good stuff it's completely safe they encrypt everything when it goes back and forth so you don't have to worry about you know hackers and a lot of stuff it's all good it uses deep learning so the more you use it the better it's going to get so now that we're done with that all right we have to have mine set up we have everything kind of set up on our machine i think we should just go ahead and absolutely kickstart samurai just kickstarted the party with a 10 donation thank you so much dude and guys honestly the papa fam is growing so fast i just want to say before we start thank you massive thank you because you guys are incredible and uh this is why i do what i do okay so let's go ahead and jump in so if we go over to our files you can see next.js has a slightly different layout okay so next.js we have the pages folder now pages resembles your app okay so you know previously when we use react we have a react router now react router is signifies for whenever we want to go ahead and go onto a web page let's say i want to go to the home page it's typically a index.js right what if i want pages like forward slash search or if i want pages like forward slash home right how do i do that typically we're used to using something called react router now in next.js we have a built-in router so it works by basically the name of your file is going to be the page root okay so in this case we're gonna have index.js and then search which will resemble forward slash search okay so i'll make a lot of sense as we go ahead and get practicing okay so we're gonna go ahead hit index.js hit command j and then i'm gonna go ahead and do yarn dev okay now you can see there's a package lock i prefer yarn so the easy way to switch it up is to go ahead and i think melbourne's in the house where's yeah oh there my beautiful girlfriend's in the house all right so we're going to go ahead and click in whoa ryan deveny says just got my first web dev job you helped tremendously get me from beginner intermediate to professional you're a pro for real whoa we got a 25 donation thank you so much dude and then yasin goes landed my first job because of your clothes this is incredible thank you so much guys um i can't see my butt and she's buried in the chat harsha thank you so much this is incredible wow this is actually crazy thank you thank you so much guys appreciate it we're going to switch from npm to yawn i'm going to type in yarn devin well done ryan uh anja scene both of you guys getting jobs that's incredible all right so i'm going to go ahead and hit yarn dev okay actually before that i'm going to type in yarn right i'm going to do yarn but i'm going to delete the package lock right so you delete your package lock and you type in yarn and then that will switch you from npm to yarn okay so you don't want to have two lock files ever you just want one hey there she is my beautiful girlfriend nice all right so wait until this goes ahead and fetches and installs all the required dependencies now while that's doing that what do we need to set up in the meantime okay we've got tailwind css and now this is the new bit of text that we're going to be learning in today's video okay so tailwind allows us to rapidly build our site without ever leaving the html now i don't know about you guys okay but there was an upgrade when we had our typical external css files and then we started to use things like css modules start components style components were even better because we didn't have to leave the file but now tailwind is an absolute game changer tailwind allows us to build responsive sites extremely fast and they look amazing they are literally if you've ever liked bootstrap you're going to absolutely love tailwind and i wasn't actually a fan of bootstrap if you're if you're an og on this channel i didn't like bootstrap for a very long time but tailwind has won my heart over i'm going to be using tailwind in every build and in particular if you know about it we're going to use the new version of tailwind which is tailwind jit which means just in time compiler so i'm going to show you how to do all of this don't worry okay so we're going to click on get started now here you can see version 2.1.0 is what we're using the absolute latest and greatest we're going to click on installation i'm going to click on the next js integration guide whoa joella just dropped in with it i think that's australian 10 guys you guys are on fire man thank you this is so sick you guys are like little pumped me up i was thinking like where's the energy coming from today but you guys are actually oh my god i always get overwhelmed you know you guys are all oh geez honestly everyone here i know you've been watching for a while and if you're new to the channel how hell are you welcome we're growing we're already at 30 000 subscribers incredible stuff this is a family the biggest community there is we're going to click on next js okay now here you can see we created our project already we need to set up till in css all right so here what i'm going to do is i'm going to do npm install but i'm not doing npm install so i'm just going to grab this last bit and this is all the dependencies i'm going to need okay so i'm going to copy that and then guys we're almost at 300 likes smash that thumbs up button it will help the channel grow it will help this video push out to as many people as possible i will add timestamps on this video as soon as it's done as well so you got me i got you there okay so let's go ahead and hit yarn add and i'm gonna do dash d and then all of those dependencies okay now this is going to go ahead and install tailwind into our project and the next js by the way guys is a framework for react okay so i saw somebody ask why are you not using react we are using react it has next.js on top okay it's a framework for react all right so now we've gone ahead and installed that correctly we've got everything up and running the next thing we need to do is create the config files so again until we make this extremely simple just copy this command over here and then let's go over here and type in mpx tailwind css init dash p right this will create two configuration files in our directory okay so what we need to do now is inside of tailwind config we just have to change a little setting right now remember i said we're using the the latest and greatest tailwind okay so they have a great video on their channel so you go ahead and subscribe to tell them because they are amazing and i support them massively um but they're using something called jit as a new sort of just in time compiler and it allows you to basically go ahead and come like generate the styles that you need when you need them at build at runtime okay so what we're gonna do now is i'm gonna go ahead and change the tailwind config from its original config to this new compiler okay so this new compiler is the is is the right it's the good stuff okay so here i'm gonna say jit right and then we're gonna go ahead and do that now that will go ahead and and it's not actually listed here because that's a different step there is a nice little page where you can go to just in time mode that will show you it's got a nice video about what it does how it speeds up the build press process incredibly like a huge amount okay and this is how you enable it so this is what we did right here and then this is the next step but we're doing a slightly different thing so just do mode jit and then what you want to do is come back over here and we want to go down to our purge so here you want to grab these files over here now this is basically going to go ahead and we need to tell tailwind okay so it uses something called purge css and this is important because it tells tailwind that this is the the pages that you should care about right think of it like that right this is the page that usually you need to scan for right so we're going to be using tailwind in these files and you need to like clean them out okay so let's just think of it in that sense and that will keep it very simple okay so now what i'm going to do is go over to purge and i'm just going to copy in those files so this is four slash pages this is where all of our pages inside of our app live and then we have four slash components and we're also going to create a folder here for our individual components afterwards okay so this is going to be a lot of fun now guys i've got another thing to say smash that thumbs up button if you want react native right so smash that i'm only going to do it if i get if i get those likes okay so your boy will teach you react nate if you go ahead and hit that thumbs up button right but right now next guest and tailwind is fun guys it's so fun right i'm gonna go ahead and hit save now with that done we should have everything set the final step include tailwind in your css so we just need to go ahead and grab these last one here so at tailwind right here and then we're going to go ahead and go into our styles global and i'm going to grab everything inside of global and delete it and paste tailwind inside okay and this home.module.css we don't even need that anymore okay we're not using module css in this in this build right so once we've done with that we've actually officially set up tailwind so congratulations it's all done okay everything's working nicely now what we're gonna do is we're gonna go ahead and whoa i can see those lights coming right up after i said the react native comment don't worry i got you guys and then we're gonna click on index now let's go ahead and actually see something on the screen all right something like we want to see something right so what you need to do type in yarn dev okay so it's not npm start on next yes it's yarn dev now i do have something running so i'm going to go ahead and cancel that there we go and then i'm going to go ahead and do yarn dev now if i didn't already mention this is going to be using google's api today i'm going to show you how to get your own keys all you need is a google account to get started with that okay so just bear in mind that you're going to need a google account when we get to that point okay so we've got the app up and running so now what we need to do you you should get this message where it says you have enabled jit engine which is currently in the preview okay so once it says that that's good that's exactly what we want to see and then what i'm going to do is open up another window pull this into this page over here so that way we can see our code and i'm going to type in a localhost 3000. okay now you can see it's failed to resolve home.module.css that's correct because we deleted it hence in index.js we need to delete line two and then i'm going to go inside of here and get rid of everything from main okay so down here everything from main and everything inside a footer we want a fresh clean slate okay now once i've got that done i'm going to type in h1 and i'm going to say let's build google with next js and tailwind right i'm going to hit save now let's see what happens guys let's go ahead and wait for it it says stars is not defined as because class name here we can go ahead and delete this class name thank you so much developers next for that lovely little donation appreciated and i'm gonna hit save and there you go this is where we should see right this is what you should see at this point now if you're at this point let me know in the chat right now you know like this is actually going to be simpler to follow along if you have tab nine all right tab nine is gonna help you keep up to speed with the build so trust me it's worth it okay guys all right so here we have google with next to uh js and tailwind at that point we're done i'm joking we're not done yet okay quick water break and then we're gonna go ahead and jump on to how to use tailwind css right so we have almost over we have 350 viewers watching right now across platforms thank you so much guys remember we do stream on twitch so make sure you're subscribed now a lot of you guys are watching right now and aren't subscribed okay which is crazy right if you're watching it and you enjoy the content hit that subscribe and it will just help this channel grow okay so with that said let's go ahead and let me show you the benefit and beauty of see a tailwind css so the the thing i love about tara and css is that we don't need to ever we don't actually ever need to leave our cs our html file or jsx file okay instead now everything happens in the class name okay so we've got our class name over here and i'm going to go ahead and type in let's go ahead and say h 10 right so this will go ahead and change the height of this component to a 10. so if i go ahead and change it to a p then we can see you see what happened here guys it gave it a padding of 10 around it okay now this is called a design system okay so we can't just type in random numbers here right but what's really nice about this is we we will go ahead and it will work in the way that we expect it to and everything just looks clean and fresh right so i'm gonna go ahead and show you guys something now now the first thing i want you to do is actually go ahead and um get this extension because this will help you out quite a lot guys okay so what we're gonna do is go ahead and get the extension for it's called tailwind okay so if you go ahead and get the extension for tailwind css okay so tell in css intellisense and what you need to do is just install this extension this will give you autocomplete which will help you out a huge amount okay because as you type in these class names it's going to be kind of tricky to remember what you can actually type in next now this intellisense will help you out because as you type in you see it gives you the different colors and all sorts right now there are tons of benefits when you're using a tailwind css now i'm going to give you a quick run through of a few of those before we get started so i'm not going to spend too long but you can see pretty much you have different sizes that are built into the system different color schemes out of the box different shadow elements which are really nice how many times have we been sitting on a website and we need that box generator off google and you see just with certain class names you can go ahead and get such a different look and feel to your application i'm going to show you how to go ahead and use all of this what's up guys i can see uh samith in the house and a few other ogs what's up guys it's good to see you again and instead of material ui icon so we're going to be using hero icons which work natively with tailwind okay so that's going to help us how we're going to power up our icons in today's build okay so with that said let's go ahead and jump back into our code so at this point we've got the h1 now i showed you how we can pretty much now we'd never have to leave the file which is actually going to be easier for you guys to follow me right so i'm going to go ahead and pop this over like this i think that'll be easier for you guys to see okay so all you need to do now we never have to leave this file okay if i want flex i can apply flex like this if i want flex column i can go ahead and do this and it will go ahead and apply a flex column direction okay so there's loads of benefits to being able to use this right now okay there's tons and tons of benefits and also in my opinion it's so easy to actually remember how to do more complicated things with tailwind because you don't have to remember the exact css you just remember these like nice utility classes what is what they're called in css and tailwind css and it just goes ahead and does it nicely for you now when we're using tailwind css you have to make sure you follow a mobile first design principle this means that we design for the mobile first and then we use breakpoints to go ahead and scale up on larger screens i'm going to show you how to do it typically these break points are resembled by an sm for small md for medium lg for large extra large is lxl and then it goes up to 2xl and 3xl each one is going to resemble a different size for example without any breakpoint it's a mobile it's going to be the smallest size so that's going to be our first set of classes the second thing whenever you see an sm it's going to mean sm means apply this class after we hit a small screen all right and when we hit md it's going to be after we hit and a medium screen apply this class okay so this is how we go ahead and read um tell in css it will make a lot of sense right now okay all right so first thing we're going to do is let's go ahead and actually have a look at what we're going to be building okay so we're going to aim to build at this home page oh there we go this one right here okay so this is the end goal right now for the home page we're going to start with the homepage and then we're going to progressively move on so the first thing in next.js so this is actually nexus we have this nice little head component okay so the head component is really really nice because you can do extremely cool things such as please don't expand the chat guys um we can do really really nice thank you sami coming in clutch with that five dollar coffee i actually have a awesome little coffee mug today because i thought you know like let's go ahead and let's go ahead and have our coffee while we do our lives we're at 400 people watching right now this is amazing thank you so much guys okay so with that said we've got the head over here okay now head is gonna go ahead and allow us to change things like this little title at the top over here so you see right now it says create next app i want that to say google because we're making a google clone okay let's go ahead and do this mohammed says really appreciate appreciate your efforts thank you so much dude i appreciate you let's go ahead and hover over them now it says google that's amazing now i do want a disclaimer we're not actually we're not we're not by any means claiming that we're google today okay we're just saying that we're currently google like clone okay because we love google right so now we've got this over here now what we're going to do is we're not going to change the icon but if you wanted to change it then feel free to do it okay that's homework for you guys so what we're going to do is we're actually going to start off with the header so the header is what i consider this top half over here now you're going to see how easy it is to get this working okay so we're going to break this up into a few different sections the first bit is going to be a header okay so we're going to have our header component at the top now this will resemble this nice little top part and then we've got the body right now the body is going to be all of the thing like all of this underneath right underneath not that bit underneath the header okay so anything underneath the header or above the footer is the body okay so we're gonna go ahead and say oh we're gonna say body i love the excitement coach says sunny this is fire let's do it dude okay guys if you want the code and you want to code along with me the papa github repo is down below in the description easy to get easy to grab you guys can follow it along i've already pushed the code as well so incredible stuff okay we've got the body and then we're going to go ahead and have a footer underneath that now guys i've upgraded the pop-up fan playlist so these beats are getting better and better and better so honestly just go ahead and sign up to the newsletter if you want them and i'll send you it to you right so we've got the header up here so first thing we're going to do is we're actually going to be using the correct assist we're going to say this is a header at the top okay then we're going gonna have two divs right we're gonna have a div for the left okay so remember whenever you're working in a sort of in a you know a css fashion all right we're gonna have two divs we're gonna have a left div and a right div okay so with that said wow we have we have so many comments today the energy is popping today guys let's go ahead and hit 500 likes i think we can do it together all right thank you so much developers nest uh keep posting such great content love from india thank you so much dude all right let's go ahead and do this so now what we're going to do is we've got the header open i'm going to create a div right and this div is going to be responsible for the left section okay and then i've got another div and this div is going to be responsible for the right section okay i'm going to go ahead and the wire section there we go now with this open we're going to go ahead and input the correct things that we need so i'm going to have a p tag with which says about and a p tag which says store okay so i'm gonna have a p tag which is about and then i'm gonna have another p tag which says store and then we should see those pop in right here okay so i'm gonna eventually get to this point where it looks somewhat like this okay now on this one we're gonna go ahead and have on the right hand side we're gonna have a p tag which says gmail and we're gonna have another one which says images okay now obviously you can feel free to change these to a tags or a href you know with a h reference side if you'd like right but in this case i'm just gonna go ahead and do this now we do need an icon here and then we need an avatar now typically we use material ui for our avatars but i'm going to show you how easy it is to do this inside of inside of a tailwind css okay so with that done we're going to go ahead and i'm going to show you how you can pretty much go ahead and lay this out so i'm going to hit save and we've got about store gmail images okay so the first thing i want to do is any other moderators please go ahead and you know moderate the chat so just time out if people are spamming things like that it'll help us out and it'll keep the chat clean okay thank you guys all right so with that said we're going to go ahead and um all right and guys i will just block if you do that all right so let's keep it clean all right so now we've got the header now what i'm going to do is inside of the in inside of each of these small containers i'm first going to style those okay so inside this div i'm first going to say class name and then here i'm going to say flex and i'm going to do a flex a space of 4 space x4 now this means okay so firstly let's go ahead and have a look at this so if i type in flex it will do display flex on the container which is why these went into a row okay the next thing i can do which is really nice is i can type in space x4 which means space all of the compo all of the children x components along right i can space them out with a spacing of four pixels which is really nice okay that's actually really really clean typically we'll go ahead and do margin right margin left all that stuff but this in my opinion is a lot cleaner and then i'm going to do items center which basically aligns them on the vertical axis centrally so that will help out when we have some padding okay the next one the right hand section i'm going to do the same thing i'm going to say flex oops i'm going to say class name and i'm going to say flex uh space x4 space x4 right and that will give us a spacing of four on the x-axis and i'm going to do the same thing item center tab nine coming in clutch okay now you can go ahead and see we have the two things in this case now these two containers are flex which is why they're in a row so the header now i need to make that a flex okay so i'm gonna go ahead and do class name and here i'll say flex and now we should see everything go into a row because by default flex is you know as we know it it's uh every puts things into a row okay i'm gonna make this actually a little bit bigger so you guys can see this okay now when we have flex as such right firstly i think i'm gonna make this a little bit bigger as well there we go that should help you guys out all right so then what i'm going to do now is i'm going to say by default okay i want to use the full width of the page so we type in w for the width and then here i do dash 4 right and it means that it will now use the full width in this container so if i want to show you this in perspective i'm going to change the background color to let's just say a red and let's just do 500. and you can see now it's using up the entire sort of you know using up the entire width but what i want to do is i'm actually going to force it to use up the entire width once we have a few things in place so i'm going to say width 4. we'll say padding of 5 nice okay and then i'm going to say justify between right so this will push the component so that there's space between them so this is the same as saying justify content space between okay so that's how we get this effect and you can see these are just shortcuts right so this is actually just a simple shortcut which will go ahead and translate to um flex rule which is like the same as saying justify space between okay so we have that working really nicely and then what we're going to do is we're going to go ahead and type in one want this text to be small so i'm going to make it text small and i want it to be a gray text okay so i want this to be a little bit of a gray text i'm going to say text gray 700. now if you're wondering what i'm doing here right what we're saying is change get the text change it to gray right and there's a few different colors that we can use so remember there was a color palette in taylor and css so if you go up here you can pretty much see they have a nice little color palette this is just a sample of some of them and you can pretty much go ahead and you've got all of the colors from 50 up until i see you've got 100 200 300 400 and 900 and this will give you the different shades of color in that color palette which is really nice okay it's really really clean okay so we're going to use gray 700 okay which is clean clean clean and it looks really nice okay so i'm pretty happy with that at this point um what i'm gonna now do and if i wanted to go ahead and for example change this text to a massive one we can go ahead and do text large and you see how the text change size okay so extremely simple stuff so once we've got that working i want all of these to basically look and feel like a link okay so what if i want to have a class name in tailwind which is shared okay if i want to have a class name which is shared amongst different things but i want to have a custom class name i actually want to have a cast name which says link right and then this should actually give this a custom link fill to it right so the way i do that is i simply go into my global styles over here and then once i've got my global styles open i'll simply go ahead and i'll type in at layer components right and this is basically basically going to inject our custom class right into the component layer right so you can go ahead and watch the tailwind css video if you want to go ahead and understand that a little bit more but basically all we're doing is these are the base classes that it comes with when we sort of in store tailwind this is the classes that they give us the ones that i'm using all those fantasy p five all of that stuff i'm going to inject my own into the component layer and here i want to have a link class okay and my link class the way i can apply class names here is all i have to do is type in apply right and then this is the magic word and i want it so that when i hover over this link it basically gives it an underline nice and i want to do a cursor pointer okay so i'm going to do a cursor oops no cursor sorry dash pointer there we go and if i hit save on that now can you see how the first one gets that custom effect and look how we have these modifiers guys so this is what's really clean about um tailwind css is you can have a modifier with a colon and they will go ahead and apply the style like so and and basically what this is doing is it will just generate the css that we require okay so it's extremely optimal and if you're wondering yeah but is it better than wearing this or you know the css now guys they do automatically purge out any of the css you don't use so any of the unused css is just going to get pretty much deleted so your final production build is going to be absolutely tiny so don't worry if you wonder you know i'm not sure if this is going to be something i'd use in the future guys we're almost at 500 likes i love you guys i appreciate everyone this is amazing thank you so much now guys i want to mention that the uh somebody says how to join your course the course link is in the bio uh guys literally the course is papaya.com for slash course you guys can jump jump in and join the papa fam at zero to full stack hero okay so now all i need to do to apply the link class to all of these is copy and i'm gonna do a little trick that i like to do and i'm gonna hold option and click the end of these lines and i get my multicurser so i say class name equals link and now all of these are links awesome right so these are really really nice that we've got these little links that are working nice okay so next thing i want to do is i want to have a picture so let's go ahead and tackle the avatar right so typically what we'll do is we'll go ahead and go over to let's say you know something like um material ui and create and use their avatar in this case what i'm actually going to do is because we're going to be using the avatar in two places i'm going to create my own component i'm going to create my own avatar component right and i want to show you how easy it is to do that inside of tailwind css so if i go ahead and outside of my pages uh directory and what i'm going to do is i'm going to go to my i'm going to click package.json so i'm at that level i'm going to create a folder i'm going to create a folder called components okay this is going to be responsible for using all of my uh reusable components inside of react so pages is where the pages will live like the home page the search page and then the components folder is where the reusable components will live in our case we have the avatar component so i'm going to go ahead and add a file here and say avatar.js now inside of avatar.js i'm going to use our handy little snippet so i'm going to do underscore rfce which will go ahead and get the templated code for me now bear in mind guys when we are using a tailwind css we then we now we don't have to do any extra step i don't need to you know go ahead and create an external css file anything like that i can just start adding my css it will work okay because remember we're checking the components folder inside of our tailgate config right so what i'm going to do here is i'm going to go ahead and pass in and if you're wondering i will be using the actual image optimization in xjs today so that's something else that you can look forward to smash the thumbs up if you wanted to know how to use that okay so at this point i'm going to go ahead and pass in a few props so in react we have uh components which accept props which are properties now es6 allows us to do something called destructuring okay so destructuring what we can do is we can break apart an object like so and i'm going to get the url okay so i'm going to pass in a url which is going to be the same the picture um the github repo link is broken okay um oh is it really i didn't think it was um okay let me go ahead and i'll drop a link to you guys now don't worry about that guys we can go ahead and fix that for you but in the meantime i mean it's working for me so i'm not sure what everyone's talking about but it seems pretty pretty good for me um okay let me go ahead and i'll just go ahead and drop it to you guys but guys don't worry about all that we can pretty much focus for now on this stuff but yeah there you go i've just shared it okay so there we have the url okay so i've got the avatar.js and then what i'm going to be doing is i'm going to basically change this from an image a div to an image tag right so this is going to be a self-enclosed image tag and now for the image tag what i'm going to do is i'm going to have loading lazy so this is actually a good standard you should get used to doing this means that the rest of the page can load even if your image doesn't hasn't finished loading yet so this is what we refer to as lazy loading okay lazy loading is a very good practice in production you should get used to using lazy loading right now next what we're going to say is source is our url okay and then i'm going to alt and then alt is just going to be let's just say profile picture right profile pic i'm going to hit save now to get this working i'm going to go back to my index.js and where we had our avatar before i'm going to go ahead and import the component so i'm going to do command spacebar or control spacebar and import my component like so hit save and we should see profile pic at the top and this is happening because we're not passing in a url so here i'm going to type in url and i'm going to pass in the following url okay so you can feel free to copy this or either code is available inside of the github repo okay so this one is simply going to be a url and i've actually shortened this url and it's coaching dot proper react 4-8-1-9 and it's a nice big picture of me right so if you like your boy papa react in a tux then you know smash that thumbs up button with that said water break okay this is cool guys then we're gonna we're going a good good pace okay so now what we're going to be doing is we're going to go ahead and make this look like this okay we're going to have this looking like this nice thing over here and i'm also going to cover the animation over here okay so how do we do that how do we get it looking like that so it's actually very simple at this point we go to our avatar this is where the magic is happening so what i can do here is i can simply go ahead class name and here you can see it already start to decide to try and guess what i'm doing next but what i'm actually going to need here is i'm just going to go ahead and say that this is a h10 okay so a height of 10 and you can see it's already dropped right so the height of 10 is how you write that okay so it's a height of 10 and then i'm going to say rounded full okay so i'm gonna go ahead and remove this so i can emphasize this effect but what's really nice here is if i type in rounded lg you guys can see i get nice little rounded corners right but if i type in rounded full and these are what we refer to as utility classes inside of tailwind how clean is that and somebody just asked wow like why tailwind right this is why i want to use tailwind because i can just type in rounded four and i get a circle i don't have to do any kind of you know border radius 999 or you know like all of that that crazy and we all know we've all been there right we've all been there and you guys know what i'm talking about i hate it when i need to like just do simple things and i'm like i need to find out what the css was for that now i don't have to remember anymore i just typed in rounded four h10 then i get a height of 10. happy days right so h10 there we go rounded four then i'm going to type in cursor pointer because when i hover over it i want it to be a cursor pointer right so now you can see when i hover over this i get my pointer nice and then what i'm going to do is i'm going to type in i'm going to actually have an animation now okay so an animation is going to be something which we typically you know we think of it as some long thing that's going to take a while that's going to be you know really difficult to build but it's so easy here all i type in is i type in transition right i type in duration and duration i can i can put in 100 150 they have certain values here but i'm going to use 150 and then i'm going to say okay i want to transform the image and i'm going to say okay just apply it when i hover and change the scale of the image to a hundred and ten percent okay now check this out boom that's it that is literally it all right and trying to see something really cool guys right what's so fun about heroin is they even have these animate classes right so if i type in animate bounce look at that guys just from writing anime bounce it starts to bounce alright they're probably looking at me like something you've never seen tail in css but guys i guarantee somebody here is learning something new okay so that's pretty cool that's pretty cool even for me but you guys can see that we have animated bands right so i'm gonna get rid of the anime advance but in this case look at that when i hover over it so look i can i can already see leo's like tailwind is so cool what the hell exactly it blew my mind right so smash the thumbs up button did that doesn't happen in google so i'm upgrading google a little bit okay all right but you can see already look how clean that is we barely did much yeah okay keyframes has left the chat exactly all right so now i'm gonna go ahead and um we're pretty much done with that avatar okay so avatar's working it's pretty clean so i can go ahead and get rid of my little markup okay so you've got the left section the right section and then the icon now the icon we're gonna use something called hero icons okay so here are icons are these icons over here let's go ahead and click on documentation and i can show you how to use it so the first thing you're gonna do is install hero icons into your project so here i'm gonna use rather than npm install i'm going to do yarn add okay so i'm going to go ahead pop open a second terminal and then here what i'll do is i'll type in yarn add hero icons react okay once that's done i'm going to go ahead and wait for that and this is an example of how you can import from hero icons right now what you can do is typically just like how we did in material ui you can go ahead and you can just search so if i type in menu for example i get all the menus now you don't want to copy the svg or jsx you can use it directly as svg or jsx if you really want to but i recommend using the packaged versions inside of the component library okay so now what we're going to do uh fabian says papaya doing this thing uh yeah dude you know how we did all right so now we have this up and running that's pretty good right so what i'm going to do is i'm going to go ahead and show you guys the first example of a um of an icon okay so one of the icons that i'm interested in using is called view grid icon okay what's really good here is if i go ahead and just do an open bracket view grid icon so typically i should get my auto complete but um something didn't work there but i'm going to go ahead and import view grid icon now again i'll i'll just show you the imports for this one you guys can go ahead and import them as you're watching about the video okay so this is view grid icon and a microphone icon which i'm going to need in a second um from hero icons forward slash react solid okay now remember there are two verb like variants when you're selecting a icon so in this case if i type in view grid right then you can see i've got the view grid solid variant and the view grid outline variant because there's two variants when using hero icons okay this is incredible stuff and um oh nice we've got a 14 year old watching he says uh i'm 14 years old watch for india i wish you soon bring tutorials and react hell yeah dude i definitely will be bringing um uh michael says your energy enthusiasm is something else that's what we do man you know that's a deal we have more people watching we have nearly 500 people watching now which is incredible welcome guys the pop fam you know we're just growing every day and i ain't gonna stop i'm not gonna stop until we just completely crush it okay so today we have uh some beautiful sponsors hosting and um tab nine who are gonna help us achieve all of this amazing app that we're gonna be building out okay next section that we're gonna build is this little icon over here so what i'm gonna do over here is i'm gonna go ahead and go down here i'm gonna say class name equals and then i'm going to say h10 right width of 10. right and then this will go ahead and give it some kind of dimension right into the cc we've got a height and width of 10. right and then what we're going to do is i'm going to go ahead and say um like let's just give it some padding i'm getting a padding of two right and can you guys already see that this is so much cleaner than having you know different um classes and then an external class file and messing around like that stuff now i don't have to mess around with all of that i can simply go ahead and write my classes in here and it just works right and it is it's a lot quicker i'm going to say rounded 4 because i want to have a little hover effect right now and then i'm going to say hover and when i hover i want to change the background to a gray and i'm going to use a hundred on this scale remember we have we have a scale which goes from 50 to i think it's 900 okay so we're going to use that scale and then i want to change my cursor to a pointer tab 9 coming in clutch now look at that guys so it's rounded 4 we got the background on hover changing to a background gray and then we have cursor pointer and also what's very nice is when i look at this class in the beginning it can be extremely it can be extremely kind of scary right oh guys we broke 500 likes nice we're actually going to break 600 very soon which is incredible so let me go ahead and smash that thumbs up button all right get your family to smash it get everyone to smash that button all right so let's go ahead and hover over this and you can see like the cursor pointer changes this is why and i trust trust me when i say that it is a bit scary when you first look at these class names i understand that right but once you start getting used to how to read it it's so good it's so clean right so we're gonna go ahead and we're done with the header right so we're already done with the header let's move on to the body okay let's carry on with the body so the body is gonna be one large form all right we don't need an action inside of it it's going to be a form and then what we're going to aim for here guys is this body right here so the goal here is i can type in something like let's just type in testing hit enter and then i get my search results okay so now what i'm going to be doing is pretty much having and this will be using the next js image component which is a extremely good component that goes ahead and actually optimizes the image based on the device that you're watching it and things like that so this is going to be out of the box just something which you guys should be using and it supports lazy loading by default so i'm going to type in image uh with a capital i that'll help and then i'm going to go ahead and hit ctrl spacebar and i should be able to import so for some reason whenever i'm live my auto import doesn't work so i'm going to show you the import that i'm going to have and that's simply at the top over here i'm going to say import image from next image okay now once we have next image up in play what we're gonna do is i'm just gonna go ahead and move my camera there we go once we have um next image uh imported so we have this then i'm gonna go ahead and pass in the relevant props now here there's a few props to be concerned with the first one is a source okay so we're all familiar with what source is um so i'm just going to go ahead and i've got a picture from google okay so i've literally just got a normal picture from google so i'm going to go ahead and hit this and hit save okay now we get this runtime error now it says width and height properties must be used okay so we're going to pass in some width and height attributes so i'm going to go ahead and pass in a width and height a height of 100 a width of 300. now this is the interesting part you're going to see this it says invalid source prop this address on next image hostname google is not configured under images in your next config file so whenever you use an image using the image component you have to tell next js where to be basically be ready for that image because you don't want it to just start serving images so they have this like layer of security think of it that way okay so what we can do here is we basically go ahead open up our files and we need something called a next js config okay so what i'm going to do is i'm going to type in next dot config dot js okay this is going to be responsible for our configuration all right so what i need to do here is i'm going to go ahead and pop in a snippet so you just need to go ahead and write out module.export equals an object with images inside of it and inside of that object you've got a key of domains and which is an array of host names now let's say you had an image from unsplash you would just go ahead and do www.unsplash.com and then it would basically go ahead and that would be added to the domain list so you should be able to use pictures from the uh that domain from that point on now once you do change anything in the config you're gonna have to go ahead hit command j and you see it says founder change in xjs config i'm going to do control c to cut that off and do yarn dev to restart my server okay so you're going to have to do that when you make a change to your configuration file that's just a rule of thumb if you ever change your config file boom 600 likes that's what i'm talking about guys this is why like my energy is so up you guys i started this and i was like you know i was kind of like is everyone going to enjoy this one tail in css but this is what i'm talking about that's how i know you guys are interested let's keep going strong guys so i'm going to command j to hide this go ahead and cut this cut this because we're good and then we've got an image nice okay so if i go ahead and refresh you'll see there we go our images are loading as we expect okay so that's really really clean let's continue on okay so the next thing i'm gonna have is a div okay now this div is gonna be responsible for the input okay so this is actually a custom input you can see we've actually got an embedded input inside of here and then the outside is a div and then we have these two icons a search icon and a microphone icon on the right okay let's go hops what's up hop reform in the house let's go dude all right so now what we're gonna do is we've got the form open i'm gonna go ahead and add in a div so here i'm to say div like so and then i'm going to open this out and then i'm going to go ahead and say search icon so i need a search icon now you guys can see this right so a search icon pops up in my autocomplete and then i get a bunch of suggestions okay and then i'm gonna go down to the one which says so we've got solid we've got a few different solid ones um let's go ahead and use i actually don't want the solid one the outline one so if i click enter you can see it's actually poured in a solid but what i'm going to do is i'm going to go ahead and actually pull in the outline variance so the outline variant is this one search i come from hero icons react outline okay lazy loading the google image yes we want to lazy load our images by default all right um that's it awesome stuff barkin says great work dude thank you so much dude for watching all right so we've got the search icon i'm going to go ahead and hit close out and then we should be able to see let's go ahead and refresh this page there we go we got a huge icon on the page now these are basically react to tailwind because remember like i said hero icons works out of the box retail in so what we can do here is nice i just got a nice internship as well that's what we're talking about guys papa farm gets results okay so we don't just work on like cool projects and stuff like that my goal is result driven work right if i can get people results you're going to keep seeing videos from me and that's it the course my course is designed for to get results it's not like a udemy course which is why if somebody comes in and says where's this where's that i'm like this is not a udemy course this is a course which gets you results that's how we do it right that's why the papa fam is growing at the rate it's growing because we actually get results okay search icon now here what i'm going to do is i'm going to type in h of 5 so a height of 5 a width of we don't actually mess around with the width that's fine if i change this to a height of 5 you can see boom it snaps to a nice little width over here awesome stuff okay now we're going to go ahead and do um a margin right of three and you guys are probably watching this and you're like what this crazy man like it can't be that easy to get a margin right like that right and if it just to show you guys that that works if i change it to margin left you see it moved away okay so i'm going to apply a margin right of three okay and then what i'm going to do is give this a text gray of 500 because icons are actually little kind of you know think of it as text so i'm going to go ahead anonymous says this is inspiring i feel so motivated that's what i'm talking about i did you know like we we all focus on results okay so text great 500 right tailwind is so much fun honestly right now the next thing we're going to have is an input field okay so i'm going to type in input like so now with this input field we're going to go ahead and give it a class name and then this one is going to basically go ahead and say i'm going to do a focus and i'm going to say when we focus i don't want there to be an outline so i'm going to say outline of none okay so we can't actually see the the input field right now so what i'll do is i'll go ahead and show you guys that it's there by saying bg red 500 and then you can see there it is right so by default there's the text box but if i don't have outline of none right so if i don't have outline of none you guys can see when i hover over it you see i get this blue outline which i don't like i don't want that i want to kind of override that so i say focus outline none okay and then there you go that's how we get that clean look and feel okay um thank you so much i can surprise you telling you that i'm from rwanda and i'm proud of sunny thank you so much dude amazing stuff all right um okay so with that said now what we're gonna do is we're gonna go ahead and uh we're going to change the microphone so we're actually going to pop in a microphone underneath this okay so i'm going to go ahead and get a microphone thank you vishal you guys you're saying i learned a lot from you keep up this awesome work could you build something with google maps oh yeah so guys if you want to see something like uber or something map related then i know there's been a hype around uber so just let me know and you know i'll go ahead and build that out and and my goal is to teach you something new every time i drop a build so today we're firing up with next years until okay so here i'm going to go ahead and do microphone let's go ahead and do microphone and i'm going to do icon microphone icon like so and this one i'm going to go ahead and import from um hero icons okay so up here i'm gonna go ahead and import this from oops i've already imported it i imported that earlier didn't i yeah there we go nice okay uh and now white rabbit says h5 and w5 are they in pixels or em or percent so the thing that's really nice is by default they base all of their values on rem values which is actually a much more responsive unit that you should be using okay so typically we build with pixels but you should be using ram as a good practice tailwind enforces that by default which is nice okay tailwind works perfectly with designers as well oh my god this popper fan playlist gets me hyped up holy let's go guys all right so now we're gonna go ahead and do a class name of five okay so i'm gonna say class name of h5 i told you i keep upgrading this playlist even i shot myself all right so now what i'm gonna do is i'm actually going to go ahead and [Music] make this look a bit more like an actual uh what we want it to look like because right now this is this looks stupid right it doesn't look very nice so i'm going to grab the div okay the outside i'm going to say class name equals now this is where the magic sort of comes in okay so i'm gonna say flex remember it's mobile first design okay so i'm gonna say flex and i'm gonna say the width should be four so everything should go into a row and it should be using the full width there we go okay now the next thing i want to do is i want to give a margin top to the to so that it spaces itself from the google logo of five so that'll push it away from the google logo the next thing i want to do is when i hover over this right i want to give it a shadow of large okay so when i hover over this you see i want to give it a shadow there we go okay so i get this nice little shadow when i hover over this this div okay so this is looking pretty nice right now okay this is looking pretty good css framework for my favorite css framework tailwind by far is absolute game changer okay the next thing i want to do is change so i'm going to go ahead and say max width actually let's go ahead and do a few tricks right so what i actually want to do is i want to have it so that when i'm clicked into so when i'm focused in this input field it's going to highlight so what i mean by that is look if i click into the field you see how it stays shadow the shadow stays it doesn't get rid of so when i hover and when i click so it stays there how do i get that right because right now it goes on the hover but when i click it it disappears so we do something called focus within right so this means if there's any focus within a child component then what i'm going to do is apply a shadow lodge now if i click it look at that because we've got focus it will stay with the shadow so you see it's very very clean all right mario says sunny you are inspiring thank you so much dude you guys inspired me to carry on so this is what i do it for all right next thing i'm gonna do is i'm gonna say max widths so you see you can even apply max width i'm gonna give it a medium now remember these have these have like sort of default values so medium is a good default value here and this will apply like a max width of medium so you see how it cut off there that's why it did that okay now i want this middle input field to take up the majority of the room so what i do is i go over to my input field and i say flex grow which is the same as basically saying flex one which means if you have more room take it up use up your more room okay so you can see the red is there so if i go ahead and get rid of this background red of zero 500 now so you guys can see it you can see look at that we're starting to look a bit clean now we need a little bit of an outline here okay we need some kind of outline here that's going to help us out all right so if you want the playlist link it's in the description and you guys can check it out right guys moderators please keep the chat clean thank you dude all right guys all right keep keep that chat clean thank you all right so now what we're going to do is we're going to use break points okay but before we do the breakpoints i'm going to go ahead and set the borders okay so firstly i'm going to say rounded right so i'm going to say rounded and then i'm going to say 4 and i'm going to apply a border and the border that i'm going to give is a border gray of 200 and we should see a nice little border there we go okay there we go really really nice okay um thank you avnish keep that clean dude right so border gray of 500 really good stuff and then we're going to give a pixel x padding on the x-axis so i'm going to give it's not a pixel sorry a padding on the x axis of five and a padding on the y axis of three and i'm going to center all the items by doing item center now you should be able to see a massive difference look how look how everything comes together with a couple of lines of code right so now look at that when i hover over and focus we've got a nice everything just looks clean okay this looks really really clean mario says i didn't realize the magic guitar went dude neither did i tailwind is so damn powerful it's crazy almost at 700 likes can we break 700 i think so i think we can do this guys all right so we have to we have this looking pretty fresh right now okay now what we're going to do here is i'm going to introduce some kind of break points okay so breakpoints basically mean once we pass a small screen so once we go further than a small screen i'm going to change the max width okay so i'm going to change the max width change the max width to something which is extra large okay so extra large now you can see look at this guys so on a phone can you see how it it's smaller then when i get to past the small so this is a small screen this is where it gets slightly bigger so can you see after sm is when we pass the small screen it will apply a max width of xl whereas previously we had a max width of medium right so that's how it grew on that responsive change okay then what we're going to do is we're going to say on a large so when you get really big right when you get your screen gets huge we're going to say a max width of 2xl okay now this will go ahead and show in a further change so we've got like a bit more and you see how it changed even more so we've got three break points at this point so we've got small like the sort of uh the we've got the okay so we've got mobile small large right so large was there right so we see how it snapped large nice okay so that's really really clean okay so with that done we are done with that box okay so the next thing is is that this is in is not looking ideal at this point right it's not centered nothing is centered it doesn't look very very good you know so what we're going to do is you can add the transition on that okay so what we're going to do here is i'm going to go ahead and give you a bit more room on this side as well so we want to center all of these elements so how do we center that stuff okay so i'm going to go to the outside form and i'm going to say class name by default i want it to be a flexbox so here we can actually break a few things you see oh it looks a bit weird right now right i want it to be a flex column direction so if i go ahead and hit save you see how everything starts to stretch right we're going to fix that in a sec as well i'm going to center all the items i'm going to say margin top of 44 okay and look how immediately with doing item center if i go ahead and get rid of the margin top i'll show you step by step so item center stretched uh put everything in the center it aligned everything centrally all right this is the same as doing align center right and then we're going to go ahead and do margin top of 44 to push it away from the top there we go and then what i want to do is say um flex grow because i want it to kind of you know use up the available space that it has okay and then finally i'm going to say the width should be four-fifths of a page okay so you can actually do a few really nice things here so in this case what i'm gonna do is the width is okay so i've actually messed something up here so that's not actually gonna be with the four-fifths we'll change that in a bit um what i need to do is flex grow effects column there we go okay that's perfect for now okay for now that's good okay so that's looking pretty pretty good at this point right so at this point you can see how look at the car is looking pretty pretty nice okay so what we're gonna do next is we're gonna have the search buttons so these buttons right here okay so oh 720 likes nice isn't it better center vertically without margin you can do you can do it either way it's all good i'm just showing you an example here so we've got the div down here now we're going to have another div and this is going to be for the buttons okay so the first thing i'm going to do is pop in some buttons inside of this i'm going to say button and this button will say google search and then the second button and something that's really cool about today's build right is that by introducing server side rendering actually makes the build the search page a lot easier so i'm going to show you why but it makes it extremely easy yes there's no more external css file which is clean right so in this case i want to like i want one place where i can have styles for this and then i want it to be oh what's up tony my cousin's in the house hey tony goes what's up go on big man hey that's what we're talking about we have literally 500 people watching across platforms right now which is crazy right and it just keeps on growing so at this point we've got the two buttons over here but i want i want to have one place where the styles are applied so i don't want to write the css once or to tell when css ones and then i kind of want it to go ahead and you know reflect on both buttons so how do i do that i pretty much go ahead and i'm just going to give it a class name so i'm going to do my control option click sorry i'm going to say class name equals and i just want to give a class a button right my goal is to have a class of button and it will just apply all of this stuff so remember if you remember correctly we had a global.css file okay so i'm going to styles globals.css and then here we injected our own custom class before for links okay so at this point what i can do is i can say dot button to inject our own button class and i can say apply to apply some tail in css and then inside of that i can go ahead and actually say so this is the interesting part so google has firstly they have like quite a distinctive gray okay so i wanted that distinctive gray so i want to set the background if i set background gray 500 for example and i hit save now you can see the gray is too dark right but firstly it's working so that's that's quite nice to see but it's actually working the way it should be working but it's just too dark right it doesn't it's not looking the way i wanted it to look so what i'm actually going to do here is i'm going to use a custom value now what's really nice is remember in the beginning of this tutorial we went ahead and showed you how to install jit which means just in time compiler now when you're using a just just-in-time compiler you can pretty much go ahead and give it the values that you want or that you expect beforehand and it will just pop in those values when it generates the css which means that i can go ahead and put square brackets now and put a custom value here so i can go ahead and put a custom value here which will go ahead and actually give me a custom um style being applied okay so i don't have to use the the sort of set ones and you can see now there's a very subtle gray okay like a super subtle grey there being applied which is super clean right it works really nice um somebody says you live in london how are you dude i'm a london boy so then we say p3 to give it a padding of three and you can see we already get a nice bit of spacing and then i'm going to say rounded medium because i want to give just a slight rounded medium effect and then i'm going to say okay so when i hover over it i want a few things to take effect but the first thing i want to do is i want to use this nice little ring utility class to say ring gray of 200 and this will give a nice little border now you you can't see it that much right now because it's not in effect but i will show you how to go ahead and do it so i'm going to type in text sm to make the text smaller then i'm going to say the text should be a slight gray so i'm not a super powerful grammar i'm just gonna say 800 so it should be a dark very subtle dark gray and then we're going to start applying the effects so when i hover i want to apply that ring that i spoke about i'm going to give it like a kind of a a one kind of pixel value so you can see when i hover it gets like a you see a very light line on it right so that's how we get that hover for the ring and then what i'm going to do is i'm going to go ahead um we will be using grid somebody else i'll be using grid we will be using grid i'll show you in a bit where we're going to be using grid just bear with me okay so we've got the hover here happening and then the second one will say it's okay when we're focused so when you click here i don't actually want to have that little blue outline so when i click this right now you see how i get a blue outline i don't want that blue outline okay so i'm going to say outline none hit save and now you see when i click it the outline didn't occur where i refresh because we haven't done any javascript code there right yet so the next thing is when we are active i want to give it a ring i'm going to change the color of the ring to gray 300 so by default it's um let's go ahead and hit save by default it's uh you see it's it's a it's a 200 by default and then when i when i'm active it'll turn to a 300 so when i active it means click so you see how when i click it it changed right there we go really really nice okay so that's really really awesome and it works exactly the way we wanted it to so with that bit said we have that looking pretty clean i just want to do one more effect i want to say when i hover over this button i want to apply a shadow of medium okay and i hope you guys can start to see that the effect that this actually the power behind tail and css right and if you can see the power behind tailwind css and you're happy that i dropped tailwind css smash the thumbs up button let me know in the comments right now because i will keep on bringing value on tailwind and next.js together because together they are very powerful dual okay so we have this being applied here so i'm going to go back to my index and we have both buttons now obviously this isn't ideal i'm going to show you how we can do a really nice little styling trick here to make that look just as we want it so i'm going to go to the parent div and i'll say class name i'm going to give it a flex all right so i want to be flex now i want it to be um by default remember mobile friendly okay is what we think about first so in this case this is the final build so i'm going to close this this is the final build right here and this is what we have right now okay so what i want to do is you see as it it starts off in a column and as it gets bigger it turns into a row okay so remember we should design with the mobile in view at first right so mobile in thought at first so flex column should be our default right so it should be stacked up on top of each other by default now the width in this case i'm going to do the width should be a half by default all right so if i do the width of a half by the fourth that means it'll be the half of the screen okay which is nice and then i'm going to say space should be between the y components right so to the space between the children on the y axis so now as soon as i do that you should be able to see a little gap be present now so that's really nice to see that little gap okay so ham says brilliant sunny thank you so much dude hope you're enjoying this all right so we've got space y of two and then what i'm gonna say is justify center okay so this will go ahead and just make sure everything stays in the center right even when it goes ahead and changes as it resizes i'm gonna give it a margin top of eight so that it's not touching the input bar and already that's looking clean but when we're on big screens that's not nice is it right that doesn't look nice when we go on a big screen right we want it to kind of you know have that responsive nature so what i'm going to say is when i hit a small breakpoint i'm going to change the the spacing to go from the y axis to go ahead and get rid of the spacing okay so now what we should see is as i get bigger you see the spacing disappears right and then what i'm going to say somebody said bootstrap or tailwind tailwind the whole way there's not even a question tell when like if those guys want sponsors whatever i'm down their win is so good and i don't say that about a lot of things but tailwind is damn good okay um that's why that's why i'm behind it so much okay oh geez are gonna know where this one's from this song all right so then i'm gonna go ahead and say when you hit the small break point go ahead and change to a flex row okay and then i'm also going to change the space on the x-axis to go ahead and be a space of four okay so let's have a look at this now if we've done it correctly as soon as i hit that small breakpoint boom look at that how nice is that right so perfect on the desktop as we resize boom looks amazing right that's really really clean okay so everything's looking really nice right i'm really liking the look of that gaming map thank you for the donation dude tailwind on material ui oh different use cases i mean different use cases tailwind has tailwind ui as well so i am going to dive into that and have a look at that as well right so with that said we have done the body right right here okay so what i'm going to do next is actually go ahead and before we hook up the buttons i'm going to style out the footer okay so the footer is our next step at this point so i'm going to create i'm actually going to create a footer component okay so it'll be a lot easier just to have a component down here which is the footer right so that the footer over here is very simple we go ahead and create a component and this is where i use grid okay so i'm gonna go footer.js like so underscore rfc for handy little snippets and then here we've got our footer where we're about to go ahead and prep okay now the footer again it's going to use something called a globe icon at one point so eventually we're going to have it's not actually on this one but i will have a little globe icon i'm down there so i'm going to go ahead and prep that beforehand by saying import the globe icon and we'll need that in a bit and then i'm going to use the appropriate html tag so this is going to be a footer so we're going to go ahead and save the footer ratio says damn the efficiency you know how we do it guys and we're talking and we're gonna go ahead and have some have some coffee flip the camera to this one change the color of the background because that's how we do it ah that was that was smooth i don't even care how smooth okay so now what we're gonna do is we're gonna go ahead and have in the footer firstly a div okay so you can see here how i want you guys to notice the responsive change here that happens on the footer okay so by default you can see we've got three like three rows here and a united kingdom at the top okay so if i go ahead and make this bigger something very interesting happens okay it changes from a three row to a two row but carbon neutral since 2007 at the top stays at the top okay and then when we go even bigger it drops into the middle right so that's not as an easy of effect as you would think usually okay so small break point means once we're basically we start off in a mobile view when we hit the small break point is probably when we hit this point okay so this is the mobile view small this means a small screen medium large okay and so forth okay um so now what we're going to do is we're going to go ahead and build that out okay so for the footer we're going to go ahead and do this so somebody says why next yes not react yes because servers are rendering dude period all right learn react.js and then when you want to level up you move over to next chairs and it's going to help you out okay so now with that said i'm going to go ahead and for the footer i'm going to first define a few things actually let's go ahead and pop out a few things inside the footer first okay so i'm going to go ahead and create a div first this is going to have a p tag inside of it which says united kingdom right so i'm going to hard code these values and obviously you can upgrade this afterwards to make you have like you know some kind of cool sort of um you know detect where you're at sort of feature all right so down here we can see united kingdom okay and then what i'm going to do is i'm actually going to ensure firstly that i've styled this correctly so we're actually going to go up to the top firstly i want my body to take up the entire sort of width so my footer right now should be at the bottom of the screen okay so we need to go ahead and fix that so we have a surrounding div in our parent class before okay what i'm going to do here is i'm going to say class name equals i'm going to say flex and then i'm going to say flex column because i want the entire screen to be in the column and then i'm going to go ahead and see how everything starts to break right that's fine don't freak out we're going to put everything in the center with item center and then that will go ahead and you know push everything into the center and then i'm going to say justify center justify center and then i'm going to say height of the screen and watch what happens here guys boom look at that everything looks pretty clean now okay now that's messed up right there okay so that's kind of messed up there so what i can do is firstly i don't actually think i would need um okay we could do it a few ways that's fine we can do a few ways but what i'm actually going to do here is i am going to have items in the center but for the body i'm actually going to change one of my values in the form to become so where's my format here i'm going to say the width of this should be four-fifths okay and there we go and that's what i wanted and then that actually prevents it from touching as well on the side okay so the width there is four fifths and then that's where we want to get to okay this is amazing stuff guys um will this live stream be saved yes it will be saved all my live streams are saved afterwards for you guys to watch afterwards okay so this looks clean at this point so we're gonna go ahead and get this looking right and the footer side of things so for the footer we're gonna go ahead and say we've got united kingdom up and running so we're going to go ahead and for that div i'm going to say a class name of let's give it a pixel on the uh a padding on the x axis of 8 and a padding on the y axis of 3. hit save okay guys i see so many people saying next looks like react next is react.js it's a framework for react.js period okay you have react.js and then you stack next on top it's a framework for how you use react.js and it allows you to have server-side rendering and a bunch of other cool things like exact site generation inside of your application so i keep seeing it so much all right that's how you do it okay so with that said it's karen so we're gonna go ahead and at the top now i'm going to say for the footer now make this will make a lot of sense once we sort of you know dive in i'm going to say this is a grid okay it uses the width of four and we're talking about the footer here at this point and then i'm going to say um we need to divide so i'll just keep it there for a second then i'll go ahead and upgrade afterwards um i'm gonna have another div underneath this and this div is gonna have um uh it's gonna have another div with a globe icon inside of it so we're going to have our we've got a div here we've got the united kingdom and we're going to have another div here so yes and then we're going to have this is going to be for the remember we have three sections to account for here we have one div two div three div okay so this is the first div which is gonna have inside of it carbon neutral since 2007. okay so you can have something like this i'm just going to pop this in here and i know it's a loose string i'll show you what i'm doing in a sec okay so i'm going to go ahead and pop in the globe icon here i'm going to say globe icon and then if i hit save you guys will see ooh it's looking huge right so i'm going to give it a fast name with some styles on the globe icon like this save and then you can see that looks a bit cleaner okay now don't worry this will all snap into place very soon okay don't freak out it will make a lot of sense soon okay so the first thing i want to do is go to my parent div over here and actually let's just start at the top right so the overall div i'm going to say it needs to have a divide between its y components right so everything on the y axis and i'm going to do a custom value of one pixel okay so you can see now we've got like a little divider between our y components right of one pixel and then i'm going to say the divide the line itself should be a gray of 300. okay you see how it become a little bit thicker right in terms of color so thick the color is now a bit darker and then what i'm going to say is a background should become a gray of 100 and you can see with this nice nice little palette it makes styling things a lot easier right it makes a lot of easier things right so it makes it a lot easier when you're doing this stuff i'm going to change the text to a small okay so that makes it a little bit nicer and small and then i'm going to change the text color to a text gray of 500 okay and then what we're going to do is we're going to go ahead and there we go it looks nice right loads of people saying when's the course going to get released the course is actually the it's right now inside of the um in the uh in the um description okay so uh you guys can check it out so we've got the div that top div is completely finished the second div that i want to do is go ahead and say class name oh this is a classic let's go into equals and guys we are nearly we just broke 800 likes that's what i'm talking about what the hell thank you guys thank you so much and we'll get more people watching right i don't know the love you guys share me like give me is incredible right if you know if you're watching right now and you're not subscribed just please subscribe hit the bell notification icon because i'm going to be dropping videos weekly now which is gonna be a hell of a lot of fun yes i said weekly i'm gonna be building everything every single week crazy stuff i'm setting myself challenges this year all right so we've got grid and then what we're gonna say is grid column of one by default grid column of one column one now this means by default there's gonna be one grid column here so if i add in the second child it's gonna be something like that okay so uh somebody says give your paypal id uh there's actually a nice little donation link in the bottom it's links.hopperreact.com right but thank you so much it's in the description thank you so much dude um so here we're gonna say div and then i'm gonna have three p tags so p times three and that's called emit and then it's going to say advertising business and how search works i'm actually just going to go ahead and copy those in boom and then hit save and now you can see that everything's stacked up because it's one column okay so let me go ahead and make myself a little bit smaller there we go everything's stacked up because it's one column and then what we're going to have over here is another div outside of this which will say privacy terms and settings okay i'm gonna go ahead and do this privacy terms and settings and then at the top where we've got this div i'm gonna say class name equals and then i'm gonna say for the so for the advertiser remember this is actually three different divs so you've got the first div which contains this one and carbon neutron then you've got these three inside of a div and then you've got privacy terms and settings inside of another div okay and we need to style them accordingly so the first one with advertising business and all that stuff we're gonna say that's a flex box with justify center so justify center tab 9 coming in clutch as always okay then we're going to say on the medium break point i'm going to change that actually i'll show you the medium stuff afterwards i'm going to change the spacing of the x axis to become eight and i'm going to do white space no wrap okay so white space it shouldn't be this should be white space no rap okay so we could do that and you can see now this became justify center accordingly right so that looks pretty clean i'm going to do the same thing for privacy terms and settings okay so class name oops go down here class name like so and i'm just going to do equals and then here i'm going to say flex justify thank you center and then i need to do space x and you see how tab 9 guessed it before i even done it right and then you can see how look at that it's starting to look a lot more like the final product right so this is actually looking a lot more to this we're trying to get to this sort of angle okay great vibes that is like a bot lurking somewhere nah dude there's no butts they were we're all good osman says the quality of these streams out as well dude that's what i try and aim for you know that's my mission with you guys is to go ahead you know make this thing incredibly good now when i hit a medium break point i do want to change a bunch of this stuff okay so the first thing is on the bottom one when i hit the medium break point i want to do a margin left of auto so that it flies over to the right okay so now if i go ahead and see this you see privacy terms and settings is now far right after the medium breakpoint which is what i wanted okay now the second one at the top and say medium break point when that gets here i'm gonna say justify self start okay so a few different you know different rules and this is going to justify itself so it starts at the beginning and now if i go ahead and oops that's a bad decision there we go and you see how now it goes to the start okay so that's how it splits across now the thing that's broken here is one we haven't started carbon neutral since 2007 and secondly we haven't modified what happens to the grids okay so i will show you how we do that now so the first one is we go to this the one which has the little globe in it and we go ahead and apply some stars to that the first thing we want to do is say flex that way it drops into a neat little center bit and we say justify center nice and then we're going to say items should be centrally aligned on the y axis and then hit save and now you can see this everything's looking pretty good at this point but look what happens right so it starts to break apart in a nice way but the columns aren't being responsive at this point okay dev guy says your content is awesome your content helped me make cover 19 track and i got a prize in the science fair that's amazing dude amazing amazing stuff thank you so much guys we're about to break 900 likes let's do it let's do it together i think we can break a thousand guys i think we can break a thousand today i swear to god i'll make my day if we break a thousand today right i'll do this every week if we break a thousand today right so we've got item center over here and then what i'm gonna do is i'm gonna say okay when i hit the medium breakpoint this is where the magic happens okay when i hit the medium break point i want this column to span across two columns okay then when i hit the large break point i want this column to span across one and i want the column to start so this is actually it might be a bit confusing if you're not used to you know any grid work but don't worry it'll make sense once we get this done i will say grid start too so now if i go ahead and do this you can see how basically think of it this way right so see how carbon neutral takes up the space when we hit the medium break point and then on the final one it takes up the entire width okay so it's actually looking pretty good at that point right so what we need to do now is actually change the parent container so we've got grid column one when we're when we're like one more on the mobile size okay then when we do md when we hit the medium breakpoint i'm gonna change to two grids okay so grid columns two and now when we see this grow it will change to two columns right so everything is actually pretty good there so you see we've got two columns and then what i'm gonna say is when we hit large i'm gonna hit grid columns three okay grid columns three i'm gonna say the gap between the y components oops gap between the y components so gap between the y components should be four hit save and that spaces things out a little bit and then the interesting one is called grid flow dense right so this is actually a dense rule which is pretty clever so you see here look what's happening right so this is a bit of an awkward situation right now right so it's not using up all of its available columns so what we need to do is apply something called a dense rule okay and this means that whenever it resizes it will just use up the space that you had okay so we do this by saying grid flow rodents okay so here what i'll do is i'll say grid flow rodents and now look what happens right so actually right now it's not entirely fixed um let me go ahead and change this one second okay so we need to do pixel oh wait i've done it in the wrong one oops oops oops oops i've actually applied that in the wrong section so this should be here right and then we should have this in the top one yeah oops i was thinking i was like wow that's a bit of a strange strange fix my grid flow dense should be here right it should be over on this one there we go now let's double check if we've done everything correct okay so there you go you can see how that works right so what's actually happening here is let's break it down from the parent right on a mobile view a grid column one on a medium view where we turn to two columns and on a large return to three columns okay now the globe icon once or this top carbon neutral one um is basically on the medium view gonna span across the two columns which means it takes a qui the entire width okay and then on the large it will only span one right but it will take up the second column which is how it's able to position itself in the middle again right and then that's how we get this nice sleek look and feel which is pretty cool right this is really really nice okay now this is awesome yeah we're using tab 9 to do a lot of the auto completions right so absolutely amazing stuff okay so this is looking really really clean at this point okay so we with that said we need to now link up the next step which is the button functionality okay so let's go to our index.js because we are now done with the footer okay we're done with the footer we're nearly at 900 likes i think we're making good progress so far let's keep on killing it guys all right so look at this this is actually fully responsive right now right here the bottom footer changes depending on what screen size we're in see how the buttons change depending on what screen size we're in nothing breaks it just looks great and i usually get those questions and comments like something you know it's not responsive enough right like it doesn't change things but this is like fully responsive looks great okay so with that said now i want to basically as i type in let's say i type in testing one two three i want to be able to click on google search and it takes me to the appropriate page okay so now what we need to do is i'm gonna go ahead and go to my home and i'm going to go ahead and type in the following so i'm going to create a search function so it's going to be con search right and this takes an event because it's going to be on a button press and we don't want the page to keep refreshing so i need to do e dot prevent default right so that's right now if i click this button it refreshes okay so i'm going to hook this but this search function up to these buttons okay so i'm going to say on click and i'm just going to do the same thing on each of these button clicks i want it to search okay so now if i click it you should see that nothing happens okay which is great that's exactly what i want right so nothing is happening when i click it which is perfect okay now what i want to do is i want to go ahead and um white rabbit says you want change font color you have to change it one by one or you just change the parents uh phone color and then everything inside of it will change that's how you do it nicely okay so what we can do now is i need the text from this input field okay so how can i get the text from this input field in a very nice easy slick fashion we're going to use something called a user f inside of react so i'm just going to basically have a reference which is like a big pointer to that input field okay avni says table9 coming in clutch hell yeah dude tablets killing it today right so what i can do now is i can go ahead and get that input right so what i'm going to do is i'm going to create a reference called search input ref and this is going to use the use ref hook and react i'm going to auto import this from react and then we initialize it with a value of null okay now i go ahead and i click this and i just need to attach it to my input field so here i say ref equals search input ref and now i have a big fat pointer poking to that input field so whenever i need a value i now can reference the value hence the ref okay so what i can do is here i can say const term right and the rule of thumb is when you're dealing with cons let var the rule of thumb is never use a var never right always use a let instead of a var but the rule of thumb is always use a const first until you need to change the value and then you switch to a let you never use a var okay always use a constant until you need a lap that's my rule of thumb it makes it so easy okay um and guys we're almost at four and no 900 likes 400 900 likes incredible stuff cons term equals search inputs we go to the thing that it's pointing at and then what i'm going to do is do dot okay i'll make this a little bigger we see dot and then i'll say current dot value okay nice and let's go ahead and hit save and now i should get the values if i type in test one two three this value will basically i'll be able to get the value inside this term variable now from there okay because we've attached a reference and it's gone ahead and done it okay so now what i'm going to do is say if there is no term okay if there was no term then we just simply want to return from this right we don't want to have anything happen if there is nothing entered otherwise if i'm clicking google search in an empty field it doesn't make sense right then what i'm going to do is i need to redirect the user to my search page so we are going to have a page which is forward slash search right the home page is just the index which is forward slash we're going to have a search page so all we need to do is direct the user to that page okay and we're going to use something called query params to include the search term in it right so what i'm going to do now is i'm going to get the router so we need something called a router and next js has a built-in router right so what we're going to do is we're going to import it from next.js so i'm going to say import use router from next router and here i say const router oops router equals use rooter and then i do open close parentheses and like so okay now we have our router inside yes and then like here i can i can say router.push and then i want to push on this sort of you know the the history of the person's browser which means i'm basically just going to redirect them but they can then go back if they need to so i'm going to do back ticks because i want to do some string interpolation there i'm going to say go to forward slash search and then what i want to do is wow look at look at this tab 9 figuring out what i'm going to do that's scary good yeah basically i want to do a query param so question mark and the query basically is like it's like including a variable on your urls right so i'm going to say the query is term and the search term is going to be in this case the jsx for the term so this will basically go ahead and redirect the user to like search forward slash term and i want to show you this in practice very quickly so if i go to science.com i type in testing and i hit enter search term testing right test equals term equals testing and then we go ahead and get the appropriate result so what i'm going to do here is this so now if i go ahead and do it we should get to a 404 page but if i type in like let's just say test123 google search and there you go it says search term equals test one two three and there's a bit of uh encoding in the url the browser that's why that's happening now this is normal if you get a 404 page this is correct because the page we haven't created it yet and next.js has a nice little fallback page that can go ahead and prevent us from seeing pages which don't work okay uh i stream at 60fps because you know it's buttery smooth mate all right you can go you can actually watch it back in in not 60 fps so that's that's completely fine for you guys i just want to say we broke 900 900 likes boom that's what i'm talking about i love you guys it's incredible the patience everything you guys give me is so nice okay so now we're gonna go we've already done the redirect okay so this is actually perfect at the moment all right it redirects them to our search page we just need to build the search page so how do we build a search page in next.js all right julie cortez is sonny you're still the god thank you thank you so much join the papa fam you're here you're present this is incredible andre says you're cool man thank you so much dude right so now what we're going to do here is we have our code up and running so we're going to go to our pages and by the way if you didn't know nexus gives you a back-end api out of the box so you get like express roots out of the box but we're not going to cover that today instead what we're going to do is we have index.js for the home page now i want to create a new page called search which lives at forward slash search on site on the web browser okay how we do it is very simple all we need to do is type in search dot js and now you're wondering something but that's not capital os it's because these values are actually linked to the root name so in this case it has to be lowercase s okay so i'm going to go ahead and hit enter and we'll do underscore rfc and then we have our search page okay now this page on the actual code should be a capital right so this one should be capitals uh just for standards and this one is lowercase which is fine okay so that's exactly what we want to get to now this page is going to be extremely clean once we get it up and running the first thing we want to do is actually change the head so i'm going to go ahead and import the head from the component over there and inside of our component i'm going to say we have the head that special sort of head tag oops and then i'm going to change the title of the page let's just say search results for now okay but eventually what i want is you see how even in the um even in the title over there it says testing google search so it even has that in the testing right which is incredible right so this is this is really really cool shamoon says you are a beast boy thank you so much hashtag proper react that's on the hashtag pop of fam dude all right this is incredible stuff right so let's go ahead and carry on we have this looking good um and if you want to change the icon here you can go ahead and do so by changing that link and it will work for you okay so what we're going to do is i'm going to have two things in here i'm going to have a header and i'm going to have the search results and that's simply it i'm going to have the header and the search results okay so the header is going to be all of this stuff up here right so the header is going to be the sticky component i say sticky because when i scroll down it will stick right so excuse that little squiggly line but this entire entire top section is the header everything else that you see down here is the search results okay so all of this is going to be search results right and you're going to be surprised at how easy it is to get pagination on this b and on this build so it's it's it's fun okay it's a lot of fun okay so what we're going to do is we're going to build out the header component right so the first thing i'm going to do is i'm going to say header right but i'm actually going to show you that this works first and we'll say h1 search page search page and because it's literally living here on this page we don't have to do anything else now all i need to do is type in google search or hit google search you see how it goes to the search page so it works out of the box with next.js is so fast and clean like that all right and we have fast refresh which is awesome okay now you are papa beast nice yeah that'll be cool i know papa beast i miss the beast all right commercially mr beast watch one of these videos holy crap that'll be crazy right let's go to and do a header like so okay and let's create a header component okay so this is gonna be a header.js component we're gonna do our underscore rfce trick and then we have our header okay so let's go ahead and build out the header itself so first thing i want to do in the header is we're gonna change these div tags to header tags okay and i'm actually going to go over to that page right now so i'm going to say testing so now we're at the this page and i'm going to say header and then the first thing i want to do is have an image okay so the image is going to be this thing at the top oops i'm going to have this thing over here at the top right so i want an image like so so i'm going to go ahead and pop in an image like this and this is going to be from next so we're using that special image library which needs a source it's the first thing and the source here i'm just going to do a simple picture i got from google so nothing fancy with that one i'm going to go ahead and just do something from google i am going to make it um oh no it's already by default a lazy loaded um lazy loaded uh image so i'm going to go ahead and give it a height and a width and then i'm going to go ahead and give it a class name of cursor pointer because i want when i hover over it i want it to be a clickable element so it's going to look like a clickable element okay if i go ahead and do that then what i need to do is go back to my search page import my header and hit save and now we should see google at the top perfect all right so google's looking good um that's what we wanted and everything's looking pretty sweet at this point now what i'm going to do is eventually i will have an on click right so actually what i want to do is i want to have it so when i click it it will throw me back to the original page so to do that it's actually very simple i'm going to show you just how easy that is right i'm going to go ahead and import my user router i'm going to go ahead and pull my router using that hook so const equals use router and tab 9 just makes it so fast and then i'm going to have an on click right so event list which says an inline arrow function which will do the following say router.push because i want to be able to swipe back to come back to this page if i need to hence why i'm pushing onto the stack and not replacing and then what i'm going to do is go to the forward slash right which is the home page and now oh nice jd says oh my god first time making the live you guys are amazing love from nigeria i'm proud female front end developer because you guys will watch the paper there well done guys that's incredible right i love the fact that we inspire even women to become coders that's what we're talking about papa fam is everyone okay so if if i can inspire you guys out there to start coding as well because i know it's male dominant at the moment so i would love if more girls jump into public family that's what we want to do i even want maibon to start coding right so i'm trying to get her on these videos and we can do a map on code series which will be fun right so now if i click this boom i'm back at the homepage simple as that and if i swipe back i go back to my swipe right that looks pretty pretty clean okay um craig says you probably need to add some config next to make lazy little work if you link an external image uh right now it actually does it out of the box after i mess around with it but it's working pretty good at the moment right so at the top bit right at this we've got the image at the bottom at the moment now i'm gonna have a custom sort of uh you know a custom input field okay so the custom input field at the top is going to be a form okay so this form over here we don't need an action what i'm going to now have inside is an input field this input field is by default a text input field so that's fine and this is going to have a reference to this because remember we need to grab the value from it okay so i'm going to say search input ref is going to be the value that we need and i need to make a reference so i'm going to say con search input ref equals use ref and we're going to initialize it with a value of no this is that big pointer that i was talking about earlier that we is it is how we're able to get the value out of that text box okay so the value that i'm talking about this imaginary text box here i need to get that value and the way i do that is i go ahead and you know do um search input ref and connect a reference to it okay so that's how we do it now everyone's asking what age did i code right like what age did i sort of um you know start coding i started coding uh 16 i think it was just 16 17 16 17. i'm now 26 right so um yeah it's not it's not bad and also guys we're almost a thousand likes crazy stuff absolutely crazy stuff right so this input field um we're going to go ahead and now do a class name and this class name for the input field is going to be flex grow because the parent is going to be a flex container and i want the input field to take up the majority of the room okay um and then we're going to have a width of four okay so width of four and then i'm going to have the focus to be outline none okay so focus will be outline none nice and i hit save and there you go it's right there it's a little bit hidden for now but we will make it scene in a sec now i'm going to start this form so that way we can actually see some stuff happening right so i'm going to go into this a flexbox form okay i'm going to give it a border oops i'm going to give it a border and i'm going to say border gray of 200. now i just want to mention as well a reason why i'm a big fan of the papa fan playlist is because this is what the kind of music that i kind of listen to your vibe to and i can tune to when i'm kind of coding now it doesn't work for everyone but for me it's really nice when i'm when i'm working like depends i kind of go in and out of phases we're gonna make this rounded four that's why i made the playlist that's why everyone can go ahead and enjoy this playlist right i'm going to say flex grow on this container okay because the header will have some styles in there actually maybe not right so i'm going to leave that one out for now i'll say shadow large shadow large for now for this one and then i'm going to say the max width should be 3 xl and i'm going to put the items in the center okay so the form it should be this and then for the flex here i'm actually going to say a padding of on the x-axis of six a padding on the y-axis of three a margin left of ten and a margin right of five and you see how quick it is to get all of that typed in right if you are looking for the player there's a lot of people asking the playlist is inside of um i don't know who's uh he's saying that but yeah um i don't know what's happening yeah the playlist link right the playlist link is the newsletter link in the description so you sign up to the newsletter i'll send you the playlist and that's it it's yours and you get access to you also get all the cool emails that we send okay so you guys can do that now here you go look at this we have this working pretty pretty nice okay so this is gonna be the top search bar over here okay so the next thing i want is next to this input i'm actually gonna have an x icon so x icon like so okay now this x icon is gonna be a solid hence i'm going to go to the solid option and do this and hit save all right ibrahim says green from 060 thank you so much i have done five react builds i want to ask how you make reports mobile friendly you're in the right place dude tailwind css and that's what we're exactly what we're doing today okay so we're gonna do a height of seven for this icon oops class name equals a height of seven and you can see how i'm able to code really quick with the help of things like tab nine right it just helps me not have to type in the same things again and again again it just basically all completes it for me i'm going to make this a cursor pointer there you go change the color of that to cut pointer and i do want to have a slight hover effect so when i type in you see this little x right here when i click it you see how you see when i hover over it it has this little hover and if i type in here and i press this x it clears the value here which would be really nice okay so at this point what i'm going to do um i'm going to go over here and i'm going to go ahead and say transition so i'm going to go ahead and say cursor pointer transition transition a duration of a hundred and i'm going to say transform and i'm going to say when i hover i want the scale to go to scale to go to um basically 25 bigger which is 125 okay so now if i hover over it can you see how it grows ever so slightly that's how we do that right 30 more likes and we are at a thousand likes that is insane like that's more well that's like three times the people that are watching right now which is just like that's mind-blowing how does that even happen right if you want to help it get up just smash the thumbs up button but that's incredible right that's actually that's just crazy honestly now when we're on a small screen i want to add a little margin right of three right because we're gonna have a reason for this in a bit but i'll show you what what i'm doing there okay now on click i'm gonna add in a little bit of code here so when i click this little x icon the way i make it clear the text field is i say on click and i say the search input reference current value goes to a blank so if i try that out now and i go ahead and type in and i go ahead and hit x you see how it clears out that's how we do it okay so it's very very clean to do that right um guys almost a thousand likes very dyke spoiled sport did all right so now with that said we're gonna go ahead and we've got this we're gonna add in the microphone icons now i did want to show notice how when we get to a small screen size those microphone icons disappear right no it's not how you see how the microphone icon disappears right so that's actually something that we can go ahead and implement very easily until when css okay so i'm going to show you how to do that so the way we do that is we have next to the x icon we have a microphone icon okay so microphone icon this is a microphone icon over here and this one is going to be uh as such like that and you can import it as followed at the top and then we're gonna have a class name over here so class name equals oh seven likes damn he goes just kidding bro i love the videos dude the thing is you start a war when you do that people just start going crazy that's why i say it it's all good though man it's all love all right we do a h6 and then i'm gonna go ahead there you go we've got the little uh arrow up here right i say we're all about positivity here all right margin right over six um the margin right of three right because i don't want to touch the next element next to it afterwards so i'm going to push it away a bit um and then what i'm going to do is i'm going to say for this one hidden so this is going to be hidden by default on mobile okay so remember mobile first which means by default is hidden yeah only when it hits a small is it going to go inline flex right so now only when it hits the small break point does it come in line as a flex item okay so little things like that very important text blue text blue of 500 okay that would look really nice and then we'll say border l of two right i'm gonna border left of two and right now what i'm gonna do is i'm just gonna make this a little bit bigger because we can't see what's actually happening so border where am i going here order lf2 and then what i'm gonna do is i'm gonna go ahead and say p padding left side of four and a border gray of 300 and then we hit save and you can see look at that we got a very nice effect there which is fully responsive as i go beyond it so uh past the small breakpoint back to the mobile view you can see how it disappears right so oh ho 1k that's what i'm talking about 1k wow guys i'm going to i'm going to drop the popper fountain that's what we're talking about that's incredible i just want to say like let's just take a second thank you thank you thank you thank you all right massive massive help massive appreciation that helps the video go so far so if you're watching this on replay whatever it is thank you smash that thumbs up button share the video help it grow and i appreciate all of you without with that said let's jump into the build and and absolutely keep crushing it because man you guys are absolutely just so you guys are something else right so what we're gonna do here is we've got the microphone icon i'm gonna have a search icon next [Music] search icon and then we're gonna go ahead and say somebody said eight dislikes from the people were bing exactly i'm going to go ahead and say search icon class name of h6 and i'm going to say text blue 500 and then we should see that little icon and by default mobile first is going to be hidden and i'm only going to show it after the small break point inline flex okay so now we should see as i go ahead and shrink it boom we get this nice responsiveness like so okay um lakshmi please don't spam that dude um because you're just gonna get blocked and i really don't want you to get blocked okay uh avnish please uh moderate the chat thanks dude all right so once we've got that down what we're gonna do is we're gonna add in the search button right now you're probably wondering what search button right so i'm gonna show you a little trick whenever we have a form and we want to have the enter key all right do something for us then what we can do is actually have the um the button hidden but still be functional okay so um somebody saying like i would definitely want to learn please do make tutorials dude join the course right the course like literally we teach it from the basics so uh we cover everything plus coaching so it's absolutely incredible value okay so we're gonna use the avatar that we had previously afterwards but we're going to actually right now i'm going to add a button in and this button is going to say such so by default this button is what's responsible for the actual search kicking off okay but what i'm going to be doing is by default i'm actually going to use a normal html attribute called hidden okay let's go ahead and go back to our chill music there we go nice yeah so i'm going to go ahead and do a hidden button and i'm going to say type submit okay because we're inside of a form which means that this is the one that will get hit when we hit the enter key okay somebody said do you prefer tailwind rather than bootstrap hell yeah dude tailwind is my jam now i love tailwind all right and then what i'm going to do is on click of this button one click of this button i'm going to trigger a search function now this search function is actually going to be very similar to the one that we have before in fact it's going to be the same one so you could as homework extend it out you know create the same thing again but what we're going to do in this search function is pretty simple we're going to say e dot prevent default so that it doesn't do the whole refresh i'm going to get the cons term from the search input ref.current.value got current.value and then what i'm going to do is i'm going to say if there was no term so if the user didn't type anything out in then what i'm going to do is go ahead and say return so we don't want to kind of execute past that okay siddique says new subscribers saying thank you so much dude appreciate you here right now i'm going to say router.push by router.push because when you search remember all we're doing is pushing them to a forward slash we're doing it back tactics because we're going to interpolate i'm going to push them to a search with the term being the term that they've entered in the search field this means that when they type in a new search here let's actually try it out right now okay so i'm going to go full screen on this and you can see it's at the top it says term testing so if i type in hello world and i hit enter you see how it says now it says hello world right so that's how we do that okay um we are going to be using google api uh dude so so we are going to be doing that right now for the header right so this is looking pretty pretty nice at this point the header i'm going to start giving a little bit of styles because it's looking a bit kind of janky right i'm actually going to stick it to the top so i'm going to get this nice stick effect so you know how it sticks to the top up here right the way we do that is we basically just say we apply a class name of sticky and we say stick to the top of the screen top zero the top bar and then we say background is white and that's because if without that you're gonna see the elements as you scroll over them that's the first step okay the second step is that all of this stuff right now should have actually been inside of a div so i'm going to pop a div open and i'll make this very clear for you i'll pop a div open and i'm actually going to go ahead and get the image so everything in the form cut it and pop it inside of a div so we have a little container okay and then i'm going to give this a class name of flex with a width of four okay and the p of six which means padding top left right and bottom of six okay i'm going to center the items in the center again that will go ahead and actually fix the aspect ratio difficulty now you can see this is looking pretty pretty good right but we have a slight issue with the sizing here right so let's figure out where we went wrong there with sizing and then we can fix that so for the form we had a pixel uh padding of six y six margin left margin right border border gray rounded four flex grow that's the one that we're missing right so here what i want to say is i want this input field to expand right but we already apply a max width of 3xl but i want to go ahead and say flex grow so use up all the space i'm giving you dude i said go ahead and say flex grow grow there we go okay so now if it has available space it will use it and then we also have those icons which are purely responsive on their own so you guys can see how this is really really quite quite crazy right this is really really nice right so with that said so somebody says i should focus on that now i've been using bootstrap for the past year dude i would say honestly it's so easy to pick up tailwind that i would recommend it i'll highly recommend it all right let's carry on guys so much fun all right so with that said or the final thing i'm going to do is outside of my form so outside the form over here i'm going to pop in the avatar remember we created an avatar earlier so our own custom avatar and we gave this a url okay now the url i'm going to give this just remember i gave it like i've shortened the url for the picture of me that that lovely picture of me the coaching proper react one where i'm wearing a tux there we go boom and because it's flex grow it's just going to move out the way easy just move out the way and then i'm gonna say class name here it should be ml auto and that's because when we hit that large screen you see how it it's kind of like this is using up the max space it can but then it hits that max width 3xl but then this one isn't going to basically use up its appropriate space so i want to do a margin left auto which means that it will distance itself from the the appropriate object right so what i can do here is i can just go to my avatar and i can give it a class name of ml auto now you're probably going to want here well sonny that did nothing it didn't do anything right because this is a custom component so what i'm going to do is i'm actually going to pass class name as a prop through to avatar right so it's going to be a classic prop then i'm going to change this to become backtick uh a backtick jsx string argument okay then here what i'm going to do is i'm just going to pass through my class name that i passed in as a prop now what this does is anything i pass in here as a string will simply get appended to my css which means that it will also take higher priority over these values which is quite nice right now if you see that if i go bigger now boom we get our css pass through our own custom component which is super clean now look how nice that is guys like fully responsive looks really really clean right now firstly like if you're new to the video right now and you haven't seen that smash the thumbs up button uh right now we're gonna go ahead and create this header options section okay so let's go down to our div where we have this and underneath here all i'm gonna do is create a header options component okay so this is going to be header options and this is going to be responsible for all of the things you see here plus all of these you know the highlighting and all that stuff okay so what we're going to do is we're going to go ahead and create that header options contain a component so i hit save here i'm going to create a header options.js i do underscore rfce there we go and we have this save and i'll go ahead go back to my search page let's go back to the search page and then i'm going to go down here and import the oh sorry into the header and then i'm going to go ahead and import the header options from our file that we just created okay uh i am on a mac yes i'm on a macbook pro okay so we have the header options here and then what we're going to do is we just build out the header options okay as we need it so the header options next is uh it's pretty interesting how we get this one done okay so for header options i'm going to go ahead and have a few things happening in this class before i do that i'm going to basically split this up into a left so left is going to be all of the things over here and right is going to be all of the things over here now look how responsive this is right so firstly all of the text disappears when it gets to the mobile view right so you see how all the text on the icons disappears when it hits the mobile view that's very important right we want that responsive nature otherwise it wouldn't be able to be that responsive also the text size would changes when we hit a breakpoint you see how we it changes to a smaller text okay so all of that we're going to cover right now okay so i'm going to have a left section and i'm going to have a right section the the right section is pretty simple it's going to have a div with two p tags inside of it so p times two and then we have the settings and tools okay now i'm going to reuse the classes that we added earlier those custom classes these are just going to be sort of dummy links okay so these are going to be dummy linked on the left and right that's how we get that looking pretty clean and for this one it's going to be relatively simple i'm going to give it a class name and here i'm going to say flex space x of four okay and this will give it spacing between the two elements that are so if i go ahead and decrease this value to a two you'll see that the space between the x components changes this is a thing that i've actually lo i'm loving this right now thank you so much avnish i always forget to honestly uh i forget to have water all right ah there we go thank you so much all right let's carry on guys thank you so much dude reminding me okay so let's go ahead and smash that thumbs up button if you haven't already let's hit 1.1 k let's just keep going right so we've got this happening so the left part is the interesting part this is where the magic is really happening right so what we're going to do is we're actually going to have a div inside of our left section the div here is going to have a class name and this cast is going to be flexed with a space of x of 6. so all these children are going to be spaced out with a value of 6. okay now each different each individual element here so each individual sort of you know these these little components are going to be called header option singular right so it's all going to be header options okay craig says this water bottle is sick everyone loves that water bottle right i've got i've got a new one as well i've got this uh a blue one as well so you guys can see that all right that's from chili balls right hopefully they can sponsor us on there who knows i'm going to create a component called header option singular okay now i'm going to create this component it's the sole purpose the purpose of this one is that we don't have to repeat a lot of code so header option dot js anyone who thinks tailwind is you know repetitive and you repeat code remember you're coding in react which means you're doing functional reusable components hence you shouldn't have to repeat yourself that much okay so inside of here i'm going to import header option like so and that's perfect nice now i'm going to import a bunch of different icons i'm going to need from hero icons so you guys can go ahead and do that like so right you guys can pretty much do that and then what we're gonna do is we're gonna go ahead and simply pop in the appropriate things okay so the header option is gonna have an icon so the first one is gonna be responsible for the search icon okay so this is gonna be the search icon it's gonna have a title which is gonna be all okay and this first one only is gonna have a selected prop because we want the first one to have a selected blue default prop right the next one that we're interested in is going to be similar to this but it's going to be a photograph icon with the title of images like so okay and that one's not going to be selected and then the next ones are going to be as follow i'm just going to go ahead and pop them in right here to save us some time okay so i'm going to go ahead and build this out so we've got three props to be considerate about icon title selected bear in mind icon has a capital l because we're passing in a component itself okay all right so that's how we go ahead and do that imagine buying gucci glass no dude that's the biggest waste of money i never did that all right so now we've got the header option so what i'm going to do here is i'm going to go ahead and type in firstly the props come here i'm going to use es60 structuring to split them apart get the icon get the title get the selected values okay and then what we're going to do is we're going to return some some stuff here okay so what i'm going to return here is going to be everything's going to be sort of uh firstly the class name is going to be flex i am going to do some string interpolation here so i'm actually going to go ahead and use jsx brackets with the backtick i'm going to say this is going to be flexed okay it's going to be flexed and inside of here i'm going to have the icon that i passed in right this is going to have a class name of four all right so this is going to have a class name for h4 so it's going to have a height of four so in that case we can see all of those icons kind of pop in there okay then i'm going to have a p tag with a class name so we're going to use emmett here just to show you you can do that hidden okay and then i'm going to have hidden by default but when you break the small point it'll be inline flex now i will explain that and that's going to be the title now remember how it hides on a small screen right so think about it when it goes big it you want to see the the text when it goes to a small screen then you just want to see the icons and that's sufficient okay so that's going to be pretty pretty nice when we do it that way all right so chat's popping off today guys i love the energy you guys are giving out right um i think we're so close to hitting 1.1 k as well guys which is just like mind-blowing right so that's actually crazy um so at this point we've got this happening so i want to go ahead and do the um appropriate stuff next so we've got flex and then i'm going to say items center okay uh so wow we're actually very close to hitting that number okay so div flex and then how i'm going to say item center so right now you can see let's go ahead and make this 5050 sub where you can see what's happening items center and then you can see everything goes centrally i'm going to say space x one so space between the x components of one border bottom is gonna be a four okay so there's gonna be a border underneath all of them because you can see this and this is actually the hover effect that we have here okay so the border by default is going to be border b4 and then we're going to say border is transparent by default okay so that's an interesting one so transparent by default so we don't want to show it by default okay we only want to show it when we hover right so what i'm going to say is hover we will go ahead and say the text is blue firstly text is blue of 500. i want the cursor to become a pointer so you guys can see how much css i'm applying here by very small amounts okay cursor dash pointer sorry okay oh thank you sadashinpani thank you so much dude appreciate that so now you can see we get this nice little hover effect okay awesome stuff and i also want to do hover i'm going to change another hover here i'm going to say hover um border blue 500 yeah i'm gonna say padding bottom of three let's go ahead and do that and you can see now look at that how we get that nice little hover effect okay now we're putting the class name of string lit rose because i will be applying a uh a little conditional here right now i'm going to say if it was the selected one so if we passed in the selected um value here then i'm going to have some jsx and we'll say if it was selected then i want the value to be text blue 500 by default this one's jam i find this this one pretty chilled out i always like this when it comes on twitch if you're not following me on twitch by the way what are you doing because it's so much fun when i'm coding on twitch okay border blue i code a lot more on there casual all right so border blue 500 um and then you can see oh okay so this is interesting right i've actually got the wrong way around i think so i actually wanted to do only if it's selected we apply the following sorry so i want to apply these styles only if you're selected there you go all right and then that way the one that's selected will automatically have that value applied so this is pretty nice right i think that looks pretty clean and if we go ahead and make this smaller the text disappears but all of our highlighting still is there right we still get all of the highlighting and such right so really really clean looking design so the header options at that point are pretty much done okay so we need to sort out the styling of this this doesn't look ideal at the moment so let's target this outer class name okay so the header options out of class name this is quite an interesting one we've got flex okay so by default if we do flex you see how that one got brought up because by default flexes row and then what we're going to do is say use the width okay so width 4 and remember mobile first design always think mobile first design right everything is mobile first design okay vadan says let's go sonny keep doing this man love you honestly i appreciate you guys so much all right here i'm going to say text should be gray so text gray and i'm going to say text gray of 700 oops text gray 700 there we go and i'm going to say justify this stuff evenly okay so not center i'm going to say evenly and then you can see everything goes into the center now this gives you a nice kind of responsive feel okay it gives you a nice responsive feel but it doesn't snap to this side like i wanted it to right so we need to get it to snap to the side srikant vengala thank you so much dude appreciate that five dollar donations thank you so much dude uh avnish said um oh he just dropped the twitch link so make sure you follow me on twitch subscribe on twitch it helps out the channel and also it's a lot of fun over that side a couple of you know casual things like that um ray says i wonder if people still code without mobile first in their brain honestly i did i didn't code with mobile first until like i you know like tailwind kind of was a bit of a wake-up call again so i would recommend you like things like this will enforce you to follow the right you know the right ways of doing things by default the text should be small okay now when we hit the large break point i want the text to go back to the normal size so we say text base okay so when we get to a large screen now if you go to a large screen it goes back to its original size otherwise it's a small text and then i'm going to say large it should also become justify start right i don't want it to be you know at the when i get to the large screen i want it to come to the beginning of the page okay so this is saying oh sorry large colon justify start so now you should see it it will snap to the start on the large screens otherwise it will be sort of you know centering itself okay and then what i'm going to do is say large should also have a space between its x components of let's say 36 which is a nice sweet spot and you can see now look at that we've got that nice spacing of 36 okay and then what i'm going to do is i'm going to say on a large as well we're going to go ahead and say uh padding left of 52 and this will go ahead and align it nicely to the that edge there all right so look at that that's very nice okay and if we do it and we get smaller it'll start to resize accordingly and look how clean that is guys that's how we get that desired look and feel okay so now what i'm going to do is i'm going to finally apply a border bottom now here what i'm going to do is i'm going to say border bottom so border b dash and then the interesting one here is that they don't have their appropriate values if i do two it's too thick i don't want it that thick i want one but one isn't supported out of the box so because we're using jrt tailwind we can go ahead and use a custom value so i'm going to say one pixel [Music] and i get a nice little thin one pixel okay now this is looking clean guys this is exactly how we get to this point right so you see that's the top bit done right so the top bit is nicely done at the moment right we have all of this working so this is where the fun stuff comes in right so um what we're going to go ahead and do now is actually go ahead and fit in the search functionality so this is the portion of the build where we have server side rendering okay so server side rendering is basically when the when somebody visits your page typically what happens is everything happens on the client the app loads and the client the javascript loads in the client what we're going to do is flip it a bit so the client requests to come to your page or your website so if i click on google.com i will go ahead and hit the google server the google server basically was in the server which means all the results and everything are fetched on the server and then i just get the entire html css and javascript thrown at me right as in like the the rendered stuff thrown at me the the search doesn't happen on the client it's happening on the server then it will figure out all the results and then it will send it to me this makes it a lot more optimal it makes it a lot more easier to go ahead and build this stuff okay so let's go ahead um border b is one pixel by default oh nice is it really i did not know that thank you dude let me try that wow okay thank you so much credit card i did not know that okay nice stuff border b is actually one pixel by default i didn't know that it was uh one pixel by default see learn something new every day that's awesome dude thank you so much all right that's actually really cool now i'm thinking about all of the possible things which are nice okay i was wondering i was like why would they leave one out right that's really that makes a lot of sense now okay so with that said we're going to go ahead and create the uh sort of server-side rendering right so nexus is pretty cool the way it does it is you can pretty much go here to the search right and then we've already got the header built out so i can remove that now we need to build the search results but before we do that this page when it renders is built on the server so every time you can see if i go ahead and refresh it will go ahead and it will compile the page composite successfully and then it'll build it for us now right now this is a static page which means that it's not being rendered on the server it's a stack page i'm not going to go too far into next.js on that side but what we're going to be doing here is we're going to basically have our first server side rendering function so the way we do it in next and the way we tell next is uh because you're wondering if you're wondering is ssr hard next make it extremely easy now if you include this special get server side props function only then will it treat this page this page bear in mind not the entire site just this page it splits the app up into different pages it will treat this page as a server side rendered page okay so what we're going to do now uh is we're going to go ahead and do this we're gonna go ahead and say export async and this is happening on the server right now okay function and i'm gonna say get server side props so this is a magic function so you have to use that name this gives us something called the context okay and we can use the context as an argument when we're handling the sort of you know we need to get things from the query and the url and stuff like that okay so what we're going to do is i'm actually going to create a little bit of a helper function because google this google search api limits you to 100 free searches a day on the developer api so so you don't exhaust that quota what i do is i make a request once i capture the json in a response file and then i'll show you how you can use dummy data to mock the the sort of perspective response so that you don't exhaust your quota okay so that's going to help you out a lot when you're doing sort of api work in the future even on production stuff so use dummy data is going to be by default let's just say false all right while we're getting things up thank you so much psy for the lovely donation um so now what i'm going to do is i'm going to say okay so we're going to say const data equals okay now i need the google api at this point i need to go ahead and get the google api and all that stuff so what i'm going to do here is i'm going to go over to my um i'm going to create a file called keys so keys dot js and i need two things in this right i need a so inside this file i need an api key api key and i need a context key right the api key allows us to use the google api it's basically the key that allows us to use the google services and then the context key is the interesting one the context key is basically you can create a context by visiting the following link okay so you guys can create a context by visiting this link over here okay so this is the link you want to visit by to create context and this is basically the context for which you're searching okay so you can include certain sites because remember you can create custom searches on google which will only kind of prioritize certain websites so you can basically create a custom context and then use it in your search and you have to do that when you're doing this stuff and then the next one is this handy link that i'll drop over here so to get the api key you would visit this link and again all of this is inside the papa github repo or you can go ahead and do it now i do want to mention craig just dropped in maybe environment.local yes when you're handling production keys or any of this stuff please please please understand that you should be using environment variables okay and even with versa you can actually have environment variables set when you deploy to the versatile hosting right now the only reason why i am doing it as a string inside this tutorial is for the sake of the demo right it's a demo because i like if i start doing all of those things it's going to get way into like the time frames and i'll explain it and just take a lot of time so that's the only reason i'm using string values here but you need to make sure you use environment files okay so that's a little disclaimer there okay just in case anyone's wondering right so now we've got const api key and this api key let's just say it is some kind of value okay and then we've got const context key and this is going to be some kind of key over here now i do want to export both of these because i want to use them outside of this file now i'm going to show you how you can go ahead and get your api key and how you can go ahead and get your context key so i'm going to go ahead and click into this link okay so once you get to this screen you'll basically reach this using rest to invoke the api now what you want to do is i've actually got a key over here i think so here use the key parameter key query parameter to identify your application so you click this and then you click over here and then here it says get a key okay so i'm going to click on get a key and then what you want to do is select a project so here it says enable custom search api you want to click this link and then click on create a new project at this point i'm just going to say so i'm just going to say youtube build demo okay and i'm going to click next now what's going to happen here is i'm not going to show you the the key that's going to come up or yeah i'm not going to show you the key that comes up because somebody's going to end up exhausting the quota and then hence the demo won't work okay so i'm going to show you guys um a blurred out version of this in just a second i click this it says enable custom search and then it loads the key up okay so what you're gonna then see is a key present itself on your screen um and right now uh i've actually gone ahead and i've reached the limit of course so i'm gonna use the key that i previously got so i previously got a key so at this point you would get a key value that comes back okay or you would get a url and then it would have a key inside of it okay so you want to go ahead and copy that key right and it will look something like this okay so your key will look something like this so it'll be some random sort of squiggly stuff this is not an actual key okay so basically look something like this or you'd have a random squiggly key at that point right uh and what you want to do is put your key here okay so i'm gonna go ahead and pop my key here and then uh in a second so i'll go ahead and replace this with mikey the context key is the next one we need to get so i'm gonna click this context key click this this is a lot easier to get here you can go ahead and i'm going to click sites to search i'm just going to do www.google.com and then i'm going to do name of google search google okay create and then this will go ahead and create and then you go ahead and click add it to your site click on get code and this is what you need to grab this context this is your id okay so you want to go ahead and grab this id now i also have a value here i already have a value for this one now the context id doesn't really matter okay that one doesn't really you don't mind if that one's shared but the api key you don't want to exhaust okay so at this point what you're going to do is i'm going to go ahead and pop in a key here and then for the api key i will be popping in a value as well but i'm going to hide my screen while i do that because i don't want to sort of you know exhaust that quota so i'm going to go ahead pop in a key here hit save and then i'm going to exit this key file and then i can now use it throughout my application so i'm now back at search.js okay so we have our two keys that we needed uh so what we're going to do next is i'm going to go ahead and say const and this bit you have to pay a little bit of attention to okay so with the const data equals and i'm going to say if we're using so i'm not going to use the dummy data yet i'm going to say await fetch okay and then here what i'll do is i'll do backticks and what we're going to say is it's going to be https www.google apis for customer search forward slash v1 okay so this is what we need to type in okay so once you get to this point what we need to do is we're going to actually have our some some important variables that we're going to add on to the the url so the first one is the key variable okay now this key variable here we're going to go ahead and say is our api key so api underscore key oops api underscore key and this key we need to import this from our previous file okay so i'm going to go ahead and say import api key and i'm going to import the context key context key from let's go upper file from our keys file okay so again this is not the i you should be using environment variables to populate those values inside the keys but that's how you do it okay so now what we're going to do is we're going to go ahead and do the following so oh thank you dude i appreciate that so uh now what we're going to say is that's going to be our key and then we're going to add a second variable which is the context okay so the context is going to be this one here so we're going to say context key and then we're going to add another one which is going to be q equals and this is going to be the query okay so how do i get the query from the url the url in in question is this one so remember it's search and the query term is term here right how do i get that on the server remember i said we get the context on the server request okay so now what i'm gonna do is uh thank you so much siva for that really nice and thank you psy for the uh the linkedin donation thank you dude um brazil hey nice awesome stuff so here we're gonna say q equals and i'm going to say context dot query dot term okay context.query.term and now the next bit is our pagination but i'm going to leave pagination for now but that's how we would go ahead and get the term okay so that's how we get our search term so this will basically make a request to google it will use our key it will use the context key so it knows what site to search and then the query it will be the query that we basically entered in right so that's how it's going to do now what we're going to do is we're going to say after the thread we're going to say then and then i'm going to say response is going to be response.json okay so this will go ahead and pass the response as a json object and then what we need to do is we need to pass the results past the results to the client okay so remember this is the server side rendering right so after let's just say after the server side render so we say after the server has rendered pass the results to the client think of it kind of like that okay so this is basically where the ssr comes that has kicked in so we say return and what we do is we return the props right so all we're doing is we render a bunch of stuff beforehand on the server and then the way that the client sees it is as soon as the person gets on the page their component or the functional component that will load will actually just get the props from the server side render and we're just going to call that results and it's going to be results it's data and then what happens is the search we simply get the props come through okay props come through here and then we just say the results now this will just take some practice okay it takes a little bit of practice just get used to this but what we can do now is we can console log the results okay and then what i'm going to do here is just to prove that it works is we're going to go back to our app over here and i'm going to go ahead and hit f12 and you should now be able to see it says undefined okay interesting let's go ahead and double check why that's happening that's not what we want um so we're going to go ahead and see this it says quants data hit save and then i'm going to get the results and then we're going to go ahead and do the file so now i'm going to go ahead and refresh this type in hello world there we go this is the response that comes back okay so this is the response that comes back and you see it's got a bunch of items and these are all the google search results okay so what we want to do here is like i said before the the api is going to give you a certain quota which is a hundred requests a day when you're developing you're gonna max that out quickly okay so what i would recommend at this point is do the following thing this will save your quota not just for this one but it will save it for your any other production build that you're trying to do okay so what we're gonna do is we're going to copy right click and copy object okay so i'm going to copy the object i'm going to go back to my code okay i'm going to make a file over here so outside of here i'm going to make a file called response.js so this is going to be response.js okay and inside of response.js what i'm going to do is i'm actually going to have i'm going to say export default and then i'm going to do an object and i'm gonna go ahead and paste my object and hit save and prettier will go ahead and fix this for me so the first thing i need to do is actually uh i don't need these square brackets because i think it comes in square brackets there we go hit save and then you should see it prettier fixes it for you and now we have a sort of mocked response from the server okay this is a mocked response from the server and you can also use this to see what you get back at the different levels so this would be a handy way of doing that okay i'm gonna restart the playlist there we go nice okay so with that said and i think we have passed we are 1.1 k likes incredible crazy stuff guys okay so this will prevent you from exhausting your quotas whenever you're working with something so now what i want to do is to make to make use of that dummy data um i'm going to go ahead and say use dummy data is false write them up for now and i'm going to go ahead and change this to become i'm actually going to make this become i'm going to say if uh if use dummy data use dummy data then i'm going to basically return the response oops response else await okay and then this response i need to pull in okay so the response i need to go ahead and import from that file okay so this one there we go nice and what this will do is it will go ahead and basically allow us to have a little switch so whenever i don't want to go ahead and you know if i only use dummy data now i can just say true and regardless of what i type in now so now if i go here and i type in anything we should get the same results every time now so if i click refresh so you see if i type in the new value it gives me a basically the dummy mock result okay so this will prevent you from exhausting your your um your uh quota which trust me happens okay you're probably going to wonder like oh no it doesn't work it does it won't happen to me trust me yes it will and you're gonna exhaust your quota and then you're gonna have to wait a day or you're gonna have to put your credit card in okay and at that point you're just gonna get annoyed so that's what we're gonna do right now the fine the next thing i wanna do is i'm gonna prepare myself for pagination okay so pagination what i'm going to do is right now we we include something called the term inside of the query when in the url what we're actually going to do is prepare ourselves in the future very soon we're going to go ahead and implement pagination i'm going to say context.query and i'm going to include something called start and that's going to be a number which will refer to the page that we're starting from okay or the search results that we're starting from that number will either be present or by default it will be zero okay and then what i'm going to do is i'm going to change my results i'm going to basically add on another one which says start equals and then this will be the start index okay start index like so and now we've got like a sort of a pagination starting point okay so wow you guys are insane we have so many people watching mine right now which is like it's crazy we actually have so much like um like everyone's just sticking around that's awesome stuff guys thank you okay coffee done let's go so what we're going to do is we've got the server side props rendering so we've got this coming through hindu is i'm going to create a search results component so i'm going to say search results and also what i'm going to do is for the search results here instead of this i'm actually going to pull in the router right so i'm going to say consorter equals use rooter and then i'm going to go ahead and pull in the use router component uh hook and then we've got our router and now instead of saying search results i actually want to make this kind of cool i want to say router dot query oops router.query.term and then i'm going to say dash google search and this way whatever we're searching will basically go ahead and be inside the browser so you see in our production one we've got testing google search okay so that's what i kind of want to get to okay so at this point it we should have that actually right now inside of ours so if we go ahead and check it now so you can see now at the top rather than that if i type in hello world you should see hello world google search which is awesome right two savage says what's up pup fam what's up dude nice so let's carry on so the search results let's go ahead and say search results okay and then what i'm gonna do is i'm actually gonna pass the results that we got from the server here as results okay so i'm gonna pass this in as a prop and let's go ahead and hit save i'm gonna create this component right now so i'm gonna create the search results component so search results.js and then i'm going to do underscore rfce nice okay so once we've got the search results up the next step is we're going to get those search results that we passed and remember the props come in here we're going to do some esx destructuring and i'm going to do results like so okay and then what we're gonna do is say search results is not defined which is fine here we can go ahead and import it as such and then i can go ahead and hit refresh and then you should get here okay so once you get to this point um remember that uh we are nearly end okay so we're actually near there we're near that point now so so stay tuned and we're gonna get to that very quicker than you think trust me okay so now we've got counter log results which is going to help us out when we're coding debugging and that sort of good stuff okay so if i type in let's just type in test and then we see we get our search results which are from our mocked argument okay so we're not exhausting the quota and we're doing everything at our own pace so we get the header and search results and this will actually be the final outcome of this this file which is really clean when you think about it so inside of search results we're gonna have a p tag which and the first thing we're gonna do is we're gonna say about this many results okay so about blah blah blah number of results so what we can do here is we can say um we're gonna say about okay and then here inside of the results we have a few things okay so here if we look inside of the results we have results.search information and then here you can see formatted total results and formatted search time okay so they give us the values that we're actually looking for here right so here you can actually see all the different values that we're actually looking for are perfectly presented as we need them okay so google actually has quite a cool api it gives it back in the way we we need it so here i'm going to say results dot search information and yes you can go ahead and refactor this we're going to do some optional training in case it's um in case it's not available um we don't wanna sort of you know crash our app i'm gonna say formatted total results and hit save and then you can see about two hundred four thousand or million results okay so now you can see as we do this results and this is what i love about nexus is as i'm typing in it's going to go ahead and populate as i hit save and then what i'm going to do is i'm going to have a bracket and i'm going to have some seconds and before the seconds i'm going to have a jsx and then oh sorry i'm going to say results.search information dot formatted search times okay so formatted search times and now you can see about this many this many results and this many seconds okay so this is really awesome stuff and it looks really really clean okay um you should add a separate badge for papa found members on youtube yes i should actually i would definitely consider doing that in a sort of easy way to manage because that's a very good idea dude but remember everyone who's on the youtube right now right like if you are interested check out the link to zero for the full stack here in the description um join the course right honestly the public fan members are insane we help each other out we support each other if you enjoy youtube you should belong in that family over in the course okay so we've got the p tag over here and we just focus on results that's all we do okay so let's go ahead and firstly style this out a little bit so i want this p tag to look a little bit nicer i'm going to give it a class name and the class name i'm going to give it is text gray so i'm going to say text gray of 600 okay and then i'm going to say text is medium sized and then i'm going to say a margin bottom of 5 and a margin top of three and then look at that boom looks a lot cleaner okay that looks really good and then what i'm going to do is for the search results themselves i'm actually going to give this one an interesting sort of uh spacing suggestion okay so here you can see the search results the way we do it is we have several break points which are basically the the default one has some basic padding okay this is a mobile if you remember mobile first design is what we do okay so firstly we have this and as we get bigger i start to change this so here we've increased the padding a little bit okay and then i get a bit bigger and then we increase the padding we start to center the element i get a bit bigger and we we stick the element to the side and that's how we do it okay so the way that we do that is we go ahead and say we say mx auto which means the margins on the left and my axes are automatic and then i'm going to go ahead and say the width is full okay and then i'm going to go ahead and do the following i'm going to say p l which means padding left should be three padding right should be free oops three padding right should be three and then also you could do i mean panning x uh should be three at this point if they're both the same planning access three cool and then what we're gonna do is we're gonna say on the small break point i'm gonna do padding left to be five percent okay so padding left should be five percent at this point i'll make this full screen while we do this okay and then when i hit the medium break point i'm going to change padding left to become uh 14 okay and these are different values i've worked out and they've kind of looked a bit nicer when we do it okay now there are several ways to do this but this is the way that i'm doing it today pl 52 so this is basically changing the different padding options based on how big the screen so right now you can see slight difference and then if we go ahead and make it bigger you see how it changes and it gets into the correct place okay on the screen which is really nice okay so now that our our container is looking sleek and it's looking as we want and expect it now what we can do is we can focus on the content inside the container okay so i'm gonna go ahead and say results okay so remember if we look at the the uh response that comes back we go into the items we get all of the items here and then they've got all the information inside of them okay so what i want to do here is i want to map through the items so results dot items and we're going to do optional training to protect ourselves in case it's not there we're going to say map and then we're going to say the result for every single result i want to go ahead and output the following okay so i'm going to output some some jsx right which is going to be our components and i'm going to start off with a diff okay inside the div i'm gonna say that the key remember whenever you're mapping something you should always use keys correctly when you're dealing with um any kind of you know iteration or list in react you should always be using your keys in this case i'm going to use the link as a key because it's unique for every sort of link and then i'm going to say the class name is going to be max with our excel so i'm going to give it a max width in this case we're going to give it excel and then i'm going to say margin bottom of 8. okay and then what i'm going to do is inside there i'm going to have two things i'm going to have one which is going to be the um let's think about how we do this so right now what i want is you see in this final build irrelevant of if i hover over the text or if i hover over this it's grouped together and then i have this snippet of text underneath okay so i'm going to show you how we get that so even if i hover over here you see how that underlines right i'm going to show you how we do this special effect in uh in tailwind okay so the first thing is we're gonna have a div right and the div is gonna be for uh the heading and the link and then underneath is something that we're gonna call the snippet okay so firstly that's gonna be the sort of heading and then the snippet is underneath the snippet is going to have result dot snippet and that's actually going to be the iterated value so it's going to be result.snippet and you're going to see some stuff pop in now so these are going to be all the sort of you know the research result links underneath okay and these are search results mocked up for hello world okay and now what we're going to do is obviously i do want to have some truncate so you know where it cuts off the line and look what i've actually managed to do here is is after two lines it will cut off now we're going to use a very cool little trick called line clamp it's a plug-in on tailwind css and i'll show you how we do it today right but if you're wondering how i get access to this information i'm using this object okay so that's how we do it in case you're wondering okay so we've got that done and then what i'm going to show you i'm going to show you how we we truncate it in a sec but first i'm going to have an a tag the href here is going to be the result.link result.link and you can use the link element in xjs as well it's completely fine and here i'll say class name equals um text sm so it's going to be a small link and the link itself would be a result dot formatted url if i hit save now we should see the link pop up underneath it okay then what we're going to do is underneath the a tag i'm going to have another a tag and there is the href here would be the same it'll be a result.link okay then the a tag here would actually be a h2 inside of it because i want to be like a heading for seo purposes we're gonna have a class name seo but we're doing google so that's quite funny if you got that joke let me know if you didn't it's all good all right and then i'm gonna say result.title title result dot tie tool uh title there we go and then i'm gonna do class name and i'm gonna go ahead and say truncate firstly which will go ahead and it's got a nice truncate built in we'll say text is gonna be excel so it's gonna be extra large text and there we go you can see it starts to come in there and then we're gonna go ahead and change this to a text blue 800 which is actually extremely close to the google color which is nice i'm gonna give the font a medium sort of weight to it okay that's nice and then i'm going to say group okay so this is where the the special hover functionality comes in okay so you guys can notice how when i hover over this i want it to basically be in this fashion okay i want to be in this fashion now how do i do it firstly this test data is kind of trash so what i'm going to do is i'm going to replace it i test i basically searched for um testing before and in the response i got the following back so you don't need to worry about this but you can just swap it out for whatever you search for but now we get a nice nicer testing results there we go um but here what i'm going to do is i'm going to have i want it so when i hover over this you can see firstly it's a link you can see on the bottom left this is actually gonna if i click it it will take me to another website okay but what i need to do here is have it so that when i hover over it works now how do we do this inside of this application the way we do it is we go to the parent div okay um so i'm just going to go to my search results we go to the parent div um which is outside here and then we we say we give it something called group okay so we're going to create a group and then what i'm going to do is i'm going to say so that now we know that this is the group in question okay then what i do is i go over to this element and i say okay when i hover over this i want it to underline so i'm gonna say group hover underline and this will underline the text now if i hover over any of this stuff in the group you see how the underline is applied to that h2 element even if i hover over here because it's part of the group of children now this will get the underlying effect and that's how we get that nice little effect happening okay now you can see the difference here is that the truncate is happening but it's after three lines which isn't ideal right we want it after two okay and in some cases you might want it after one okay joseph says this build is amazing just got la dude honestly catch up when you can and it's going to be a lot of fun for you man almost at 1.2k likes that's amazing guys thank you so now what i'm going to do here is i'm going to have a nice little plug-in so in terroin tss you can have plug-ins which basically power up your your tailwind okay so i'm gonna go to my tailwind config and here you've got the nice little plug-in section okay so the way that we do this one is we go to tailwind and it's something called tailwind line clamp so i'm actually going to show you over here so i'm going to say tailwind line clamp okay i'm going to click this and then you see multi-line truncation with tailwind this is a little blog but you can pretty much go ahead and follow it and all you need to do is install this dependency okay so i'm going to copy this dependency and install it into my app so i'm going to do command j um and then i'm going to show you guys how i do it i'm going to open up another terminal and i'm going to go in here and do heroin css and do yarn add there we go and this will go ahead and add it in now you i should have added that as a developer dependency it's okay you can make sure just next time when you do it do it as a developer dependency instead and then what you want to do is you want to go into the plugins over here and you want to go ahead and save require like so like this okay so i'm going to go into here and require okay now we want to get rid of that little thing there we go now if you want to use it all you need to do is if you've got a long block of text and you say line clamp 3 it will truncate which means dot dot dot after three lines ahead okay so it's very very powerful when you think of it in that sense okay so the way i'm gonna do it is actually use it slightly different i'm gonna use it in a two sort of two line fashion so it's not that different to be honest um so i'm gonna go back to my search results and here what i'm gonna do is i'm gonna say it should be a line clamp of two okay so here i'm gonna say class name and it's gonna be line clamp of two now watch this as soon as i hit save boom ah that's nice right and if we change this to line clamp one you can even shorten the results even further okay so that's really really nice okay uh developer dependency is something that we only need in the development environment when the production bundle is made do we need tail when tss no because remember it will it will compile the code up into a production bundle so they don't the person using our website doesn't need access to tailwind stuff only the developer does the text in stream is really blurry today um it will be fine afterwards honestly it'll be clear it's probably internet connection that's all okay but this is looking pretty good right okay so now what we want to do is let's add in pagination so firstly i just want to show you guys it's fully responsive at this point okay so look it's fully responsive it's changing and as we get smaller and smaller it even has a max width and it has a nice little truncate feature and look how clean that is look and we've even got the truncate here when we do the truncate on the h2 right so really really clean smash the thumbs up button if you think that that is a clean build okay so we've done that now now let's go ahead and add in um the next thing which is the pagination okay and then i'll exhaust my api quota and we can do it okay so this one i've actually made really nice for you so underneath your search results i want you to write a pagination buttons plus a component sorry right and this is actually super clean because now we've got all these separate components doing separate things that just work right everything just works i mean obviously not that right so now i'm going to go ahead and create this pagination buttons.js like so and then i'm going to underscore rfce done okay now with this bit what we do is we go ahead and create got it right there it says john at dash d for developer dependencies yes exactly so inside the pagination buttons now we're gonna go ahead and have we've got a div and then i want to go ahead and say so we're gonna have a few things in there we're gonna have a previous and next and it's gonna be dependent on on basically what we show so if we see the actual development version of this if i click next and we're on the second page you see the start is now 10 because what we're doing is we're showing 10 results okay so we say we start from the beginning we're sure we're starting from zero so we're saying start from zero and show me 10 results we click next we say start from 10 show me the next 10 results we go to next start from 20 send me the next 10 results and then we can go back and start from 10 and you see how it works and if we go back to the point where we're at zero it shouldn't show previous that's how it works okay um and then all the rest happens on server side rendering okay so at this point what we're going to do is in here we're going to need a few things we need the router so i'm going to go ahead and say constructor equals use router before that i need a water break so if you're enjoying this right now let me know in the comments uh we still have loads of people watching incredible support thank you guys and if you're not ready subscribe thank you let's do this okay so we've got the used rooter over here so i'm going to go ahead and import this dependency this is such a b honestly and then i'm going to go ahead and import link from next link this is like a next js a tag which will allow us to do like our sort of you know our routing in a very nice way so that we don't have a refresh when we do it okay and then i'm going to import a few icons from hero icon so chevron left chevron right okay and then thank you so much avenis i love the positivity you bring dude and then what we're going to say is i'm going to get my start index so the start index i'm going to basically go ahead and pass it as a number and this will basically be that value at the top so you see this one over here where it says start equals zero right so when we get that it's actually a text data type here so i need to pass it as a number or if it's not there i just default it to zero okay so that's what we're doing here and then what i'm going to do is i'm going to say okay if the start index is greater than or equal to 10 right only that only if it's greater than or equal to 10 should i then render the previous button okay so then i'm going to render a link so let's go ahead and render a link okay and this is going to be a component and the link will have a div inside of it and this will have a chevron left let's go ahead and do chevron left icon and it will have a p tag which says previous okay this will make a lot of sense when it works don't worry um and then we go to our search results and let's just import it so it shall start showing us some results okay we go down to the bottom of the screen and then we should see at this point let's go to our pagination buttons and then you see the start index is is not 10 so we we won't see it right now okay uh we should always show next because that's always going to be there so i'm going to say link this link will have a div inside of it and then this div will have a chevron right a chevron right and it will have a p tag which has a next okay viple says quality stuff as always thank you so much dude appreciate your spot chevron right okay and then link tags require us to give a href okay so for the href in this case what we're going to be doing is the one down here i'm going to go ahead and say href equals and i'm actually going to use some string interpolation here so i'm going to say forward slash search and think about what we're doing here right i'm going to say go to the term which is currently the term that we're searching for okay so we're still going to have the same term that we were searching for so it's going to be router.query dot okay but the difference is we're gonna change the start so we're gonna say okay change the start to be whatever the start index was which was basically what we fetched from the the url param plus 10. okay so we're going to add 10 to that now if i do this you're going to see a massive chevron and if i click it it will go ahead and throw us to a start of 10 which means that the next one's going to render and obviously that hasn't got an href okay so now what we're going to do is i'm going to do the exact same thing here but this one is going to have a minus 10. okay so that will go to back uh 10 elements so now you can see that a forward and a back so if i click so notice how when i click on the back one it goes to start of zero when i click on the forward it will go to start of ten i click forward again it'll go start of 20 go back start of 10. so you see how we're changing those parameters okay now obviously we will style it and make it look nice now for these icons i'm going to go ahead and use dual cursors so i'm going to type in two places at once i'm going to do class name equals h5 hit save and now they're a lot smaller which means they're a lot easier to deal with okay the next thing i'm going to do um is go ahead and you made me love coding sanand thank you so much dude i love that man i love the fact that i can like you know and pop others to you know love what they do and and i want to kind of carry on coding and things like that um don't spam though dude please don't spam okay thank you all right so then what we're going to do is i'm going to go ahead and have the following styles applied over here okay so i'm going to say div and i'm going to say cast name last name equals i'm going to say flex okay so next to each other we say items center actually we'll start off with flex grow i'm going to say flex column because i want it to be in the column i want the the things to be on top of each other there we go and then i'm going to say items in the center item center and obviously tab 9 coming in clutch as always cursor is a pointer and then i'm going to say hover is underline okay so now you should see when i hover over this it's nice and look like clean right super clean okay so i'm going to copy this class name and you can go ahead and refactor that in a global class name if you would like i'm just going to do this for now and now we have the two things which are taking up 100 okay nice now the next thing we need to do is go to the parent div this one here change the styling of it i'm going to go to class name equals and then we'll say flex and you should start to see things come into play now okay i'm gonna say the max width is gonna be large and this will stop it from you know spamming across too much okay and then i'm gonna say okay justify space between them okay so i'm gonna say justify space between and then and you're wondering if i if i was doing this with raw css teaching it and coding it at the same time would take longer than what we have achieved right now i'm going to make the text blue of 700 and you can see that this will now change the text below to 700 and we're going to be a margin bottom of 10 so that way we get a bit of breathing room right there we go now do you guys like this all right look at this previous and mac now if i go back previous it would have gone to the first page and there you go look how clean that is right and you can obviously add in some logic which says page one page two page three and so forth nice okay so now what we need to do is also go ahead and hook that up okay so we actually got that bit done now so we've actually got that down looking pretty damn solid right so if i look at this now we've got our pagination but the results aren't actually getting sort of feeded in oh they actually are i'll show you where if we go to our search results and we got a level up so we go to our search page where we did the server side render remember what we did is if the query so the url had a start we grabbed it here then we go ahead and query google using that start index so it's very very clean and it works right so now what i'm going to do is i'm going to say use dummy data false so i'm going to be using a real api now okay and then what i'm going to do is just go ahead and type in papa react hit enter and look at that guys zero to full stack hero let's go that's so clean all right that's clean and it looks perfectly right uh tacine stop spamming and i'm using google api thank you all right so now you can see look how clean that looks right so everything looks perfect and as we expected it to and if i go on to the next page we should be able to see look at that it went on to the next page of search results okay and then if i click previous nice okay now if i type in let's type in react or tailwind css hit enter right boom tailwind css all right awesome stuff and i'm going to click next page of results awesome stuff look at that tailwind css this song always freaks me out because i think it's i think it sounds glitch but it's not it's the song right if i click next after that boom see that guys we're getting different results every time hero icons even came up so the search is actually working pretty good right and let's just show you if just so i'm not lying next js okay boom there we go okay if i type in sunny sanger do i come up hey there we go join me as i build signal there we go nice so guys you can see we have a fully functional google application here right with pagination with amazing responsiveness okay so that is god damn clean right and then remember everything works if we go back to google over here and we type in from obviously if i haven't react 101 enter look at that react 101 and all sorts of stuff come on right you go back to google everything works in the way that we expect it we have a responsive beautiful design everything's working in the way that we wanted it and it's just clean all right and i love this because everything is you know it's looking so it's so good and it's just so juicy and like so what we're gonna do now is let me know if you're excited because we're gonna deploy this app now okay so i'm going to go ahead and deploy this application on the versa and then we're going to use our amazing guys over at hostinger to map it to a custom domain and then you'll be able to have your own domain for example like sunnysanga.com and that will actually go ahead and have the built apps of the google search engine the clone on your own custom domain okay remember your boy got you a nice little juicy discount so make sure you use code sunny on your yearly plans our hosting and you're gonna get seven percent off your annual plans so if you're excited let's go ahead and do this okay yeah rick you can definitely change the uh pagination two numbers if you'd like this was just getting you set up you know tailwind css there we go let's just try again i can't get enough when it works it's so cool it's just so nice right and this is really really nice and um not google.com that's cool that's a good one right so um let's go ahead and do this right let's go ahead and deploy this so the way we deploy here is we need to go ahead and i'm going to open up my github so let's open up a github and this is the papa github repo right here but i'm going to go ahead and create a new repo if you want access to the proper github repo by the way link is in the description it has the code for today's build guys so if you want the code for today's build then you can check it out viple said believe me dude you make coding look too easy hats off thank you so much dude appreciate your support so i'm going to go to my personal github and i'm going to go ahead and create a project i'm going to click new repo and here i'm going to go ahead and say let's go ahead and say google clone youtube okay i'm going to make it private i'm going to go ahead and create the repository nice and then what i'm going to do is i'm going to copy this line over here and i'm going to push this to my github so in order to push to github it's very simple what we do is and you shouldn't be pushing your keys to github okay i'm only doing it for a demo purpose today but you should do command j and then what i'm going to show you here is uh let's actually skip this one this one's a bit hectic for an explanation right there we go nice let's just do something like this okay so once we have this open i'm going to go ahead and do the following will say git status and you should be able to see we have a lot of dirty files and these are the files that we've adjusted so what i'm going to do is firstly i'm going to connect to my github that we basically got that line of code from so you see this one over here i'm going to copy that and then i'm going to do git add or and we'll say git status and look what happens we just added all of our we basically staged all of our files to commit to a commit okay someone say git commit and here i'll just say something like let's just say app build right this terrible commit message but it's for a demo and then i'm going to say git push all right and then git push pops this up and you can pretty much just copy this at this point um and paste and this will basically push the code to that branch okay now i'm going to go ahead and enter a little password in here i'm going to say and obviously i know it's the terminal i know it's the terminal but i'm still going to do it anyway right there we go we've got gone ahead and done that and then if i go ahead and go back to this and hit refresh we should be able to see our code is now inside of our repo okay so we now have our code up inside github so the next step is to hop over to versal okay so we hop over to versal.com forward slash dashboard and all you can just go to reversal create an account with them it's completely free to do so okay once you've done this yeah so i want to mention that craig says don't forget to hide your api key when deploying yes when you are deploying make sure you don't have your your keys you know like on display and things like that um in this case i'm not going to be sort of you know like i'm not going to be sort of hiding it but what you should be doing is using environment files i just want to kind of get this build out okay and show you guys how to get it done yourself you can look at something but what you're going to need to search for is something called environment variables okay so what we're going to do is we're going to click new project all right and then you should see import git repo and this is the one we just pushed this is the one from yesterday this is the one from today so i'm going to import it and you basically just connect your github so it's very easy to do i click on sunny select and then we're going to go ahead and you see it automatically figured out it was next.js and you don't need to change anything but here is the interesting part environment variables okay and they encrypt them for you so just like uh craig said you need to make sure you go ahead oh sorry i'm going to share my screen okay so you want to go ahead and you get to this screen it will figure out everything and if you click on environment variables you can go ahead and pop in those variables at this point and then it would actually sort of you know have them stored in in an encrypted fashion so this is the way you should do it okay so now we're on the screen sorry about that and we're three likes away from 1.2 k that's crazy right so now what we're going to do is hit deploy right so we're going to go ahead and hit deploy right now okay so now we are deploying our application to vessel right so verso is setting up a server which has a um which basically will allow us to have our server side rendering everything fully functional and working in the way that we expect it to now you can see here it's going to go ahead and install the dependencies deploy the app and then they will give us a sort of a versa sort of versal kind of domain name right so it'll be something like versal demo or something like that and then we'll have google clone youtube and so forth right so this will take a few seconds hopefully it goes through without any errors for this time so here you can see you've enabled jit engine which is currently in preview because yes we use some braking you know like braking tech right here right like we use cutting edge tech where it's the latest and greatest tailwind stuff and here you can see perfect it built out our application you can see our search page which is a server side rendered page hence why it's got this sign here server side rendered we've got the um and then we've got the rest of the pages as such and then hey we get this page right so this is perfect right it's working and we're using versa today because it's a lot easier to deploy a next js server side rendered application using versal because those guys develop next year so you know it makes sense right so and it's also very fast so i i i vouch for it okay so we're gonna click on you can click on visit over here and this will actually go ahead and give you the application so now if i was go ahead and test this out i could say testing and then if i hit enter let's go ahead and see what happens right so it's going to go ahead and search for it perfect awesome stuff and i will show us actually how you can have the search come up here i don't think i actually did that so let's quickly go ahead and fix that very quick hotfix and i'll show you how easy it is to deploy and what's really nice about it right so what we should actually have is when i've tested something so let's go ahead and put in like a testing see this should be populated by default so what we forgot to do there is firstly get rid of the console log here and then what we wanted to do is have inside of the header inside of our input we actually should be doing the following okay so inside of our input we should have a default value which should be the router query term and then if i want to push it to this build it's extremely simple to do that firstly just to prove to you that it's going to push i'm going to click on versal i'm going to click on my build over here and you can see it right now it says created two minutes ago what i'm going to do now is i've just made a slight change to my code so very simply i'm gonna go ahead and i've changed two files i've changed this file to the default value and this file to get rid of the console log i'm gonna go ahead and stage everything so i'm gonna say git add or i'll say git commit i'm just gonna call this a bug fix let's go ahead and say bug fix and then i'm going to push right now what's really nice about this is if i go ahead and just chuck this in there we go what's really really nice about this is that if i go ahead and refresh now what you'll see is look the bug fig branch bug fix branch has been pushed to master which means it's actually going to go ahead find the new branch and just start a redeployment so technically what we have now is a ci pipeline okay which is insane right we have a ci pipeline and uh it's insane and it works right so if i click on view build logs here we can actually see the upcoming build and you can see right now this is the previous build um and i'm gonna click on google clone youtube over here and i'm gonna click on deployments awesome and it says building at this point you can see this is where it's building i can go ahead and inspect it i can view it and all sorts of stuff if i click on this deployment you can see it will go ahead and create the page and it's uploading as we speak and then look it's done it so it says ready so if i visit this website we should have that hotfix now so if i go ahead and type in testing hit enter boom nice all right so you see how nice it is now actually turned out perfectly because i showed you how to go ahead and hotfix and how it pushes when you merge your merge to your main branch okay so this is extremely clean extremely nice and it works perfectly as we expect it to now what i want to do is we have an amazing custom domain over a hostinger so i'm going to show you guys hosting it right now so you head over to hostinger pretty much going to go ahead and sign in so i'm just going to quickly sign into my account on hostinger so what you want to do is quickly sign in i'm going to sign into my proper react dog team account there we go and then you'll reach your h panel on hostinger okay so remember if you want to join hostinger use that link in the description it will save you seven percent off which is a huge saving and it's going to basically make your life a lot easier okay now i would love it what would be really cool is that if you guys build this build this app get your own custom domain use that link save yourself some money and support the channel guys it is an affiliate link it will help you out right and uh it keeps me bringing it makes me it helps me allow to do this full time right so i don't know why i'm saying that but it helps me do this full time okay what we're gonna do is i've got a custom domain right over here this is the h panel this is where you can pretty much customize everything by far hosting it is the easiest h panel or control panel hosting i only have the h panel everything everywhere else has a cpanel which is always complicated but i'm going to go ahead and click on manage my domain okay this is where we basically make do the magic to make the site that we built visible on our own custom domain so this is our custom domain in this case sunnysanger.com i'm going to click on dns name service on the left okay so i click this and over here i can see manage dns records and it's so easy guys all i need to do is go to my versa so i go to this bit over here i go to the top i click on google clone youtube i click on settings and then here we can click on domains right and to connect this all i would need to do is type in sunny sanga.com click add and at this point i've already got um my settings linked so it would actually verify immediately but i'm going to go ahead and say sunny sanger test okay just to show you otherwise mine would immediately connect because i've already done it on my versatile account but at this point you should see invalid configuration here we go so what you want to do is you just need to go ahead and copy this value go to your dns records on your hostinger account and simply chuck it in here and click add record there's nothing else you need to do okay now what will happen is it will take about 24 hours max to propagate right so most times pretty much 24 hours within 24 hours sometimes it's been immediate right but once that once it propagates through the hosting and servers it will now be connected to your versa okay so with that said what you will then get is on this screen you'll get a green tick okay so let's go ahead and show you how that works if i typed in let me go ahead and go to my previous deployment so this was the previous deployment i did and i mapped it to sunnysanga.com as you can see over here and if i click on this and then you will get a valid configuration tick okay and then that would mean that you have successfully connected hostinger the domain name the custom suite domain name to your custom google clone okay which is awesome stuff right that's really really nice and uh really really nice so guys this was incredible right this is really really incredible and um craig says i already used versa ns records i love it yeah it's really clean honestly they make it really easy to change your dns records i ha and also by the way if you're wondering they do use something like cloudflare behind so if you're scared about getting tons of bots to your website they're going to go ahead and vet who comes to your site so if you get like a you know somebody trying to shut down your your website or attack it uh it's going to go ahead and protect you in that sense okay so it's really really nice a lot of people are asking why we're not using firebase in this case it's okay to use other pieces of tech guys it's completely okay right this is a very very powerful piece of tech and it works now to prove to you it works on sunnysanga.com right now you can see the app fully functional fully working for yourself so over on sunnysanga.com you can see google and i'm gonna give you guys a run through of what we built today we built a fully functional google clone right we had css grid tailwind we had next js server side rendering where if i type in testing you guys can see perfect we get these results we had really nice kind of hover animations we had transition elements happening and we had pagination right all happening in a clean clean clean build okay and this was using really really like um sort of good this this was a really nice build because it covered a lot of fundamentals for you guys which i think will benefit you quite a lot okay now this wouldn't have been possible in the time have it haven't said that if we hadn't used tab nine tap nine always helps me out it makes the coding experience so fast and you know fun so i'd recommend um the reason why i support them as well it's not just because they sponsor us is because honestly it actually helps me it doesn't slow me down right it helps me it speeds me up it's supported by all programming languages and their free tier takes you so far with that said guys i hope you have enjoyed today's session okay i hope we have enjoyed today's session and this has been your boy papa react we are closing today's session with 1200 likes which is absolutely mind-blowing and crazy crazy level of support from you guys if you are watching this and you've enjoyed it please smash the thumbs up button consider subscribing we love and appreciate all of you guys and we hope that one day we can see you inside of zero to full stack hero inside the papa fam in a community right and then there we just push each other to be the best versions of ourselves consider subscribing if you're new to the channel and guys we hit 20 000 playbacks in this one in this one live stream which is incredible this is gonna be up on youtube afterwards for you guys to go ahead and consume at your own speed you can have your cup of tea and you know all that stuff while you do it and i just want to say um yeah this is your boy pop react thank you so much for tuning in and i will see you in the next video guys your boy is going to be dropping weekly from now on so subscribe bell notification icon share with your friends all that good stuff it's your boy and uh yeah as i said i'll see you in the next video guys peace summertime go for a swim

Channel: Sonny Sangha

Views: 194,506

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

Id: 24xpTmaPOdY

Length: 192min 44sec (11564 seconds)

Published: Thu Apr 08 2021