Build and Deploy a Fullstack Netflix Clone: Tailwind Introduction & Server Side Rendering (Part 1)

hey everyone welcome back to the channel um i know it's been a long time you all have been expecting videos from me it's it's been two months now uh since i've done the last linkedin build um and before that three months uh the twitter one and everyone's been expecting videos and i know i know i apologize for the delay and i tried my best to finish this as soon as possible but you know i always try to make it up for you know the delays and stuff and here this is this is one of the examples what we have done today so i present you all the ultimate netflix uh clone or redesign whatever you want to think of but the ultimate ultimate it's a sas application so let me show you all the features of this whole netflix right now so we have scrollable containers here and this is using a api a rest api on the back by the way uh it's using the tmdb the latest rest api the version 3 of tmdb api and you can see we have all these movies and all these scrollbar containers and when i click on any of this i cannot uh play by the way but this is actually functional it's with actually sound so this is deployed and i provided the link in the description so you can see it's a deployed bill so i'll uh you guys can go and check it out you know you all can go and check it out there so this is actually with sound it's actually playing with sound and this is actually the trailer playing right and this is the model this is a material ui model we're using and if i click here it's gonna actually add this to our list um and if i actually click here this is actually dynamic as you all can see so if i actually add this to my list if i close this and i go you can see this movie has been added or tv series has been added to my list here and if i try to do with this one let's say this is spider-man uh let me show you all my favorite my favorite is actually the one doctor strange it's gonna come in may um so if i add doctor strange let's say anything it has been added to my list if i go again you can see it's right there in my list and not this is not just this is just the beginning yes so we have a bad the changing header basically so when we scroll the background's changing for the header um and every time i refresh this and there are so many features um we are going to be building in this one there are a lot of features so every time so right now i actually picked the same random then the movie but it should actually change so oh twice actually picked the same yeah it changed there as you can see so every time i refresh the page uh the movie actually actually changes it blends in so right now it's again changed right now as you all can see now i can actually i'm logged into the application so i can actually and has complete authentication with firebase you know so i can click on my profile and this is actually my account page as you can see we can um we are actually on a different page right now here uh we have done a dark mode for netflix because as opposed to netflix has a light mode for their account so this is the actual netflix so if i actually go this is a light mode but we have actually implemented a dark mode here and we are on a premium plan right now so if i actually sign out and sign in with a new account let's just say um so and this has validation by the way so there's just a lot of stuff in in this in this bill so if i try to log in with a new account let's say this one and i keep the password as iron man or actually yeah and if i try to sign in you can see it will give me a prompt here from firebase that user not form because i'm not a user currently so i'll have to sign up so i'll click on sign up and as soon as i do that i'm actually signed up right now and you can see i have an account but it's actually not showing me the actual application because i'm not subscribed yet to the to the application right so it's actually showing me three plans and this is all dynamic by the way if i refresh this you all can see this is server-side rendered these plans so these are dynamic from the um actually from the database from firebase so these are all dynamic actually so we have three plans inside of our firebase instead of our stripe um you know uh their basic standard and premium just like the netflix model uh these are the prices and we have created this beautiful responsive ui as you all can see this is a beautiful responsive ui actually changes just like netflix works exactly like that so if i select the standard plan and if i click on subscribe there's a beautiful loading which happens to show us that it's actually loading the thing and this is where the stripe checkout comes in so this is the stripe checkout guys and now i can actually enter and this is a testing mode so i can enter 4 2 which is the the card for testing on stripe um so if i actually enter my card and i can just uh say iron man because that was my email and this is just my address and i can use google pay as well and these are just the features we can have some features in stripe as well so if i actually subscribe and this is a stripe authentication so this is actually a very secure strike payment portal so we haven't implemented this by ourselves but uh this stripe is actually giving us now i'm subscribed and as soon as i click the subscribe button i'm actually redirected back to the app and i can see all the movies but i'm a different user so of course i don't see the my list and stuff now if i go to my dashboard this is my account it's actually going to show us my member date and i just subscribe right now so it's 13 april and it's actually showing me the gmt time um you know and here's my email and here's my next billing date which is of course after one month right so it's actually 13 may and i have a plan for showing me standard plan now if i click on cancel membership this works too so this is actually going to take us to a customer portal um using stripe again and again it's loading right now as soon as this loads up here we go this is a customer portal we'll see now i can actually cancel my plan and update my plan so we have three plans so we i can update to two other plans or if i actually try to cancel this it's actually gonna cancel the plan but at the end of the uh at the end of the billing period so i'll still have access to the application so if i go back now right now it says your membership will end on friday and this is how netflix does it guys this is how netflix works by the way netflix actually tells you if you cancel the membership they actually tell you the membership is going to end on 13th may before it was telling me it was my next billing date so now if i go back to the app i still have access because i still have time up till 30 up to 13 may and you can see the movies change again i can click on the modal these are all functional showing me the trailers um and yeah this this is this is the whole functionality i can sign out so if i actually sign out it rewrecks me back to login page and if i actually go back try to go back i cannot access it anymore and this is how this is what we're gonna be playing i'm really excited this is one of the sickest build out there i'm and i'm sure of it like uh there's just so much functionality so much information and the text tech for this we're going to be using next year's uh tmncss we're going to be using firebase version nine um we're also going to be using typescript so everyone was everyone wanted me to teach typescript you know to use typescript and one of the builds and i'm going to be using typescript and there's just a lot of stuff there's a material ui um there's react hook forms or validations i try to sign in you can see there's this is validation um so yeah this just so much stuff in this business it's gonna be sick so let's get started with this actually um i'm so i'm just gonna quickly log in to my deployed application and today so it's gonna be a three three days build um because of because of the complexity and the number of hours you're going to be putting into this bill i think it's really important that everyone digests the information we learn every single day so i'm hoping aiming for three days actually um so it's going to be starting today today we are going to be building this whole ui our home page ui uh very slick ui with all these scrollable containers and every single thing so we're going to building this whole scrollable this thing um the home ui and tomorrow we can do the authentication or stripe maybe or maybe day after tomorrow we'll see how it goes so let's get started the first thing we're going to be doing is we're going to be going to our tailwind css.com the beautiful ui framework we're going to be using it's a utility uh so if you're new to development css if anyone's new to table cs is very basically a utility first css framework um and what it does it actually gives you these really nice utility classes which you can use to build components like this um you know beautiful components like this you can see and it is really really powerful it's really insane because you can build really good ui components in just a matter of minutes you know uh without having to spend so much time in the traditional css way so and if you feel like you want to use traditionally just go ahead do that i'm going to be using taven and tehran is extremely extremely really really nice and it helps you build responsive ui really easily so let's get started i'm going to click on get started i'm going to click on framework guides and next thing i'm going to do is i'm going to click on next years because we're going to be using nexus and if anyone's actually new to nexus nexus is is the same as react guys nexus is not something else nexus is react but it's actually built on top of react so what happens it actually gives us a really good um you know developer features like image optimization seo seo improvement and stuff and actually gives us typescript support there's the best features of nexus are server side rendering isr which is incremental static regeneration and all these really really good features and we're going to be using server-side rendering which is super important in applications nowadays especially in web applications it has fast refresh and has a lot of good features you guys can look up to it here on their official website so we're going to be using nexus is built on top of react and we're going to be using tavern for the ui so the first thing i'm going to do is i'm going to actually click on this example link here and i'm actually going to copy this and what this is going to do and next thing i'm going to do is i'm actually going to open my terminal um so this is my terminal um i don't know if you all can see it i'm going to make it bigger so this is my terminal now i'm going to actually paste uh this uh this command here i'm just going to change the name of the project so actually not here i'm actually going to first of all actually see i have to go inside of my desktop actually inside my documents sorry um and i have this folder called bills so i have to go inside of my bills and here is where i'm going to paste this command again i'm just going to remove the weight table and i'm going to just change this this is the name of my folder so i'm just going to change this to netflix clone youtube right i'm just going to press enter and what this is going to do by the uh basically is that it's going to bootstrap our application with next year's typescript and k1css so we don't have to uh go to the configure steps by ourselves um which basically means we don't have to go through these steps so if i go back to tayman again so we don't have to go through these steps by ourselves all these steps this is manual configuration and using the example allows us to configure and it's going to give us the latest versions of next year's statement and everything so that's like really really clean and here we go it's actually installed really fast now all we have to do is we have to cd into our directory so i'm just going to cd into my directory cd into this i'm just going to type code dot to open this directly inside of my visual studio code and if you cannot do code just open it manually um your your folder which we have initialized um and if you're not getting this command all you have to do is shell uh type command shift p and type shell so you'll get this install code come on and you all you have to do is press enter here and it's going to install the command i used on the terminal so this is our bootstrap application okay this is our uh and by bootstrap i don't mean the ui bootstrap uh this is the initialized application um so we get our index page so for anyone who's new to nexus i always like to give a good introduction before starting to work around work on next year's entailment so what basically nexus does it has a pages directory and it has inbuilt file system routing and you can read more about it again on the next year's documentation which i showed you so what what i'm basically mean by file system routing it has so this index.tsx which we see which is by the way typescript so it's tsx which means typescript um this is actually our home page and anything which is inside of our pages directory actually becomes a page inside of nexus so if i actually open my terminal and if i actually start my server and i'm just going to check something out that if i have package so i have package. lock so i have to use npm this is how i basically determine whether to use npm or yarn if you want to use yarn you can use yarn as well so i'm going to say npm run dev right and this is gonna basically run the server and i'm actually gonna cut the the server somewhere else because i have two servers running so on my old application i'm actually gonna quickly cut the server so i can run um so i can basically run local 3000 instead of 2001 so i'm gonna run it again and now it's saying started server on local 3000 so i'm just going to quickly go to localhost 3000. here we go this is our application in the beginning and saying welcome to nexus get started by editing and this is our home page by the way so if i close this you can see it is our home page now what i mean by file system routing is for example if i create another file inside of my pages and if i say login right login.tsx okay and i use these snippets so if you want to install these snippets just go to extension and these are called es7 es6 um es7 reactory these these ones es7 plus react redux react native snippets so if you install this you can use these snippets like just by saying rfce and it's going to give you the whole functional component code and i'm just going to quickly change login to capital l okay i'm going to remove react because we don't need import react from right anymore so this is the login and what i mean by the system-based routing is that if i try to navigate to slash login here we see we actually see a page called login because we actually created this page so this is what happened inside of nexus but if i try to go to a page called sign up it's actually not going to work it's going to give us a 404 default page and nexus actually does this by default so if any page is not found it actually give you 404 which is not found right so and this is really cool this is really good feature about nasa because we don't have to use a react router when as as opposed to when we're developing and react so this is a really good feature of nexus so now of course uh we would we'll have a login uh page if i go to my finished um this is our finished app and if i actually sign out you can see we do have a login this is our login page but right now we're we're going to be focusing on building the beautiful ui the home page which we have so i'm just going to quickly log in um to my actual application there we go today we're going to be building this home page um you know so we complete a complex portion of the ui um so right now i'm just gonna quickly go back to my local host uh 3000 and this is our nexus app now let's start uh by creating this whole now the first thing i always like to do is i always remove this because of course we're not gonna be needing this a bunch of stuff here and i'm just gonna type let's um build netflix or something and what i'd like to do is i'll actually uh make this side by side so it'll be easier for everyone to see so we have let's build netflix here um now let's get started with our index page so the things we are going to be having on our index page actually we're going to be having a main tag right and i always like to use semantic html as opposed to just using divs and devs because i've seen a lot of videos people just use devs and stuff and it's okay of course you can use this but using semantic html actually improves your seo uh which is of course the seo performance and that is why the main reason using nexus is because of that reason and nexus actually gives us these really powerful head components uh all these image optimization image components head components and what they actually do is if i change this head component to um let's say home and if i change this to netflix right if i save this if i hover over my page here you can see this has changed so this is why nexus is really really nice and actually gives us for each individual page um so the structure we're going to be having is we're going to be having a main tag and inside of our main uh we're gonna be having a banner uh and this is gonna be a component and then we're gonna have a section okay and this section is gonna contain a bunch of rows and you can just say uh a different bunch of rows i'm just to say row row like this it's going to contain some bunch of rows um and then outside of our section outside of our main tag actually we're going to have another component which is going to be for our model because when we actually click on any of these and this is responsive by the way i forgot to show you guys show you all the responsiveness so this is uh completely responsive on phone screen sizes as you can see so i've actually tried to open something right now we can see you can actually uh you know this is the model right so this is what i'm talking about the modal component so i'm just gonna close this now let's actually make this side by side again now let's actually work on our header and we're gonna have header outside of our main of course so here is where we're gonna have our header component so we're gonna have a header component a banner component a row component and a model um and this is gonna be the architecture of our application so let's start with uh the header first so what i'm going to do is i'm actually going to create a new folder and everything we're going to do it will be in typescript by the way so i'm going to be teaching you all interfaces types and that that is the main reason i try to uh divide this into three different days so we can learn a lot of stuff but on a slower pace so we understand what we are doing so we have a components directory and inside of our components we're going to create i'm going to create a new file called header and i'm going to say tsx and in my previous video you have seen me using js but now we're using typescript so i'm going to use tsx which is our typescript right and the reason using this um using this template which you're using right now is because it actually configured typescript automatically for us so we don't have to uh com configure typescript uh because when you're using uh when you're doing manually you have to actually configure typescript too so actually configure typescript for us as you can see we have a tsconfig.json uh with just a set of compiler options and what it does is instructs the typescript compiler how to compile the dot ts files right um and we have some prettier and post css config so let's start by building the header component so the header is going to look like this as you can see as we scroll just scroll actually turns the background actually turns black and we have this material ui i don't know if i showed you all this but we have this material ui menu uh with a really nice animation looks very similar to netflix so what we're going to do is rfce i'm going to remove the react things we're not going to be needing react and the first thing i'll actually want to see header here so what i'll do is i'll remove let's build with netflix and instead of our comment i'm actually going to render out our header and this is auto import by the way um so it actually gives it auto import and actually auto imported our header and if you're not getting these auto import sessions the way you get it is by pressing command space uh control space sorry at the end of your compton name so if you're not getting this just import manually it's fine it's completely fine so i'm gonna save this and as you can see we have our header here and the reason it's actually in the center right now is because of this uh styling at the top here which is done with tailwind right and if you want to uh if you're using taylor for the first time i suggest you all install something called tailwind uh intellisense um so it's actually called tailwind tayman css intellisense this is the extension i want you all to install this if you're using them for the first time because it's going to give us auto complete suggestions and stuff and it's actually really really easy even if you're learning or using them for the first time it's completely beginner friendly this build is completely picner-friendly it's for everyone even if you're a beginner it's really easy to learn them so we have our header and let's start building our header component um so inside of our header component what we're going to be having is first i'm going to change our outer div to actually semantic header and this is again my personal preference i like to use um semantic html now i'm going to have a div for the left side and another div actually for my right side so i'm gonna have two divs one for the left and one for the right the div on the left side is gonna contain an image and it is of course going to be our logo image and i'm quickly gonna get that image from my components actually so what i'm going to do is i'm going to make this bigger and i'm going to go to my github and i suggest you all do the same same thing so what you can do is go to my repo which is linked in the description just open the conference folder and inside of header we can get this image so i'm going to quickly copy this image now i'm going to go back here and this is my image and i have a i have a set width and height and a class name of cursor pointer and object contain the reason i'm using object container is because to maintain the aspect ratio of the image you know the height and the width and the reason i'm actually not using the nexus image component if you want you can use it but since this is an svg image actually you can see this is an svg image it's a very high resolution image and nexus you have to do something uh called dangerously allow svg elements or something uh to use svg image and i didn't want it to get into that sort of stuff right now uh but if you want you can use the nexus image component if if you all want to so we have the the logo here and with the logo where we're going to have some ul some links right uh and these links are gonna be i'm gonna say uh they're gonna be like five links i'm just gonna say la la multiply by five and this is by the way amit so if you don't know about what i just did now is i'm using amaterite so and what am it actually does it's it's by default enabled in vs code and what actually allows you to use quick shortcuts like this for example if i have a ul i can do something like ul greater than li multiply by 5 which means it's gonna give me la five allies inside of my ul so if i press enter this is a quick way of doing development you know i'm just gonna type home here and there's gonna be tv shows and there's going to be movies and then there's going to be new and popular so i'm just going to quickly type them out new and popular and there's going to be last one is actually going to be my list if i save this we have our links here so we have our logo we have our links the next thing uh i'm gonna do is actually um so i have this dev right and let's actually style this so we can see um some styling here so for the whole container there i'm actually going to say flex and again if you're new to t1 css uh by just installing that extension which i told or what you can do is when i'm typing these styles you can hover over them and see what css property is actually applying uh what this is this actually means and it's it's equivalent of saying display flex and this is just a utility class so if i say flex is gonna come side by side right and now i can say item center and i want i want to give some spacing between the two so i'm just going to say space x of 2 and i'm going to use a break point and that's a medium break point and a medium break point means um it's uh it's it's from and and a note here for everyone is that responsive when we're working with responsiveness in table using term and css tavern css is actually mobile responsive first which means that right now we're actually building for phone screen sizes from the smaller screen sizes to the bigger screen sizes so instead of using max fit media queries we actually use the min with media queries which is for mobile first approach right because everything is we're building right now is for phone first and then we're gonna move to bigger screen sizes so all these stylings i'm doing these are all for phone right now so right now i want to change some styling when it actually reaches the md break point uh which is of course the the medium break point inside which is pixels and i want the spacing to increase by 10. i want this page to become 10 and if i actually hover over this actually shows us the media query so the media query is actually a min with media query and saying as it reaches 768 pixels and i can show show you all this as soon as i do this so as soon as i reach 768 pixels it gives more spacing as you can see here by default it's just spacex f2 and this is a really good uh good utility class inside and what it does it works like the gap basically you know and gives margin between the children rather than giving the margin after this child too because we don't want to do that right so only gives margin between the children now i'm going to style my ul and i'm going to say uh by default i want this ul to be hidden because think about it um on our phone screen right this is our phone screen we don't see any of the links all the links are inside of our menu and this is actually our separate component this is a separate component which you're going to be creating right so what we can do here is you can say our u links in our ul can be hidden right which is the unordered list right and a spacex of four um and i only wanted to of course i only want my ul uh to show when it's on when it's above 768 pixels 768 or more than that right um and right now because i'm less than 768 it's actually hiding the ul as soon as i go bigger you can see we can see the ul pack and i have some spacing between them and now i'm going to individually style each of my allies and this is why this is the reason why i actually like to even so much is because um interior man we can and so many people have these questions when they're beginning uh to use stalemate and stuff that we have a lot of unnecessary styles because if i want to style each of my allies i have to do the same styling over and over again and this is where class names custom class names come in right so we're going to write our custom class name here which is going to be header length this is going to be our first custom class name and what i'm going to do is i'm going to select each of my allies and just press command d so what i just did here is basically i just press command d to select each of these allies and then i actually pasted this all together at the same time just to be quicker and header link is not a utility class inside table it is our custom class name which we created so we don't have to repeat ourselves uh by giving the same styles now what i'm going to do is i'm actually going to go to my global css right and how i navigate quickly is by just pressing command p and typing the file name this is how i navigate and you can just navigate using the sidebar too so i'm going to go to global css i'm actually going to see the styling i've actually given in my finished build in global css so we have these base components and utilities right now i'm going to access the layer um and i'm actually going to access the the component layer okay so we have three layers we have components utilities and base but i'm going to access the component layer and what i'm going to do is the custom class name which i just just just typed is header link right i'm going to give some custom uh some some table and styles here right by using the add apply tag and when you use the add apply tag you can actually use tavern css here if you don't want to use you can use normal css 2 here so if i just type color red actually i can use normal css here so you can see this works too right because this is just our css file um but make sure this is actually linked to your app tsx right it's actually linked here it should be linked at top here so but i don't want to use normal css because of course what's the point of using tavern otherwise so i'm just going to use my add apply tag and i'm just going to give some styling here i'm going to say cursor pointer text of small font of light i'm going to say and i'll keep changing so you all can see what's happening fun of light and i'm also going to say text so i want some so now the this uh square brackets actually so taiwan has some custom palettes of their own when it comes to the coloring system inside of table but i want to use like custom color let's say i want to use a custom hex value now how can i actually do that and to do that in table and using tavern is actually really easy all you have to do is put square brackets and you can use this for anything by the way not just for colors and you can put any custom hex value here so i'm going to say e5 e5 e5 which is the a whitish creamy whitish color so i'm going to give that color and i'm going to apply a transition and if i hover over this you can see um actually applies this custom color right inside of tayman this is really good about terminal 2 so you can use any custom values if you want to i tend not to use a lot of custom values because there's no point of using the table and you should use as much as tavern utility classes but only if needed you know so that's just my approach so i'm just gonna say duration and the duration is actually gonna be um it's gonna be four now i don't have force at 400 milliseconds so i can give a custom value here um for many seconds like this you know and i can also say when i actually hover and this is a this this means when i actually hover over the header link i want my text to be changed to a different color which is going to be b3 b3 b3 i'm just going to save it so right now of course the the reason they're actually very light is because we don't have a proper background so since we are in the global css let's actually do that too what i'm going to do is now i'm going to access my base layer instead of components and this is really good convention because um how i like to kind of think of it is in the base layer all the things which come as your html your body uh your heading tags uh your h1 h4s all those things these are your base you know the base html uh html tags you know whereas in the components i like to think of them as custom um class names you know which you have given inside of your um application you know and header link is like a custom class name so this is how i like to kind of think about it so inside of our base layer i'm going to target my whole body actually and this is not a class name of course it's just the html tag body and i'm going to use the add apply tag and you can i mean you can do the same exact thing in components too this is just the convention of using the base layer for the body this is just a good convention and i'm actually going to say apply background i'm going to have a custom color here of one four one four uh one four and as soon as i save that boom here we go right as soon as i save their whole body's background change and we can see this beautiful uh links here next thing i'm actually going to do is i'm going to say text of white and i'm also going to say so yeah that's all i'm actually going to say the text of white for now and one more thing we're going to be having is a custom scroll bar so if you guys can see a custom scroller we have created this red custom scroll bar i'm gonna show you all um how to actually create this custom scroll bar you know which is really uh really nice too so we have this now let's actually go back to our header and continue building our header component so let's see the next thing we're going to have is we're going to have a right section right we're going to have a right so we have a left and we have a right section now for our right section we will have some uh some bunch of icons right and these icons uh we're gonna be using two icon packs actually um and we're gonna be using react icons and we're also gonna be using hero icons um and if you choose some any other icon library you can just choose to use that you know but i'm going to make this bigger actually go to hero icons this is the icons we're going to be using so the way we uh install this is just go to the documentation actually shows us here is the npm this is how we actually install and the hero icons are really good because they are actually designed by 10 css makers themselves so they're actually really really really nice i love hero icons so we can just copy the command here go back to our application open the terminal by pressing command j right and i like to split my terminals instead of closing the previous one i'll just paste my link here and install this and we have installed hero icons and since we are here let's just install react icons too and react icons is another really really really really good library and mostly uh react icons is used in production environments like when you're working like as i was working in my company i used react icons so used in production environments a lot um and this is how we install react icons npm install so again i'm just going to press the link here and you can just find react icons is a mixture of different uh several different icon packs you know whereas hero icons on the other hand is a bit minimalistic it has a less bunch of icons not a lot of icons here so what we are going to do is we're going to have a bunch of icons right on the right section here so i'm going to close my terminal now and the first icon you're going to have is a search icon so i'm just going to say search icon right um and it's actually not auto importing so i'm just gonna manually import this so i'm just gonna say import search icon from i'm just gonna say hero icons and it's gonna be the outline one actually it's gonna be a solid variant uh it's gonna be a solid variant so i'm just gonna say search icon let's go back and here we see we see a really huge icon right now but i'm gonna give a class name and the reason hero icons are really good is because we can give table and class names right uh inside of here you know you can actually style them using them and css so what i can do here um i can say i want this icon to be hidden on a smaller screen because netflix doesn't show the search um the search functionality on a smaller screen um until it reaches the uh you know a small break point which is actually the 640 pixels so i'm just gonna keep it hidden and of course right now it's hidden so let's actually keep it like this i guess um so you should keep it like this okay now the next thing i'm gonna do is i'm gonna say um i'm going to say 8 6 and width 6 uh not g86 sorry and 86 and width 6 so to make the height and width consistent for the icon and again if you want to know what these values are is i never memorize these values by the way it's not that i've memorized that eight six is running for it's just how i uh i just see the changes happening and this is how i figure out stuff and you can do the same you know this is how i pretty much work through the ui so i have a search icon here and the next thing i'm going to have a p tag right and the p tag is just going to say kids uh you know and i'm just going to save this and the p tag is going to have a class name of hidden of course this is going to be hidden as well but this is going to be shown on a larger breakpoint which is 1024 but it's going to be hidden by default on phone uh the next icon we're going to have is a bell icon so i'm just going to say bell icon and i can already see the auto import and i've imported it from the package and again it's really uh really huge so all i'm going to do is i'm just going to say i'm just going to remove hidden and i'm just going to keep height and width of 6. the next thing we're going to be having here is we're going to have a so if i go to my finish but we have this so we have this image here and when i click actually takes us to our account page right so we're going to have a nexus link component uh which is again built in in when you're using nexus right so what i can do is i can do link and you can see it gives me an auto import suggestion from next slash link so i'm just going to press enter here and what you can do is you can actually have inside of your link comments and we are using typescript right so typescript prevents us from getting into errors if you weren't using typescript here it wouldn't show us this error and because we are actually using typescript actually shows us this quickly here and what this means if i hover over this it says propertyhref is missing it means that href is actually a required property uh it's a required attribute um when you're using the link component so we have to write href here and if i actually do that the error is gone so there's no so if any property is required it actually gives gives us the error and we're going to be going to slash account so i'm just going to say slash account and we don't have that page yet but uh we're going to have this slash account and we're going to have a an image source here so i'm just going to quickly try to copy this image source so if i try to go to my image here so this is going to be my image um again just going to make this like this and let's go back to the belt and if i actually paste this instead of this image so and again uh what i just did is i just set cursor pointer and made it rounded so we can see we have a we have the image here and this is actually a link so if i actually click here it's actually going to take us taking it take us to the account um account page which doesn't exist uh right now so we have the link now the next thing uh we're gonna be doing is we have the source we have the class name um and i'm gonna style the outer container the outer outer div right now and the way we're gonna style this is we're gonna say flex right item center uh so we're gonna say flex item center space between of four so as soon as i do that you see how quick uh we can style our components using therman and i'm going to say text so small because there's going to be a text there as well of kids which is not showing because we are not on a larger screen right now so as soon as i go larger you can see it gets here so text of small and a font again of light i'm going to be using font of light and font of light is just the font weight basically this is just the font weight of 300 so that's all i'm going to be doing so that's it for for the starting portion i think we are quite complete with our header actually um we just need to work around some responsiveness and the outermost header style we actually didn't forgot to actually do that but uh the outermost uh styling for the header we're going to be doing is actually inside of global css and if you guys if you have guessed it it's going to be right in the base layer and the reason we're actually going to be doing like that is again because we're going to have heather in a lot of different places right and we don't want to be repeating our class names over and over again so what i'm going to do is i'm going to have a header here and just use the add apply tag again and here we're going to give some custom cs attainment styles so first our header is going to be fixed and what i mean by fixed is when i actually scroll so if i go to the home page right now and if i actually try to scroll we can see the header is actually fixed right actually stays on top no matter what it doesn't disappear right so this is this is a fixed header right um and this is how netflix is doing by the way so we're going to say fixed we're going to say it and whenever we say fix we need to determine from where we want it to be fixed so we're going to say top 0 and the header needs to be on top of everything so we're going to say z index of 50 display flex we're going to say width of full we're also going to say items center justify content between space between we're going to say padding left and right of 4 py of 4 and we can we can we want to say transition all so i want to apply a really nice transition on the header and when we reach the large break point i want to increase the padding to 10 right and when we increase the large vertical i want to increase the padding top bottom so py is top bottom px is left and right padding it's a quick quicker way of writing padding left and right uh so as soon as i do that you see this beautiful just look at it it's completely transformed right now and as soon as i go on a smaller screen we see the links disappearing and if i go more smaller we see the search icon disappearing so this is our completely responsive header done right and we have this beautiful transition and the good thing about this is actually respond it has a really nice transition as if you guys can notice right so the padding transition is happening this is really nice transition so now we are actually uh we're actually done with our header component yeah that's it that's it uh everyone that's it we're actually done with our header um all uh all i actually want to want to do so we're actually not done so we're not quite done sorry uh so remember we have this so we have the scrollable thing so when i actually try to scroll the header has a background right the background actually changes this is what we need need to do the next uh part of our header and the way we're going to be doing this is using a so we have a piece of state okay and if you don't know what a state is in in react you can pretty much learn react hooks and uh you know it's just a hook u state and we're going to be using a use date and a use effect hook and what i'm going to say is i'm going to say is scrolled and we're also going to have set is scrolled and here we're going to say use state use state which is react hook and i can auto import it right use date from react and so this is actually a react hook right we're going to be using and by default uh it's going to be a boolean value so i'm just going to say false by default it's just going to be false and now we're going to be using a use effect inside of react and what a use effect is going to allow us to do is basically what a useful does is if you're familiar with class components when actually the component mounts right so when the component mounts and what it means actually comes um when the ui of the component mounts right when you see the ui right uh so that's that's called mounting when the component actually mounts right so on the mount it's actually gonna have we're gonna have a function called handle scroll and then we're gonna have a cleanup function as well right and what this is gonna do is we're to have this handle scroll and we have something called so we're going to check so we have something called window right inside of react we always have a window and what we window has these bunch of so these bunch of properties but the one we are interested in is actually the scroll y property and window means this whole uh window basically this is what the window means this is this is the whole hour window right and what we are checking here is we are saying if our window.scroll y is actually greater than zero which means uh actually someone tries to scroll right that's what this means i want my set sc scroll to be uh true right we want the set skill set scroll to be true and if it's not we want it to be false right so if it's actually greater than zero we want it to be true if it's not we actually want it to be false right the next thing we can we want to do here is outside this function right we we have to clean up this function so first thing we're going to say is we're going to have an add an even listener right and this is again javascript right it's very a basic javascript um and if you if again you're struggling with this window dot ad event listener and stuff like that just such as google through it you know just google add email lists and you're gonna see a bunch of stuff about it and that way is the best way to actually um and pause the video here google through this and just learn this stuff and then come back to the video that way you're going to understand about this so window.add even listener and very this ad email listener basically means that this window object which we have it's actually going to listen it can listen for a bunch of events right and which even do we want to listen to we want to actually listen to a scroll event right and this is actually in javascript right and we want to send in the function called handle scroll right so we want to listen to the scroll even and you want to actually run this function right and then we're going to check for the scroll y uh number if it's actually greater than zero and if it is greater than zero then of course it's going to set our screen scroll to true and the next thing we're gonna do is we're gonna actually clean up this function so i'm just gonna say return window dot remove because now remember it's very important to clean up this function so we're gonna do scroll and handle scroll so this means that this use effect is only going to run and because we have an empty dependency here so if i don't do this it's always going to run every time the page renders right but we don't want to do that we only want this to run based on the headers mounting right when the header is actually mounting so that's when we want to actually run this uh but this is actually only going to run on a single mount uh so that's really important um so now we can we have the handle scroll and we're saying henderschool uh set score is true if the scroll bar is true now actually let's test this out right and the way we can test this out is by changing the styling here and because we have a piece of state right so we can actually test it here and in the header i'm just going to say class name and i'm going to actually open my curly braces so i can use a javascript and this is called template string um i'm i'm pressing back ticks here so i can use javascript with the uh you know css together and i'm actually going to open my dollar braces like this and i'm just i can use javascript right now i'm going to say if is a scroll is true and i'm going to use and then operator and i'm just going to change my background to 141414 if this is true right and what this actually means that if this is true and right now because the whole background is actually kind of the same um we are not seeing much of a difference but of course we're going to have this image right so as soon as we have this this is actually going to work but let's actually change this to something else uh let's maybe change this to um instead of 1 4 let's change to red 500 so we can actually see the difference so if i actually try because right now we don't have any anything and we are actually not scrolling so the window that's uh the scroll wise always going to be zero right but when you have more content more information you're going to see that this will actually work and when we scroll this headers color is going to change based on this condition here so let's turn it back to 1 4 1 4 and let's keep building the header of course we don't see it right now but when we have more stuff more content we are definitely going to see this working so this is our headers implementation this is actually done so our first component we have actually created uh we had some use effects some used it some dynamic stuff and some ui um so let's get back to our index our home page and let's move on you know let's move on to the next thing now before actually moving on towards our next component let's actually give some styling here for the outermost div here so this is going to be relative remember we give position fixed for the header so we need to save from from what it's actually relative to so we're going to give relative push and relative for the auto container we're also going to say height of screen and actually if i try to give a more height we must might be able to see the header actually so if i actually change the headers color now we might be able to see um that this actually works so here we go yeah so you can see as soon as i scroll the headers color changes right so this means our functionality is correct and this is working and as soon as i go back to the top again the scroll line becomes zero so this condition becomes false and is scrolled it actually sets it back to false so this is what basically is happening in our header and you can see it's actually working so now let's actually uh turn it back to that and go to our homepage um and instead of 140 so we're going to not we're not going to be having 140 instead we're going to be having height of screen which is 100 view height which means take the full viewport height and it does not matter which device you're using if you're using if you're on a desktop it means it's going to take take the desktop support height if you're on a phone it's going to take the phone's viewport height um you know so it's going to be really nice so we have a height of screen and now uh we're going to be having a background gradient to bottom actually okay and this is how you use gradients in taylorman uh so we're going to have a linear gradient towards the bottom okay and the linear gradient is going to be from gray and this is actually really nice because this is what netflix has it by the way uh it's going to be from gray 900 and slash 10 and what i basically just did here is that i just said uh i want the gradient from right we have two different colors and you have a leaning gradient to bottom right so i have to say from two right so i have to say two different colors so i'm saying from gray 900 and this actually basically means this is just the alpha value so when we use rgba values we have the last one which is for the the alpha value i'm just saying 10 which means 0.1 alpha value and now i'm going to change the 2 1 to a custom value of 0 1 0 and it's going to be 5 1 1 and on a larger screen a larger break point i'm actually going to have a height of 140 view height and as soon as i actually save it look at this look at this we have this change and right now we can see the headers background is actually applying as soon as i go and because i'm on a bigger screen right so what i said is on a larger screen i want this to be 140 view heads and there's actually a very good reason why we want to do that right and as soon as we go smaller screen it's actually 100 view heights again so this is completely responsive so this is done now let's let's keep moving on so this is our outermost day now the next thing the next thing we're going to be styling is our beautiful uh banner component right here so this is the next thing we're going to be styling so i'm just going to remove the comment and let's type banner and again because we are using typescript this actually gives us error this says cannot find name banner so we're going to just open the sidebar and actually create a new file called banner.tsx so right now what we're going to be working on is actually i'm just going to say banner and actually let's quickly auto import this from our components file so we have our banner and it's actually on the top right the reason it's actually on the top left is because our header is actually fixed so it does not know where to actually start because our header is fixed remember whenever you do position absolute or fixed this does not take into the uh take into account the height of the header basically right now we're going to be working on this this beautiful banner so this is actually too bright let me refresh maybe let's get another um another movie yeah so we're going to be working this on this banner component uh with this you know with this banner and it's going to be dynamic again it's going to be we're going to be fetching a single movie you know a random movie um and it's going to be from the netflix originals um originals uh one you know that's where it's gonna be and you can i'll show you all to you can do it from anywhere however you want to but this is what we're gonna be working on this whole banner component basically so let's keep working um let's make it half and half maybe like this so what we can do is we can actually say actually let's make it uh like this i think this is much better let's actually go to banner and i'm actually going to open my uh banner component now because we are actually done with our header so our banner.tsx so inside of our banner uh there's a bunch of stuff we're going to be having so we're going to have a div here inside of our banner right um and this dave is actually going to have the image and this is going to be the image and this is going to be a nexus image component and this this image is going to be the banner image basically it's going to be the banner image and again this is editing out right now it's saying it's not working right now but before we actually do this i think we should maybe implement the rest api uh and the server side rendering so we can actually get all of our results um you know from the api and we can actually render the dynamic results instead of hard coding different images so i think we should actually do that before we actually uh try to build the whole banner and we can actually do that so the the way we can do it is uh we have to go to tmdb so i want you all to go to tmdb api uh click on the getting started part here right actually not not here actually to this uh official website the moviedb.org this is the link we want to go to and the next thing we want to do is we're going to create a account if you're new to this this api basically gives you this is a rest api it's a database for different bunch of movies and the cool thing about this api actually updates regularly so and we're going to be using server-side rendering which means our website is going to be staying updated 24 7. so with the new regular uh latest movies you know so it stays updated so it's a really nice api actually so create an account if you don't have an account then after creating account just go to settings and click on api and all you have to do is get this key here and you have to hide this key we cannot show this key to anyone so we can actually get this key api version three ought right this is the key we want um and the next thing you can we want to do is actually go back to our app now and because uh we have a secret key right so we want to hide this key and the way we do this in the inside of nexus is we create a file called dot env dot local local and this is actually going to be the api key so it's going to be an api key but this key is actually going to be exposed to the client and whenever you have any keys which are exposed to the client we always have to add something called next public in the beginning and this is super important if you don't add this next public it's not going to work your key your key api key is only going to work in the server side rendering which is which means it's the back end right but it's not going to work in the client which means if you have this key inside of any use effects or anything it's not going to work without the next public this prefix so this is very important we need the next public so i'm just going to say next public api key going to save this and because i actually changed my env.local i'll have to restart my server as well so i'm just going to cut the server control c and i'm going to run the server again right and now i'll be able to use my api key um so the next thing i want to basically do is we want to have a function inside of our home page because uh we're going to be doing a server side render and fetching all these collections all these different movies from different collections um you know um and you're going to be server side rendering them so there's no no sort of loading we get literally no loading there's going to be zero loading so the user experience is going to be really nice so the way we can actually do this the first thing i want to do is we want to have a request so in the finished build i actually have a file called um so if i go to my finished bill let's just close this uh this is my first bill um so if i if we go here we have a file called a request and i think it's inside of utils so inside of our utils folder which is and in this bill uh i'm also teaching everyone the you know you all to use a folder structure a nice folder structure so there's a really good folder structure as well um so we have a folder structure folder called utils okay and what utes can contain can contain stuff like request and what request is basically is going to be a file with different bunch of requests here so we don't have to write this over and over again so we're just going to use fetch trending netflix originals top rated action comedy horror romance and documentaries and we're just going to export this default you know so we don't have to actually hardcode this over and over again so this is why we have this beautiful file i want you all to copy this file okay and create a new file inside of request directory and request can have all these different bunch of files and it's going to be dot ts because ts is for a typescript right and the difference you all might be wondering difference in tsx and why do you use tsx and ts right the reason we are using ts and tsx you can use tsx2 but the ts6 means we're going to be returning some gsx right and what jsx means is returning some html we're going to be returning some so whenever that is the case whenever we are returning something we always want to use tsx files as opposed to ts files but here i'm not going to be returning anything so i'm just using a normal ts file so that's actually the reason i'm actually just using ts and where did i actually get all these um all these urls is they're actually there on the tmdb uh documentation but i made it easier for everyone for all of you so you can just copy paste this you know but you can look uh in their documentation uh if you go type tmdb docs um tmdb talks um you will see the apa overview not there actually um it should be somewhere here yeah so this uh this is the documentation it's gonna load this documentation and this is where or you can find all the information if i go to movies you can see all the get requests the post requests the delete request um you know the cut functionality so you can try this out uh you know you can click on try out this is the url they actually give you so this is where i actually got all these urls from you know so let's continue building this so we have our request and i have the api key equals to my next public api key and a base url uh this is the base url so we have a base url as well so now the next thing i'm going to be doing is we're going to be writing a server side uh so doing a server-side render here and the way you do service editor inside of nexus you have a function at the bottom or at the top wherever you want to be you can have it at the top here as well so you have a function called export and it's going to be const and we're going to say get server side props server side props um and of course it's going to be in a synchronous function so i'm just going to say a sync and i'm just going to type it like this so this is going to be as an asynchronous server set and the way it works in nexus is whenever the name actually understands based on the name so because i said server side props the next nexus is going to understand that we're going to do a server side under here and the naming is important because if i mess up the name then nexus is not going to be able to understand so we are saying get server-side props right and if anyone's who's new to server-side rendering don't worry about it just just uh follow follow with me and i'm gonna explain what we're gonna be seeing everything right the first thing i'm gonna do is i'm gonna have uh so we're gonna have this uh so this thing i actually wanna copy because i don't wanna be so much time into this because i'm gonna explain uh this is really easy um i'll explain and make it easier for everyone so i'll just go to my home page not to my login so we'll just go to my home page and what we can do is i can i'll get all of these requests actually let's go back now let's make it side by side again and what i'm actually doing here and we have to import remember we have requests and we have to actually import this so i'm just going to press command space control space and just auto import this so we have a request now what i actually just did here right now if any one of you watched my disney uh watch the disney clone the disney bill video you might remember this and i told that time that i'm gonna do some kind of similar build because pattern recognition is is really important right and that's what we are doing we are doing the same thing right now we're doing pattern recognition basically we're doing the same exact thing so we learn uh you know by doing the same stuff over and over again so what we're doing here is we have a promised at all and the reason i'm using and we have a bunch of uh we have this array with different uh you know different netflix originals trending now all these different uh variables and the reason i'm using a promise.all instead of doing it separately is because when you have different await um requests using promise.all you're just using 108 but if i was doing this as separately i'd have to use uh one two three four five six seven eight different awaits eight different times which is not a good way of doing stuff right you don't want to use so many awaits so i'm just using 108 and i'm just uh and i'm just using promise.all to actually complete the whole operation right so it represents the completion of asynchronous operation and i'm saying dot all right which means actually resolves all of these fetch requests so i'm doing resolving all these fetch requests together and even if you want to optimize this further even uh what you can do is uh i didn't do this because i wanted to keep it beginner friendly but we can do this is have this itself in a separate um file of its own and then you know just maybe like a map through this or something so that's like a more optimized version of this but the next thing we're going to do is we're going to have a return uh and in next year's uh in server-side rendering and stuff like this what you have to do is you have to return something called props and when you return something called props you can actually access it on top of the application here so you're going to be returning props okay and what we're going to be returning is again i'm just going to quickly get them we're going to be returning these props here um and the reason i'm actually doing dot results is because uh these these results right these results are going to be con going to be having two things they're going to be having an id and they're going to be having something called results right they're going to be having like two different uh objects inside of the inside of this so this netflix version is one object this is going to contain a dodge results and it's going to contain id so i'm actually accessing the results because we are interested in the movies right so we are actually accessing the dodge results part and now i'm just going to save it and the way to test this actually let's just let's just use this now right so i can say netflix originals and if i say netflix original there now this is where typescript comes in right so normally before you have seen me doing this and there wasn't any error we we didn't used to get any errors you could just console log this and it didn't used to give but right now if i hover it says property netflix originals does not actually exist on type children right so it actually does not exist it's telling us and first of all we're going to be using our own type so we don't need the next page uh which is again a type from you know next year so we can just remove that so that's what actually telling us it has implicitly has any type right now the the type error is changed to implicitly as any type so when you're using typescript you have to provide types for these things right and the way you actually do this is it's actually very simple uh you know typescript once you try to understand and it's really powerful and the reason you might be asking for any of the beginners might be asking why do we have to do this right what advantages what benefits does it actually give us the benefit of using typescript actually gives us really good intelligence and it's really good for production environments because think about it when you're working in big applications right you you want to need the intelligence because you might be working on different stuff all the time right so you need the intellisense so first it actually gives you intellisense it prevents you from getting into different sort of errors so if you're using a string in place of a instead of a number and you have to use a number and if you're not using typescript you might not even know about that right but using typescript actually prevents that actually prevents you from using a number instead of a string if you had to use a number you know so that's really uh that's that's literally the point of using typestrip you know of this type of uh typescript right the netflix originals to actually need that right uh what we all we have to do is actually go into a file called um we have to create a file sorry we have to create a file so it's not there by default so you have to create this file called typings.d dot typings of definitions so it's a typescript definition file so i'm just going to make this bigger and i've already created that so what i'm going to do is actually go go back here and this is the file so this is called typescript.d.t.s so let's just create this file first and this is the convention like you can just name it anything but this is this means this is a typescript definition file so i'm just going to say typings.d.t.s and i'm going to do is actually copy this you know i have a bunch of types here and we can just go back to being like that and now what i'm doing here is i'm i like to use interface interfaces so in typescript the way you actually have types for something is you can either use types or you can either use interfaces if you want to use types all you have to do is type and instead of uh instead of like this you just have to say equals to here so since it's kind of like a type right so this is what a type is basically and i like to use interfaces because interfaces they can be extended and stuff you know so if you do something like interface you can actually extend extend this into another another interface basically so that's that's the advantage of using interfaces over types but that's like just my personal preference right you can use types if you want and now i have three three different types of one type i have it for generate another one for movie uh so for movie you're gonna have and how i actually got to know about this type is actually by just console logging right so what i did is i just console locked so if i just do it right now netflix originals and let's actually go back to our application we're seeing undefined right let's just refresh and as soon as i refresh boom we get 20 different results right we get 20 movies right and the way i actually found the types for this and and this is actually server side render by the way so we are actually connected to our api right the way i actually found is by just console logging these movies so these are my types you know and then i actually added them to the types there and just appropriately did that you know and the media type and the release date are some optional types so if there's any type that is optional you can just put a question mark here um and then the last one is for element and the element has a type object a type object of um you know so sorry type is not objects it has a type and can be of either of these values so it can be either of bloopers feature it behind the scenes clip trailer or teaser it can be anything and there's a reason why we have a type of element so i'm just going to quickly save this and let's go back to our application now let's make it like this again and let's actually apply the type here so now the type i'm the way i'm going to be applying types here is i'm just going to say props right and what our props is we're going to create interface for this uh for this component or for this page itself and we're going to say interface props right and inside of our interface props here we're going to say netflix origin so i'm just going to copy this and netflix originals right is going to be of type movie right which we have already created so we can auto import from our typing type definitions file as you can see and it's going to be an array of different movie types right different movie types i'm just going to say edit and this is one way of doing or you can just say like this so this is another way of doing um types here but since it's going to be an area of different movies so netflix origins is going to be area of different movies right so this is how we actually uh do this and it's not just going to be netflix versus it's going to be all of these so what we can do here is i can just go here since i've already done this and again just go to pages um you know the home page and what we can do is actually get all these different uh types and first we can get the interface for these different types so we can just copy this and you can see i can just copy this and i don't have product yet but we're going to have a product type as well and now we can just copy these types here and here we go so we have different uh bunch of types now right now we can send uh send these different results we got right you have types for them you have now it's not erroring out anymore so now it's not erroring out and the good thing about typescript actually gives this really good intellisense so if i actually remove something and if i go bottom you can see i actually get the intellisense when i remove these three things i will actually see uh so i press command space i'll actually see these three right because it's actually there in my types now which is really really nice uh the thing i love about typescript uh because and and types is the props and this can be anything right you can name this anything but usually the convention is to name just props you know uh and we have top rated and then we have trending now so this is the really good thing and if i have something like which is which is not present it's gonna actually give me an error because it's not there in my type props so it's gonna give me an error so this is why typescript is really it's like it makes your code really robust and really um you know you can think of it as error proof you know so it's really nice so we have our netflix originals we're getting back the results you know that so let's actually display these results on our homepage now right because you want it to display like this beautiful banner right so let's work on this banner first now for the banner uh what we want to actually do is we want to send in this uh netflix originals um as it is as netflix originals because we cannot do the server side render in our component we can only do the server side render on on pages you know so we'll have to send this to the our banner component and the way we access is again just saying fx originals here and again we're just going to do the same pattern i'm just going to say props and we have to do this guys like this this is something you have to uh when you're using typescript you have to learn this and you have to do you have to get into the habit of doing this and again i'm just going to say movie and again auto import from our typings and just say like this so that's all we have to do for our banner and now uh we can see now a good thing about typescript is that uh if i actually remove this now because i'm expecting something right so it's actually going to say is netflix orange is actually missing so i need to i need to because i'm actually expecting this type right and if i actually make a question mark here then it's not going to give me an error because that means it's an optional but if it's not an option it means i'm expecting this thing so i need to send in this thing here which is what this is the reason why typescript is i mean if you're using it for the first time you might get an idea now that why is it really where is it really nice using typescript so we are sending the netflix originals to our banner now i can go inside my banner uh and let's actually build our beautiful banner component now and we'll have our netflix originals so what we can do is just uncomment this image you know and again this is going to give us an error sync source is missing again remember what i told you when you're using the link component this is again the image component from nextgs and it's saying the source is a compulsory attribute so we cannot miss that attribute right now before actually even doing that what we want to do is we actually want to get a random movie every time we refresh a page now how do you do that because think about it it's only going to give us a random movie when you refresh a page right every time you refresh a page it's going to give us a random different movie right now it gives me sonic if i refresh again it's actually going to give me ice age or something like that so it actually gives you a random movie now how do you actually do that right is by using a use effect again you know and by going through the the whole area and by just getting a random uh movie and setting it to a piece of state so the way i actually did this is we have a piece of state right uh and this is going to be called movie right and we're going to say set movie okay and we're going to say use state again we're going to auto import from react and use data is going to be now this is where again we're going to be using typescript now to provide a type to our our used hit because again the the movie is going to be type of movie or it can be null so this means that by default it can be null as well right so by default it it will be actually null right and then we're gonna set it to a movie type right and now we're gonna have a use effect based on this so i'm just going to say use effect and let's auto import from react right and again this is how you write a news effect you have an empty dependency right now inside of my use fact i'm just you're just going to say set movie right okay and then you're going to use netflix originals another good thing about typescript is already knows that this is an array right so it actually gives this mapping function and all these functions because it already knows because we actually told it that this is a type of different different types of movies right and it's an area of movie type right so actually already knows now so what we can do here is you can say math and i'm going to write a function to generate a random index here right because we're going to access a random movie so we're going to generate a random index a random number from the index so i'm just just going to say math.floor i'm just going to say math dot random okay and this is a basic like level uh basic you know javascript this is you and even in java or any other language you might have learned this this is how we generate a random number you know and what i'm going to do is i'm just going to multiply it to the netflix originals dot length this is what we're going to be doing right and what this is going to do is actually going to generate a random index right and this is going to be dependent on netflix originals so every time every time the netflix originals actually changes the array this use effect is going to run and it's going to set a different different movie right every time the fs origin is going to change every time this is going to run and it's going to set a different number it's going to generate a new movie basically so that's what we are actually trying to do here now what we can do is we can actually console log our movie and let's actually see if we're getting back anything so i make this bigger i go and i'm already getting an object now if i refresh i'm getting this object the movie name is the atom project now if i refresh again it should be a different one and ah it's different so this is working right so we're getting different movie every single time when we refresh right all we have to do now is display this in a beautiful uh banner ui right that's all we have to know so i'm just going to copy this and uncomment this and now we'll have the source and the source again is going to be template strings and i'm going to be using a variable here and it's going to be it's going to be called base url now again we're going to create this just in a second right now it's not there because and typescript is shooting as an error it cannot find right now we're going to say movie dot backdrop path right and again this automatically adds an option chain so when you're using typescript these are the benefits you get right because we already told typescript right we already told our our piece of state that this piece of state is going to be a movie or it can be null right it can be because when it's generating it can be actually null right so because we told it can be actually null right what it does is actually adds a optional optional chain automatically if you do this so we don't actually have to if i don't actually add this it actually tells us object is possibly no so we know that we need to add this this is why typescript is really really good trust me guys now we can say a movie.backdrop part and the next thing you can say is movie.posterbot right again it's going to tell me that i have the optional change to protect it because it can be null right so we have to protect it now we have to create a base url and this is where again i'm going to teach some you know something about the folder structure again this base url the reason we're using this is because a tmdb api actually gives us a url to generate the images because if i console log right now and if i show you all the the backdrop part so you can see the backdrop part and the poster part actually uh kind of looks like this so we have two different uh two different variables one one of them is backdrop part another one is poster part either of these can so first i'm checking that if there is any backdrop part i want to use that if it's not present then i want to go to the poster part so that's like my alternative to the background path but the point is that it does not give us the beginning right so we cannot just access this so i cannot just access this thing here if i try to access it's not going to work right so i cannot access this i need the whole url right so there's something called the base url tmdb api gives us right and the way i i made it easier for everyone so the way we don't want to repeat this uh every time on every single component what i did is i actually created a folder called for constants again you know and inside of our constants we have something called movie dot type square so if i create a folder called constants right and here we can say movie dot ts and just from this folder we can get this export this space url so now we we can just save this and this is the base url and we don't have to repeat this in every different component or wherever we use the the images from the api right because you already have a folder now i can just auto import this from our constants slash movie i can save this now as soon as i actually save this it's giving me another error now it's actually telling me that image with source tmdb must use width and height because we are using a nexus image component it needs us to use either image width or high or either layout fill in this case we are going to use layout fill so we're just going to say layout and there are different types of layout we can see there's fill fixed inferencing and raw but we're going to be using the fill one and whenever you use layout fill the parent the outer pattern should be actually absolute or relative you know in this scenario it's going to be absolute we're going to say top of 0 top of 0 we're also gonna say left of zero left of zero and we're gonna say a negative z index value so actually i'm not gonna let's not actually give the styling right now let's copy this but that's not actually let's just keep it for now uh but let's fix this error the next error is actually telling us that the next slash image hostname image.tmdb.org is not configured now this is something you you face when you're using a nexus image component so we have to configure our host names and the way we do that is go to your next config.js file and inside of your next configuration if actually uh if i actually open this link it actually tells me how to fix this right so we need to have images and domains like that right inside of our module or export so we need to have something called images domains and what reacts trick mode is actually is basically every time react uploads a newer version which has breaking changes and stuff so just just so it does not conflict we have the strict mode turned to be true right uh that's what reactor stick mode is but you can search about it in the documentation here too you know but for the image what we need to do is we need to now go back i need to see it's actually giving us the exact url we need to we need to configure so it's telling us hostname image.tmdb.org so we need to replace this one because that was an example one and we can have as many as we want to here we can have different host names from different domains because it actually optimizes the image and it converts the image into a format called webp format right and just because i changed the next config you can see found the change so we need to restart the server so what it does it changes it to a webp format which is an optimizable format for the image then and actually lazy loads the images and there's a lot of cool stuff behind the back um this is really slick you know and right now it's actually showing us null so it's actually telling us we're not actually uh having any image yeah the reason we're not having because we don't have the height and the width set so that's where we need to set the parent uh parents height and width right so here uh what we want to do is we want to say a height of 95 view high i'm going to say 95 view because it's a it's a custom value so i'm just going to say 95 view height and we also want to give the width and the width i'm gonna say width of screen uh which is of course the hundred viewers right and right now we can see it's actually stretched now how do we actually fix this right we see the image but it's actually stretching now how do we fix the stretching all we have to do is there's there's a property called object fit which we can use inside of uh in our next image components and we can use cover contain if you do contain you will see that it will maintain the aspect ratio but this is not what we want we need to take the full height right so to make sure it does that we we're gonna say cover as soon as i say cover boom there you go right now it's not stretching and it's working really nicely right and if i try to refresh this it's gonna show me a different image and you can see every time the movie actually changes right which is really really nice and now one more thing you want to actually make sure we do is you want to give a negative z index because this image is actually going to be behind our text so we need to make sure it actually has having a negative z index next thing we're going to have a h1 uh and the h1 is again going to contain the movie.title um right and it's going to have so it can be either movie the title or it can be either movie dot name again there are some different different uh values uh that api actually gives us so if either of them is not present we just choose the other one right and you can see we have the title on top here and the next thing we're going to have is a p tag and the p tag is going to contain movie so it's going to contain movie dot overview right and now of course the movie overview so we get that let's actually quickly style them so for the title uh we're going to say text of 2xl again make it a bit bigger right but that's on smaller screen sizes on a bigger screen size we're going to say large and we're going to say text of 7xl right so it make it actually really big on a on a larger screen size but right now we're on a smaller one so we cannot see any changes but as soon as i go large you can see the text actually becomes bigger right so text uh 7 xl and we're also going to say um so on md so we're also going to change the text the headings font size on a medium screen size we're going to say it's going to be 4xl so if now if i go medium and if i go large it's going to be more bigger so we can actually quickly do these changes just using therman and you can see like how improved it increases your speed when working with css right so this is right now i want to do font of both actually both on and that's pretty much it for a heading tag now let's style our p tag for the paragraph tag you want to say max width of extra small so you want to give it a max weight so it doesn't go out that max width and text of extra small as well on a smaller screen so i'm just going to say text of extra small on a smaller screen and we're also going to say text shadow now this is a custom shadow we're going to be creating later on uh after we finish this styling but for now just remember we're going to be creating a custom texture where i'm going to be showing how you can do that inside of tailwind so on a medium break point i'm going to increase the max width to large so i'm going to say large um on the medium break pan breakpoint i'm also going to say text of large and we are also going to do on a large break point we're going to increase the max width to more we're going to say max 52 xl which is actually 672 pixels and now on the large break point you also want to increase the font size to 2xl right now if you go bigger you can see it really looks really nice now the reason is actually on top of the header because the header is fixed remember and it does not take into account the height so we need to change the ui to to adapt that right and the way we'll actually do that is i'll go to the outermost container and we can actually style this now so we can say flex uh display flex right we're gonna say flex column because i want it to be in a column direction we're gonna say space y so some spacing between uh and again space why it just works like space x but it's vertical spacing between the children so we're going to say space valve 2 and we're going to say padding top bottom of 16 as soon as i do that we already see it's gone now and on a medium break point uh we want to say space y of four so i'm going to increase the spacing on a larger break point we're going to say a height of 65 view heights so i'm going to give a height of 65 view heights on a larger break point um and on a larger break point we're going to say justify end okay um and also on a larger break point you want to say padding bottom of 12. so i gave some more padding on the bottom side now if i make this bigger you will see that actually comes into the center right because what we're actually doing is we are saying just if i end so if i actually remove just if i end it will be on the on the top right but justify and what it's going to do is going to make it on the bottom of its height right and the height is actually 65 year high so now we can see it's already really responsive right it's really really nice uh but let's continue building this let's continue um so we have the automotive study now we have the styling for this uh there we have complete so we have completed our description our heading let's move on to the bottom div here now this dev here on the bottom is gonna have some buttons right inside of it so we're gonna have button and what i'm gonna do is multiply by two because you're gonna be having two buttons uh so first one is gonna say play and the second button is actually gonna say more info just like how netflix does right so play and more info right so the the div uh containing the buttons first let's actually style the buttons so we can actually see the buttons now again for the buttons i'm going to have we're going to have a custom class name because we don't want to repeat our styling right so we're going to say we're just going to say class name and the class name is going to be banner button i'm going to paste the same one here and this is our custom class and this can be any any name right any name you want to have but we're going to have banner button right um so let's go to global css and inside of our component layer let's actually have banner button and apply some styling here right uh and let me just quickly open let me quickly open my styles on my other screen so i can actually see what styles i have applied for the button so for the button uh we have set display flex right and we are going to say item center we are also going to say give a gap x of 2 and the reason you are saying gap x of 2 is because you are going to have icons inside of our buttons so if you actually go back uh let's actually add the icons right now so for the play uh button you're gonna have an icon from react icons package which is gonna be fa um fa play it's to be just fa play like this and we can just auto uh manually import this because it's not giving us a suggestion for auto import so you can just say play from react icons and it's from the fa packet so we just say slash fa uh which is the font awesome package by the way so the font awesome back so this is a play icon and i'm going to style this uh so let's actually see if we get the icon so we do get the icon you can see the icon along with play and the reason side by side is because in global css we actually said flex item center and a spacing right but we still didn't complete that uh but let's just give some styling for the icon first let's say a height of four width offer and a text of black uh not two black text or black this is going to make sure the icon is actually black right and a medium uh break point you want to say height of seven and on medium break point when i say the width of seven so and right now it's black right now as you can see let's go back to our global css and let's finish the styling so now for the banner button we're going to say gap xf2 we're also going to say it's going to be rounded right it's going to be rounded and we're going to say padding left and right of 5 okay and we're going to say padding top bottom of 1.5 and again this is for mobile first right and we're going to change this as we go on bigger screens i'm going to say text of small font of semi bold so fawn is a little bit you know uh more drastic transition uh we're going to be applying and the transition and we're also going to say on hover uh we want the opacity to change to 75 right because we're gonna change the opacity and you hover over this we can see the opacity is changing right now uh and we're getting there you know we're getting there and our medium break point we want the padding top and bottom to be 2.5 and on the medium break point we also want the padding left and right to be eight we also want the on the medium break point the text to be excel so text to be excel so right now if we go bigger screen size here we go we actually see text is getting bigger right and it's working really nicely so this is the style for our banner button right now we don't have the background right the the reason we don't have the backgrounds for for both our buttons the background is actually going to be different so if we actually give a background here it'll make the background for both the buttons actually same if i say background red 500 it'll make for both the buttons but since it's going to be different for both of them what we're going to be doing is we're actually going to be changing uh the background separately in the buttons itself so you can go to our banner and in our buttons like this uh what we can do here is for our first button which is the play one we can say background of white because you have a black icon remember and you can say text of black so as soon as i do that immediately you can see it actually changed right now for our button on the bottom here we can say background gray has a gray uh background and again this is a custom gray color this is not the color from tailwind this is a custom default gray color and as soon as i do that here we go you can see the colors changing and now uh we're also gonna have so in for the more info button we're gonna have an icon here and this icon is gonna be information um and it's gonna be from uh hero icons so you're gonna have information circle icon and we're gonna just style this icon i'm gonna say h height of five a width of five right but on a smaller screen a bigger screen we're gonna say height of eight and a width of eight so this is gonna say a width of it as soon as i do that boom it already looks so much better now right um and the buttons are on uh the buttons are actually not side by side so we need to style their container which is the div here so we need to style this div here we need to say flex and we need to say space x of 3 between the buttons and as soon as i do that boom we are actually done with our buttons now so we have created the beautiful banner ui and right now the battery is too close it's this is sticking to the left side and we need some padding right uh to sort of prevent it from sticking to the left right so we just want to do that but right now it's responsive and it's actually working our uh and it's actually dynamic by the way it's very fresh it changes the movie and it's actually dynamic responsive everything is done and the last thing we needed to add is uh the custom shadow uh which we are talking about intimate now to actually add custom text shadow in tavern uh the way i actually found this is by just going to the taiwan website you can just type text shadow um and actually not texture so tavern does not have any text shadow inside of the utility class inside yet right now so what i did is i just said text shadow tailwind and i found a package a really really nice package it's called text shadow npm and if you install this package and we're going to install this as a dev dependencies and just going to copy this command here you know go back and just paste this on our second terminal to install this package and once we actually install this package what we need to do is we need to import this plug-in inside of our plug-in area in entertainment configurations if we go to the obtaining configuration we have this plug-in and this can be an area of different different plugins now since this is a plug-in it's called tavin css text shadow we're going to actually install this uh and then we can easily use these utility classes so what happens is when you install this plug-in actually give us these uh utility classes for text shadow and we can actually use these uh texture those then which is really nice right so what we can i can do now is i can go back to the website um our website here right uh since we have installed this let's refresh you know and we see the movie um now where we wanted to actually apply this or it was actually in our paragraph it was right here so we can see right now we're going to get our text shadow so we can get these text shadows now and the one which we wanted to apply was the medium one so if we apply this our text is going to have a shadow a really a really slight medium shadow now it's going to again improve the ui right so that's all we had to do so we have a text shadow now uh we have our banner ui complete let's just give some padding so let's go back to our index page now right and let's see uh so in our main so we need to actually style our main right our main is going to contain the banner and it's going to contain the section with a different bunch of collections you know different netflix collections so what we're going to do for the main is let's give some styling we're going to say first make it relative okay and we're going to say padding left of 4 immediately it looks better now uh padding bottom of 24 okay and a larger screen size uh we want the space y uh to be 24 because you want spacing between the banner and the section right so that's what the space y means and on a larger break point we also want the padding to be more so padding left of 16. so i make this bigger we have beautiful padding now and there we go really really nice the header is background changing so we have successfully done our two components the header and the banner and they're dynamic they're completely beautiful right and you can see they're responsive okay now let's get back to our home page so we are actually on the homepage right now what we want to finish is we want to finish for today uh all the different collections and the modal functionality so when we click uh you know the beautiful model actually opens up and we can actually play that trailer stuff and all that good stuff or we can actually implement the model tomorrow along with the authentication and stuff and we can just finish all the roast for today i think it's enough for today's bill and you can work on the model and the authentication stuff tomorrow so let's see uh let's start working on the rows on our row component so first thing i want to do is uh before starting this uh starting actually let's not have this last name so yeah let's work so let's create a row component so i'm going to create a new file here and we're going to just going to say row.tsx again and rfce right and let's just save this file and let's auto import this save our header uh now these are going to be different rows right so i'm just going to quickly auto import my row from component slash row and let's have a different bunch of rows so as soon as i save it we can see we have four rows right now right which is really nice now let's get into our row uh but now before we actually get into our row what what's uh so what stuff is the row going to contain so remember we actually um imported all of these different variables like different movies right comedy different genre of movies right horror romance and trending and stuff so what we can do is we can actually for each and every single row we can send these different results of movies right so what we can actually do is first we're going to actually send the title and i've already done this so i'm just going to quickly go to my index page and you can quickly get the rows from our index which i'm quickly actually get these rows um and let's go back to our website so let's get these rows and we have two props so let's remove the list we don't have the list for now so and so we have actually two props here right the title and the movies right so what we're actually doing and we can see typescript is giving us an error it's saying uh title string movies is not assignable to type entrancing attributes the reason why is because we don't have types here right so what we have to do is we have to say title and movies and we need to create a props here and we need to create an interface for our component so typescript doesn't give us any errors so all we have to do is title which is going to be a string right so i'm just going to say string and our movies is just going to be a type of movie which you have already created remember so it's right there in our types here so all we have to do is and it's going to be a string so we're going to say string and now if i go back our errors are gone right so this is why typescript again again and again i'm actually stretching stressing this but this is really it really helps you know typescript is really nice and it's really easy like you can see in a matter of minute seconds you just create interfaces once you get used to it you know um so we have our row components right and we're sending different titles and different movies and what is my list this is going to be a component uh this is going to be a my list component here and i don't know if i actually showed this in the beginning but what we are going to be doing is this is our finished app right so you can see we have our my list and this is only going to be rendered so if i actually click this and if i actually remove this movie uh you know from our my list and i've actually removed this one too what happens is actually gone right now so this is only going to be shown if the length is greater than zero right if it if it has any movie so if i actually have this one if i actually add this to our my list you can see this is right there in a my list so this is where the my list is gonna be now let's let's keep working on these rows um so this is going to be our my list component so let's go inside of our um let's close our banner and let's close our login page for now let's open row and let's actually create this beautiful row component now um and each row we can see is actually going to be like this so each row this is the one single row right each is going to have a scrollable container so we can actually scroll through different uh bunch of movies and it's gonna be really nice like this and we can scroll through and actually scrolls really nicely no matter which screen we are on actually scrolls really really nicely as we can see so let's actually create this now so now uh we have we're on the row and what we want to do is first thing you're going to have our title right because you have a title so we're getting the title as a prop and we can just say as soon as i do that we can see our titles are already changed right uh then we have a div and this dave is actually going to contain um some icons and it's actually going to come and remember those icons are going to be the left and right icons and actually hover over the the container itself the left and right icons so it's going to contain these icons and uh the results right so that's what's going to happen so we're going to say chevron um it's going to be a chevron left icon and it's going to be an outline variant instead of a solid one so by mistake i actually imported this from the okay and there's going to be this icon and then there's going to be a chevron right icon right again it's going to be an outline variant so we can just say outline okay so you have these two icons right of course it's going to be huge because they're not styled right now and again i did not include a custom class name here but if you want you can include a custom class name for to not repeat yourself here um you can do pretty much what we have been doing uh you know from the beginning so i'm just going to say top 0 bottom 0 left of 2 again i'm i'm saying position absolute top 0 bottom 0 left 2 z index of 40 and margin of autos so they're actually in the center a height of 9 a width of nine so they actually become smaller um right now a height of nine oh i messed up the weight here that's why so if i'm making correctly the height of nine a width of nine um what else i have to do is i have to say cursor pointer and we also want to say opacity of zero so if i try to refresh this um and there's a different we can see there's there's so many different icons because of course there remember there are more there's more than one row right so that's why we have different icons there um so we have opacity and for some reasons the styles are actually not applying uh no they are applying so we just have the right one they are applying and we don't have the left one because we said opacity zero um so it's actually we cannot we cannot actually see the left one uh but what i can do is copy this class name and it's gonna be identical so you can just say like this and now it's going to be somewhere it's actually hidden we cannot see it because of the parent so let's actually give some styling for the parent as well so let's first complete this and then let's give the styling for the parent so we can actually see the the icons because right now it's actually hidden so we have transition and what we want to do is we want to say hover so when you hover we want a scale transition of one two five and i'm applying them at the same time because i selected both of them and we also want to say group hover and what group however i'm going to explain in a second what it's going to do and we're going to say opacity of 100 so what grow power means is actually means if we hover over the entire group which means the entire the parent of it which is going to be this parent right so you hover over the entire container i want the arrow to appear right because if we look at our finished bill we only see the arrows when we are actually you know when we are actually going to hovering over the group otherwise we are not actually seeing any arrows right so that's what we are actually doing right here by saying group hover so we have a group uh we are also going to say relative right and we are also going to be saying on a medium screen size we want a negative margin and again there is a very good reason uh why we are actually doing this a negative margin of ml 2 right now like this um and now in between let's just type some results or something um and yeah actually we are still not seeing the arrows let's see why we are actually still not seeing the arrows so we have group relative um let's also give a height to our outermost container so let's say a height of 40. so this is a single row right so what i'm doing is uh giving a giving it a height of 40 so a 0.5 vertical spacing and a medium screen size we want the vertical spacing to be spaced by two so now each and every single row has a specific height as we can see uh we are still not seeing the arrow so let's debug let's fix that actually uh you know we're still not able to see the errors but we actually see our our different bunch of rows and we are actually seeing the arrows right there so they are right there when it's because you have the opacity zero that's why so actually remove that we actually see the errors now yeah so it was because the opacity was zero so let's keep it that way um you know so we have our fixed height for each and every single row let's style our title as well for our title the width is going to be 56 so it doesn't go out of that width we're also going to say cursor pointer we're going to say text of small and we're going to say font of semi bold not serif semi bold we're also going to change the text the creamy white color so it's not going to be exactly white it's going to be a slightly a different sort of white and you can see the slightly different white and you have a transition and you also want to say duration of 200 seconds and 200 milliseconds sorry and when i hover over this the text i want it to be completely white so you can see there's a little there's a very little subtle difference right in the ui and actually hover so if i hover right now you can see and right now of course we need to change the the font size too right so we also want to say on a medium screen size you want the font size to be text of 2xl now if i go bigger and we can see the difference so now all we have to do is render our different movies in this uh particular in these particle collections right so we have to actually do that so let's work on work on that now now this is going to be in the middle here right we're going to have another div and this div is going to contain a single component called a thumbnail so i'm just gonna have thumbnail here um and this div is gonna have some styling so let's actually create this instead of commenting it out uh let's actually create this um component so let's say thumb thumbnail you know and of course it's going to error out because you don't have this yet so let's create our fourth component which is going to be my mistake i closed it okay it's going to be thumbnail.tsx this is going to say rfce again close the sidebar uh and just auto import this thumbnail right of course for each thumbnail and what i mean by thumbnail is going to be this thing here it's going to be this one single thumbnail as we can see right this is one single thumbnail and we're going to have bunch of them uh because it's an array right so we're going to have bunch of different thumbnails right now we have these uh we're going to have different thumbnails here like this you know let's style the outer the outer div we're going to say flex we're also going to say item center we're going to say give spacing between them of 0.5 uh which is which is i think it's 2 pixels i guess if i'm correct um an overflow acts of scroll uh because we want the overflow to be um scrollable right uh the x the horizontal overflow to be scrollable so we are saying oracle scroll to be scroll and you're also going to say medium screen size give a space x of 2.5 right and also on a medium screen size give padding of two and this is the reason we actually said ml2 so if i actually if we actually don't do that uh and if i go to a bigger screen we can see there's a negative margin left so to prevent that what i did is we we just said negative margin left of two so because we had padding two on a medium screen size so this is why we did that trick to uh prevent the um you know prevent because in netflix if you see uh we don't have this uh negative so on netflix if i go to the original netflix and if i actually show you all um it's gonna be like uh we can see it's actually on the same line it's not actually before this right so we need to be exactly like same like netflix now let's build our our thumbnail so instead of like hard coding thumbnails like this we're gonna because we have our movies right and typescript actually knows it's an area because we give a type so we can map through them we can map through our movies every single movie and we're gonna return a single uh which is going to be a single thumbnail and since we are mapping through them we have to provide a key right and the good thing about typescript is because we are mapping through it and we give a type we have all this really nice intellisense now with javascript you usually won't get this intention but since we already made these ties beforehand we're actually getting this beautiful intellisense we don't have to go and console log and check every time you know and right now we can see a lot of different different thumbnails right because of course there's gonna be more than one um and we're gonna send a single movie um like this and again because you're sending something which does not exist inside of thumbnail so we need to accept the movie as a prop right uh and we're just gonna say props and this by the way if you guys have uh have any questions regarding what i'm doing this because you might have learned props like this right that props like this and the way you access props is by just saying props dot whatever the thing you're sending in props this i'm doing is something called array destructuring sorry object destruction no area uh destruction so that's what i'm actually doing here so i'm just saying i'm destructuring my props right my props i'm destructuring them right away into a movie because i know what i'm sending is actually a movie right so i'm directly destructuring them uh i'm just gonna say props here and of course we need to create an interface um interface of props um and this is going to be a single movie and again we created a movie type uh in our typings file so we're just going to say this is going to be this is not going to be area this time because it's going to be a single movie right so we're just going to say movie and right now it's not erroring anymore now we can build our beautiful uh thumbnail component so we can actually create that so we go into our thumbnail right uh what we can do is we can create this thumbnail so we're going to have this div and we're going to have a nexus image component again the reason uh i'm using a nexus imager is because again we want to optimize our thumbnails because of course on netflix you majority you see all the thumbnails right so we want to make sure we optimize that so we're going to be using this nexus image component again i'll quickly just actually copy this because this is very uh this is just some source stuff which i already explained before so i'll just go to thumbnail and we're going to be using this nexus image let's go back uh to our app now and let's actually paste this so nexus image expects a source i'm using some template strings here to combine the the width of 500 here so i'm using a different uh base url so i'm not actually using the b if i go to constants um right now so this one this base url was actually different this space url is actually different so you're using a different uh url this time right and again i'm saying movie.backdrop part or postpod and the class name where i'm just saying i want some rounding object to be covered on a medium screen size i want it to be rounded uh instead of um completely and the reason we don't see it because we don't because it's layout fill right so we need to make sure the parent is relative or absolute in this scenario we're going to say relative we're going to say a height of 28 and we're also going to say a min width so instead of width we have to use minutes in this in this case i'm just going to say 180 pixels as soon as i do that boom look at that exactly our finished application right this is what we're getting i mean we're getting there we need to fix some ui stuff but we're actually getting there we're really really close right so uh we have to give minutes here and we have to say cursor pointer a transition duration of 200 so let's increase the transition duration and the timing function is going to be ease out uh and the reason we are giving this transition is because we're going to have a scaling effect when you hover over the in each and every single thumbnail but on a bigger screen on a medium screen we're increasing the height to be 36 and we're also going to increase the min width and it's going to be a custom value again of 260 pixels um and we're going to have that scaling animation it's going to be scale and it's going to say 105 and this is only going to happen on a medium break point by the way so right now it's not going to work because we are not on a medium break point so we only want to scale on a medium break point and here we go so all these thumbnails is actually scaling we can actually scroll through the thumbnails and if you're windows actually so we're actually having this uh really bad scroll bar right and we don't need that scroll bar now how do we remove scroll bar again we're going to be using a package called scroll bar height tailwind score bar hide because in there we don't have a utility class to hide it we can hide it using the normal css way but again uh it's really easy to use this package because it's really nice we can actually use and we are also going to be using one package for and as you can see it actually hides the scroll bar we're also going to be using one package for our custom scroll bar so that's going to be a different package so we're just going to copy this go back to our code just paste this in and go back to our app and let's just remove this scroll but the way we actually do this is first we actually need to uh add this to the plugins so again it's a plugin so make sure we need to add this so let's go to our table in config and put an arrow here and add another plugin and let's just save this now and now we'll have a utility class called scroll bar hide so what we can do is go inside of our row because remember it's going to be inside of a row and here the the container right this is our container so here is where we need to say scroll bar hide and we have this custom class now score bar height so if i actually save this and we go back we wouldn't see any scroll bar anymore you can see there's no scroll bar anymore so that scroll bar is actually gone so that annoying scroll bar uh we have removed it right and since you are actually here let's create this custom scroll bar as well uh so we can change this uh scroll bar to a custom scroll bar and the way we can actually do it is again install another package called uh scroll bar uh so it's called scroll bar tailwind okay it's this package tab and scroll bar and this is again a scroll bar plug-in again this is going to be a dev dependency so we'll just go here and install this again and again copy this uh plug-in thing here right again go back to our team in config and paste this as a third plugin here and this gives us and you can uh look at the documentation and there's a live version they have created so we look at the live version you can see you have these custom scroll bars uh you know instead of these uh default ones especially if you're on windows like i i hate the windows scroll bars the default ones they're really really ugly um so we need to change the scroll bar right so to change the default scroll bar on the this one right what we can do is we can actually go to our um we can go to our actually our um global css right and we can actually up change apply some stylings here inside of our body uh and the stylus we're actually gonna apply is we're gonna say uh so first of all we're gonna use important right and it's gonna give us these classes called so there's two thousand scroll bar there's a thin one and there's a thick one so let me use the take one and show you guys first uh so i'm gonna say important scroll bar right another class is scroll bar and it's called track right and i want the track to be transparent and the third one which you want to apply is scroll bar thumb and we want the thumb to be red of 600 just to give it a netflixy look you know um so i've actually saved that boom there we go we have the scroll bar and the reason i did this inside of the body is because this scroll bar is actually in the body right this applies in the body and right now it's really thick so to make sure that it's not that thick all we can do is actually make this thin and if i do that you have a thin scroll bar so we have our custom scroll bar and we remove the ugly default scroll bar and this is all working so it's really looking really really nice now um now all we have to do is actually uh keep working on this so and we need to use important uh so we need to use exclamation marks and what these exclamation marks mean is actually gives a important style insider so if i actually don't use this uh and if i do it like this you can see that this is not important anymore so we need to make sure to put this excellent whenever you want to put important all you have to do is before the styling you have to say an exclamation mark which means it's going to say it's important that's how you do it entailment so this is working now let's go back to our thumbnail uh sorry the row complement and let's keep styling this you know because we're actually not done with our uh with our thumbnail with our thumbnail you know so let's um in the thumbnail i mean we're done with our thumbnail but not the row component so let's go back to our row we're already inside of row now inside of our row um let me just quickly open my row and there's one more thing i missed actually which is um inside of our thumbnail uh because we're going to be fetching some information from firebase we want to have an additional type of uh document data right and it's it's not gonna it's gonna it's not gonna be there right now uh but just for reference i'm gonna keep it uh you know the reason is because uh this is gonna be from uh when using firebase so i'm just going to say when using firebase and i'm going to explain this later on why we need the document data stuff so it doesn't give us any errors so i'm just going to keep it for now just as a reference okay now let's get back to our row and for the row as well uh it's going to be the same so if i go to my actually if i go to my thumbnail i'm actually copy this quickly and go to row actually paste this in here and this is going to be an array here instead of just document data so now for our row uh what we want to basically do is we want to keep track of the scrollable thing right and we also want some spacing between uh each and every single row and we want to make sure to add these arrows so we can actually scroll through this scroll book and because this is actually really nice experience right the user experience increases rather than scrolling like this right so let's click on the buttons and you can scroll it that way which is really nice user experience so to actually implement that what we can do is you can go here on the top and we can have a row reference uh row reference right and we're going to be using a used ref hook which is a quite performant react hook uh you know when it comes to you when it's compared to use state um so if you have never used it it's very simple to use all you have to say is you have to provide a default value and again when we are using typescript so we need to provide what type of uh uh what type of uh because this reference is going to be attached to to this this container basically which means it's going to be attached to this container here right here so we're going to attach the reference to this container which is going to be row ref here so which means this is a div right and this is as we can see the type of this there is actually a html div element so that's exactly what i'm saying so i'm actually applying this type here uh because if you don't apply this type and when you're working with this it's going to error on let's actually see if it actually errors out and that would be a good use case then okay so now we can have another we need to have another piece of state that's going to be is moved um and what that will mean is that by default um if i go back to the application we can actually see it's not showing me a left arrow right it's only showing me a right one so by default we are not going to see any left arrow but only any scroll through um and is moved is going to become true so we're going to actually see the left arrow um and then so on like that and then we can scroll like this um and this is what we want here so we're going to have a piece of states which tracks that and we're going to say set is moved and it's going to say use state and again it's a boolean value so we're just going to say by default it's going to be false right and now we're going to have a function and now this function is going to run every single time when we click on either of these icons right so we have these icons uh what we can do is uh select both of them together have an on click and the function is gonna be called uh it's gonna be a function and it's gonna be an inline function like this uh and we're gonna say handle and we're gonna say handle click um like this and we're also going to say we're also going to send in a string so for the first one we're going to say send left and for the second i'm going to send right and the reason we are actually doing this because you're going to write this custom function here and we're going to say const handle click uh right because he created this function and for some reason myvs code is bugging out right now um it's banging out but so we have this handle click function right uh and it's going to be a function like this and it's going to accept a direction um let me see if it works right now it's bugging out right now i mean at this point if this if something like this happens what i like to do is i like to close uh my application you know just just close them so i mean closing is actually thinking so let me just quit anyway and let's just open this back again uh and let's see let's open them back in so if something like this ever happens you can do something like this and then run the server again so i'm just going to say npm run dev again uh because the server is going to be cut when you close the app right so now uh we we're getting errors here right but because it's not expecting any arguments right because using typescript so it gives us these errors and it's typescript is telling us that the function does not accept any arguments so we need to make sure that this accept an argument of direction and it's going to be string right because this is a actually a direction left or right where are we clicking right if you're clicking right you want to move towards the right right um and the first thing you're going to do here is we're going to say set is moved to actually true that's the first thing you want to say so you want to make sure that our set is moved to true because of course uh we want to make sure that it's true right because we're moving and then we're going to see we're going to use our row reference right and we're going to check the current right and now we're going to have something called a row reference dot current now what does row reference the current contain it it has these different values so if i actually just do row reference the current um this should actually give me uh i don't know why typesc is not giving me but what i'm going to do here is i'm just going to say const row reference dot current right and if i go here uh this should this should basically and the reason yeah so this is a really good point this is why we had the type in there the reason we are not actually seeing any types intellisense because when you're not using typescript we are using typescript but we are not providing types here this is the reason we needed the type right so if i put back that type again which i removed on for the reference error right it was html div div element if you remember right and now if i put dot here we get all the types we get the the good intelligence here so this is the reason we want to use uh types uh because of this specific reason so we can see what stuff we have inside of the uh objects and the functions you know now here i want to access two variables so if i press this now i want to access two variables here i want to access the scroll left one which is scroll left and we can see this is a variable inside of this uh current object and then we want to also access client width something called client width so when access these two and then i want to create a variable called scroll two and what this is going to do is going to actually check the type uh check the direction sorry check the direction if it's actually left let's say if the direction is actually left right then it's going to make sure to decrea to subtract the client width and i'm going to explain what the client width and the scroll left is basically otherwise it's actually going to add the client width right so this is what this scroll to variable is going to do and then the last thing we want to do is we want to say row reference because you already have that and then we want to say dot current and then we want to run this function called scroll 2 so it actually scrolls us right and scroll to function accepts two objects the first one is the options uh so you wanna say uh where you wanna scroll to right we can scroll to top we can scroll to left right people wanna scroll to the left right uh and the left needs to be the same uh the value we want to scroll uh towards the from the left side is going to be the same value as we calculated here right and the second thing here is going to be actually a behavior as you can see and the behavior means uh what type of behavior is it gonna be a smooth or is it gonna be an auto so we're gonna say smooth because you wanna smoothly move uh move towards the right like this right so this means there's a smooth behavior happening here and we're just going to quickly save it now let's first see if it actually works um and right now we are we have to fix the arrows as well because uh we messed up the arrows too uh so we need to fix up the fix up both of these arrows uh basically and both of these arrows by the way uh they're gonna be inside of this this big uh div right and they're they're gonna have some class names so we didn't yet finish this uh what we're going to do is we're going to have so first thing we can do is we can copy this board okay at the same time open our backticks and because we're going to use template strings mistake i forgot to copy them okay copy them now and now i can paste it there and what we want to actually do here is we want to open our um so we're going to type a variable here and we're going to check if it is actually moved right um which means i want this to be hidden and this is only done for uh for this one by the way so it's not done for both of them it's only done for the left error because you don't want to hide the right arrow right so we don't want to actually do this for the right one only for the left one right and let me actually see if i have right styling here because i might have messed up the styling somewhere um so i have the correct uh styling here um which is correct actually now yeah so actually i am seeing the button but i'm only seeing the right arrow right uh the the problem what we messed up right what we actually messed up is instead of saying right to we said left because it's position absolute here right so we need to say from right we want this to be two so they're actually on the same place right now and now we can see the arrows here and we don't see the left arrow by default because we're actually hiding it right now and now if i click on this here we go it works exactly like how we want it to work right you can click on these we just need some spacing between the collections themselves and the titles are not rendering properly so we need to make sure that the titles are there as well you see we've actually messed up my title somewhere and so we need to make sure that our titles are rendering uh properly as well so that's all we need to make sure um you know and we have all the styling in place and we can see it works exactly like that so what we actually did and what i actually implemented in this function is that we have a function called handle click right what we did is we got the direction depending on where the user clicks on the right or on the left we set our piece of state is moved to true and we get the current object from the reference uh and the reference means this reference this whole container div here this whole row um and what we actually did is we created a variable called scroll to so how much do you want to scroll to buy right so what we did is we you're taking the the width of this screen right the client width this is the actually the client width right this is actually the client width we're actually taking this and i actually clicked there click here uh let's say i click back it's actually decreasing by this many client widths right and that's what's actually happening every single time any quicker right and of course since there are no more uh uh and when the scroll left actually becomes like zero uh there's no more uh scroll left remaining here and the way we can actually check this out is by just saying uh so that's a console log right now and if i do console log of a row reference of row reference dot current dot scroll left right um and it's saying it can be undefined it can be null so we just add this optional here to make sure that it's actually not null and the other one we need is the client width right you can say client width and let's just save this and let's just go right now and let's see what the values values are so actually refresh right now and this is the reason it was saying can be null um and let me just quickly remove it refresh now um let me put this back again so right now we can see our scroll left is actually zero right and our client width is one thousand six hundred pixels this is the width of this whole uh screen right now if i actually click here and because our scroll left is actually zero right what happens is uh if you actually click here what we want to do is the left uh is scroll to and if you calculate the scroll to manually uh and we are clicking on the uh the right direction so the directions actually should be right right which means this condition should be true and scroll left is zero and the client width is 1672 which means zero plus one thousand six seventy two so it means the scroll to variable is going to be 1672 right so if i actually click here it means it's actually going to move by 1672 pixels right which is what we want right which is correct now uh again it's gonna be like um so again now right now when you click again it's gonna be this is uh this should be updated so if i click again uh this is actually not updating this should be updating um somehow it's not updating right now but what i'm trying to say again when i click here twice again what should happen is this should become double right um and when i actually click on the left side what happens is the direction is left which means the scroll left uh which was zero right now it should be one thousand six seventy two right uh because uh because think about it right because we added to the uh uh the scroll left for zero and when we actually scrolled to the right it became 1672 now it should be zero now it should be 1672 the scroll left i mean and the client width uh should be twice right and you can guess it right so you can guess the idea what's gonna happen so when you click back again so it's gonna again when you click back it's gonna actually do 1672 again so every time uh when you do this actually gets your current client width which is your uh current screen size which is what i explained earlier right so i refresh this now again uh if i uncomment this let's refresh this and if i uncomment this now you can see right now the client width is actually changed to 935 right if i do this again to a very small screen uh the client has again changed to 740 which means the client that actually changes every time and when we actually click here this is what happens what happens is actually moves you by that client width right that's what actually happens here every single time um so that's all we are doing so we wrote this custom function uh called handle click to make sure that this is actually scrollable um now let's actually fix the headings not displaying and some other stuff let's actually go back to our index and i think the section needs to have some sort of uh space wire right because we actually didn't do any space wire for our section here so for a section uh we only want the space right to be on a medium break point so we want to say space y of 24 for our section so actually do that here we go immediately we actually see the vhtc but we have some background issue now which we need to fix right so but right now we actually see the titles and everything clearly and we have it scrollable so this is working too so we're actually very close uh to the end of day one we're very very close and we we can work on the model tomorrow and the day two uh we can build the login and authentication and the model and then we can work on the stripe the third day you know so that day it can be a three-day build and everyone can understand all these things so we can work on the mobile stuff tomorrow but this is really really cool right so we can have this working this implementation is working everything is nice uh but let's fix this background stuff uh let's see why this is not actually applying uh let me go to global css let's see if we actually missed something here so if you uh if you actually go to back to our finish build we see we have a beautiful um we have beautiful background blending in right but for us right now that's not working right now uh so let me just go back to my go to my taven config in my finished build because i think we actually added a custom gradient uh but i think i didn't yeah so we actually added a custom gradient uh that that's why it's this this background actually not working because right now um here this background which we're applying this is not the background we should be applying so it's actually a custom background uh we applied uh and it's actually the netflix one so all we have to do is for that to make it work we have to go to our styles and our globals and we have to get this linear uh sorry not globals uh my bad we have to go to our table and config and we have to get this background image and we have to make sure that it's in the extend uh object so i'll go into my table uh and inside of my x stand here we're gonna have this background imager and this is going to extend the tailwind default background image and as soon as i actually save that look at that actually blends in so before this is actually like this and as soon as i actually add this and here we go it's actually blending and this is uh what the netflix uh they're actually applying to blend their banner image uh with the collections here so we don't see the huge color background difference here you know and it's actually blending in very nicely you know and this is the background so now if i actually hover over this inside of my index page you can see this is the custom background which is applying not the then one anymore and i don't think we need these two as well so we can just remove them as well uh those two colors so we don't need them because we have a custom now so we have this complete this is done guys so we are actually done for day one uh this is completely responsive you know if i actually open the responsive tab i can check it on different screen sizes different phone sizes and it's completely completely responsive right we can actually say ipad you know this is an ipad this is how it looks on ipad can make it bigger screens iphone it's completely responsive we have all this all all the server side rendered and i need to remove my console lock from the uh the row component uh because this is undefined so we need to remove that um so let us refresh so we can see every time we refresh this is actually server side render so there is no sort of loading right there is no loading which is happening so these are all server side rendered thumbnails server side render thumbnails you're getting right tomorrow we're going to be building this modal functionality so when we actually click here the beautiful model pops up and a trailer is playing and we can actually add it to our database and we're going to be actually uh connecting it so actually before adding this to our database we're actually going to be connecting and we're going to be writing our custom hooks guys so right now today we didn't do any custom marks but tomorrow's build we're gonna be writing our own uh use authentication hook which is gonna be a completely customized hook we're gonna be creating so if i actually show you all um it's right there in the hooks here so it's called use odd.tsa this is going to be a beautiful custom hook we're going to be creating and it's going to be really really powerful and all this will be done in typescript by the way so we'll have these custom hooks right um and we're also going to be connecting to firebase and one more thing before starting uh tomorrow's uh so all of you are prepared for tomorrow um what we what you what i want all of you to do it's a bit of a mouthful sorry uh is that create a project so if you have never used firebase uh go to console.firebase.google.com and create a new project add a project right actually let's just do it i'll just do it um right with you guys or actually i'll just do it tomorrow you know starting tomorrow's day with this so create a project and if you can upgrade to a blaze plan so if you have watched existing videos just make sure we are going to be needing the blaze plan uh for the striped firebase extension to work because we're going to be using the strike firebase extension uh but i'm going to i'm going to be showing everything from scratch so if you don't know what i'm talking about just wait till tomorrow and but just make sure that you're going to be needing your card uh it's not going to be charging anyone it's it's completely free but you need to enter your card information in order to upgrade to a blaze plan but it's going to be free it's free of cost it's not going to be charging so that's going to be in day two tomorrow but yeah today uh if you have if you're watching till now and if you reach this till the end we have done an insane job today guys this is really beautiful we have created this beautiful ui our homepage ui completely responsive completely server side rendered completely dynamic you know um a really really beautiful you know yeah so the last thing we're going to be doing today is we're going to be actually deploying and there's so many things that i just completely forget for god we're going to be deploying this um and then we're going to be continuing with this build tomorrow on so we can actually deploy this and you'll have a url of your own so you can show it to anyone or add it in your portfolio so let's actually deploy this now let's go back to uh let's go to github okay and what we want to basically do is we want to create a new repository and i'm just going to name it netflix our redesign a netflix clone or yt it's going to be for youtube uh and let's just keep it public and i'll just create repository okay and i have this this command so after creating a new repository what we want to do is we want to copy this command go back to vs code and just make this bigger for now so we can actually see uh and we want to actually paste this command right here i'm going to paste this command right here and this is what this is going to do is going to attach this repository it's going to link over this repository to the code and the next thing we want to do is we're going to say git status so if you do get status we have all these red files right so you want to commit these to the staging area and you can either use this and how i'm actually getting this is by using something called git lens which is an extension you can install uh you know you'll get this source control thing which you can do with github so i like to use the command line but you can do it like this way too but i like to use this so what i'm going to do is i'm going to say git add dot and what dot is going to do is going to add all the files to the staging area and if i do get status again you will see all the files are green now right now what we can do is we can say commit and can say day one complete right day won't complete get commit i'm just a message they won't complete i'm gonna comment all these files and as soon as i come in you can see the 24 changes it was actually showing us it's gone now so they're all committed now the last thing we want to do is we want to say get push right and right now we want to copy this exact command and we are already on the main branch we can push us to the main branch and as soon as i push this refresh it here and boom here we go we see our application so this is what we want to do next thing we want to do is we want to actually deploy this we're going to you're going to be using versailles to deploy this project so if you don't if you're new to whatsapp again create an account log in with your github authenticate with your github then just click on new project and it's going to show your latest repository which is the netflix one yt for me so i'm just going to import this okay and we're going to be having this environment variable now this is very important so many people actually miss this part so we have our environment variable and it's going to be different local and it's going to be different production so on production versailles is going to handle this for us so when you're deploying this we have to before deploying we have to add this next public api key right here nicely api key right here and we have to add this okay so we click on add and now we just have to click on the play we don't want to change anything so because it detects everything and it optimizes the build for you so all we have to do all we want to do here is just we're going to click on deploy so when we click on deploy this is going to actually optimize this bill you know and you can view the logs here this is going to optimize the bill and it's actually going to deploy and give a really nice url uh which you can share and uh then we're going to deploy this every time after we uh complete these things so let's wait for it it's going to it's going to take its time deploy and the versailles is really good for automatic deployments because what happens since it's linked with our github account every time when we push something to the main branch what's going to happen is actually automatically going to deploy and trigger a redeployment on versailles um every time you do something so that's really a cool about ourselves you know and we can actually that's really nice too you know the interface looks really nice so you can see it actually optimize and because we are using typescript if we run into any type type errors it's going to error out the deployment actually tell us to and here we go boom is applied and you see the congratulations go to our dashboard this is where our dashboard and you see we get three different urls so if i go to deployments uh if i go to inspect deployment here in the assigning domain section you get three different urls now we want to be using the custom domain right you don't want to be using the auto because this is going to change every time you deploy so we're going to be using this custom domain right so let's actually go and boom here we go guys congratulations if you reached this point we actually deployed our beautiful application a really really sick ui completely responsive you know and it's the end of day one guys the end of day one and we're gonna be building the other features of the application from tomorrow so yeah this is uh deployed this is done and there are no errors so it's you're done in one go right um so let's i'll see you guys tomorrow then for the authentication portion this is going to be super important so stay focused and and if you can try to upload upgrade to the blaze blind today and yeah i'll see you all tomorrow um goodbye guys

Channel: Ali Codes

Views: 191,892

Keywords: reactjs, netflix, tailwindcss, firebasev9, recoil, firebase, nextjs

Id: cwqNAkwhKqw

Length: 150min 56sec (9056 seconds)

Published: Thu Apr 14 2022