🔴 Let's build Hulu 2.0 with REACT.JS! (Next.js, Tailwind CSS, Responsive)

[Music] what's going on papa fam welcome to the hulu 2.0 next js react build let me know if you guys are excited i am ready for this one we're gonna bring the fire with some tailwind you know how we do it we're getting into next year's territory tailwind territory oh it's gonna be a lot of fun guys and i'm gonna show you how to host it and everything now today's app is available to check out if you want to have a little play around yourself it's over at sunnysanga.com now let me know in the chat where you guys are from if you guys are you know excited for today's world go ahead and smash that thumbs up button and let's get ready to go ahead and build hulu 2.0 are you guys ready i'm going to go ahead and show you right now what we're going to be building in today's build check it out guys hulu 2.0 this build is so much fun guys we have animations we have tailwind we have so much happening here today right we have server side rendering now you might have heard of server side rendering right you might have heard it you know it's a buzzword that's going around and there is good reason for that buzzword to exist okay server side rendering is something which is going to be huge mark my words if you don't know it get to know it become best friends with it it's gonna pay your bills it'll make you a ton of money okay guys so this is hulu 2.0 right here okay now what i'm going to show you is here you go we've got some lazy loading images which we've never done before so we're going to be using next year's image optimization if i go ahead and click on a category you can see it nicely smoothly transitions into it this build is fully responsive guys so go ahead and check this out look at this fully responsive build okay so and i'm going to show you guys some amazing tricks look at the change that happened right there wow all with tailwind css look at that header bar guys look how clean that is all right and look at that oh did you notice it's jumping that's what i like to see right smooth animations check that out guys when we click on a button you can see look we get a nice little zoom in effect zooming out let's go ahead and check this out thank you so much praveen for the nice no okay for the nice little donation right there thank you so much dude now you can see right here if i go ahead and hover over this look at this we get some nice little hover animations as well okay now guys this is incredible stuff because what i've done here today is not only make this responsive but today we're not just using flexbox guys we're using flexbox and css grid now you're probably wondering what why how what why and i'm going to be showing you how it's so easy to get the perfect responsive website by using both css grid and flexbox and we're all going to we're going to achieve everything with flexbox we're going to achieve everything with tailwind css get my words mixed up let's go ahead and show you right now okay so once we're over on the small mobile screen notice how this is a grid okay so right now everything is in the grid a single line grid as we expand we hit a new break point it turns to a two column grid okay as we go a little bit bigger boom we're gonna hit the three column grid okay notice how the images are perfectly resizing everything is looking and feeling great at this point okay let's go ahead and resize a bit more and then we hit our max screen okay now let's say you're on a 4k screen right you're on a massive screen we want to you know for you for you guys out there that are using those crazy monitors i've got an ultrawide in front of me right now we want to support you guys too okay because it's responsive we're supposed to respond to every screen size so let's go ahead and zoom out guys look what just happened there it switched from css grid to flexbox so this is now on a huge screen and this is a flexbox container this is insane right and i'm going to be showing you how to achieve all of this and these cool little animations and everything in just a sec so let's quickly go ahead and break down this nice little build that we have today okay guys so i'm going to show you guys the tech that we're going to be covering in today's build so let's go ahead and write this out we've got hero icons for these beautiful icons over on the right hand side we have next js right everyone knows next.js is starting to become a big big trend we have flexbox and css grid okay we have two amazing technologies flexible css grid and we have rest apis guys this is using the tmdb database i'm to be showing you guys how to make server side rendered api calls to an external api and it's going to work smooth and perfectly and guys i'm going to show you how to deploy this now today's video would not be possible without our amazing sponsors over at hostinger right now guys i want you guys to try something out for me okay now let's go ahead and have some fun so i'm what i propose to do is the first 10 people to drop a comment with their custom domain name i will personally go ahead and review your websites okay so go ahead over to hostinger.com use the first link in the description to get yourself a nice little sneaky discount and uh yeah we're going to go ahead and at the end of the build today we're going to deploy our websites hook them up to our own custom domain mine is saying at sunnysanga.com right now if you want to go ahead and check it out and then i'm going to show you how you can do that with your own custom domain now why do you guys need to care about hosting or why are they good why should you guys be interested with them hosting are an amazing platform me and jay and my team we will use this to host many of the services we provide now not only are they amazingly cheap okay but they are absolutely so user-friendly okay so we might have heard about a cpanel cpanels are those headaches you know when you hear a cpanel you're like i don't want to deal with all that that dns and all that stuff but they make it so easy okay firstly i want to say welcome to everyone by the way i can see all your chats coming in this is incredible stuff uh everyone from all ages it's incredible incredible stuff okay now guys the guys over here very easy to set this up okay so don't worry if you're new to this stuff it's so easy they incredibly fast they support wordpress if you guys have used wordpress 24 7 chat out of the box and it will support your app now as i mentioned previously before they have a new h panel which replaces the cpanel and it's incredibly easy now i'm going to be showing you how to use hostinger with verso at the end of this build so stay tuned to the end and remember guys the first 10 people i will be personally reviewing your sites if you go ahead and comment your custom domain in the description now you remember use code sunny at checkout to save yourself seven percent on that annual plan i hope to see who the first 10 people are let's go ahead and jump into this neil says hey sonny is this responsive hell yeah dude this is responsive we're going to be using tailwind css to make that achievable today and just to show you guys one more time here is the hulu 2.0 build that we're going to be building as you can see a fully responsive build and is as we hit that mobile break point look at that beautiful beautiful site now if you do want to check this out go ahead and head over to sunnysanga.com right now just like so and you guys can perfectly see it for yourself okay now as i mentioned before we are actually using lazy loading so not only have we got a responsive site here we even have seo all right seo performance is boosted with server-side rendering we have amazing fast lightning-fast websites being deployed being built right now with this amazing amazing tech now i don't know but this like i like to teach what makes me excited right and this stuff makes me excited which is why i'm going to keep on bringing this fire okay so let me know if you're excited right now smash that thumbs up button if you're and by the way guys 60 of you that are watching aren't actually subscribed which blows my mind okay if you're enjoying the content if you're watching right now and you are not subscribed go ahead hit that subscribe button and i'm going to be dropping videos weekly from now on yes i said it weekly and you know how your boys can do it proper react is going to deliver guys without further ado i say let's go ahead and jump into today's build let's go ahead and do this if you want access to the proper fam playlist sign up to the newsletter in the description you're going to get all the tunes that you're hearing today okay guys let's go ahead and do this let's jump into today's build let's do this guys purple farm do you feel the energy sunny is on fire hell yeah dude let's do this okay so we're gonna be using next js today okay so let's head over to next js now if you're wondering i mentioned versa earlier yes they did actually make the react framework that we're going to be using today and as and if you don't know what xjs is we have html css javascript they are the fundamentals of web development then we have react which is a library that basically wraps all this together to allow us to build really really powerful apps that was developed by the guys over at facebook then versal came along with a framework for react okay and this allows us to have a very performant seo friendly server-side rendered capable websites okay now if none of that makes sense just know that it's incredible skill to have okay so if you're interested in learning any of this stuff remember we do have a complete course on all of this stuff link is in the description for everything that you need today guys let's do this let's jump into the video right here is the framework that we're using today next js okay now let's go ahead and click start learning now i'm going to go ahead and show you guys how you can go ahead and quickly get set up with this stuff so that way you don't have any you know headache installing this and you guys can get started up pretty smooth now you're going to go ahead and click on setup over here and instead of using create reactor we're going to be using create next app so i'm going to go ahead and pop open a terminal right now oh we got kenya in the house my dad's from kenya that's cool man right i'm gonna go into my documents i'm gonna go into my builds and i'm gonna do the following i'm gonna say mpx okay create next app okay and then we need to give it a name so today we're gonna give it the name hulu to youtube and i'm gonna hit enter and this will go ahead and prepare a next js project for me okay so this does all the heavy lifting everything that i need to go ahead and get started okay now faizan says in the meantime i'm gonna answer some questions pfizer and says is this beginner friendly i don't know how to do this stuff dude just start just follow along with me even if something doesn't make sense remember as i said html css javascript are your starting points then you want to go ahead master the react fundamentals then you want to layer on nexus on top now remember you don't need to have next year's to be successful in web development okay but it's a skill that i would highly recommend to have in your roadmap because i personally feel it's going to take off the ground and it's my now go-to tour okay so i am personally vouching for this and in addition to that i'm also vouching for tailwind css bloody great tour okay amazing utility classes game changer you're gonna see today why okay so we went ahead and created our project successfully so now i'm gonna go ahead and cd into my hulu to youtube build okay now i'm inside the build so i'm gonna go ahead and type in code dot this will pull up my vs code and then i will have a place to start with our coding for today's build okay so let's go ahead and get this started i'm gonna go ahead and cut my old build so we don't have two clashing things i'm gonna go ahead and pop this on the full screen right here and uh a lot of people asking okay could you use typescript sonny um yes we can we will be using typescript remember i don't like to layer on too many texts like in one go so you guys can you it kind of gets a bit too much for everyone but yes we will be covering typescript so if you are excited to see some typescript content smash thumbs up hit that subscribe button and stay tuned for some amazing content over on that side okay guys i'm gonna go ahead and make this a little bit bigger for you so that way you guys can see what's going on let me know if this is a bit better for you okay so what we can do is we can go ahead and actually close the terminal that we had previously open okay now what i recommend is you have two desktop screens open so i have my coding screen over here and then i have like a handy useful web sort of you know browsing screen on this side now i do have sunnysanga.com for reference okay so you can use that when you're building out your version of the website and then we'll go ahead and do this thank you so much brandy says something you're great i love how you try and make such amazing websites and apps thank you so much dude craig says does hulu have an api we're actually using the tmdb database today okay and also guys i'm going to show you how to use environment variables today okay so i've heard a lot of questions and your boy is answering it today i'm going to show you how to use environment variables in this build okay let's go ahead and do this all right so we're going to go ahead and click on the pages and index now the beautiful thing about next js is page rooting is supported out of the box okay so we if you don't know what that means i'm going to show you what that means but the first thing we're going to do in today's build is get tailwind css setup so i'm going to go ahead and actually clean up a bit of code so where we have the main over here i'm going to go ahead and get rid of this but before i do i'm going to get this app up and running okay so i'm going to hit command j hit open my terminal and i'm going to use yarn today so here we can see a package lock i'm actually going to go ahead and remove my package lock and i'm going to do yarn to use yarn instead and this will go ahead and resolve all the packages for the project in today's build okay so while that goes ahead and gets sorted out for us we can go ahead and hop over to tailwind css now what is tailwind css okay tailwind tss and you might have got a little sneak peek of what's coming next yes i will be covering the headless ui very soon i've been actually diving into that tailwind tss is basically how we rapidly build modern websites without leaving our html okay it's my new favorite i love this honestly i i use it all the time now and i don't know how i can go back because it's so easy to use and if you guys find it kind of you know repetitive or you find it a bit kind of like the class names are super long sunny how do i get over that i'll show you how we can combat that in today's build okay so you can see here we can pretty much hit our class names directly and it will modify the output on the screen so we're going to go ahead and get started on this and we're going to click installation now you get a few integration guides here i'm going to hit next js on this one over here right now what we're going to do is we're going to go ahead and do npm install dash d i'm actually going to be using a yarn so i'm going to grab everything past the dash d copy this right here go head over back to my code and i'm going to go ahead and do the following one type in yarn add and then i'll do dash d and then taro and css and everything that followed okay this will go ahead and add in tailwind to my project now we will be using the brand new jit just in time compiler okay so this is going to be using the just in time compiler which is an absolutely new feature for tailwind css they dropped an amazing video on that definitely go ahead and check that out i'd 100 recommend that now i'm going to go ahead and type in the next step which is to create the config files okay so here we need to actually have a couple of configuration files so i'm going to copy this where it says mpx tailwind css init dash p okay this will go ahead and create two files for us right it's going to create the tailwig config and the post css config these are two things which are required to go ahead and use tailwind css okay so with that said we've got now have these two beautiful files in our system uh and guys by the way if you do want to follow along today's code and you don't want to actually write out yourself the code has actually been uh uploaded to the papa github repo and that is available in the description right now so if you want to get a head start you just want to code along with me and you find kind of get a bit lost on the way feel free to grab the papa github repo you get access to all the codes uh all of the builds everything that i've ever done plus all future builds so it's a worthwhile investment okay now here we have the tailwick config now the first thing we need to do in here is actually go ahead and add in the next.js files so in nextgs a lot of the pages are rendered out to the pages folder and we need to go ahead and include that in the array over here and we're also going to be using a components folder so we do need to include that also okay now what is purge it basically allows tailwind css to clean up all the css which we don't end up using okay i'm not going to go too far into how it works but i'll show you how to go ahead and use it okay so here we have the purge raw applied the next thing i want to do is i want to go here and type in mode okay and i'm going to type in j-a-j-i-t which is just in time compiler okay and now what this will do is it will actually enable the new feature or the brand new latest tech in tailwind css and we're going to be using that in today's build okay now if you have run your um sort of code and you've done yarn run dev already you're gonna have to restart because we just made a change to the config file okay the next step that we need to do is include it in our css so you can do this two ways i don't personally like it this way i like to do it this way so i'm going to go into my global.css file so all of the styles are in here now out of the box next yes they use module.css we're not going to be using that today so i'm going to delete that out of here and then i'm going to go into my globals highlight everything and simply paste tailwind css okay so we've got the tailwind base components and utility classes this will allow us to have all of that really nice you know all of that stuff um that we can pretty much go ahead and use when we're when we're sort of you know messing around with here the css okay so the next thing that we're gonna do is actually go ahead and run next yes okay because we have everything for tailwind set up and working so we're going to go back to our code into index and this is basically if you want to know how next.js works when we have our website for example sunnysanger.com inside the pages folder this will determine what route we are on so the index would be sunnysanger.com forward slash okay so it's the home page essentially and then if i had for example um let's say search.js it would be forward slash search so in here will be search.js so this is how pageviewing happens in next year's out of the box beautiful stuff so i'm going to go ahead and hit command j and i'm going to do yarn run dev like so okay guys we just broke 325 likes thank you so much let's get it to 400 and let's keep on going papa fam let's do this okay so we're going to go ahead and start the server here you can see localhost 3000 and you want to watch out for a few things so you want to make sure it says you have enabled the jit engine which is currently in preview okay so yes it's in preview we like to use cutting edge tech on this channel okay so i like to go ahead and use that stuff um but just be in my bear that in mind if you're gonna use it for a production environment okay now the next thing you want to do is go ahead and open up your localhost 3000 okay now once what you should see here is oh okay what we actually see here is a cannot resolve the module.css and that's because we deleted the styles so we can go ahead and get rid of that go ahead and get rid of the div class name right like so and then let's actually clean up our code right now so let's go ahead and hit all of the main and the footer and get rid of that and i'm going to type in h1 and say let's build hulu 2.0 all right hit save and let's go back hit refresh and here you can see it right in the corner we have let's build hulu 2.0 okay if you are seeing this right now amazing stuff okay that's great you're on the right track smash the thumbs up button let me know in the comments that you are with me and let's go ahead and do this and but guys before i forget make sure you have your you know every year every few minutes water break amazing stuff okay let's do this brilliant given says i started to claim websites with your source of inspiration thank you for all the support thank you so much dude for tuning in without you guys i wouldn't be doing what i'm doing okay so thank you so much i'm grateful papa fam has broke over 33 000 followers now so it's getting getting huge getting crazy now guys honestly okay so let's go ahead and break down the site okay so we've got a few different areas which we need to build out one of the first things i notice is at the top we have hulu in the you can it's very very small right now but you can see at the top in the title bar we have hulu okay now if i go here you can see we have this head component in xjs this head component allows us to put in snippets of code which will belong in the head of the html document so in this case we can modify the title based on the page we're on so here what i'm going to do is i'm going to change it from create next app to which we can see over here is create next app i'm going to change that to hulu 2.0 okay so 2.0 and then you can also change the 5v icon if you feel like you want to do that okay now you can see it says hulu 2.0 all right perfect stuff all right this is looking great uh anupam says let's go another firebird thank you so much sheree says hey sonny share the playlist please if you want the playlist literally just shout out to sign up to the newsletter down below and you'll get access to the playlist there's one that's the first confirmation email you'll get sent in the playlist and everything works avnish actually just shared it as well amazing stuff all right so let's go ahead and do this and um oh nice to first says by the way saying i got entered as a react.js and django developer i was pure django before and you introduced me to react totally addicted to react i love you in your videos thank you so much dude and i appreciate you watching thank you thank you so much okay how do you manage to come live so frequently the grind does not stop guys we just keep working that's it right hulu is a streaming platform it's similar to netflix all right but i think it's in the states pretty much okay let's go ahead and do this all right so right now we've got let's build hulu 2.0 with uh you know xjs all right so what we're going to do first is i'm going to mark things out with comments the first thing i want to do is i have a header component inside our code so let's go ahead and break down the final build and let's draw some boxes around this thing and um you know let's just make it a little bit more nicer to see so the top bit can consist of a header okay so we have a header component at the top then we're gonna have a nav bar okay so you can see two components already so the top one is gonna be our header component the second one is going to be the nav bar okay and then what we have is essentially let's go ahead and draw around here then we have the results okay so this is all we have we have three components and we're going to show you how to go ahead do server side rendering and make this work in a beautiful fashion all right moderators you know what to do if someone spams all right so avnish do your thing dude all right here we have results nice okay and then so we have three main components the header the nav and the results each one is going to be responsive by itself and then together they come together to build this amazing beautiful web page okay so let's go ahead and do this right now okay so like i said we have the header we have the nav and we have the results okay so these are three components that we're gonna have to build out so first one let's start off with the header right the header is kind of fun you know you can go ahead and it can be very simple to go ahead and make so the header right here is going to be um let's go ahead and make our first component so right now we have a pages photo but we don't have a components folder okay so i'm going to go ahead click on my package json so i'm at that level and then i'm going to click new folder and i'm going to type in components okay and then inside the components folder i'm going to create our first component which is going to be the header.js okay now i have i am using the lovely beautiful snippets right so snippets is actually a amazing little um extension which you should be using es7 react redux graphql react native snippets right and it goes on yeah but that is basically something that i want all of you to download and install because it's going to help you be so fast with your production and it make it uh really really nice okay um this is perfect stuff right nice if somebody continues to spam you can you know you can go ahead and hide that's completely fine okay so let's go ahead and do the following so i'm going to do underscore rfce to make a react functional component without the importing react because we no longer need to do that and then here i can change this to a header okay because we're going to be using correct html syntax in this build okay so let me know if this is you know if the size is pretty good for you guys i'm always happy to go ahead and change this for you to make it work for you guys okay so i think we're good with this right now okay so the first thing that we're gonna do right now is we're gonna go ahead and we're almost at 400 likes thank you so much guys let's pop that likes up right let's go ahead and break a thousand today um and you know how we do it right we're always gonna go ahead and do this okay so i'm gonna show you guys and we're not you know what we're not actually using redux today because we built it so damn good okay so this is this goes to show you that you don't always need to weigh up your app make it heavy with all these extra state management tools if you build it correctly right then you're only rendering what you need to render right remember the lighter your app is the better so it's not about you know including all the the buzzwords and this and that right it's about including all the tech that will deliver a smooth fast reliable experience and be friendly with google okay so seo hence next yes okay so let's go ahead and do that let's jump into this again so we've got the header here i'm going to go ahead and type in the class name and we're going to go ahead and pop in some stuff here now i'm just going to go ahead and populate this with the h1 saying this is the header okay now over on index.js i'm going to go ahead and do header and import this now a lot of you i always get the question of like what happens here how do you go ahead and actually import it it's basically this auto import feature which goes ahead and pops up like so and that's how i do the auto import or you can go ahead and click at the end of this control spacebar and then you can do the following like so oh we got two lovely donations thank you so much gk ram sonny learned a lot about react just by cloning apps thank you so much dude i'm jeet thank you another beautiful donation thank you so much guys appreciate you guys all right so we've got the header over here let's go ahead and hit save and let's see what's going on so this is the header perfect now i'm going to go ahead and pull this over into the other screen right now so we can actually code side by side with our application okay so this will be a lot nicer to see i'm gonna go ahead and make this a full screen there we go perfect okay so we have the header over on the uh right hand side and we've got let's build hulu 2.0 i can go ahead and get rid of that right now okay hit save and uh thank you quinn he says you are the best card i appreciate that so much okay um a lot of people say why doesn't the h1 tag work okay so this is interesting when you're using tailwind css it actually eliminates the default styling that you're going to see right because telling css allows us to then star wars so this plays perfectly with something called endless headless ui which is actually developed by the guys over at tailwind which i will be introducing in the next build and uh yeah your boy's coming with that one okay so let's go ahead and do this tazine thank you so much for the kind gesture check the link in the description if you want to uh there's a second link and that should be up to help you out all right so this is the header over here okay so i'm going to go ahead and click into my header and then let's code this out okay so inside the header we're going to have a bunch of different header items so you can see these are going to be individual header items i am going to make these into their own individual components which consist of an icon which we're going to be using hero icons for and then we've got the text okay so these are going to be reusable components and then we have the image on the right hand side okay so let's go ahead and sort that out right now so the first thing i want to do is i want to actually pop in that image okay so let's go ahead and add in a image tag okay so i'm gonna go ahead and do an image that now this is not a normal image tag this is a next js image tag which is actually gonna be by default out of the box lazy loaded now if you're not familiar with what lazy loading is let's go ahead and show you a demonstration so if i load up a web page you can notice that we see the six pictures appear on the screen now we don't our user does not need to see all of the hundreds of pictures below their viewport they only need to see the six right if we load up all of them that's just a waste of network usage right so if i go ahead and scroll down now now it starts to load in those images we call this feature lazy loading this is something which we should adopt as a standard but the default img html element doesn't do this out of the box okay but next yes it does right and it does a lot of other good things as well so just bear that in mind and that's gonna help you out quite a lot okay now um let's go ahead and check this one right here so um yeah and also guys we are actually streaming on twitch so if you want to go ahead and join a join over there feel free to okay um okay so we've got the header this is the image tag so i'm going to go ahead and import the image from next four slash image okay now the image does require a source okay oops the image does require a source so the source in this case i've actually gone ahead and minified this for you it's going to be this right here so it's https links.properreact.comua6 and this will be a picture of the hulu logo okay now you can see image with source must use width and height so in this case it takes two custom attributes and we're going to use the width and height attributes of width of 200 height of 100 okay so if i go ahead and do this um then we can see this and you can see now it says the host name links dot popup react is not configured okay under next.config.js this is because whenever we use an image we have to tell next yes that we're allowed to use that domain okay that we would we permit the usage of this domain okay so what i need to do is i need to go into my files i need to go i'm going to click package.json to go to this level i'm going to create a new file called next.config.js okay next.config.js now inside of here i'm going to go ahead and paste the following okay now we have got images from tmdb which is a movie database so i'm going to be setting up for those as well but i need to go ahead and write the following module.export equals and then an object with an images key inside of it this is again an object and now we're basically saying that the domains that we permit right this is an array and we can put all the domains inside of it the one that we permit is links.proper react.com okay so we're going to allow for that i'm also going to allow from this one this is going to be used later on when we you decide to use the movie images okay perfect so if we go ahead and hit save you can see found a change in xjs config restart the server to see the changes in effect control c to cancel go ahead do yarn run dev to go ahead and re-kick the development server back into gear guys we just broke 400 likes just keep going guys this is amazing stuff we got over 400 people watching across different platforms right now crazy crazy stuff thomas campos thanks a lot champion thomas thomas welcome to the papa fam thomas joined yesterday and i saw by the way uh he joined the zero to full stack hero course that we offer the amazing community inside the papa fam welcome dean good to see you here right so here we have let's go ahead and check this out yeah i'm excited to see who the first 10 comments as well will be right remember guys comment your custom domain that you got from that hosting a link i can check if you've actually used the hosting link so make sure you use code sunny to check out the annual plans and then comment your custom domain and build the site and host it and i'm going to do a personal review of all of those websites okay this is going to be so much fun all right let's go ahead and close that now and now if i go over to my oops i've actually closed that oops i've closed the wrong one let's go ahead and open up my localhost thank you so much abajit he says i got my first react job on on third of march working on real world projects straight away only because of you you've really changed my life and a lot of others too thank you so much dude i'm gonna go ahead and pull that one up on the screen right now that's incredible stuff guys check this out he's actually gone ahead and got himself his own little job which is incredible dude and that's what we do this for that's why we're here we're here to change lives thank you for watching and appreciate the donation dude okay so let's go ahead and carry on so i'm going to go ahead and head over to my header.js now here we have our image okay now obviously we can't see the image right now so we're going to go ahead and style it accordingly so that we can go ahead and see that now the first thing i'm going to do is i'm actually going to add a custom class name now this is a css class name so uh tailwind css i'm going to do class name equals object contain okay oops there we go object contain this will go ahead and actually contain the object once once we go ahead and get in there now right now you can actually see the hulu logo is there but it's white okay so it's white right now so if you notice the hulu logo is basically going to be white on a blue background okay so it's a blue background so let's go ahead and change the background to be a blue now how do we go ahead and change the entire global app background the way we do this is we go to our globals.css and i'm actually going to go ahead and apply some global styles to the entire application so how do we do this inside of tailwind okay so what we do is tailwind we have a base okay now the base basically is as it sounds it's the base sort of classes that we're going to have inside of our app the way we access that base is we say at layer base okay so we do add layer based which means we access that the next thing i'm going to do is go ahead and modify the body of our html document okay and then here i'm going to say at apply now this basically means that we can actually write tailwind css and it will get picked up here in the way that we expected it to okay so i want to do a few things here okay the first thing i'll do is actually want to set a background color so the way it works in tailwind css is they have a beautiful color palette that you can refer to okay and i'm going to show you how it works over there right so if we go over to tell in css and check out their home page and you can see pretty much a nice breakdown of everything here right they have a beautiful color palette and now here you can see you've got bg which stands for background the color and then the shade okay now what if we want to have a custom color okay so by using jit which is the just in time compiler we can have this amazing functionality to basically bypass the color palette which is amazing by the way right so their color palette is beautiful out of the box but what we're actually going to do is have our own color being used okay so i'm going to show you how to do that right now i'm going to say bg for background and i'm going to go ahead and put a hex in a square bracket and this will basically tell the just in time compiler that just before it runs apply this exact sort of custom class okay and then they will go ahead generate the utility glasses for that color okay so i also want the text to be gray and as i mentioned before it's all in shades okay so here you can pretty much see it goes from 50 which is a light all the way to 900 which is a dark this happens across text colors background colors and all that good stuff so here we're going to say text gray 300 hit save and now you can see the background has changed to a hulu and the color of the text here has gone to gray if i was to go ahead and change this to red you would be able to see that the text went to a red but a light red okay so let's go ahead and do this right here so we're going to say text gray ibrahimoh says sonny what are the benefits can we get by joining the course if we follow your live builds every time so on the live and in the course we have live coaching calls where we go deep into how you can go ahead and take the skills that you learn on these streams land yourself a job and we go ahead and go deep diving into the latest and greatest tech in addition guys it's a community that you can always refer to and be a part of a family right so we're here to support you in the proper fam not only when to get the job but after you get that job and go ahead and you know support you with with if you get stuck with a debugging problem we'll share that debugging problem with the entire community run through a coaching call together and overcome it so it's a team for life that's how we have it inside of zero to full stack hero link is in the description if you want to join us i highly recommend it okay guys this is incredible stuff we have loads of people here right now amazing energy i love you guys to pieces all right let's go ahead roundo says just got jobless front and developer thanks to you i did a spotify clone and netflix cone starting on the 17th of may thank you thank you that's incredible dude it makes my damn day when i see that this is incredible we're results based here okay we're all about getting results i don't care about making another udemy course it's about results right this is the goal for me right this is why the papa fam exists so inside of the header component okay we have the image now the image is looking pretty good okay i'm pretty happy with that right now so the next step i want to do is i want to go ahead and actually create these individual elements over here okay so let's go ahead and do this richard says ever try next just for back-end dev yes we actually covered it in a coaching call internally in the course uh it's really good honestly really really good it comes with a built-in api and to show you right here so we don't go too far off track but here you've got a built-in api so if i was to type in localhost 3000 for api hello boom we get a nice little api which is running on the server okay so that's just it goes to show you how simple it is you don't even need to set up your own express server it just works right so let's go ahead and set up the header items so this is the next portion of the build okay the header items um so the first thing i'm going to do is i'm going to go ahead and create a container to contain those header items okay because as you can see we've got a left section over here so this left section is going to be my sort of you know like a div for the left and then i'm going to have the right section over here now this is a nice little trick i found out all right so we're gonna have a little div which represents this a little div which represents this and i'm gonna be using flex to go ahead and justify how it's spaced out okay so right now what i'm gonna do is i'm gonna have my div and i'm gonna go ahead and have header items in each one okay so header item now obviously this is not a component which exists so i'm going to go ahead and create myself a header item dot js component inside of here underscore rfce and it goes ahead and pops up our code okay now inside of header item we're going to take two props i will explain what a prop is in a second but we're going to go ahead and come back to that okay now i'm going to import my header item that we just created right there so again control space by the end of the word and you will go ahead and be able to import the item in okay and then we're gonna pass in props okay so whenever we create a custom component right we can pass in something called props which stands for properties props basically allow us to reuse a component and that will basically be the fundamental there's a fundamental key part to react which allows us to write a bit of code once and reuse it several times okay so throughout this entire build we have a bunch of reusable components so here i have a title which for the first one is actually going to be home and then oops home and this is going to represent this so this will be the title home and then we have an icon okay so the second one would be the icon and notice how i'm passing in a capital i because this is actually going to be a component that i'm passing in now the icon is going to be pulled from something that we call uh hero icons okay so this is actually heroicons.com now they work natively with tailwind css okay so everything works beautifully and again the taiwan are on fire guys they are building hero icons they are building and these are beautiful svg icons svg means scalable vector icons which means that it doesn't matter scalable vector graphics it doesn't matter how you resize them because it's mathematical it will go ahead and resize will never pixelate so svgs are the way to go they're also extremely lightweight okay guys smash that thumbs up we're almost at 500 likes okay so now what we're going to do is we're going to install this so i'm going to click on documentation and now inside of here what we do is we simply go ahead and say mpm install i'm going to do yarn add hero icons react okay nice cesar says in the meantime you have reached 33 600 yeah man it's crazy we're growing at an incredible rate over on youtube the papa fam is growing so fast thank you so much dude so here we say yarn add hero icons react okay this will go ahead and add our sort of dependency to the project so that way we can pull in those icons that we require 450 likes amazing stuff guys let's get this up to 500 let's keep going guys i love this energy okay so now i'm going to go ahead and close that second terminal perfect and then i'm going to go ahead and pull my screen back come on j to hide the terminal and then what i'm going to do is i'm actually going to pull in a my first icon so this one is going to be called the home icon okay so i'm actually going to pull in a bunch of these from the um the library that we just pulled in okay the module that we just put in so here's how i import them and now as you can see it's from hero icons react outline now there are two variants with with every single hero icon that we use okay you have the outline variant and the solid variant and you can see it's very sort of self-explanatory the solid is colored in the outline is outlined and now here if i need to find anything i would type in the name and then this would give me the sort of you know this is how i search for them so this is how i was able to find all of these icons as sort of required okay so here what we can do is i'm going to go ahead and pull in my hero i home icon like so hit save okay now i'm going to render out the first header item so let's go over to my header item and let's go ahead and start this out accordingly so the props that we passed in actually get pulled through over here as an argument in es6 we can do something called destructuring so i'm going to go ahead and pull apart the props by putting curly braces around it which means i can select the keys from inside the object that i care about thank you so much mohammed he just dropped a nice little coffee donation i appreciate that dude thank you so much all right so here what i'm going to do is i'm going to go ahead and grab my icon and my title and again you can see i've put in the order opposite to how we defined it here because these are keys it doesn't matter all right we can have it in any order right so at this point we're going to go ahead and actually render the sort of items on the screen so i'm going to render the icon which is as i mentioned before it's a component hence the capital i and then what we're going to go ahead and do is have a p tag which is going to have the title inside of it okay i'm going to hit save and now you can see boom we get that massive icon on the on that side and then we get the uh let me know if this is actually clear there we go that's better okay so we get i get bad hay fever guys so if you hear me sniffling i'm not sick i have hay fever okay so just uh just a fire okay um so uh here we have the first icon like we needed okay so i'm going to show you how we can use heroin css to go ahead and start this out easily okay so i'm going to go ahead and say class name class name equals and i'm going to say h8 now this means a height of 8. okay so boom immediately the style gets uh applied and in next yes we have this beautiful thing called fast refresh okay which makes it so easy to go ahead and develop because it just quickly refreshes okay um now let me know where you guys are from in the chat right now okay i want to see where everyone is watching from and again if you're watching from uh when you drop that comment smash the thumbs up button let the energy go off i can see those people in india we have kenya in the house we have the states united states let me know if you're from the states right canada's in the house oh my god it's so cool to see okay so we got turkey as well nice awesome stuff all right so we're gonna h netherlands hey bahrain morocco wow this is crazy we have so many people china italy portugal whoa my god thiago from ireland oh my god germany it's crazy i didn't expect that i didn't expect that i i just thought i'd do it for fun but that's so cool wow thank you so much guys alright now we're going to go ahead and do margin bottom of one and as you can see look it's very quick and easy to apply these things and the text is very short right wow look at that it is popping off in the chat right now i did not expect that guys smash them we're almost at 500 likes this is incredible you guys get me hyped up right this is so fun okay now for the p tag for the class right i'm going to go ahead and do class name equals wow i i just didn't know that that was that many people watching because honestly guys i see a number right and then i forget who is behind the number sometimes so it's it's just incredible to see international team out here right papa fam is international oh yeah right so here we're going to do for the home okay i'm actually going to start this out and basically firstly i want this text to be spaced apart a little bit more so we can do something called tracking widest here okay and this will go ahead and space the text out a little bit more right now i do recommend if you're using tailwind css make sure go ahead and download this extension over here for this one right here so it's tailwind css intellisense this will give you as you type in the class names it'll give you a very nice autocomplete okay really do recommend that you go ahead and install this because it will be something which will really really help you out okay when you're building or with tailwind css so we're going ahead and done tracking why this now as you can see this doesn't look exactly like the build that we have over here okay so over here things are centered and then when we hover over it the home appears and when we don't hover the ho the home disappears okay so how do we get this to work in the way that we want it to okay so the way that i'm going to do this right now is actually i'm going to say by default the opacity is going to be zero okay so i'd actually want to hide it initially okay then what i want to do is i'm going to use this amazing thing called so what we can do inside of tailwind css is we can actually apply active states okay so hover states active states like um and all those different modifiers to our css so here i'm gonna say only when i hover do i want the opacity to come to a hundred okay so you see only when i hover does the opacity come to 100. but what if i want the entire sort of let's say this entire box when i hover over the entire thing right because as you can see here it's when i hire hover over the entire thing we refer to this as a group okay so what i'm going to do is i'm going to get rid of this in my div above i'm going to go ahead and type in group okay so this is going to represent a group and then what i'm going to say down here is if i hover over any of the things inside this group then i want the opacity to go to 100. if i hit save now now you can see if i hover over anything over inside that group it will go ahead and show which is a lot nicer okay so the next thing i want to do is i want to go ahead and give it a flex box okay so just to help us out here i'm actually going to go ahead and just show opacity 100 by default and then change it afterwards okay so here i'm going to say flex by default okay so here we have our flex by default and i'm going to say i want to do flex column now bear in mind when we are doing tailwind css guys you must remember so first he's using the full width hence why we see it like this okay you must remember that it is mobile first which means we style everything assuming that we are on the smallest screen size first and then what we do is we use special break points for example sm and then we go up in size to go ahead and make it bigger right and then we hit those break points to apply the classes at those different sizes because we assume everything is at the smallest size first okay this is what we call mobile first development okay guys we just broke 500 likes thank you so much energy is it crazy let's go for 600 that's incredible richard richard says do you have to name a group if so how did you do this for multiple groups um so yes you do have to do groups and it's based on the parent okay so that's how it works okay so here we have the group and now what we're going to do is i'm going to go ahead and say items should be centered okay now these are these modifiers utility classes are found in tailwind documentation so you can see when i do the centering it centers the item like so and then what i'm going to be doing is i'm going to go ahead and type in cursor pointer now this is going to go ahead and allow me to have a cursor of a pointer oops pointer sorry when i hover over so you now you can see i get a nice little pointer when i hover over this okay perfect stuff all right so i'm going to go ahead and over this and so you can see that for a bit more easier well what i'll do is actually i'll make the screen a bit bigger there we go i'll zoom in twice all right so we've got the group now what i want to do is i want to set the width to a custom width of 12. now the reason why i want to do this is i don't want it to use up the full width of the screen right because what will happen is when we resize the screen you can see if i set it to allow it to be its own size the text would determine the size of the of the container which would mean that it would push everything out so by default i'm saying become a width of 12. okay so here i'm saying become a width of 12 and then i only want it to get a little bit bigger right when i hit the small break point so here you can see as i get smaller then it gets a little bit bigger but how do we get that side like how do i do that how do i apply those different styles at that point okay so here what i do is i say when we hit the small break point i will change the width to 20. that's it it's as simple as that okay let's go ahead and hit save okay then what i'm going to do is i'm going to say when i hover over it i want the text to become white so if you can notice when i hover over this look how it goes from a gray to a white okay so gray to a white when i hover over it okay so here what i'll do is i'll say hover and this one will be text white okay now if i hit save you can see look the text is actually going to white okay nice right this is really really nice okay it's working really good out of the box okay so the next thing we want to do is i want to have it so that when i hover over this i want the entire thing sort of this this icon to bounce okay so how do i do it you're probably thinking man that's going to be complicated it's going to have to do some css animations how the hell does that happen but it's a lot easier than you might think okay so i'm gonna go ahead and show you how we do that right now it's actually super easy to do that okay here we do we say group hover so when i hover over the entire group i want to do animate bounce okay and now what we'll do is when i hover over it look at that we can animate bounce right now there are some built-in ones there's anime bounces animate posts so many different things okay now i'm just gonna take a drink of water one second guys incredible stuff guys almost at 600 likes just keep on going okay so now we have the animate balance complete okay so this is looking pretty good at this point all right so now what i'm going to do is uh atharva says tailwind is awesome can we use it with normal react of course dude 100 so now i'm going to change my opacity for the text to be by default zero now what we should see is if i hit save oops not this one if i hit save now now we should see only when i hover do i get the effect applied okay so it starts bouncing and this right here is how we have it in the final build okay so this is looking really really nice okay now what we do um all right guys don't don't spread some silly messages okay otherwise you're gonna get blocked all right thank you now we've got anime bounce or some stuff and then what we're gonna do is we're gonna have um so at that point we've actually finished with this uh component okay so we have a reusable component looking great at this point okay so what i'm to do now is go over to my header and then we i'm going to go here and i'm just going to go ahead and paste out the rest of the reusable components so we've done a bunch of imports at the top so i'm actually going to do a few variations to the titles and then you apply the different icons okay and if i hit save on this we will see that we get the following applied okay so now we get all of the perfect looking this is looking great right and this is the reason why this is appearing the way it is is because by default is in line okay so obviously we need to change the parent container to basically behave and style as we want it to okay so this parent container now is where we do the styling to make sure that it behaves in the way that we expect it so i'm going to say this is a flex box so by default hits a row okay so there we go we've got a row and then what you can see is that's looking pretty good at this point okay then what i'm going to do is i'm going to say okay this should be flex grow so use up as much space as you possibly can okay then i'm gonna justify evenly okay so justify evenly and as you can see this is starting to become very simple in terms of the sort of the the things that we need to write okay now here it's actually pretty simple in terms of uh what we're doing so far now i do want to make sure that when we have so i've done flex grill but i don't want it to grow like this okay i don't want it to like kind of spread out to this extent right i do want to limit it so what i can do is i can set a max width i can say max width 2xl which is a which is actually a break point which has actually been given to us by the guys over at 101 css okay so we have small we have medium we have large extra large 2xl i'm going to hit save and now you can see that irrelevant if it gets so big or not it will go ahead now as you can see it is kind of hitting that top so we're gonna have to apply some margins in just a sec okay so perfect stuff okay i think we're back wow that freaked me out i don't know what happened there okay so at this point what we're going to do is we're going to go ahead and um do the following i'm going to go to my top and i'm going to say flex so the parent container now we don't want the header and the hulu to be in this kind of fashion okay i want it to be like this right so i want to look exactly like this whereas right now it's kind of like in a weird orientation so i'm gonna do this i'm gonna say okay it's flex by default okay flex by default now if you notice the mobile first view is this so remember as i said this is what we should be building first okay so mobile first okay then what we're gonna do is we're gonna go ahead and do flex column okay flex column like so right um avnish just feel free to just block uh people who are you know you're kind of wasting time okay right so let's go ahead and um flex column there we go and then i'm going to say when we hit the small break point so now by default it's in this right perfect when we hit the small break point then i want to change to a flex row okay um perfect stuff right so this is looking great then what i'm gonna do is type in a margin of five so top left right and bottom now that looks a bit nicer right guys and guys we're almost at 600 likes let's keep going this is incredible right so look now we've got the margin applied and then when we hit the small break point see how it changes to flex row so very very nice subtle changes but we have this issue okay so it's not actually spacing itself correctly or on the correct vertical axis line okay so with an emergency margin of five and then we'll say justify between so justify between like so hit save and then and then i'm gonna go ahead and do items center right perfect and now if i go ahead and sort of you know go ahead and resize this now look how it perfectly resizes okay all right amazing stuff this is looking great okay so the thalva says we have some panning issues not anymore dude now it's looking great all right so even here what you can do is i've actually chosen to have it kind of you know close together but you can you know change it as you want the reason why i chose it to have it this way is because this is going to be on a phone so i kind of wanted to have this effect right but you can change that if you wanted to it's completely up to you okay item center and i'm going to make the height automatic as well okay so h auto there we go all right everything's looking great at this point what's up priyankshi good to see you in the chat okay so with that said guys we just completed the fully responsive header okay so this is great right now this is exactly as we wanted it this header is looking perfect at this point so it's mobile first and as we resize it hits the small break point and then it just goes ahead and resizes accordingly right based on the constraints that we set so this is looking really really clean at this point okay this is looking great right so now what we're going to do is we're going to go ahead and build out the next part all right so no pun intended okay but now we're going to build out the navbar okay so we've done this bit now we're going to build out this scrollable nav bar now notice as well there's a slight fade here guys so i want to make you know drink bring your eyes to that well i've got this nice little fade that happens over here okay so i'm going to go ahead and show you how we do this now right here okay now what i'm going to do is i'm going to go ahead and do index.js like so and then i'm going to go ahead and do a nav component okay then i'm going to close this out perfect and i'm going to go ahead back to my top components and i'm going to create the nav.js component okay now do underscore rfce perfect right now inside of the navbar okay we're actually going to be using the correct html element which is a nav component right this will tell you know seo purposes and things like that that is the sort of navigation component whoa antonio cortez thank you so much dude 10 cl donation coming in hot all right thank you thank you so much that's incredible man thank you thank you so much all right so here we've got the nav i'm going to go ahead and import that from our component like so and then we can go ahead and build this out okay so what do i want to have over here right so we're going this is actually going to take a you know a few little things that we're going to have in this bit right here so we're going to have firstly our div now our div is going to contain all of these options over here now these aren't hard-coded values okay these are actually being poured from a separate utility file that i've created called requests okay now you're probably wondering whoa whoa what's going on here now i'm going to show you this is where the clever part comes in and how we go ahead and connect to the tmdb database to pull in the uh the correct thing so in this case we've got different characters genres we can call them trending top rated action comedy and so forth a bunch of other stuff okay so what i'm going to do now is i'm going to go ahead and create a util folder this is going to be utility folder which is going to have all of our helper stuff so i'm going to click package.json to go to that level type in utils and then over here i'm going to go ahead and inside of this i'm going to go ahead and create a file called requests.js okay now this is going to serve as the place that will have all of the sort of relevant things that we require to make the requests to that backend api okay so in this case what we're going to do is i'm going to go ahead and actually have firstly an api key okay now this api key is a variable just called api key and it pulls from our environment variable now we've never done environment variables on the channel before but it's a standard that you should be using what's up from south korea good to see you guys here okay so um what we have right now is we have an environment key environment variable okay so the way that we have an environment variable is we go inside of here and i'm going to create a file here called dot n dot local and this means that our local environment files now you get development environment files production environment files and i'm going to show you how we can have a local environment file and these are private these do not get pushed to github environment variables are private variables they don't get pushed to github which means that the developers will need to have their own environment variables which are private on their machine now what i'm going to show you is how we can go ahead and do this and then how we can have our environment and variables encrypted in versal when we deploy to production later as well okay now it is supported out of the box okay a lot of people saying do you have a code no guys i have hay fever and it's it's hitting me hard right now okay so i'm trying to i'm trying to beat it okay so at this point next just. um i'm gonna go to requests okay so now i'm gonna say export default like so and then i'm gonna do a object okay and now inside of it i'm gonna have all the different things okay so let's just go ahead and create our first one which is gonna be called fetch trending now the key for this one is gonna be fetch trending and then we're gonna have a few things inside we're gonna have a title which is gonna represent what we see on the screen in this case we've got trending top rated and so forth the second thing is going to actually be the url to fetch from okay in this case we're going to use backticks because we're going to have some string interpolation um and thank you so much judd uh ravine says can you share the source code the link for the uh papa github repo is in the description feel free to jump in and check it out right um when is the next react native project coming oh you know sooner than you think okay so i'm focusing on next yes right now but i'm going to be dropping that very soon as well okay um and then i'm going to go ahead and hit paste and you guys can see this is our first um url endpoint okay so forward slash trending forward slash or forward slash week question mark this is going to be our first uh you know query oh nice frank's in the house with 10 donation thank you so much dude this hulu build is so clean next yes is awesome let's go thank you so much dude appreciate you your support all the time man that's incredible thank you so much frank good to see you so we have an api key right here and this will go ahead and you know put in our process.m.m.p api key and then the language is english okay so perfect stuff now what we're going to do is we're going to go ahead and actually put out an api key so the way we do that is we go ahead to environment local and then we're going to say api key equals and this would be your api key okay so it'll be like you know a private key here okay so in this case i do have an api key and i will show you how to get your api key in a sec okay but for now i'm just going to say it's abc okay let's just say this is my private key okay and i'm going to show you how to get your own tmdb key in just a sec okay so now what we have is we have this is our first fetch trending now we've got a bunch more okay so i'm going to go ahead and copy and paste these and i should leave it on the screen to show you guys in just a sec that you see you can do the same thing okay so i'm gonna go ahead and pause it right here and then you can pretty much see each of the different endpoints that we have okay now these are always been specifically catered for and um what we're always doing is accessing the tmdb api and getting the uh corresponding genre okay so in this case romance is the genre 1000 or 10 749 and so forth okay so we have loads of these things right here okay remember these are backticks right which interpolate our api key into the string okay so this is how we do here and now if i go ahead and hit save like so okay so this will go ahead and actually be where we pull in our requests okay so the next thing i want to do is i'm going to go into my nav and now we can actually go ahead and continue with the front end okay so we can actually leave it there for the second for this second and then we can go ahead and continue to build out the front end okay so we have the div which is going to be responsible for holding all of these different things okay so we're going to be holding you know top rated action comedy horror and so forth okay so in this point what i'm going to say it's going to have my jsx i'm going to say now what i want to do is i want to loop through everything inside of the requests okay so i'm going to loop through all of this but i want to get this is the club a bit right i only want to get basically you know the title of each one okay now how do i do that right but i actually do need a few other things i need the key i need this thing all right and i also need like a the title i need a few different parts here right uh thank you so much pierre elaine schutz all right sorry if i pronounced it wrong but he just dropped a i'm not sure what what currency that is but a 10 chf right now i will find out what that is but thank you so much dude for that beautiful donation he says thank you for these very interesting lives i learned a lot of things appreciate you dude thank you so much for tuning in and watching all right this is incredible stuff guys we're almost at 600 likes just keep on pushing guys okay swiss that's it right so now what we're gonna do is we're gonna go back to our nav and then we're gonna go ahead and do object dot entries okay now in here i'm gonna get my requests and this request i'm going to import from our utils and then what this will do is it will give me so i'm going to map through the results and then what this does is it gives you a your sort of you know it gives you each individual item but it's an array that it gives back and the array that it gives back is the key and the value okay the key and the value now what i'm going to do is i'm going to destructure the value to give me the title and the url so what we've actually done here i hope this makes sense is we're going to go ahead and we've looped through okay so we've looped through the requests all of these things we get the key and the value right the value is an object i'm destructuring the object to get the title and url okay so that's exactly what's happening here and now you can see for yourself if i go ahead and close this one you see this is the key and this is the value which we're restructuring to get the title url okay the next thing that i'm going to do is because we mapped through this is i'm going to go ahead and do the following i'm going to say uh i've actually one second i've gone ahead and done something wrong so here i should go ahead and have a surrounding bracket parentheses and then do the following so oops there we go okay then what i'm going to do is i'm going to do a direct return so we've got our closing brace and i'm going to have h2 okay now the h2 will have a tie the title inside of it so let's just test if this worked okay so now you can see hey there we go that's what i wanted to see okay so at this point you should get here and there you go you got trending top rated action comedy horror and so forth so as i mentioned before this is seen in the request so we've got all the different titles okay uh darshan thank you so much for another donation can you please build a google drive club with react.js redux and firebase i sure can dude and uh keep tuned subscribe and uh i'll keep the content coming dude so thank you so much uh for your support okay so at this point what i'm gonna do is i'm gonna go ahead and i'm just opening up some analytics so i can see all of you beautiful people watching right now on the channel and uh let me go ahead and just there we go perfect stuff okay amazing now i can see everything in the nice way okay so 580 likes wow and we just hit 55 on in chat donations this is incredible right so we've got the titles here working as we expected it to you okay so now what i'm gonna do is i'm gonna go ahead and style it so it looks a bit better okay so this div right here i'm gonna say class name and then i'm gonna give all the styles for it okay um [Music] yeah so uh good good shot okay so we will be binding a key to the h2 okay so any time that we map through uh any item or array or object or anything that we do here we need to add in a key because react needs a key so that it knows how to re-render the list so as i mentioned before we're going to be using the key over here okay so that will be a unique key otherwise your console will freak out and it will tell you i'm going to tell you off okay so says wow this chat is awesome yeah chat's on fire today guys honestly incredible stuff if you're watching this back i really recommend you turn the chat and have a look okay so now what we're gonna do is i'm gonna go ahead and say the following okay so i'm gonna actually gonna have um here for the um let's go ahead and actually start the h2 first okay so style the h2 first i'm going to say the class name equals and then for the last element i want a little bit more padding to the right at the end okay so i'm going to do some cool stuff there and i'll show you how we can use some modifiers to do that um but that's gonna have it so we hover over all this stuff okay and then it will give me a nice little scale effect okay so the scale effect that i'm talking about is this one right here when i click it it goes red i'm gonna show you how we do all of that okay um amazing stuff thank you guys um so now what we're going to do is i'm going to go ahead and type in last uh and i'll do that one after actually i'll say cursor pointer so i want to cursor to be the pointer when i hover over it i want to and then i will apply the transition uh i'll do it now actually okay so i'm gonna do transition this is how you do the effect okay i'm gonna say let's create a transition the duration here is a 100 so i'm going to say duration 100 that's 100 seconds and it's going to be a transform effect i'm going to say when i hover over it i want it to scale to 125 percent okay so now you can see as i hover over it it's going to go ahead and scale okay now you can't see it properly because it's going off the screen but we will go ahead and fix that in a sec okay the next thing i want to do is i want to say hover uh and the text should go white okay so just as we did previously i want the text to go white and then when we i want to click it i want it to be active okay so this will give you text red 500 hit save and this will allow us to have this active state over here okay nice stuff shivan sha says coming here after months it's always refreshing watching your videos uh learning a lot from you saying thank you so much knight riders the best youtube channel please continue making videos like these instead of other youtubers they're going numbers on youtube something you pay goals which everyone can afford thank you so much dude appreciate you um and yeah thank you so as you can see now we do get this effect over here so it's looking good but we can't see any of it which is not great okay uh thank you amnesia see you later so here i'm gonna say flex okay so this will go ahead and pop everything into a row now you can see everything has that nice little animation effect but it's not ideal is it is everything's getting squashed up together okay so this is kind of you know it's not looking great right now and everything's kind of too squashed up so how do we fix this we say firstly i want to get padding on the x axis of 10 okay so it's not going to touch the side and then what i'm going to do is i'm going to say when i hit the small break point and when the padding on the x x axis become 20. okay so this means that like for example when i go a bit bigger you see how the padding on the x-axis get jumps it gets a little bit bigger right that's how we want the behavior to be okay sharon says my current job is because of your videos that's incredible dude thank you so much that's actually incredible all right and then here i'm going to do text 2xl to get the size up okay there we go starting to look pretty good my standards look really good and then what i want to do is i don't want this wrapping behavior so here where it says top rated i don't ever want it to wrap okay so i'm going to say white space dash no wrap and what that does is it stops it from wrapping but again everything's so bundled up well we want space right a nice space between them right so when we're on the mobile screen notice how the spacing is a little bit less and then when we get onto the small break point boom it gets bigger all right so you see how it gets bigger there so i'll show you how we can do that in a very very easy way say he says thank you so much for your hard work best youtube channel for react thank you so much dude appreciate you uh we've got kenya in the house i appreciate you guys alright so here i'm going to say space for everything all the children on the x-axis right i'm going to say 10. so remember mobile first so this gives everything on the x-axis a space of 10. now as you can see look it's kind of oh it's got our overflow scroll but it's kind of horrible right so i'm going to fix that okay so the next thing we're gonna do is we're gonna go ahead and say when it hits a small break point i want the space on the x axis to become 20 okay which means that remember so the padding will get bigger and the spacing will get bigger and you see look at that it's just so nice right and when this stuff got starts to come together right it's really really nice okay so what we're going to do here is i'm going to go ahead and say overflow x scroll so if there's any overflow i want it to be a scrollable element now here you can see that we have a scroll bar i don't like the scroll bar so i'm going to show you how to get rid of that in a sec okay so we'll get rid of that in just a sec um but the thing that i am interested in here is you see this right element i want to give some padding to the final element now the way that we can do that is we go to the child element we say last colon and we say pr24 and that's it it's as simple as that and now the last child element gets a padding of 24 which is really really clean right this is honestly quite easy to use are using a css framework we are using tailwind css so yes it's actually a killer framework to be using okay right so i've actually lost my thing there we go look nice now so what i want to do next is i want to go ahead and have this um sort of you know i don't i want to hide the scroll bar okay so i want to hide the scroll bar and just have it so that it's a clean kind of you know a very very nice modern approach okay so we can just have a scrollable uh sort of you know uh x-axis okay so how do we hide the scroll bar in this case uh what we're gonna do is we're gonna actually go ahead and apply a plug-in okay so i'm gonna go ahead and actually install something called tailwind scroll bar hide so you go into google type intel and scroll bar hide first link in the description over here tailwind scrub or hide npm okay this is a plug-in so in this case we're going to do yarn add tail and scroll bar hide and then you can see this is how you add it in you go to your tailwind config so in this case i'll go to my tailwind config i'll go to the plugins and i'll simply go ahead and type in require and i'll pop it in like so oops i'll pop in tailwind scroll bar hide and i'll go ahead and install the dependency with the yarn add tail and scrub bar hide okay while that's happening i'm going to go ahead and restart our playlist the papa fam playlist if you want access to it remember we can go ahead and sign up to that newsletter and you'll get free access to that playlist the entire thing guys we just broke 600 likes incredible stuff this is why we do what we do this is an amazing energy from you guys every time i don't expect any less this is how the puppet fan works okay guys let's carry on okay so now what we're going to do is we're going to hit save okay now you can see uh we should have tailwind scroll bar hide so what this does is it actually enhances our utility classes on terroin so that we have this very easy to use hiding scroll bar functionality okay so the way i do this is i simply go to my uh sort of you know the where i wanted to have the sort of hidden scroll bar uh like so which in this case it was the navigation.js and then i'm going to go ahead and simply add in a class called scroll bar dash hide okay so overflow x scroll and then scroll bar hide and boom just like that it's gone okay just like that it's gone okay so in this case look how clean that looks right super super clean super easy to get that working and we have a scrollable container right so that's really really clean now we don't have that fade okay we don't have the fade at the moment i'll show you how to get the fade very very simple to do with tailwind tss but at this point you can see look at this we have all of this stuff working the ui is looking great at this point okay so what i'm going to do now is actually change a few things so i'm actually going to create a little fade effect so you can see here we've got this nice little fade effect right which actually fades out on the right element okay so the final right side to do this it's actually easier than you think when using tailwind uh we're going to create a div okay and this div is going to be a self-closing div because we're not going to have anything inside of it now here i'm going to have a class name this class name is going to go ahead and say thank you so much emmanuel appreciate that dude um i'm going to type in absolute okay so firstly if this is absolute i want my parent to be relative okay so that way it's going to be absolute to the parent so here i'm going to say absolute i'm going to say top 0 right zero which is going to absolutely position it to the top right of this parent and then this is where i apply a gradient now the gradient is going to be from the background color to a sort of you know a fade away or it'll be you know like i'll show you how this will make a lot of sense in a sec okay so i'm going to type in bg gradient to the left okay oops bg gradient to the left and honestly it's actually very easy to use i'm going to say the from color is gonna be and again because we're using the just in time compiler i'm gonna go ahead and pop in our you know our lovely little bit of um sort of you know we can add in a dynamic color and it will go ahead and pick it up you have to use just in time for it to work and then what i'm going to do is i'm going to finish things off by adding in the final touches which is going to say h10 for a height of 10 and then i'm going to say width should be 1 12. okay now you can see look at that so it's a width of 1 12 of the screen and you see how it's got a nice subtle fade and all that's doing guys is it's going from a background blue to a transparent color because we only define the from color hence why we only see the uh if you if you don't define a two color if i gave it a two let's just say red right and let's just say uh i think it would be two red or it would be two 5 red 500 or something let's just do two white and then you can see it goes to white right but if i don't give a two color it will just become a transparent fade and there you go and that's how we do it right simple as and look at that that's nice right really really clean okay so quick water break and then let's carry on okay let's do this guys all right aldo says now i get it that's what i'm talking about dude all right so really really clean stuff okay so we have all of this working now what i want to do right is when i go ahead and click on one of these what i'm going to do behind the scenes is i'm just going to change the route so you can see when i click this it all it does at the top is it changes the route and all it does is it adds in a query parameter of whatever fetch that we need to do so in this case when i click horizon fetch genre equals fetch horror movies okay so what i'm going to go ahead and do here is on click right so i'm going to go ahead and say on click right i'm going to have an inline function and next js actually has a built-in router okay so what i can do is i can do an inline function and i'm going to go ahead and import the router from next year so this is called the use router hook and what we have to do is we have to get our router so here i say const router router or router i don't know is it router or router i always get lost it's american vs english i think okay so that should be pretty good and then here i'm going to say rooter.push and then what i'll do is i'll do backticks and i'll say forward slash genre and well i'm not doing normal i'm going to say query param genre so this is a url query param genre equals and then i'm going to basically use the key for the object that i'm looping through and if i hit save now now you can see look at that it changes the top over here so it says query um so genre equals fetch top rate if i click this comedy fetch comedy movies top rated trending romance horror clean all right this is really clean good stuff athaba what's up dude all right so this is looking really really nice at this point in time okay so we got all the foundation set up right now are you ready to get the results done right the nice bit the hulu part of the build right so this is actually the nice kind of you know the hulu part right okay so let's go ahead and get this working pretty clean again all right so let's go ahead and go back to our index so i think we're pretty much done for that bit okay so i'm gonna go back to my index and now we can go ahead and focus on the results okay so the results i'm gonna go ahead and update here so let's create our results component okay now the results component is a little bit more of the sort of you know the the more interesting one okay so the first thing we need to do is actually create the results component himself okay so i'm going to create results underscore rfc and then i'm going to go ahead and have my results component over here like so go back into index.js do a simple import so end of that control spacebar trick import hit save and then we should get rid of the error now we have our results on the screen but it has nothing inside of it this is the interesting part okay the way that next js works okay so typically when we're using react you deploy the entire react app to the website okay so imagine we have sunnysanga.com we would deploy the entire react bundle to the website then when the user goes on to the website they load the javascript in their browser okay the way that next js works is that the user goes to sunnysanga.com okay they reach sunnysanga.com they make a request now on sunnysanga.com is the next js server running okay what we're going to do now is have a server side render which means that user comes to sunnysanga.com requests a page on the server we build the page we get all the javascript executed we have everything so it's all rendered on the page on the server before it even gets to the user and then we send over the all of the you know the required data and everything that the user would have had to load themselves we're going to send that all over as a prop right which means that the user just gets as soon as they come into the page they'll get the the final rendered page immediately there's no like flickering or anything like that that happens okay um so we're gonna make it make it work in that exact fashion and this means that google their little scrapers as soon as they come into the page it loads immediately as well which means that they get better seo performance so the way that you can do it next year is to have server side rendering is very simple you just go ahead and add in a special function and then it will tell next yes that this page only this page right so it's based on per page this page is going to be server side rendered so the way we do is we say export async function and then here i'm going to say get server side props and what we do is we get something called the context okay the context is gonna include important details for example what was the url that the user came in with okay because we need that url don't we right if we don't have the url i can't figure out what the genre was and i don't know what fetch okay so at this point this is remember and what's going to happen here is this will get executed before this gets rendered so this is what gets rendered on the client this is what gets rendered on the server this server render happens first and then it gets delivered to the client okay so this will make sense once we get started so what we're talking about i'm going to pull the genre from that url and the way we do is we say context dot query dot genre and that's because remember we were applying the genre query param when we click on those header elements okay the next step is i'm going to say this is where we make a request to the database right so the tmdb database so what i'm going to do is i actually need the api key and i need to set that stuff up right now before we can continue on okay so in my environment local file remember we needed an api key so i'm going to show you how to get your api key right now okay so right now what i'm going to do is i'm going to head over to tmdb.com okay so tmdb the movie database over here what you want to do is you want to click on login so i'm going to go ahead and hide my screen for a sec while i log in so we're going to log in create an account it's completely free to do it okay then once you're logged into your account what you need to do is simply go over to your settings so i'm going to click on profile and settings over here and then i need to go to my uh it's actually seemed to have changed um okay so i'm going to quickly find where my api key is right now okay so it used to be here we go now go into settings there we go for some reason it wasn't coming up right then i click on this api down here okay so what's going to happen is when i click on this api key you should see inside of here an api key right and it will say something similar to api key version 3 auth okay so i'm going to show you guys an example of how this looks right now and hopefully this will help you out a bit okay so at the bottom of your screen what you should be seeing right now is something like this okay so the bottom of the screen around this section you'll see api key okay version three auth and then you'll see an example api request now the key is what you need okay so here this key is what you need to copy okay so you can see pretty much it will be in this location right here after you click api or say api key you just need to copy this key okay and i'm going to show you where to put this key next okay so what you need to do is copy that key and this is why it's private okay because i don't want my quota to get spammed okay so we're going to go ahead and copy that key and then i'm going to go back to my code and what i'm gonna do is simply go ahead and paste my key over here so imagine my key was like this squiggly nonsense right i'm gonna go ahead and paste it here so i'm gonna paste this now and then i'm going to close my environment local file and that's it that's all you need to do to get your key up and running okay so i'm going to quickly go ahead and paste it on my machine and then i'm going to close my environment local file okay so i've already i've gone ahead and done that i pasted it and it worked and then i'm gonna go ahead and do command j and i need to now load my environment variables into my next.js project so the way i do is i do ctrl c and i do yarn run dev again so i need to restart my server and what you should see here is a message about our environment variables now guys we're almost at 700 likes i think we can get there let's keep pushing those lights okay so at this point you can see it says uh loaded environment variables from environment.local perfect okay so everything's working the way we wanted it that's great okay so now what we can do is we can make a request okay so if i go to my request now now my environment key is populated with our environment variable okay um let's do a speed run before it runs out of the quota soon i'll do it at the end i'll show my key at the end if you really if you really want to do that okay so that's great all works perfectly and now what i'm going to do is go to my index.js and we're going to make a request so here i'm going to say const request okay equals await right because it's an async function we can do async await we're gonna say await fetch and this is basically how you make a get request to the tmdb server okay so i'm gonna be getting all of my data from the tmdb oh god okay there we go it's alright slipped up anyway that's fine um so we've got the tmdb server over here right so i'm gonna go ahead and pull all the movies from that bit it doesn't really matter to be fair okay um so now i'm gonna say wait fetch i was just trying to show you that it's important to hide stuff sometimes okay so here i say uh back ticks and then what i want to do is say https like so all of this stuff i will enable web pack five soon yes okay and then here i'm gonna do my string interpolation okay now what i want to do here is i'm gonna say requests okay so request i'm gonna import this from util requests and i'm going to say requests and then i'm going to go into the genre so the key is going to be the genre that gets entered hence why that url that we so notice how it says fetch top rated at the top that's going to correspond to the key over here so if that was like fetch top rated over here that's how we go ahead and get the url okay so here if i go back to my index.js now you can see request genre and this is going to be optional changing so we're going to protect ourselves and because at some point for example when you come into the home screen without a query param it's not going to be defined okay so what i'm going to do is i'm going to say if it's not defined so that's the first thing that will go ahead and get the correct url otherwise just go ahead and default to let's say fetch trending okay so otherwise i'm going to default to the fetch trending url okay so i'm going to say request.fetchtrendingurl hit save okay now once that comes back what we're going to do is go here we're going to say then and we get a result back and i'm going to go ahead and pass it with result.json so now we get a nice json object inside of our request okay this will be exactly what we kind of need and require at this point so the final step is okay so it renders on the server okay and then what we want to do now is simply go ahead and return this data as a prop to our component so here what i do is i say return and then i actually go ahead and put props now this bits the cool part okay so remember as i said it renders on the server first and then it will go ahead and generate all the data that it needs so it goes ahead and figures out the props beforehand and then we're going to just go ahead and pass it in as results so here i'm actually going to say request.results request.results now here's the cool part guys right so if i go to my home component i will now have props right because it would have rendered on the server beforehand done all of this cool wizardry and then it will just come through as props so here if i say console.log and let's just go ahead and console up my props i'll prove it to you okay so if i do f12 at this point and i go into my and i refresh i get a results array of 20 right boom this is all the tmdb data that's perfect guys look at that that looks great looks exactly as we wanted it and uh it's working just as i liked it all right so that at this point is just as we want it all right so if you found that pretty cool already smash the thumbs up button that's your first demonstration of server-side rendering you know live in a cool so you know besides what's up uh we got it working here as well so go ahead smash that thumbs up button we're almost at 700. okay it was just egg what's up coffee on me bro oh by dodge uh who does i might have dutch excited to learn server side rendering amazing stuff dude thank you so much for the 5 donation appreciate man that's incredible we've got the results coming through so at this point i'm going to destructure the results because i don't need to have the entire props and i'm gonna go ahead and pass my results as a prop to my results component and you can see where this is going right now i simply have a results component which takes my array of props and we render our front end okay so i'm going to jump into my results section over here hit save go into my results and this is where the phone happens okay so i'm going to go ahead and get our props come through here destructure it to get the requests i like to show it like that all right so now we have our request come through here i'm going to go ahead and hide this and here you can see this is how i figure out what comes back i always console log it and then i'll go ahead and check out okay so this is how i go ahead and figure out you know what's the id what what sort of properties come back okay this is the popularity what is the title of the video coming back and all this all those sort of things the vote count for example how many people have thumbs this up right all that sort of good stuff comes through at this point okay so now what we can do is go ahead and implement this right so the first thing we'll do is we have a div okay inside of my div i'm going to render thumbnails okay so these are all going to be reusable components called thumbnails okay and they're simply just going to get the you know the data that comes back from the the request okay so here i'm going to go ahead and render a thumbnail okay but instead what i'm going to do is i'm going to get my request i'm gonna map through every single one and every single result that comes back i'm gonna go ahead and render a thumbnail with it okay and the thumbnail we need to go ahead and create so at this point i'm gonna go ahead and create a thumbnail component so thumbnail.js hit save and then i'm going to underscore rfce boom working nice and then here i'm going to go ahead and pass in some props okay so here's my thumbnail over here and i'm gonna get my results over here so here so what i'm gonna do is firstly the key remember every time you're mapping through something you should always have a key in this case we're gonna use the result.id for the key and the second thing i'm gonna pass the entire result through as a prop okay so we get that entire object inside of the thumbnail so that means we get our prop destructured over here as a result okay perfect so we have our requests come through here now i am going to go ahead and structure this out it says cannot read property map of undefined okay so i need to figure out what's going on here okay so at this point if we've got the results come through and this is requests this is why right so i've actually gone ahead and changed this to results this should be um results results stop map there we go hit save thumbnail is not defined we can go ahead and import this boom hit save oh okay so sometimes it doesn't want to do it right so at this point what we can do is go ahead and hit that import thumbnail and you can see element type is invalid this is because we're not rendering anything out at this point okay so what i'm going to do at this point is just type in a h1 just to say thumbnail thumbnail hit save and there you go thumbnail something or something or thumbnail thumbnail okay so i'm going to make this look as the final outcome would okay so at this point i can close my results for now okay and this is where keep stay tuned because this is where it gets very interesting okay so we're almost to 700 likes i think we can break it because this is where i go ahead and i deep dive into how we go ahead and have css grid uh when it's a mobile so one column to then the two column one smaller ipad size screens and then a three column on desktop and then we break from that and go to flexbox on the huge screens so i'm going to show you how to do all of that very easily right now so get excited this is going to be a lot of fun okay and this is why this way it gets intense that's why the music goes stepped up a little bit okay so at this point we've got our thumbnail over here so instead of saying a thumbnail i'm gonna go ahead and give something a bit more interesting here okay so i'm gonna go ahead and we've got our div okay so the first thing i'm gonna say is uh inside of this div i'm gonna have a image this is gonna be a uh image from nextgs so remember we're gonna use the next chest and again actually i wanna have this on the full screen so this is gonna be a nexus image self enclosing in fact and then we're gonna have the layout to be something so there's a they take a property called layout this is actually a pretty cool thing it takes four different options you got fill fixed intrinsic responsive i'm going to be using responsive feel free to have a look at that all right so you can you can check that one out in the meantime when you need when you want to check it out now i'm going to make the height and width 1080p right so it's going to be a 1080p sort of dimension aspect ratio and then i'm going to give the source okay now the source is interesting okay so firstly the images that come back right so the results that are coming back if i go ahead and console log the result check this out all right so firstly um i'm going to comment this out but have a look at this right so if i go ahead and go into my console let's check out one of these for example okay so when it comes back we get the um poster path okay now this is a jpeg path but it's just simply forward slash and then a path right what is the base path we need a base path so i'm going to go ahead and show you what the base url is over here so this is the base url that everything is going to be sort of it requires this before we actually append that that sort of url that comes back okay now interestingly enough it doesn't always come back with the sort of you know predictable um sort of you know like position in the object okay so this in this case what you can do is you can say it could be this or it could be this or it could be this and i'm going to show you how you do that okay so the first thing we're going to say is i'm going to do back ticks and i'm going to say okay let's string interpolate the base url and then we're going to say string interpolate the result dot backdrop underscore path so this is one location where it could be okay and again how i how did i find this i found it by you know having a look through each of the different results and i can basically determine what is coming back as a result right or it could have been the result so there's a few different options here what i'm going to say is instead of this one right so it could be the backdrop path or oops or it could be the result poster part okay so or it could be the result poster part so in this case let's go ahead and clean that up nice right or instead of all of this it could be this okay so bear with stay with me right so stay with me it makes sense or it could be this right here okay so i'm gonna go ahead and show you guys the final finished variant so it's not too confusing there we go okay so it could either be one of the two things like so now this will ensure that you don't get you know like a missing image or anything like that this will make sure that it goes ahead and um is this video live oh yeah i did is and now you can see look at this where we get the images come on the screen and remember as i said before they are lazy loaded okay so these are being lazy loaded as we scroll down the screen out of the box next yes does that out of the box okay so what we can do now is and you can see look it's responsive so the screen size these images are all responding to the screen size okay so what i'm going to do now is i'm going to have another div okay so i'm going to have a div underneath my image this div is going to be responsible for the text okay so you see this text right here notice how when we hover over it we get an animated the animated text gets a little bit bigger and we show some of some of the data on the screen okay so a few different things are happening right now guys we're almost at 700 likes 15 likes away from 700 likes go ahead smash the thumbs up button subscribe if you're enjoying this right now let's keep on going strong guys okay so what we're going to do now is we've got the div over here i'm going to give a p tag and i'm going to say this is going to be the result dot overview okay and if i hit save there you go these are going to be the results of the image see the results of each of the results but this is going to be the text the overview text for each of the results they're super confused right there okay now what we can do is if it gets too long right i want to truncate it which means give it a dot dot dot so in intel when css is just super easy we can just say truncate and now look what happens if it gets too long it will just go ahead and add a dot dot dot at the end of the line okay so now what i want to do is i'm going to say trunk a and i'm saying max width medium okay so i don't want it to touch the end i want the max width just to be a medium okay i want the entire div to have a padding of two i don't want it to be you know touching the sides like is i want to give padding of two okay that's a bit nicer looks a bit cleaner thank you so much yash singh for the lovely donation appreciate that dude all right and now what i'm gonna do is i'm gonna go underneath and go ahead and do h2 and inside of here i'm gonna have either one of two things where i might have a result dot title and as i mentioned before some stuff comes back from an api you know it sometimes you have this issue where it could come back and under one thing or it could come back under another thing so in this case it's either the title or the original name okay so if we do that now you can see now the actual film name comes up so we've got all the different film names so you've got the godfather gabriel's inferno and so forth okay so what i want to do now is have a p tag underneath this now the p tag underneath this is the interesting one this is the one which actually has it has the date it has the a little dot as a thumbs up and then it has the like count okay so the number of likes so how do we get that okay so we're going to go ahead and actually um firstly we need an uh an icon so it's a thumbs up icon from hero icon so we're going to be using that boom we broke 700 likes thank you so much that's incredible guys let's keep going on strong we are almost at the end keep it up this is so much this is so fun guys incredible incredible stuff okay so let's do this so we've got a p tag here and then i'm gonna go ahead and say so at this point what you can do is i'm going to go actually paste this one out because it's quite a hefty one and i'll explain that okay so we're saying either the media type or so it's either result dot media type or result or media type oh sorry and we're checking that exists so in this case you could do um uh so if it exists that's why i'm showing it and then i've got a little space and then i'm saying it's either going to be the release date or the first air date and then we've got a little dot and then i'm gonna have a little space and then i'm gonna give a thumbs up icon thumbs up icon's gonna have a height of five and a margin on the x axis of two then i'm gonna pop in the result view vote count okay so i'm not gonna go ahead and explain every bit there but you can pretty much go ahead and copy that out if you would like to that's how we get this data here and obviously that's not it's not looking great so i'm going to go ahead and show you that how we do that right now okay so the way we do this right now is i'm going to go to my p tag and i'm going to say this is going to be flex so class name and this is going to be a flex item center item center like so flex item center and then there we go okay and now there you can see it's coming to start to come together a bit more awesome okay so what we do next is i'm gonna say okay by default this has an opacity of zero so we don't want to show that by default i only want it when i cover over the group so remember we did this before right we did the group hover okay so in this case the group is actually going to belong to the overall parent div okay so this is actually going to be where the group starts and then down here what i do is i go ahead and say on the group hover so that's how you're wondering how we did this sort of you know grouping that's how we do it so we say group hover and then here what i'll do is i'll say group hover opacity changes to 100. okay so now if i hover over it can you see how it appears only on the hover nice awesome stuff looks great right so at this point what i'm gonna do is i'm gonna say cursor pointer so cursor pointer on the overall parent hit save and then you can see now we've got a cursor pointer looking a lot cleaner there okay guys we're almost at 800 i think i think we can hit 800 by the end of this right let's keep going let's keep going this is this is incredible stuff okay so now we've got this we've got the pictures coming up awesome stuff um i'm gonna change the h2 because it looks kind of ugly right now right i don't know about you guys but i don't like that it doesn't look nice okay so the h2 here i'm gonna say class name equals i'm gonna say empty of one so let's actually space this out a bit so you guys can see what's going on a bit okay so here i'll say margin top of one okay and i want the text to be uh oops i want the text to be um 2xl there we go so text should be 2xl so that's a bigger text text should be white as well right text should be white and then this is where i want to have the sort of you know the interesting part for the scaling effect okay so you see here like how we make it a little bit extra bold okay when it does that so what i'm going to do here is i'm going to say transition or transition or and then i'm going to say duration of 100 seconds okay then i'm going to say ease in and ease out so if you know about easing in time functions and things like that you can actually change it here so if you want to have an ease out you can do ease out you're going to do ease in you can do that i'm going to do ease in and out right and then what i'm gonna say is i'm gonna say when you hover over the entire group i want the font to go bold for this heading now with that in play look at that boom looks really clean okay so this is looking very nice at this point in time right so we're almost almost there we're almost getting there right but obviously at this point it's not fully responsive yet i mean like right now it's just getting huge okay we want it to be really nice and responsive and trust me we're almost there guys it's coming in right it says bear with me we are almost there okay so at this point what we're going to do is we're going to go down to our up to our parent component and we're going to continue here okay so at this point what i'm going to say is we've already done you know the group and so forth i want this to have a padding of two because right now this is touching the sides it doesn't look that great i want a slight little padding and then it immediately looks a bit nicer and then what i'm going to say is let's give it a transition right duration 200 seconds okay ease in right he's in and i'm gonna say transform okay and then here i'm gonna say small so when we hit the small break point so what i actually want is i want this hover effect only to apply on the big screens when i'm on a phone it doesn't make sense to have a hover effect right because think about it when you're on your phone it doesn't make sense to have that hover effect it just doesn't feel right okay so if we go over here now what i can say is i can go ahead and do transform and i'm going to say only on the small screen when we hover should i apply oops a hover a scale of 105 and you can see how we can chain things together there right and also i'm going to say hover the z index should be uh 50 because we want to oh like appear above everything else so at this point perfect it's looking great but only on the big screens do we get a nice horror effect okay this is actually where we want to get to this is looking great at this point okay so code with yogg don't worry dude it's all recorded it will be up online after this is finished this is live right now but we will be uploading this straight away after do not be afraid dude okay so at this point now we just need to go up a level so the thumbnail at this point is done right the thumbnail's done now we need to go ahead and figure out how we can use css grid and flexbox if you're excited for that bit smash the thumbs up button let's do this guys right so what we're going to do here is i'm going to go up to you uh techno says uh hello sony big finding girls my friend could you please guide us the best way to avoid cause and wait so pre-flight requests in a different video i sure will dude okay so at this point we've got the results here now inside the results.js i'm going to go ahead and give it a class name okay so a class name and now this is where we do all of our magic okay so remember it's mobile first which means we do all of our styling based on the mobile view first and then we move up so the first thing we'll do is i'm going to say pixel padding on the x-axis of five right that brings things a bit closer in margin on the y-axis of ten right that'll go ahead and separate it from the top a little bit right now on this small right so by default on mobile it's actually in line so this is in line right now but on the small break point i want to go to a css grid okay so what i do is i say on the small apply a grid okay so now you can see over here on inline and then boom it goes to a grid so you can see that tiny little jitter that's actually changing to a css grid so on the smallest mobile view it's inline then it turns to a css grid okay at this point when we hit the medium okay so when i do md so medium break point i'm gonna change the number of columns so grid columns to two all right so now look at this magic all right if you're ready for this get excited this is pretty cool right so if i go ahead and make it on the medium there you go boom look at that so on the small a mobile in line it's small we go to grid book one column by default and then when we hit the medium break point boom we hit the two column okay that looks really great and obviously right now it's just going bigger and bigger and bigger because we haven't set any more columns after that okay then what i'm going to say is when you hit the extra large screen size okay so i found that was a suitable barrier for me uh thank you so much cody i don't consider myself to be an expert though i always plan on improving that's how i see it all right so on the excel screen grid column three so at this point okay to get bigger and bigger and bigger three hey there we go and look at that right look how nice that is right but what if we have a huge screen right so let's go ahead and go to really massive screens right like say like this was a 4k screen right now this just looks ridiculous right instead what we want to see is something like this imagine if i go to a 4k screen then i want to use the 4k screen accordingly so you see this that's better right but how do we get to that right so what i need to do is i need to change this from css grid to a flexbox all right so how do we do that so right now obviously this is looking pretty damn good right so smash the thumbs up button if you're thinking this is like a nice comment what your favorite part is so far okay thank you so much work he says hi sonny my boss got impressed by my react skills that's incredible dude that's what i'm here for man well done all right this is looking good okay so what i'm gonna do go back here and then we've got the excel grid columns three i'm gonna add in a custom so the 2xl is a bit too it's a bit too soon for me right so i need to add in a 3xl but 3xl isn't supported out of the box so what i'm going to do here is i'm going to go to my tail in config and i'm going to extend and i'm going to show you how you can add in your own breakpoints so where we have our theme you go inside the extend and here you just type in the screens okay now inside the screens you can add in your own breakpoints you can actually call this whatever you want i'm going to say at 3xl i'm going to say it's a 2000 pixel breakpoint okay so this is only going to apply when the 3x 2000 pixels is hit on a breakpoint but this will go ahead and literally upgrade my tailwind now so i now have a 3xl breakpoint simple as that right so at this point what i can do is i can go over here and i can say 3xl okay so i can do 3xl and i can do flex so when we hit the 3xl i'm going to say change it from a grid to a flex right and then by default the flex wrap should be applied and justify center and obviously these won't get applied until flex gets applied so i don't need to have the break points on them okay so if i hit save now watch this guys okay now if i go bigger onto a 4k for example screen look at that it breaks out of css grid and goes into a flexbox which is incredible and if it goes bigger it will wrap by default and it will just work so now you have support for mobile screens right so now you have support for mobile screens tablet screens desktop screens and 4k screens now if that's not cool i don't know what's cool because that to me is damn cool as a developer to have all of that power under the hood retail and css and we just added a custom uh 3xl breakpoint in we have all this beautiful functionality and look at that by the way guys i forgot to show you that look at that i'm so confident i didn't even test that it works look now if i click on the different sort of sections it will change the url so if i click on romance it will change to fetch romance movies which will cause the sort of page to re-render which means that this actually re-fires so if i go to our index.pages like here it will cause this code to re-render because it's actually a technically a new page request and this will go ahead and re-fetch the different and but notice how next just does it so elegantly it's if i click on mystery only refreshes as it needs to okay and what's beautiful about this is it will cache right so in this case notice how these pictures were loaded previously okay which means that it now has that in the cache so if i go to sci-fi and i come back to mystery notice how it would have cached those images so it loads faster for the next time okay so you notice how these are all massive improvements which gets made to the app location okay so this is incredibly powerful stuff right here okay so this is looking pretty good at this point okay so i think on that note what we can do now is i'm going to add in a quick animation so you can notice how in the actual final build we get this nice kind of you know like smooth disappearing effect that comes into play right so it's a very subtle but it's very like a smooth sort of animation that kicks in okay so i'm going to show you how to do this we're going to use something called flip move okay so this is called react flip move so what we're going to do is i'll show you how to do this i won't go into too much detail here with this one but it's a very quick implementation what we do is we open up our terminal we're going to split the terminal over here i'm going to yarn add oops yarn add react flip move and then i'm going to import it while it's doing it so we can prepare ourselves now there's two steps that we need to do for this okay i just need to simply go ahead and change flip move flip move and somebody just said uh tefera says um how can you learn react next and tailwind in the fastest way so my honest approach is one join the amazing community because uh you're gonna be surrounded by mentors other people pushing themselves and two you're also going to be um sort of i would say learn through practical application i find that learning through practical absolutely you know doing things rather than just kind of reading the theory or all this stuff that you're never going to use actually do stuff mess around with stuff build websites build cool stuff be happy with it and then it will stick okay will the images load faster if you lower this size yes but um remember the next js actually does a really genius thing it changes the uh the uh the file format to uh webp i think it was the new basically it's a new image standard i think it's webp f1p yeah but it's basically it's extremely small and basically it will only deliver the size file for the device you're on out of the box it does that which is incredible okay so it will deliver a higher res image for the higher sort of resolutions and a lower res image for the lower resolutions okay so here i'm going to go to my div and change this for flip move okay that's the first step to get this animation in um let's go ahead and just all right and then i'm going to go to the thumbnail over here and then i'm going to go here thumbnail and then what i'm going to do is i'm simply need to just do a a tiny change here right so i need to make this an es6 function so i'm going to say const thumbnail and change this to an arrow like so and then what i'm going to do is i'm going to import something called forward ref and for this animation library to work all we need to do is attach a forward ref into this component so the way we do that is we say forward ref add a parentheses go right to the ending block so let's go ahead and come on j hide that and add a parenthesis over here okay and then what we do is we come to our result we do a comma and we now have a reference this is used by the reference in the parent component if that doesn't make sense just google what forward ref is have a look into it and you can definitely check it out but in this case i'm not going to dive too far into it and all we need to do to make the animation work is type in ref okay and uh what you need to make this all work is your result that you're rendering has to have a valid key otherwise this won't work okay d ma long says is tailwind the next big thing so i'm going to answer your question with a funny pun right is tailwind the next big thing next js in my opinion is one of the absolute big things coming up tailwind is an absolutely incredibly powerful tool so our utility sort of you know framework for css uh so in my opinion yes absolutely okay um okay so this in this case let's hit save and now if we go back to our app it says component is not a function let's go ahead and check this out again there we go refresh and now if i click on action right there you go you get a nice little change right there okay now some of you are wondering you know like it may seem slow or something like that that's because i'm live streaming and hence the connection is going to be you know damaged and things like that so this is going to be a lot faster if you once we host it and things like that so if you check out sunnysanga.com it's pretty fast okay so um and obviously you can always optimize further but this is pretty good right now so what we're gonna do now is we have our fully working hulu clone we've got our animations our lovely little kind of you know responsive design everything is working the way we expect it to if i go ahead and click on trending it goes ahead and delivers the movies accordingly and so forth okay so in this case uh right now it's just it's being a bit slow because we are live okay but um everything at this point is built so the next step naturally is to deploy okay so what i'm going to do now is show you how to go ahead and deploy your next js application to verso and then what we're going to do is we're going to connect that to hostinger so you can have your own beautiful custom domain name if you're excited about the deployment step let me know right now let's deploy this app guys drop it in the comment section right now if you want to deploy the app with me right now let's do this guys smash that thumbs up and let's do this guys okay so now what we're gonna do is hit command j and all we need to do is push this to a github repo that's the first step okay so let's go ahead and pop open our github repo so if we open up github right here all you need to do is i'm going to go ahead and remind later let me just hide that right now cool let's do that so i'm going to go ahead and add in a new repo over here and here i'm just going to create a let's just say hulu youtube clone there we go oops julie youtube clown i'm gonna make this private for now click create repo okay this is the first step right now okay so what i'm gonna do is i'm gonna click on grab this line right here copy it and i'm not gonna go too far into how you use github at this point but what you need to consider yourself with right here is we just go ahead and do git remote add origin like so and then what we're going to do is we're going to say git add all and you'll see that now all of our changes should have now become staged which means they're ready to push okay then what we do is we say git commit dash m for message and here i'm just gonna say initial commit and we've committed all of our changes okay the next thing i want to do is to get push okay and then i'm going to copy this and just grab that and paste it and this will push my code to the github that i just created okay so i have got a password here so i'm going to go ahead and pop that in right there and boom okay really nice so now what we're gonna do is if i go ahead and refresh my github we have the code on github okay that's the first step you need to do to go ahead and get your uh application deployed all right so mommy says great job clean build i am convinced not to use tailwind nice stuff thank you so much great mentor appreciate you did so now what we do is we go over to versal okay so versatile.com four slash dashboard and what you want to go ahead and do is create a simple account on versa it takes it's very quick to go ahead and do and uh we're going to go ahead and somebody says will you do a next clone with firebase i will definitely cover everything dude i'm working very hard to make sure i cover everything um we're going to click on new project okay so click on new project here and then we're going to go ahead and hit on the youtube hulu youtube clone okay so i've just committed this you can see right here so you just need to go ahead and connect your github repo it's very easy to do here you click on import now as you can see we click on our personal account so this is very simple to do and then we say project name and it will automatically detect if it's next js and then this is the interesting part the environment variable so remember guys we had an environment of environment variable inside of this project i will show it now as i don't really you know it's fine the end of the build so i'm going to go to my um [Music] environment.local okay and without this key this will not work okay this will not work because it will break right it won't have the variable available in the production environment so what we do here is we grab the api key okay so we go here and the environment they must be the same so we can say api key and this will be encrypted so it's safe to have and then what you can do is obviously you don't share this key typically okay so i would copy this key and i would simply go here and do this and i would click add okay now you can see i've added in my environment variable okay now i click on deploy simple as that okay and now what this will do is it will deploy my main branch from github which was the initial commit which i which i just committed previously it will go ahead build it out okay we'll go ahead and what's up dixon good to see you we'll go ahead and build it out install all the yarn dependencies that are required and then it will go ahead and deploy this to a versal domain okay so this will pretty much go ahead create the optimized production build do everything that we need to do to get it working here you can see the jit engine is running so it's pretty much doing all the build commands that we would have done and then it goes ahead and pushes it onto a universal domain you actually get given a versatile domain for free uh the box and it will work for you okay so build completed and then hey look at that guys congratulations your project has been successfully deployed right so this is working nice smash the thumbs up button if you're excited for this what i'm gonna do is i'm gonna click visit okay let's go ahead and see our actual application in action okay so boom there we go i'm gonna go ahead and drop that in the chat right now and that is actually the application that we just built right so look at that that's literally the application that we built fully mobile responsive works on small screens works on huge screens and everything in between okay so that's how we can pretty much get this working um and yeah the next step is we're gonna host it on hostinger okay so if i go to my dashboard over here it's very easy to go ahead and actually host this on your own custom domain all you need to do is here you can see you get the domains for yourself we click on settings over here we go to domains and then basically you need to purchase a domain now how do you get your own custom domain right so your boy went and hooked you up with a seven percent discount so first link in the description is to buy your custom domain with that nice little seven percent off your annual plan at hostinger and i'm going to show you how simple it is to go ahead and do this so what you need to do is go over to hostinger.com sign in to your portal right or go ahead and literally get that um offer that i have in the description so i'm going to quickly log in right now and i will show you guys the hosting up panel which is extremely easy to go ahead and get started with okay so give me one second while i get into my panel right here right everything takes everything takes a little bit longer when i'm live okay so i'm gonna go ahead and quickly log in right now and we should be up and running in just a second okay so i'm not seem to be getting in let me try this one okay let me go ahead and try a different account if you guys want access to the proper fun playlist by the way guys feel free sign up to the newsletter you'll get access to it you know what to do right we'll send you over the playlist and you can listen to all these tunes while you're working on your hulu 2.0 clone okay so perfect stuff i am inside right now um i'm actually in a different account right now um let me go ahead and get into the correct account i've got different accounts with hosting okay but right now guys let me know in the comments where you're watching from and what your favorite part about the today's build was while i get this up and running let me know right now in the comment section and uh and yeah let me know what your favorite part about today's today's build it was right allu says awesome build sunny going to code later but learned a lot just watching live keep it up thank you so much dude that really really appreciate that beneath says um let's see what vineet says uh oh he says awesome thank you so much by the way hello uh jiraris a great job please how did how does data flow between components next just like reducing when using redux um so the only difference you're gonna have to account for is when it renders on the server in which case you need to do a step called hydration to get the store hydrated in the same fashion i'm not going to get into that now but it's just that's what you would need to look into okay manly says react or view does it matter yes react all the way okay so guys once you're over into your hosting h panel what you need to do is come over to this screen okay so you go over to this screen right here and you will have your domains you just need to go ahead grab your domain with that first link in the description i want to see remember guys first 10 people to comment their custom domain name i will personally review your website okay so i'm not joking i'll personally review your website you're going to click on the hosting over here okay and what i'm actually gonna do is i'm actually gonna cut my build because i think it's slowing down my uh my app my computer right now so i'm gonna go over here i'm gonna cut my build right now okay so i'm gonna go ahead and close my current size because it's slowing down a little bit no okay and then okay we can close that now we're actually done with the vs code okay so the next step that we want to do is you want to go over to your hosting and the hosting will make it extremely easy guys you simply click on manage your hosting or you can click on your domain over here and then once you're in here you have access to your entire panel okay so what i'm actually going to do is not mess around with any of this right now i'm going to go to my domain inside of hostinger over here click down and i've got sunnysanga.com i click manage and here you have extreme simplicity okay uh favorite part beginning the middle but at the end okay nice stuff dude so here you just simply click on dns name servers and this will give you all of your dns records that you have you know that will basically allow you to host your custom sites okay so all you need to do now is go over to versal type in sunnysanga.com now i already have it hosted so i'm going to do sunnysangoplustest.com and click add okay once you've done this i'm going to do oops so you're saying a test i'm going to do www.sciencex.com there we go and then i'm going to go ahead and just do a simple let's go ahead and do this one right now what you need to do here simply add the records to your dns domain name okay i'm already doing this one let's just do test two there we go and click add and now what we do is once this finally loads we can go ahead and there we go it will give you two different records okay so this is the one you should be concerned with a record and this value you simply copy this value go to your hostinger panel simply go ahead and pop it here like so and click add record now within okay now within a very short amount of time this whole thing will go ahead and host your versa application on your hosting a custom domain name okay so it's as simple as that to go ahead and get started now guys i hope you have enjoyed today's build it's been incredible it's been fun sunday sanga.com you can go ahead and play with hulu 2.0 right now as always guys it's been incredible teaching today and i hope you guys have found insane value we built the hulu 2.0 clone so it was so much fun today guys to go ahead and get this built out it's been incredible and uh if anyone's had any issues with the stream just remember all you need to go ahead and do wait a few moments and we will pretty much go ahead and get the entire stream up online and uh yeah but a lot of fun today and as i mentioned guys remember first 10 people to use that link in the description will get their websites personally reviewed by your boy paparat okay so i will see you guys in the next build next pun intended and uh yeah guys hope you enjoyed this if you're watching again smash the like button and i will see you guys in the next one peace

Channel: Sonny Sangha

Views: 139,134

Rating: 4.9264293 out of 5

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

Id: MqDlsjc8GLo

Length: 131min 2sec (7862 seconds)

Published: Tue Apr 20 2021