React Netflix Movie App Design Tutorial | React UI Full Course for Beginners

hello my friends today we are gonna create an awesome netflix design using react we have a home page transparent topper when i scroll it's gonna be black and here is our featured movie it's for the home page but if i go to the series or the movies page we will see this title and select button and there are amazing sliders here when i hover any movie is gonna be bigger and show us trailer and movie information here and here is this slider by the way i didn't use any library it's totally pure react slider and this is the video page that we can watch the movie and finally the register page and the login page it looks amazing and don't forget in the next video we are gonna create our own api we will be able to create new movies new lists update and delete them using our admin template and if you didn't watch this admin dashboard tutorial after this video you can check that out and after admin operations finally users can register log in and watch videos it's gonna be a complete netflix club so stay tuned and if you want to see more tutorials like this you can like the video and subscribe to the channel i hope you will enjoy if you are ready let's get started okay i opened my new folder and inside i'm gonna create my react application to do that you can write here mpx create react application but if you do that there will be some unnecessary files here such as icon logos service workers and any other unnecessary css files and html codes but i have a solution for that in our youtube channel github repository you can find the branch which is react mini and inside as you can see there is only app js index jazz and they are totally clean and here we don't have any unnecessary files and insights so it's the minimal version of our react application so basically you can come here and fork this repository if you want to work on github but also you might want to work locally in this case you can just pull this branch that's copy our repository url here and i'm gonna write git clone and if i paste my url directly it's going to download all these branches but i just want to download this one so i will come here and say single branch and i'm gonna write my branch which is react mini and i wanna clone this inside this folder so i'm gonna write just dot here and enter as you can see it's ready but we don't have node modules let's install them if you are using npm you can write npm install or if you are using yarn you can just say yarn and after that it's gonna install all our libraries let's do that and it's ready as you can see our node modules folder here so it's ready to run let's see our app.js here there is only a lower text here and let's start npm start or yarn start and hello world is here perfect so firstly i want to change this font family let's come here phones and google.com and i'm going to use this roboto font family if you want to you can change it i will choose just couple of them it's enough writing let's copy this link and paste inside our index.html inside public and index.html i can paste here to use that family let's come here and copy this font family and paste inside style you don't have to write your style you can also create here for example app css doesn't matter let's close this let's see okay perfect so what i'm gonna do is installing sass in this video i decided to use sas for our css files let's come here and open new terminal and i'm gonna say yarn add and says so in this case it's not gonna be css file it's going to be scss file ok by the way i know some of you recommend me to use tailwind or any other css frameworks we are gonna use all of them just don't worry okay right now i'm gonna create my first page it's gonna be just home page let's come here in the source new folder and i'm gonna say home page or just home and inside this one let's create our main javascript file which is home.jsx by the way i'm using jsx instead of js that because it's really easy to use html inside javascript file i highly recommend you to use it and one more thing you can use it's an extension let's come here and this one let's check here as you can see there are a lot of shortcuts here you can check them for more information basically it allows us to let's close this it allows us to create our functions easily for example if you say rfc and enter as you can see it automatically created our function if you want to use our own function instead of normal one you can write r a f and c e react arrow function component and export as you can see perfect let's write here hello and in the app jazz i will delete this and write home and i'm gonna import this component also let's see as you can see this is our homepage perfect right now i'm gonna choose a background color it's gonna be our main color so we can use it in every components and pages so i'm gonna create a variable inside my main css file but before let's import this css file after this or before let's try it before i'm gonna say import app and scss and i'm gonna come here and say root which is accessible inside any component and i will say main color and it's gonna be zero b zero b and zero b okay that's all for the css file let's close it and let's try inside our home jazz i'm gonna close this also and here i will say class name it's gonna be just home and i'm gonna create home css file home.scss of course i should import it first by the way you can delete this import react from here that because after react 17 you don't have to write this it's gonna import it automatically so i will say home dot scss okay so i can use my new class name here i'm gonna say background color and i can use my main color to do that i'll say wire and main color let's see as you can see it's kind of black actually it's exactly the same color in netflix.com so we are gonna be using this color let's close them and i prepared one more thing here and this is material icons it allows us to use any icons inside this library it's really rich library and it's really easy to use so how i'm gonna use this library i'm gonna install two more libraries here i will say yan add first one will be material ui and icons and second one material ui and core let's install them okay they are ready right now we can use any of these icons for example this one let's try you can import it here but actually if you open attack and close and just delete last letter and write again you can see this icon here if you click it's gonna import this component this icon component let's save and see i'm gonna close this okay we can't see that because it's black also if i write here for example color white and it's here perfect so let's delete this and this icon i'm not going to use it here okay let's decide what we are going to need inside our homepage first one will be our number and after that we are gonna add here a featured movie and after that our lists so let's create our number inside source i'm gonna create new folder which is components and inside a new folder and number or top bar whatever you say and inside this let's create our jsx file and css file okay i will come here and create my component r a f c a and here i will say number let's call this component here i will say number i import it here and i'm gonna save and let's see of course i should make it white let's import our number scss and i'm gonna give a class name it's gonna be nabar and inside my css file i will say color white okay it's here perfect so firstly i'm gonna divide this number first one will be our left side which includes our logo and some links here and second one will be our icons and profile picture before doing that i'm going to create another container here that because i'm going to give some padding let's do that i'll say container and inside it's gonna be left and right part and inside left what i'm gonna create an image which is our logo i'm just gonna paste netflix logo here and after this image i'm gonna create five links but i don't recommend you to use anchor tag here that because we are gonna be changing after installing react root rom so i'm gonna just use spam i will say home page sirius and movies i'm gonna say new and popular and last one will be my list okay if you look inside as you can see it's really huge image and after that are links here let's make this image a little bit smaller i'm gonna open my css and inside remember what we have we have a container and inside our image and i'm just gonna say hi 25 pixels and let's see right now okay perfect first here i'm gonna change font size of this number it's gonna be 14 pixels and for this container i'm gonna give some padding for left and right it's gonna be 50 pixels okay let's create our other items here i will come and for this right side that's close here i'm gonna use two icons let's come here and material ui icons and my first icon will be search icon this one i will copy and paste here as you can see material uin icons and let's create another span it's gonna be kit and after one more icon it's gonna be notification this one looks good let's copy this and paste here i'm gonna import from material ui let's see actually okay they are here but i want to separate them they are not going to be in same column to do that i will say for this container display flags and i'm going to center them vertically align item center and perfect so how i'm gonna separate them only thing i should say is justify content and space beat me so it basically moves item to very left side and right side perfect so what else i can add here is gonna be our profile picture and one more icon which we can hover and see our settings and log out button so let's add them i will come here and one more image and i'm gonna paste my image here and after that one more icon let's write here arrow this looks good let's copy and let's see oops okay it should be inside this div okay perfect right now are all elements are ready i can just change their styles firstly i'm gonna give some height for this container i will say height 70 pixels okay it's bigger right now and for left and right side i can make them flexbox again and center these items vertically so i'm gonna write left side and this is gonna be our logo so i'm gonna move this inside and i will say display flags and line item center ok perfect our profile picture is bigger right now that because i move this image inside left side let's arrange other one also i will say right and display flags align item center and inside image which is our profile picture which will be 30 height will be 30. i will give some border radius it's going to be just 5 pixels and i'm going to say object width color let's see right now okay perfect after this object fit it's gonna cover all this container it looks really nice maybe i can give cursor pointer okay right now let's handle this spans inside left side after image i will say span and i'm gonna give some margin for right side and i will say cursor pointer i can give margin for here also let's come here margin right 40. okay perfect it looks really nice so what about these icons i'm gonna give them class name for this search and notifications and arrow drop down i will say class name and it's gonna be just icon so let's use it after right side icon i will do margin for left and right it's going to be 0 from top and bottom and 15 from left and right and of course cursor pointer let's see okay have some so what about our menu here when i hover this i want to see a container here and inside our settings and logout button to do that i'm gonna cover this drop down icon so i will say profile and inside this container i'm gonna add my icon and also an another container let's say options and inside two buttons two links it's gonna be settings and logout by default i'm not supposed to see them and when i hover it's going to be appear and we are going to be able to click this settings or logout button let's come here as css file and after image let's write here our profile container and inside our options by default it's going to be displayed none and if i hover this profile let's come here and write our sudo class it's going to be hover and it's going to affect these options container in this case i will say options and it's not gonna be displayed on anymore it's gonna be display flex i'm hovering as you can see perfect but they are in the same row i'm gonna change this display flags direction it's gonna be column okay perfect but as you can see when i hover this icon is moving to up that because they are in the same container i'm just gonna separate these options it's gonna be oops position absolute right now it's independent as you can see let's give some background color for these options i will say background color and it's going to be our main color and i'm going to give some power to reduce 5 pixels okay it's better but i can give some paddings for this spans i will come here and padding 10 and cursor will be pointer okay have some of course you can make it a little bit fancier but it's totally enough for now it's not that important i want to show you one more thing let's come our homepage and after number i'm gonna write some random sentences here lorem and i'm gonna duplicate this okay they are here but we can see that because they are black also but it's not important important thing is our scroll here if i scroll this as you can see this nubber is leaving on the top but i want to make this fixed position so it can stay on the top all the time even if we scroll this page down let's do that i will come here sorry css file and for this number i will say position fixed and i'm gonna give my position which is top zero let's see right now oops it comes here let's write with a hundred percent okay right now i'm scrolling and as you can see it's always here perfect by the way i wanna give this set index 999 that because i don't want to see any element over this null bar okay so what else we can do we can arrange this color but in this black background demonstrating this is not a good idea so i'm gonna add an image here let's come and copy this image and paste after this number but maybe let's write with a hundred percent okay we can see better right now as you can see we don't have any background color but i don't want to make it totally transparent to do that i'm gonna add some linear gradient here this bottom side will be totally transparent and when we move to top it's gonna be a little bit darker so let's do that i will come here and for background i will say linear gradient and to top and in the bottom it's going to be totally transparent it's gonna start from zero percent here and after fifty percent it's gonna be a little bit darker so let's add color here rgb color it's going to be 0 0 0 and opacity will be 0.3 and it's going to start from 50 percent let's see oops nothing has changed that because there is a comma here let's delete it and try again as you can see it looks much much better let's make it more realistic like the actual netflix website when i scroll this i wanna make this background black and when i scroll to top again it's gonna be transparent so how i'm gonna do this firstly i'm gonna use use state and when it's on the top it's gonna be false when i scroll this scroll bar it's gonna be true and when i go back it's gonna be false again so in this case when it's true i can make this background color black and when it's false it will be again this transparent color so let's do that if you are confused you will understand better right now don't worry i will come here and create my use state i'll say const is cruelt and set is screwed it's gonna be use date and initial state will be false because it's gonna be on the top in the initial state that's right here console log let's write here window and page y offset i'm gonna open my console and for here as you can see it's zero let's make this smaller okay but when i scroll this it's gonna be more than zero we can't see right now that because we are not listening this method but it's gonna be for example here a hundred two hundred four hundred something like that and when i scroll to top again it's gonna be zero so we can use this method let's copy this and delete this console log and i'm going to use a window method i'll say window and unscrew basically it's going to listen our scroll on the window whenever we scroll to application it's gonna run this function so i will say set is scrolled i'm gonna set this again but i have a condition here i will say if windows page y offset equals zero it means it's on the top so it will be false so if it's more than zero it's going to be true and i'm going to write here a cleanup function otherwise it's going to be a loop so i will say windows on scroll it's gonna be no oops not windows window okay let's see our is scrolled so you can see better i think console lock and is scrolled let's see as you can see it's false i'm scrolling true and i'm coming to zero again and it's false true false true false perfect let's delete this and here i can write another condition i will say if is scrolled it's gonna be number and scrolled if it's false it's gonna be just number which is transparent right now let's save this and here let's create our other class name it's going to be scrolled and in this case oops it's not dollar sign it's going to be and sign and here background color and it's going to be our main color wire and main color as you can see it's black i'm going to top it's transparent okay perfect so we've finished our top bar right now i'm gonna create a featured movie component here okay i'm creating another component let's close them and here it's gonna be featured i'm gonna create my jsx file and scss file and let's create our function rfc or arrow function doesn't matter i'm gonna import my css and here it's gonna be class name featured and inside let's create our image it's gonna cover this component i'm gonna use same image here as we used inside our profile picture let's see okay we can see sorry because we didn't call inside our home right now i can delete this text i will delete and call my featured component and enter oops i couldn't call components and featured why i can't interesting let's copy and paste this and change this it's going to be featured and this folder of course lowercase ok let's see by the way i will delete this image also because it's inside our featured component i will save and it's here perfect so what else i'm gonna add inside this component it's gonna be our information here title but it's not gonna be text it's gonna be image like in the netflix and after that we are gonna have some description and play and more information buttons let's do that [Music] after this image i'm going to create another container it's going to be info and inside this info i will create another image which is our title i'm gonna copy my image and paste here and after this image let's create a span and it's gonna be our description i'm gonna generate random text and after this two buttons but before let's create container buttons because i'm gonna make it display flex and after that first button which is play and second button which is more information let's say more and inside this let's search for another icon okay i closed let's open again it's gonna be play okay this one i'm gonna paste it here and it's gonna be a text which is play and i'm gonna do the same thing here let's search for information info and this one is good but i wanna make this outlined let's search for outlined okay perfect i'm gonna copy and paste here and i'm gonna import and one more thing span oops and i will say info let's see okay it's here of course i'm gonna make this info position absolute and move this here but before let's arrange this featured component style i will come here and i'm gonna close and open this in the second tab and we can see better i think okay let's take care of this container it's going to be not full screen i just want to end this after maybe 90 percent here so i will say height 90 vh as you can see it ends here but we still see this image here that because we didn't give any size for this image we are gonna do that but before i will say position relative that because our info will be position absolute so right now right now i can change my image size so with a hundred percent height a hundred percent and i will say object fit it's gonna be cover okay let's move this info here i will say info and i'm gonna give some bit it's going to be 35 percent and position will be absolute and let's arrange this position it's going to be around here 50 pixels from left and a hundred pixels from top so it's gonna be somewhere here i will say left 50 and bottom is going to be a hundred perfect i will say color white okay nice so what about this image i will say with 400 like that but as you can see this text moving here so if i make this container display flags and for the x direction column we are gonna fix this i will say display flex flex direction column okay so for this description inside our info i will give some margin from top and bottom 20 pixels and from left and right will be zero and font size a little bit bigger actually it's same font size so we don't need to change it so what else we have here our buttons i will make them display flags and for each button i will give some padding 10 pixels from top and bottom and 20 from left and right and i don't want any border i will delete it none and border radius let's say oops for the radius 5 pixels okay but they are not centered as you can see let's center them display flex align item center just five content center okay perfect i can increase font size maybe 18. and front weight will be a little bit bolder okay i will give margin here let's say margin right 10 pixels and of course cursor pointer ok perfect but i can change these colors for play and info inside this button i will say if it's play make it white and text color will be our main color like that and what about this it's gonna be gray let's say if it's info background color will be gray and text color will be white oops it's still same okay it's not info it's more let's change it okay i have some so i can separate this icon and text as you remember we have span here so i will say span inside this button it's going to be margin left 5 pixels perfect it looks really nice so one more thing i can make here for home page it's totally okay but when we click this series or movies we should see here our title series or movies and after that we are able to choose our genre so let's do that i'm gonna write here a group it's gonna be type if there is a type like series or movies we are gonna see this information also so let's write here if there is a type right here another elements i will say category and inside let's make it smaller and inside this category it's going to be our title movie or series i will say span and another condition here if type is movie our title will be movies if it's not it's going to be serious or tv series whatever you say and after that i'm gonna create my options i will say select name will be genre and let's write your genre also and after that my options first option will be by default just genre so it's not gonna choose anything we can delete this value it's gonna be genre let's see actually if i open my browser we can't see anything that because we don't have any type let's come here for these features i'm going to say type it's gonna be movie let's see again as you can see it's here of course we are gonna change it but at least we can see okay and for other options i don't wanna waste any time i just wanna copy and paste adventure comedy crime and others let's come here for css and let's go to the top and after this featured i'm gonna write here my container category position will be absolute i'm gonna change my position top 80 and left 50. okay and font size for this title will be a little bit bigger and font weight let's say bolt i will say color white and i will say display flags and align item center so it's gonna be centered okay perfect and for this select i can change style inside category i will say select which is here i'm going to say firstly cursor pointer and background color our main color and i'm gonna give powder it's gonna be one pixel and solid and byte let's see okay it looks okay but we can't see this text let's change it color will be white and i'm gonna give margin between text and this select i will say margin left 20 pixels and i'm going to give some padding ok it looks awesome [Music] so if i change this type inside home page if i say sirius it's gonna change if i don't write anything it's gonna be our home page perfect it looks pretty good so we finished our featured movie also let's take care of our movie lists so let's create another component i'm going to close this and here and for components new folder and it's going to be list let's create jsx and scss and i'm gonna create my component and of course css file here list.css and this is going to be our list oops class name and list so let's call this list here after featured i will say list it's gonna be inside component and lists okay actually i can add two more or three more lists and let's save and see as you can see they are here okay firstly we are gonna have this title for example action movies comedy movies or your list something like that and after we are gonna have a wrapper that contains our movie items and arrows here for the left side and right side and after that it's gonna be one more container and it's gonna include our movies showing like that can be confusing but when we write this you will understand better let's do that firstly i will say span and it's gonna be list title i will say continue to watch and after that wrapper and we are gonna add two arrows here for left and right side let's say arrow and this one let's copy and paste here i'm gonna import this from our material ui and one more this is gonna be right side let's import this also and between these two arrows we are gonna have another container let's say just container and it's gonna include our movies let's actually create another component and add them and we can see better i think i will say list item and my function my component list item dot jsx and css and i'm gonna create my function and css file and it's going to be list item let's write your item and for each item i'm gonna give some size don't worry i'm not gonna work on this item right now i'm just gonna give some size and we can see items inside this container better so i will say 225 pixels and height will be 120 pixels and let's say background color white and that's all i'm gonna close them and here let's call this component list item okay it's not here i'm gonna call this manually i'll say import list item from list item and list item okay let's see [Music] as you can see they are here but there is only one item here i'm gonna duplicate this that's enough i think let's see okay they are looking like that that because we didn't give any black stocks we are gonna take care of this right now okay i'm gonna open my css here and let's close this explorer i'm gonna start with my main container which is list firstly i'm going to say with a hundred percent and i'm going to give some margin top and for this title i will say color white and font size will be bigger and phone tweet 500 see okay it starts from zero i'm gonna give some margin margin left 50 pixels okay so i'm gonna do the same thing for container also it's gonna be starting from here i will say wrapper and inside container it's going to be margin left 50 and display flex okay they are horizontal but there's a problem here that because it tries to fit them inside this container that because our container is a hundred percent if i write here width and maximum content it's gonna be the exact size but maybe i can give some margin here for this list item let's say margin right five okay it's better right now and as you can see i can scroll to right to prevent this i should prevent the overflowing let's come here for home page i'm gonna say here overflow hidden and as you can see we can see the beyond of this right side perfect but when we add here arrow buttons here and here when i click we are gonna move this container okay let's close this and this item and let's give class name for this arrows i will say class name it's gonna be slider arrow i will do the same thing for right side by the way i can give second class name it's gonna be right and this is going to be left so let's arrange them i will say slider arrow and i'm gonna give some bit and height 50 height will be a hundred percent which is whole container here and after that i will give some background color it's going to be something like black but a little bit smoother like this and i'm going to give opacity here it's going to be 0.5 so it's not going to be totally dark and after that let's change this arrow colors it's going to be white as you can see they are here that's how i'm going to center them firstly i'm gonna give position absolute for them that because first one will be here and second one will be here on this image so to do that i should say position absolute and don't forget if you are using position absolute the parent should be position relative so in this case let's see first one is here and second one is under this first one that's the reason we see this as gray so i'm gonna change this position for left side left will be zero and for right side right will be zero right now it's here but we can't see let's make this list item maybe red okay we can't see it that because it's under this item i think if i change the set index let's try i hope it's the reason i will say knight to nine okay it's here perfect but as you can see they are not centered to center them if you are using absolute you can use this solution from top it will be 0 from bottom it's going to be 0 again if i say margin alter they are going to be centered perfect i will give cursor pointer for them okay nice okay let's change this back it's going to be white [Music] okay nice for this container i can give some margin here let's say margin top 10 pixels okay right now when i click this button or this button this container will be moving let me show you how we are going to do this if i write here transform and translate x which is on the x axis it's gonna be let's say a hundred pixels right now it's moving to right if i say two hundred three hundred okay perfect so we're gonna use this but in the initial state it's gonna be zero it's gonna stay in the zero point when i click this it's gonna move to right when i click this it's gonna move to left side so how i'm gonna do this firstly i'm gonna add one click method for these arrows for the first one it's gonna be on click let's close them um click and it's going to be handle click function and for parameter i will say left because it's the left side of course if you are giving parameter you should call this function in the arrow function and i will do the same thing for right side i will copy this and here for the right side and parameter will be right okay of course we don't have this function let's create it after this list i will say const handle click and it's gonna take a parameter let's say traction right or left and my arrow function right now i'm gonna use some basic math one item has 225 pixels width and additionally there is a space here which is 5 pixels so in the total it's 230 pixels so when i move this container for example when i click it should move to 130 pixels so let's do that i will say if direction is left i'm gonna call this container but how i'm gonna use it i don't want you to use any vanilla javascript code here like element by id or curse selector we are using react you never ever should use it so how i'm gonna select this container it's really easy we are gonna use use ref rook i will say const list ref i'm gonna call my use draft hook let's import and only thing i should do is using this graph here i will say ref it's going to be this draft by the way there is a mistake here because it should be string and here also okay and right okay right now i can use this container it's exactly the same thing like query selector or element by id so i'm gonna use this reference here i will say list draft and current and i can change its style style and transform remember what we did in the css file i'm gonna do this same thing here i'm gonna open backtick and i will say translate x and it's going to be 230 pixels let's try i'm clicking okay nothing has changed that's because my mistake here translate i'm clicking again as you can see it's moving 230 pixels perfect but there's a problem here if i click again it's still in the same place because our position is 230 pixels here it's not changing it's still here so additionally i should add this distance also so how i'm gonna find this distance i'm gonna use another method here let's say that distance it's going to be this trap and current of course don't forget this current it's really important to find how we are from this zero point there is an awesome method its name is a little bit interesting i will say get bounding client rect and it's gonna be x but before let's see actually what we have here i will just console lock this i will open my console and i'm clicking and as you can see it says 280 pixels from this zero point and 330 pixels from this zero point on the top and it gives your component width and height and it's really really useful function so we can use this x it shows 280 that because here is 230 and remember our space here 50 pixels it counts it also so if i subtract this space it's gonna give me the exact position from this point so let's do that i will say for x and at the same time it's gonna be minus 50. so right now we are ready to use this point if i copy this and here i'm gonna use this distance also i will say 230 and also this distance and here we can write pixels let's see right now i'm clicking as you can see it's moving again and again perfect so i'm gonna do the same thing for right side let's paste this here it's gonna be right and this time it's going to be minus 230 that because it's gonna move to left side let's do that actually let's refresh the page i'm clicking and as you can see this item is here and it's moving but we can't see properly that because we don't have any animation let's add here and we can see better i will open my css and for this container i'm gonna add transition animation i'll say all one second and is and if you don't know anything about these transitions and animations i will have some course you can find it in the description below there is more than 30 projects and you are gonna be animation master after that okay let's see right now i'm clicking and right now we can see much much better but there's a problem here even if we finish the movie list here i can still click let's close this and here let's refresh again i'm going to show you something as you know this is our first item which is item 0 in the array and this is 1 2 three four and five i will say if the item index is zero i'm not gonna allow to click this button anymore that's because here is space and for this button we have one two three four and five items and after that i'm not gonna allow to click this button because we don't have any more so i'm gonna demonstrate it right now and you will understand better i'm gonna create slide number here i'll say const slide number and set slide number and in the initial state it's gonna be zero i will say zero and i'm gonna use this slide number inside my condition i will say if it's left and at the same time slide number is greater than zero i can run this operation but at the same time i should decrease my slide number i will say set slide number and it's gonna be slide number minus one that's because we are going to write so it's gonna look here this is zero if i click it's not gonna move anywhere let's do the same thing here i'll say if slide number is smaller than five we can click this button and i will do the same thing and but right now i'm gonna increase this it's gonna be plus let's see right now i'm gonna refresh i'm clicking it's number one number zero and i can't click anymore and right now i'm clicking here by the way did we change this item numbers oh no it should be 10 item here 1 2 3 4 5 6 7 8 9 10 because every list includes 10 items let's refresh again i'm clicking keep doing this and after five we finished our items i can't click anymore it looks amazing and by the way it's not the only solution of course when you click this you can move five items from here you don't have to do this one by one and i didn't want to show you any ready to use packages or libraries that because it's easier than you think i think of course if you want to you can use it's your choice but i just wanted to show you okay but in the netflix website we don't see this left button here only when we click this one it's getting appear so we can do this also it's just for bonus you don't have to do this but i'm gonna create another use state here and it's gonna be is moot i will say set is moved which means if we click this button this right button or not and initial state will be false because we didn't click anything and here when we click this button any of them doesn't matter it's gonna be true and i'm gonna add a condition for my left arrow button i will say style and display i'm gonna say if is not moved it's gonna be no let's see i will refresh as you can see it's not here i'm clicking and it's moved is true right now and we can see this left arrow also perfect for others okay perfect but i wanna make this more professional when i look at youtube tutorials and you have it is they are only showing you how to make this item bigger but i'm gonna show you more professional it's gonna be like real netflix application we are gonna show here a video like dislike buttons and after that description and genre so let's do that let's close them and for items i'm going to add here an image let's paste my image let's see okay but it looks a little bit big we are going to change this size let's come here the css file let's change this background color actually it's going to be our main color and overflow will be hidden and for the image i'll save it 100 percent height 100 percent and object bit will be cover let's see again okay it's much much better i will refresh okay so what else we need here we need some information by the way i can add cursor pointer here okay helps right now i'm gonna add my information after this image i will say item info and inside first we are gonna have icons let's create another container icons and we are gonna have four icons here let's check here it's gonna be first play and it's going to be filled here let's use this one we use this before you already know i'm going to import it from material ui ok i can't i will do this manually i will say import play arrow from material ui and icons okay so three more it's gonna be add button and like and dislike buttons maybe outlined okay this is good and one more it's gonna be dislike i'm gonna copy this and paste here okay let's add them and add thumb up and thumb down okay okay we can't see anything that because we said overflow of hidden and it's under this image and we can't see if i come here and remember our main container [Music] i will say if we hover this container it's going to be bigger with 325 and height let's say 300 and i will save and we can see better okay as you can see this image contains all this container that because we set a hundred and a hundred i can change this if we hover we are gonna affect this image also it's gonna be height 140. it's going to be smaller okay perfect and our icons here let's change this font color it's going to be white and right now we can see them perfect and after these icons i'm gonna add here my movie duration and maybe age limits and date and after that some description and finally our genre like comedy actions whatever so let's do that after these icons i'm gonna create another container item info and i will say top i'm going to create span let's say 1 hour 14 minutes and one more it's going to be h limit and finally here and i'm gonna create a class name for this h limit that because we are gonna give some border i will say limit and after them another container is going to be description let's write here some random sentence maybe just like here okay and finally it's gonna be genre i will say action okay let's close here and open our css file in the new tab and i'm gonna shrink this also okay so when i hover this i wanna give some bulk shadow for this container that because we cannot distinguish between background and this container so how i'm gonna do this i will write here box shadow generator and inside this website our second one doesn't matter let's write here our main color zero b zero b zero b and background is same also oops okay i will preview as you can see it looks like that right now we can change this color let's say white and here you can arrange this box shadow like that one or two and for spread and blur and i'm gonna reduce this opacity it looks okay i think so right now i'm gonna copy this and paste after hover let's see i'm hovering but maybe let's make it darker and this two maybe let's say zero it's gonna be equal and i'm gonna copy this and i'm gonna change let's see okay it's better writing at least we can see the difference between this and background okay but i don't wanna see them like that it looks really strange all items will be in the same place but this one which we hover is gonna be bigger and we are gonna change position also so let's do that after hover i will say position absolute and top will be minus 150 let's see okay top position is perfect but what about this left and right side how we are gonna center this container so i'm gonna do this similar thing which we have done for this slider this time we are going to use these indexes 0 1 2 3 something like that and we are gonna multiply by item width which is 225 but i should consider something else firstly when i hover this remember our width 225 when i hover it's going to be 225 which means 100 pixels bigger than this small one so there is a 100 pixels difference i will come here for list item i will shrink this and i'm going to create a used state here i will say const is harvard and set is hovered and it's gonna be use state method and in the initial state it's gonna be false we are not hovering anything so how i'm gonna decide whether we hover or not this item i will come here and say on mouse enter and in this case it's going to be true set is forward is true i'm going to close this actually and when we live on this container it's gonna be false i will say on mouse leave i'm gonna do the opposite thing i will say set is forward it's gonna be false so when we are on this container it's gonna be true when we leave and it's gonna be false so how i'm gonna use this in this style of this item i will say style and i'm gonna say left side remember we have done this top but we have a problem for this left and right side i will say left if is forward index of course we don't have right now but we are going to create and multiply by 225 and 50. so how i'm gonna choose this index let's take it as prop and in the list file let's give them index first one will be zero i will copy this okay i will change them one two three okay right now let's see as you can see it looks okay but as you realize when i get closer to the right side is moving to left side that because of these spaces five pixels spaces here everything looks good because there is no space it's moving to left a little bit more more and more to handle this problem i should split this space also it's 5 pixels if i split this from the middle it's going to be 2 and half pixels 2 and a half pixels and if i multiply this by its id for example what this one is going to be zero or this one is going to move to n half and this is five pixels because we are counting this also something like that so here after 50 i'm gonna add id multiply by 2n half sorry it's not id it's index let's see right now and it looks awesome if you are confused about this calculation just watch one more time and you can take a paper and just draw this small container and above it maybe big one just watch again and try to calculate by yourself okay it looks awesome but what about this image instead of this image when i hover i wanna see a video here i'm gonna create const trailer and i'm gonna paste my video here we are gonna change this in the next tutorial of course it's gonna be dynamic but for now it's totally okay and i'm gonna add this after this image it's gonna be video and for source i'm gonna paste my trailer and it's gonna start immediately so i will say autoplay it's gonna be true and one more thing it's gonna be loop when it ends it's gonna start again okay but we are not supposed to see this before hovered so i'm gonna write here a condition i will say if it's hovered just show this video actually we can add this info also because before hovering we don't need time also let's move this after info but it's warning us that because we use two components here first one this do and second one this video we can't do this there should be a parent you can create here a container due but also you can use react fragments and here i'm gonna close and as you can see there is no problem anymore okay so when we hover we are gonna see video and this item info but let's arrange this video also inside our css file after image i'm gonna say video and it's gonna be with a hundred percent oops with and height will be 140 that because remember after hover our image is 140 pixels and of course i will say object with color it's gonna cover all container and i'm gonna say position absolute it's gonna start from top zero and left zero let's see i'm hovering and as you can see perfect i'm not deleting image that because during loading this video we can keep seeing this image and after this this video perfect i can give some border radius for this container by the way not here but in hover it's gonna be border radius let's say just five pixels okay perfect let's take care about this info i will open here my item let's open this in the new tab and we can see our elements inside okay i'm gonna write here item info and it's gonna be display flex flags direction column and i'm gonna give some padding okay perfect so what about these icons firstly inside this info i will say icons container it's gonna be display flex and i'm gonna give some margin button and after that for each icon did we give any class name or no we didn't let's give them i will say class name it's gonna be icon okay i will save and here i'm gonna give some border it's gonna be two pixels solid byte and i'm going to give padding and this border will be circle so i will say go to radius 50 percent let's see okay but they are really big and there is no space between each other i will say margin right 10 pixels and font size let's say 16. okay awesome it looks really really nice so what about this item info top i will paste my container and i'm going to say display flags and i'm going to center them align item center and of course margin bottom font size 14 and font weight let's say bold and font color will be gray okay so i'm gonna give some style for this limit i will say limit and border i will give one pixel border here and it's going to be solid and gray give some padding one pixel and three pixels like that but i can keep margin margin will be from top and bottom zero from left and right time pixels okay perhaps so what about this description i will say description font size it's going to be smaller and i'm going to give margin button it looks nice and finally this genre font size 14 and color will be not gray but light gray okay awesome it looks really really nice everything works perfectly we can see our image and video okay so we finished our homepage when i click one of them these items we are gonna go to watch page it's gonna be really easy because it's just gonna be full screen video so let's create this page so i'm gonna create another page here let's close them and i will close these components by the way we didn't create any pages let's create this first pages and i'm gonna move this home inside these pages and of course we should change this pages and home and home and inside this another folder it's going to be watch and my jsx file and css okay i will save here i hope everything is okay it's gonna take time that because we changed these folders but anyway let's create our function here and i'm gonna import my css file watch load as css it's gonna be class name and watch and firstly before creating any video i'm gonna create back button that we can click and go to the home page i will say back and inside i'm gonna create an icon here let's search for it i will say back or arrow back arrow okay this looks okay i will copy and paste here i'm gonna import from material ui and after that let's say home okay right now i can create my video i'm gonna give class name video and it's gonna be autoplay and i'm gonna see the progress bar when it's loading we are gonna see this circle progress and after that i wanna see controls that we can pause and increase or decrease the volume or whatever and finally my source i'm gonna copy my video and paste here okay i will save and in the app.js i'm gonna call my watch component okay let's see as you can see it's here and this is our controls i can stop and increase or decrease volume make this full screen awesome so let's go to the css file and take care of them firstly my main container watch it's gonna be with 100 vw it's going to be full screen and height will be 100 vh and for back button i will say display flex and align item center and position will be absorbed because it's going to be on the video let's say top 10 and left hand and text color will be white and i will say cursor pointer we can't see that because we didn't give any set index let's say 2 and right now i can click perfect so what about this video it's really easy i will say video and it will be a hundred percent which is 100 v h sorry vw and height will be 100 vh i will say 100 percent and objective will be cover let's see as you can see it's full screen right now we have back button we have controls everything looks nice i will refresh progress bar and moving and playing perfect so it was really easy i think there is nothing complex after this watch page let's create our login and register pages i'm gonna create here register it's gonna include my component and css file okay let's close everything here actually and open again and css okay i'm gonna create my function so let's import this css file of course in this folder and class name will be register okay so let's decide firstly we are gonna have our logo and one sign in button here and finally container some title description and after that email input here and let's start button so i will come here and for top it's going to contain our image which is netflix logo i will copy and paste here and class name will be logo and after that i'm gonna create a button which is login button i will say sign in and after that my container and inside i will say h1 actually i will just copy and paste them there is nothing important here h1 h2 and p attack and after that i'm going to create an input view and it's gonna include an input type will be email and let's give placeholder i will say email address and after that button class name let's say register button and i'm gonna write get started let's close it and open this css file here first one will be our main container i'm gonna make this full screen and hide under vh oops and i'm gonna add a background image here i will say background and url i'm gonna copy my image and paste here and let's see but we can't see because we didn't call this inside app.js i will say register i'm gonna import and that's all let's see right now okay this is our background image and our logo and text perfect let's make this logo a little bit smaller top by the way i can't give any wrapper here that because i'm gonna use padding so i'm gonna write wrapper and cover them okay and inside wrapper it's gonna be padding 20 pixels and 50 pixels and i'm going to say display flex align item center and justify content space between that's because logo will be here and button will be here in the same row and space between okay so let's take care of this image i will say logo height will be 40 pixels oops it's still same wrapper and inside logo okay i didn't save here i'm doing always same thing okay perfect but as you can see this background image is really sharp i just want to give some linear gradient here to do that i will come here and say linear gradient and comma between this url and gradient and i will say to bottom and first color will be rgba and it's gonna be black and it's gonna start from zero percent and after that it's gonna be black again but opacity will be one rgb a zero zero zero zero sorry one and it's gonna be a hundred percent let's see as you can see it's much better here is darker and it looks awesome so what about this login button i will copy this and after logo i will say login button background color will be red and i will delete this border oops it's going to be none and text color will be white i will give powder radius 5 pixels let's see okay i can give some padding 5 pixels and 15 pixels and font size will be a little bit bigger like that maybe bolder and cursor pointer awesome so we finished our top bar here what about this container i will come here and for the container i will say with 100 percent hide a hundred percent and i'll say position absolute so basically it's going to contain all registry due if i center items inside a line item center just by content center they are going to be centered like that but i should make this flex direction column okay perfect i will say text color white nice let's arrange this font sizes for h1 font size will be 50 pixels and h2 i will give some margin between h1 and this p attack like that but why it's overflowing that because of this image i think let's come here and i'm gonna say background size oops size it's gonna be cover let's see right now okay it's still overflowing i set position absolute maybe because of this position and left zero by the way we didn't say here position relative ah okay perfect right now i can increase this p tag and after fix this input so i will say p and font size will be 20 pixels and for this input container i will write here input of course it's our container i will say with 50 and background color white and i will say display flex and align item center okay i can separate them just by content space between and i'm gonna say margin top 20 pixels okay i can increase this height height 50 pixels and power the radius let's say 5 pixels okay let's take care of this input input right now i'm gonna give some sizes for example for this input it's gonna be around eighty percent and this button will be twenty percent you can give percentage like that but you can use one more thing other solution i will say here flags 9 and for the register button i'm going to say flex 3. you can see it's nine units and it's three units perfect i will give height it's gonna be a hundred percent and i don't want any border and finally i'm going to give some padding inside nest so what about this button it will be a hundred percent also and background color let's say red and pause the note also and font color is gonna be white house but i can increase this size and cursor pointer and it's ready maybe it's too much in the actual netflix website it's something like that but i didn't like it maybe 22. okay it's better i think so how i'm gonna store this email address when i write here and click to get started we are gonna store this inside the use statehook i'm gonna create here const email and set email and it's gonna be use date i can close here actually we don't need it and the initial state is gonna be empty and i'm gonna create a ref here const email rev and it's gonna be use ref hook and i'm gonna pass this here inside my input it's gonna be rev equals my email rep okay you can directly write here on change and and set this email with this input but it's gonna be something different here because when i click this we are gonna see another input which is password and then we are gonna click finish button and it's gonna send our email and password to our api of course we are gonna do this in the next tutorial but it's still our ui design when i click this i should see this password input also so i'm gonna write here onclick method and i'm gonna say handle start i will copy this and create here a function const handle start so whenever i click this button i'm gonna set my email set email it's going to be my email ref and current and value so whatever inside this input we are going to set our email okay and i'm gonna write here a condition if there is no email which means if we didn't set anything inside email we should see this input container i'm gonna move this inside but if there is an email we are not supposed to see this input anymore we are gonna see our passport input i will copy and paste here of course it should be question mark okay but this time it's gonna be for that because we are gonna have some actions and it's not gonna be email it's gonna be password placeholder will be password and let's change here it's gonna be password drive and when i click it's not gonna be handle start it's gonna be handle finish and i'm gonna write here start membership or just start doesn't matter let's create them i'm gonna create one more ref and one more use state it's gonna be password and it's gonna be password draft and when i click that button it's gonna call to handle finish and i'm gonna set my password and here password drive and current and value let's see i'm writing here something and get started as you can see password we are gonna write something and when we click this start button it's gonna do something important in the next tutorial okay it looks really nice we have one more thing and it's our login page let's do this quickly actually i can copy and paste here it's gonna be login and i'm going to change my component here it's going to be login and register sorry login css okay so let's change them quickly login function will be login actually we don't need any of them for now let's delete them and any function okay i'm gonna change this class name is gonna be login and we don't need any button here and inside container i'm gonna clean here and in the css file it's gonna be login and actually i can change my background image i'm gonna copy it's gonna be similar but actually different and top wrapper logo and i'm gonna delete this button and for container we don't need them and i can delete these inputs and other buttons okay let's see but before i'm gonna call my login component here okay let's call it here i will say looking and let's see okay so what i'm gonna do is creating here f4 there will be no action and i will say h1 sign in of course just one space here and after that there will be two inputs email and password and it's gonna be login button i'll say input type will be email and placeholder email or phone number and one more it's gonna be password and type will be password also and i'm gonna create a button here let's say login button and it's gonna be sign in and after that i can give some information here i will say spam new to netflix if you are new you can sign up i will say sign up now and after i'm gonna add here a small tag actually i just wanna copy and paste it it's not important i just stole from netflix okay let's see something like that right now i'm gonna write here my form and it's gonna be e300 i 300 and i'm gonna give some padding and both the radius five pixels and background color will be our main color let's see something like that i'm gonna make this display flex and flex direction will be column and justify content i will say space around if i say space between first element will be on the top and last will be on the bottom but space around basically gives some space here not exactly the zero point okay so what about this inputs i will say input and height will be 40 px and border radius i will say 5 again and background color will be gray and font color will be white okay font color is white but this placeholder is still gray let's change it but before we can give padding here padding left 10 pixels and for placeholder i will say color not white but maybe light gray okay it's better writing and for this button let's come here and button h40 again border radius and background color will be red and text color will be white power turn on i will give font size and font weight and cursor pointer nerves let's take care of this text also and finish our tutorial i will say span color will be light gray bold tag inside remember sign up and i'm gonna make this white okay perfect it looks really nice i really like it uh signing let's change them and see again register perfect watch have some and finally home page it's really nice so we finished our project in the next tutorial we are gonna keep doing amazing stuff we are gonna create our api and we are gonna create users and admin we will be adding our own movies using our admin template remember that tutorial if you didn't watch you can see it in the cart on the top right it's gonna be amazing web application and don't forget after that lesson we are gonna learn how to deploy it in a hosting you are asking me all the time i know don't worry it's coming after next tutorial i'm gonna start doing deployment video and you will be able to create your applications and deploy it somewhere and show your entire viewer or clients it's going to be really useful lighting so we finished this tutorial if you learned something new today please like the video and write some comments it really motivates me and don't forget to follow lamadev social media accounts you can ask your questions and get some inspiration from other users so that's all i hope i'll see you in the next tutorial goodbye

Channel: Lama Dev

Views: 61,514

Keywords: react, react js, react design, react ui, react netflix app, react netflix clone, react movie app, react ui design, react for beginners, react beginner project, react website, react movie website, react website design, react website tutorial, react course, react tutorial, react beginner, learn react.js, react real-world projects, lama dev, react hooks, netflix application, create movie app, react from scratch, netflix clone, material-ui, react sass

Id: FzWG8jiw4XM

Length: 115min 31sec (6931 seconds)

Published: Sat Jun 26 2021