Transcript for:
Full Stack Netflix Clone Development Guide

hey everyone and welcome back so in this 7-hour long tutorial we will be building this full stack Netflix clone that you see on the screen before we get into the text deck and the code base let's just take a look at the end result that we're going to have at the end of this video so we start with this homepage which is kind of like an authentication page as well as the uh landing page that we have so let's scroll a bit we have a video that is being displayed inside and image which is a TV image we will take this video and put it in the middle of the screen and it is going to be muted and it'll be Loop then uh below this we have a different section with this downloading text as well as an animated gift below this we will have a different video that is being put into this uh desktop image right then below this we will have one more section and at the very bottom we're going to put a footer comp component so that you could put your name at the end of this tutorial and Link it to your GitHub repo and this could be a really good project for your resume let's scroll to the top and just try to sign up so for my email address I'll just say Jesse let's say at Pinkman docomo Page by putting the email that I already provided which is going to be coming from the URL there you can can see and we will learn how to actually implement this logic let's say for the username I just have a bunch of different suggestions let's just say it is going to be Jesse Pinkman and for the password let's just put one two three which is going to give us an error that says it should be at least six characters let's say four five six and if I just don't provide the username it should say something like all fields are required and we're going to be handling all these erors let me just bring this back and try to sign up we have a loading State then there we go it just says account created successfully and we had a really cool loading animation here you can see and this is our profile but first let's take a look at the hero section so this is going to be a trending Movie that that is going to be fetched once we just refresh and it'll be randomly fetched right so it bring this back let's refresh okay now it is a different movie now let's try to scroll a bit which is going to give us four different categories for movies such as now playing movies top rated popular and upcoming movies let's try to maybe scroll this uh movie slider there we go it just looks really really cool and it works on all different movie sliders let's click to one of them it doesn't really matter which one which one it is let's click to this one there there we go it tookes us to this uh watch page where we can see all the trailers on this movie we can go forward and if we are in the first one we cannot go it just says cursor is not allowed but if we go to the forward now we can go backward as well okay so this is how uh how that works basically let's scroll we have info about this uh movie as well as some similar movies or TV shows and again we have have the exact same uh component where we can just uh use this slider and from here we can just select any of these movies which is going to take us to the related movie page and again it is the exact same page but with different details so let's take a look at the search page I'll just go here collect to it we can search for a movie TV show or an actor so I'll just say for the movie extraction Let's test this out okay there we go we just got a bunch of different results let's click to this one which is going to take us to the movie page right let's say we' like to search for a TV show I'll just say how I met and this is going to get all the related movies such as How I Met Your Mother right we can collect it or maybe search for a person let's say Aaron pole search for it and we should be able to get the results that are related to this name and let's take a look at the search history now I'll just click to it there we go we have three different uh search history right extraction which is a movie this is the today's date that we searched TV show as well as the person we can delete it let's delete all of them and here it says no search history found we can go to the TV shows page as well which is going to take us to the homepage but this time for TV shows and we can uh just toggle the state now I am in the movie uh and now I am in the TV shows right and if we go into a page that doesn't exist let's just put something like this right just something random which should show us a custom 404 page this is exactly what Netflix does here it says lost your way then go back to the homepage let's click to it there we go and we can log out and it just works as expected so this is the demo application that we're going to be building let's take a look at the code base that we'll have at the end of this video so this is going to be the code base that we're going to have at the end of the day where we have a backend folder and a front end folder in the front end we're going to be having a react application with a couple of different packages let's take a look at it there's going to be things like uh Lucid react axios react hot toast react player and Zoo stand for the state management and we're going to be building bunch of different components hooks pages and you know Global State utility functions like bunch of different components and we're going to see how to build all of them and most importantly you will learn how to build a server and API endpoints in a not JS and expressjs environment and at the end of the day we will just make this uh be ready for the deployment so we will configure everything and we will add the authentication on top of it so we will have our oath route and movie routes TV shows routes and search routes so all these routes will be protected that means if users are not authenticated they cannot fetch movies TV shows or they cannot search for anything you will have different configurations controllers middleware functions models routes services and finally utils so it's going to be so much fun I really enjoyed it while building it so I hope you will like this too so if you are new here you can just subscribe to the channel to support this work this takes really long time and effort and I almost forgot but this is completely responsive so this is the U movie page that I just open it up here here you can see it just works really really fine in mobile devices here we can just scroll to this slider and let's try to go to the homepage I'll click to this this is a larger screen right let's go into the tablets this is how how it's going to look like and in the mobile phone there we can see it is completely responsive and let's just try to log out here we can see this is going to be the homepage once we hit a breakpoint this is going to be in the vertical Direction just like in the Netflix application so if you ready let's get into it so to get started with I have created an empty folder on my desktop I called it as Netflix clone and then I just open it up in vs code now we're going to need two different folders one for the back end and one for the front end so in the first part of this course we're going to be focusing on the back end only and once we built this part we're going to go and build the front end part right so I'll just open up my terminal and install all my packages for the back end and to be able to install packages first we need to initialize a node module with mpm in it- Y which is going to give us a package Json file under the root and here we can see this is the simple file that we just have now let's say uh mpm install and let me just first clear up my console and give a bit space just like this let's say mpm uh install and let's install all of our packages that we would need so we're going to need the Express package which is going to be our web framework so that we can have a server in the first place and for the authentication we will need the Json web token package so that we can create the tokens and decode them for the authentication and to be able to interact with the database we will be using mongus and our database is going to be mongod DP so we'll also need the cookie-parser package which is going uh which is going to be the package that will allow us to parse the incoming cookies under the request and we will need the EMV package so we can really work with the em I mean environment variables under the EMV file and this is going to make sense just in a second and we will need the axus which is going to be the HTTP client which is a fetch alternative so that we can really send requests and you know get some data and finally we will need the bcrypt JS package so that we can really hash the passwords okay so let's install all of them which is going to be like it's going to put them on under the note modules folder and create a package lock Json file let's see okay there we go now we'll like to and let's just delete this we don't really need anything in the terminal we will need to create a file let's say server.js and let's import the express we would say Express require um Express now I don't really want to use this required syntax instead I'd like to do something like import Express from Express and to be able to use this you need to go under the package Json and open up this field called type by default it is commonjs uh that's why you use this requir syntax but if you want to use import then you would use module now if you save you can use this import syntax okay this is called as let's say commonjs and this is es modules esm okay now let's bring this back delete this and let's say con app is equal to express and then we'll say app. listen and we can put any port I'll go with 5,000 and we're going to get this call back function let's say console.log server started at Local Host 5000 now to be able to run this file we can create a script let's delete this test one um oops let's just delete this file uh I mean this line entirely and I'll say that I'll will say uh node backend server.js file we put this backend because um it is located in this uh route right and we can also update this main file it is not index.js but it is server.js that is located under the backend folder right let's say backend just like this now we can run this file with this script I'll open up my terminal and I'll say mpm runev if you cannot see it like it is here I don't know why this is not formatted but let's say mpm runev and we should be able to see this log where it says server started at Local Host 5000 so let's create a route I'll say app.get this is the method name here we say if we hit with the get method this route which is the you know root route which is the homepage let's say we'll like to call this function where we got the request and response okay this is what we call the controller function let's say we will say rest. send server is ready let's save and just test this out I'll say Local Host and 5,000 we are just visiting the Home Route right I'll go here now it says cannot get is because we did a change here but we need to kill our server and then just restart it again otherwise it's not going to see the changes so let's refresh there we go it says server is ready if I say it's ready 1 2 3 save and refresh I'm not going to see the change which is really annoying because we need to always kill this and restart it again and there is a solution for this you could either do something like dash-w this should fix it and you need to First kill it and then say mpm runev now it's going to just listen for every single change let's take a look at it it says one to three and let's delete this part it should just update it immediately once I refresh there we go now if this doesn't work for you then it's probably it is not matching with your node.js uh version what you can do is just install a different package I'll just show this solution if it didn't work for you if if it did so you don't really need to do anything I'll say mpm install uh node man and put this Dash deep so that it's going to be a Dev dependency which is going to be listed just here there we go now you would say nmon and just backend server.js and then you would kill your terminal then you would say mpm runev and now anytime you do some changes let's say 1 2 3 it's going to restart it again automatically and you don't really need to do anything and I'll be using not man I think at this point okay so what we want to do is just create the authentication route first so um let's say I'll just maybe yeah let's just delete this and let's say sign up and we would say something like sign up route and we can create two different routes as well let's say login and log out I'll just update this login and let's say login route and let's say say log out and log out route let's save and test this out I'll go here to the sign up there we go and we have the login and log out routes now as a best practice we can prefix them with API so I'll say API slash signup and do the same thing for this one let's say API SL login and API log out and another best practice that we could add is just version this API let's say this is the version one that we are building just like this API V1 and then your rest of your endpoint now why do we version this is because let's say later at some point you update your API but you still want the old one to work so you wouldn't really update this V1 but you would create maybe something like V2 right and your API would be let's say API V2 and whatever the endpoint is maybe you change the sign up so you will have a different implementation of sign up endpoint at this uh endpoint right okay I hope this makes sense so this is a best practice that that developers do really just put the API first and then version this even though this versioning is not mandatory but it is really used commonly and we don't really want to put put all of our routes into the server.js file but instead we can just format this and you know make this a bit more maintainable by creating different folders I will create one folder called routes and I will put actually all of my routes into here so I'm going to delete all of these and maybe I'll say uh actually instead of deleting I'll just actually cut this okay with contr X because I'll be using this just in a second now I will say add . use and I'm going to put my endpoint let's say SL API slv1 SL oath if we hit this route then use this file let's say oath routes which is something we'll create let's say oath. route. JS now this route. JS is not really uh important or mandatory you can delete this route and just have this file called as OJs but as a conven I just want to keep this so that when I take a look at it here I just know this is a rout file and I just like this convention in general now we need to create a router first let's import the express let's say import Express from Express and we'll say con router and we'll say express. router and just make sure this R is capitalized then we'll say export default the router now we can put all of our routes that are related to authentication so I'll say something like router. getet and maybe uh I mean in this point I could paste everything that I just cuted right now instead of app we don't really have app in this file let's rename them to be router and we have API V1 we can delete this part and just leave the sign up let's say login and log out now here we need to import this router in the server.js let's say import oath routes coming from this file and just make sure you put this. JS at the end so that you you don't get any errors now let's save and I'll explain what we have just did let's just put them side by side so here we just say if we visit localhost 5000 SL API slv1 o slash signup then call this function and if we hit login call this one and same for the log out so we just say hey express if someone visit our application it at this end point that is followed by one of these right because this is the file that we are referring to then you should handle with the related function let's visit API V1 oath and sign up what are we going to see just test this out API uh let's just make sure this is lowercased AP Pi V1 let's say oath and sign up okay here we can see we just hit the sign up route let's hit log in it is working and same for the log out so this is the basic setup that we just have for the authentication endpoints right we just have sign up login log out all of them are listed under this uh endpoint now what we can do is even take these functions and put them into their own folders and files this is what I'll be doing I'll just say controllers and create a oath controller file I'll say oath you can call it just oath. JS but I'll be doing the exact same convention which I'll just put controller.js just like I have done here um so it is easier for me to navigate this codebase um so yeah the first controller that I'd like to have is going to be for the signup then for the login and for the logage and and by the way you can make these functions to be async just like putting putting this keyword because this is nothing than a regular function it just takes the request and response arguments like it takes more arguments such as next and maybe we can see that in the incoming uh sections for now just know that this is a regular Arrow function uh that is just handling the response or request and you can do a bunch of different things here so I will take this and put it into its own file I'll say export async function you can use Arrow function as well I'll just go with the regular functions I'll call it uh call it as sign up which is going to take the request and response and let's just say sign up route now we can take this function delete this part and just import the sign up function from this file and make sure you put. JS otherwise it's going to crash because we're using uh module right type is equal to module and you always have to put thej extension if you're are importing a local file in this case this is a local file that we have in our code base and we're going to create the login function as well as the log out function so I'll just delete both of them and let's create it maybe uh so let's just do it manually I'll say export async function login and we'll just say login route and do the same thing for log out just like this and to be able to get this Auto completion I am using GitHub co-pilot this is the extension that people always ask me in the comments even though this is really popular but some people still don't use it or just even don't know it's it existed uh it is free if you are a student you can you need to uh fill up a form in their website but if you are not a student then you would be using this for $10 a month and so yeah that was the extension let's save these uh this file and let's say give us the login function coming from the oath controller and let's say log out function so we didn't change anything I mean it is working the exact same way but we just uh just organized our folders and files a little bit if you visit signup route you will still get the exact same result or if you visit the log out it just works as exactly the same before and with this setup I think we are ready to just get started with the authentication and the first one is going to be the sign up right so I will save this file and maybe yeah let's just keep them open and to be able to sign up the users we need to create a database and store the users in that right so for this we will just head over to the mongod DB if you don't already have an account you can create one for free I already have so I'll just sign in as I said it is free to get started with you don't really need to pay anything up front and no credit cards required so this is going to take us to the overview page or the dashboard where you can create a project so let me just zoom in maybe a bit and if you just sign up I think you need to create an organization which is pretty basic and once you do this then you can create a new project let's say new project and this is going to take us to this page I'll say Netflix and I'll just put YouTube at the end you can call it as Netflix clone I don't know like anything and let's say next project owner is going to be you at this case this is the email that I am logged in let's say create the project and then it's going to take us to this page where we can create a cluster and once you click it then you can select the free plan which is pretty generous that we could use and leave everything uh by default and just say create the deployment and then it's going to take you to this page where you can see your username and password let's copy the password and paste it to here for now we'll be using this just in a second and let's say create the user and then it took us to this page where we'll like to connect to this database from our nodejs application now we can really get this connection string I'll be copying this and pasting it to mymv file let's create one under the root so just make sure you create it here and not in the back end or front end then I'll say uncore URI and put that connection string so in your case here you might see something like uh password uh like this if you see this then you can really take your password cut it and replace it with it in my case I already had it I don't know why sometimes they give you the password or maybe I have this option selected so if you say don't show the password it's going to put this placeholder where you can put your password into but if you uh like toggle this you can copy it and put it as your connection string and let's delete this delete this uh save okay now we'll like to use this connection string to be able to connect our database but first let's just say uh close we just got everything and just one more thing when you're building this application your IP address might change so you might not be able to connect to this database for now let's go under the network access and from here just click to the add IP address before you click to it you'll see your IP address is listed here probably you cannot see mine because I will censor it while editing but you know your IP add address should be here if not you can say add IP address and then you can put your current IP address but I'm sure it's already there so you can say allow access from anywhere and we'll say confirm this is going to take a bit time it says pending and once this is active it should be good to go so now it is active and we can go under the database and for now we're just going to see there is nothing here if we say browse collections we don't really have anything in our database and we will create just in a second let's say uh before we for forget to do this we need to put our database before this question mark I will call it as Netflix uncore DB and save this file Clos it now to be able to use that U environment variable we created we will be using the EMV package so let's say import EMV Pro from MV and we need to call this function let's say mv. config once we do this we can say something like let's say console.log I'll say mango URI it's equal to which is coming from process. EMV mongoor urri now we can really see our connection string in the console or in the terminal because uh we are using this function if we delete this then it is not going to be able to read it it is going to say undefined there we go so this is the package that's why we're using it and for my environment variables I will create a separate file under this folder called config let's say config oops if I can type and here I'll just say inv bars. JS and what I'll be doing is actually delete this from here delete this one delete the console log and save this file here I'll actually be doing that configuration on this file I'll say EMV from EMV call the function and create a variable let's say const let's say n vars and I just put this all uppercase because this is a hardcoded value and it's a constant in our code base so this is the convention that you would be using if you have a a constant that is not going to change here the first thing I'll be having is going to be this underscore URI this is going to be the key the value is going to be coming from the EMV file and the other one is going to be Port let's say process. em. Port if it is not available then we could use 5,000 as the default value let's create the port under this EMV file I'll say port and just put it as 5,000 just like this then we can go now under the server and update this with that Port I'll say con uh Port is equal to process uh not process. EMV because we just created this in vs. port and let's just make sure that you have this. Js at the end so that it doesn't crash so there we go now this is how we can use our environment variables that are coming from this configuration file right and instead of this 5,000 hardcoded value I'll be using the port variable that we just created above and instead of this let's delete it and say something like Plus Port okay let's save here we should get the exact same result if we go here and make this to be 5,000 And1 let's save this here we go it just updated to this value but we'll be using this value let's save this file again and it is updated so that was the configuration for the environment variables and we can create another file for the database I'll just say the DB .js and in this file we're going to connect to our mongodb database right and as I said before we'll be using the package which is the package that we can interact with the database and let's import the Nars as well this is what we'll be using and just make sure you put DJs at the end here I'll create a function called connect DB and this is going to be an Asing function just like this it's going to have the try catch so under the try I will say aate do connect to our Ur environment variable which was our connection string and we can just get the connection from this let's say con connection and we will go below let's say console. log uh mongodb connected and we can just put the connection host so that we can really have something in the console and if we just failed then we can say process. exit with the status of one and here one means it was failure right one means uh there was an error and zero means success okay and we can just put something to just console log it let's say console. error the error message and we can just say error connecting to mongod DB okay let's save and we're going to be calling this function once our server is started I will say connect DB and import this function and make sure you again have this. Js at the end let's save and we should be able to see the console log on the terminal just in a second um okay server started in mongodb Connect which is our database that we have up here in the mongodb atlas now in this database we'll be storing users and for this we need to create a user model under the back end I will create models file or folder I'm sorry then we will say user.js but again I just want to keep the convention going I'll just say model. JS and now a model will be important so that we can really understand the schema of the user that we have it is just going to make sense in a second let's say import Mangus from Mangus and we will go uh below we will say con user schema and we'll say mongus schema put an object and call it like this now every user is going to have a username so let's say username and uh like open up this object so that we can really put the fields let's say type is going to to be string and it's going to be required let's say required and it should be unique as well and each user will have an email let's open up this so that we can give this uh types or Fields let's say type will be string is going to be required and unique and then after the email let's delete this extra uh C Braes each user will have a password like this then we'll just say um it's going to be type of string and required of true then lastly or not lastly but they're going to have also an image which is type of string and this might not be required so the default value could be an empty string and then for the search history let me just scroll a bit user will have a search history so that they could see what they searched just like we have seen in the demo application in the beginning of the video right so this is going to be an array so let's say type array and by default it's going to be empty and I think we need to close this off as well and this is going to be this schema for a user right they're going to have username email password image and search history now we need to create a user model I'll say con user and we say mongus do model user and just pass the user schema so this basically says create a user collection that is based of of this user schema so depending on this you should create a user model and this should be singular and like the first letter is capitalized mongus will convert this to be something like uh users right if you say maybe animal it is going to update it to be animals and you will see this once we created in the database okay just know that this should be singular and the first letter should be capitalized now we want to get this user model I'll just say export con user so that we can really use this in different files so that was our user model and I think we can now go into the oath controller and implement the signup function so what I'll be doing maybe just close all these files that we don't really need for now and we can get started with this function now uh let's just say try and catch the user wants to send us a couple of different credentials such as their email username and password and I think before we write any code in this file it would be better if we just see some kind of diagram that uh explains the authentication workflow and then we come back and write the code so that we understand everything so let's just do it now so this is the authentication workflow that we will try to understand and we'll just jump into the code and try to implement this so just imagine we have a user that they wants to sign up right so they will just click the button that says sign up I'll just put as for this and let's change the color and maybe the size so the trigger uh I mean the request will be triggered to our API right so let's say they want to sign up it's going to be SL API sb1 oath and sign up what we'll be doing is just create a user in our database right and we need to create a token as well so we will generate a JWT token once this has been generated we're going to send this token in cookies to the client and we will show some success message maybe we would take them to the homepage right so they were in the login or sign up page they just signed up we take them to the homepage and let's say now they want to get some movies right so they say API V1 movies and give me the trending movies we're going to take the request and we will just check if it has this token or not and if they have it we will just validate that token and if it is successfully uh validated we will say okay you can get the response but else we will say sorry you're not authorized so this is the entire authentication workflow that we will try to build for now we're going to build this first section where we have the sign up and login and functionalities uh we will create the user if they are signing up and create a token and if they are logging in we will check for the credentials let's say the user uh put the wrong password we will say password was incorrect but if it is correct we will just log them in by creating a token and we will send this token in the cookies to the client and user will have that token in the client in his cookies so this is the general overview and I think it's going to make a lot sense once we try to code as well okay so back into the vs code and just before we forgot we need to go under the user routes or oath routes these are not going to be get requests but instead they should be post so I'll select the first one and put contrl D couple of times and I'll just say all of them should be post methods you can put delete uh you can put put patch all the methods that you could imagine but these should be post methods so that user can uh really send some data with it and the convention is to use po I mean like post method for these routes right sign up login and log out with this in mind we can save this file and go into the oath controller to the sign up function so user will try to send us the email let's say password and the username all of them are going to be coming from this object where we have have request. body and to be able to fetch this so you can really get this without doing a configuration so you need to go under the server.js and I mean above our routes we will say app.use express. adjacent so this is the function that will allow us to use request. body let's say pars or maybe let's say will allow us to PO request. body object okay so this is really important if you don't add it then you cannot really get these values now we can just check if user passed all these values I'll say if there is not email or if there is not password or if there is not username provided then we can just say return press status let's see status of 400 which is an error code and we will say Json we can send this object I'll say success was false and message could be all fields are required and let's kill the sidebar so that we just have a a little bit more space and now we can just check if user is sending us an actual email because they could send ABC as their email right we just need to make sure that they have uh it is an actual email and for this I'll be using a regular expression I'll say const email Rejects and I think co-pilot will suggest something for me probably this is correct this basically checks if something is an email or not and we can use it by testing it I'll say email reject. test this email and if this is returning false we'll just say return res. status of 400 Json success of fals and we will say invalid email and we can just also check for the password length so let's say if password length is less than six we could say something like password must be at least six characters and again the status code is going to be 400 and let's try to add a couple of different if checks as well so we will say uh maybe user username already exists Orem email already exists right we need to check for them as well because they should be unique I'll say const and maybe give a bit space from the sketch block I'll say existing user by email and so I have a typo here yep let's say existing user by email I'll say await call the user model let's import it and scroll put this. JS at the end so this is how we can interact with the user model I'll say user. find one say find one where the email field is matching with the email that we are getting as an argument if this exists right we'll say if existing user by email we can just say let me scroll uh go here let's say return rest status of 400 success was false and let's say email already exists okay now we're going to check the exact same thing but for the username I'll say const maybe I can actually copy this line and paste it existing user by let's say user name and we will just check this field username that is matching with the username that we are getting as an argument right if this is the case then we will just say username already exists and I am just Auto completing this code from co-pilot because it is the exact same thing that we have just done and once we do this maybe we could really try to create the user profile and I'll say const uh let's say new user it's going to be equal to new user call this class open up the object and we will just say this is the email this is the password that they just provided and let's say the username we can skip the image by default is going to be an empty string but what we can do is create a default image now I will just show you three different images so these are the images that user can have as a profile image this is the first one second one and third one we will just select one of them uh randomly so here I can go below this new user and just say const Profile Pics we have three different avatars Avatar 1 2 and 3.png this uh like these are going to be in the front end folder once we get into the UI design part I will try to explain this once again once we get there if you don't really understand this but this is basically a local file.png that is coming from the public folder in the front end and we can really see this uh later in the video now to be able to just get one randomly we can just say con image and we can say Profile Pics math floor uh let's just Auto compete this so this will give us one of the indexes randomly right this could be zero uh one or two and it is going to be replaced here let's say it is one then this image going to be equal to this Avatar 2.png this is what it really does giving us a random index depending on this array then we can just use this as the user image just like this and since these fields are same right email email password password we can shorten this by using this JavaScript trick okay just like this it should be working the exact same way now once we like we just created the user object and let's save it to the database we'll say await new user. saave and for the catch case we can just return an error I'll just say press. status of 500 which means like there was an internal server error right server crashed or something like that so say Jason success was false you can send the message as it is um or we could just put a generic message as well let's say uh error not error message but let's say internal server error just like this and for debuging purposes we could put console.log and let's say error in sign up controller and put the error. message message just like this so let's try to actually test this function out right we will send the email password and username and if we just pass all these if checks it should hopefully create a user and save it to the database and to be able to test this out I'll be using a desktop application called postp it is free and I have already installed it if you don't have uh you can install it just to be able to follow along with me so this is the app application I just logged in and if you don't have any workspaces you can create one by coming to here I have all of these they are coming from the previous tutorials but let's just try to create a new workspace I'll just give it a new name but before we need to just say blank workspace we could say Netflix clone and like it could be for anyone I'll just say only me and just say create okay so this is going to create a workspace for us and we can just really test our endpoints let's create a collection let's say blank I will rename this to be oath right and later we will have for the movies TV shows and maybe for the search let's say you'll like to add a request and this is going to be a post request and let's say this is sign up just like this let's put our endpoint http Local Host 5000 SL API slv1 SL oath slash sign up and we need to send a body which is going to be roll Json make sure you select the Json open up the Cur braces and send username let's say this is going to be John and for the email let's say we're going to send John at gmail and the password so I'll just try to put something like one two three which should give us an error that says password must be at least six characters long right I'll save this and just try to send it there we go it says password must be at least six characters and success is false now if we delete the password and email it should say all fields are required um but before we need to delete this comma so that it can work okay now it says success was false and all fields are required if we bring both of them and even if you don't add one of them right let's delete the comma it should still give us all fields are required but now let's just try to put 4 five6 hopefully this should create the user in the database so here it just keeps uh sending request or it just keeps loading right because we didn't return anything but if we take take a look at it to our database we should be able to see the user Let's test this out refresh this page go under the collections we have our database and there we go we just have a user this is the username email password and the image this is the random one that we selected and search history is now an empty array because that was the default value and now our Postman is keeps loading is because in our s code we didn't really return anything after we save this user to the database we should say something like let's say res. status of 2011 which means something created right a resource created in the database and for the adjacent we could say success of true let me just close this object first and here I'll just put the user object I'll just return the user as it is now you can just return the new user and I don't want to send the password that's why I will just say okay this is going to be an object where I just return the all the fields of the new user with this underscore document and the password is just going to be an empty string so we don't really want to send the password back to the client this is what it does so I just even put a comment that says remove password from the response let's save and just try to test this out I'll go here and just try try to sign up with the exact same account first it's going to say email already exists let's say email is Bob and it should say username already exists okay let's say Bob and send it we got the response and here you can see the password is empty but all the fields are returned us now there is an issue with our implementation let's just refresh and I'll try to explain Okay so okay let me just maybe zoom out a bit so we just store the password as it is which is not really something that you should do instead as a best practice you should really hash this so the first reason you shouldn't be able to see the passwords of your users that wouldn't be ethic and the second one is if someone uh hacked your database if they have the access they can really access to every single uh account so they would put their username and password and just log into their account right so that's why you should hash this password and this is the reason why we even imported this bpjs package Let's see we have this bp. JS and this is uh this is the place that we'll be using it after this if check we could say const salt and let's say await bcrypt JS let's import it okay we should do it manually let's go here and just say import bcjs from bcjs then we'll just say uh like gen salt of 10 so this is going to create a salt that we could use to be able to Hash a password and I'll say const hash password it will say bpjs hash this password that user pass in with the Sal that we just created so if user pass something like 1 2 3 4 5 6 as the password this is going to take it and return it to something like this where it is not really readable at all right so it's is not going to be like this but it is just going to be a bit different and we can just see this in a second okay so we'll be using this hash password in the database so we will say password field in the database will be equal to this hash password that we just created above let's save and test this out by creating a different user I'll say Bob I don't know let's say Sally and just create this okay so we got the password as an empty string because this is what we returned but if we go into the database and just refresh we should be able to see the Sally's password is being hashed to something really unreadable right they need to you know just decode this to be able to get the value which is something really really really hard almost impos impossible to you know decode this password and I hope this makes sense now we just hash the password created the user save it to the database but now we are missing something which is to generate the JWT token so we have done this part create the user and we just display a success message with the response right which is said okay success was true but we didn't create the token and let's try to do so I will go under the backend maybe create UT Tails folder and I will say generate token. JS file and in this file we will just try to create a token and send it in the quickies we need to import the JWT from Json web token right and we also need to get the environment variables um you might be asking why we'll just see this in a second let's create a secret JWT secret we can put any value I'll just say my really hard to decode secret or let's say really hard to find secret doesn't really matter but you should put something hard to here so that it is a little bit more secure than this right now this secret will be used to encode and de code your JWT token and we're going to see this in a second now we will go under the config and vars and we'll just say JWT secret and get it from our file so it's going to be process. EMV JWT secret and we'll be using it here on this file I'll say n vars let's import it we can delete this let's go here and just say JS put the extension so that it doesn't crash let's create a function called generate uh token and maybe and set cookie so this is create the to this is going to create the token and send the Cy and this is going to take the user ID as an argument as well as the response and we will see why just in a second let's say con oops let's say con token we'll say JWT do sign this is how we can create a token the first argument is uh it is going to take will be the payload which is let's say is going to be the user ID now we put the user ID so that when we decode this token we can get the user ID from it and find the user in our database and the second argument is going to be the secret let's say from the environment variables give us the JWT secret and this token will expire in let's say 15 days we can put it like this right let's save and this is the token now we need to put it into the cookies I'll say res. cookie this is why we even take the res as as an argument let's say res. cookie and we should give it a name here we can see it just says name should be string you can give anything like token JWT and I'll say JWT D Netflix and I'll just put the token as well as some options so in this options uh we'll just try to make this token be a bit more secure right I'll say the maximum age is going to be 15 days but you can just say you can't just say 15D like a string this should be in the format of milliseconds which is this right like 15 time 24 hours I think uh 16 minutes 60 seconds and 1,000 milliseconds I hope this is how that works right this is in milliseconds say in 15 days um in millisecs okay and then we'll just put this HTTP only flag to be true and what this does is basically just make sure this cookie is only accessible uh via browser right you cannot not get access to it with JavaScript and this prevents the xss attacks so I'll just copy this and paste it if you do really want to uh search This research this you can do so uh this will just make it make it not be accessible by JavaScript okay then we will just have the same site to be strict and this is going to prevent this attack okay so you can research this if you do really want to and finally you will have the secure field this is only going to be true when we deploy this application so only in the https this is going to be true but in the Local Host we have HTTP so it's going to be false right and we can check this by doing something like nvs do nodecore EnV if it is not equal to development so if it is if we are not in the development then it's going to be true and let's create this environment variables uh under the MV I'll say oops node EMV is equal to development because currently we are building this application right and we're going to go into the config create this nmv to be coming from the uh I mean EMV file okay and then we will go into our oath controller or maybe before that let's just say return the token and in the oath controller we will create this I mean we will call this function so that we can create the token and set the Quicky right so here I'll just try to say something like if new user then we'll like to run this section where we'll like to generate token and set the quickie so this is going to take the user ID as the first argument and then the response this is what we have set in this file user ID and response and once the token is created we can then actually save this user to the database and send this as a response I will cut it and paste it here and let's say in the else case we will just handle it let's say invalid user data let's say maybe not 500 but I think 400 um but we already handled the invalid user data case right because we just checked if email is an email if user passed the username password um I think in this case we don't really even um what should we do like probably we should delete the if Case right like because um user will be created in any case but if it is not created then it's going to hit the catch block and we can return like the internal server error so I I believe this should be correct and this is correct let's just try to test this out I'll go into the vs code and let's create a different user and now currently we don't really have any quickies because we didn't implement it so far but just now we have implemented we can test this out with a different user and it should give us a quickie so I'll say maybe bath let's say B at gmail.com and send it now we just got a cookie let's click to it which is called as jw- Netflix and it's going to expire in 15 days and we got the 2011 created success message right everything is working as expected so we can see HTTP only is true for now secure is false because we are in the Local Host right it is HTTP if it was https then this would be true as well so that means we have just created this part as well where we generated a token send it in the cookies and in the front end we can show a display success message I think with this we can implement the log out functionality right I'll go into my vs code into the log out function and this is going to be pretty basic like all we need to do is just clear up the cookies I'll say try catch in the catch we could just say console. log uh error in log out controller and just show the error message in the terminal then you could say Resa status of 500 internal server error and in the try we could say rest from the response just clear the cookies let's say clear cookie and the cookie that we'll like to clear is called JWT D Netflix and then we can just return a success message let's say res. status of 200 Json let's say success of true and log. successfully as the message say success fully just like this okay now we can test this out the log out endpoint I will say duplicate this dude and call this as log out change the endpoint to be log out let's save this also save this one as well we don't really need to send anybody in this one I'll delete it and just say none and now we are logged in actually right because we have a cookie if we just try to say uh sent maybe even before that you can click to here and see that you have this JWT Netflix uh cookie right if I just close this oops and I say send loged out successfully and click to here now we really have zero cookies and that means log out functionality is also working now we can implement the sign up or I'm sorry the login we already have the sign up let's try to implement the login route I will say I want to have a try catch and in the try we would like to get the email and password we don't need the username because user will be logged in with their email and and password let's say request. body this is where we extract them and if email is not provided or if password is not provided if any of them right then we'll just say like all fields are required just like this and we can find the user let's say await user. find one and we're going to pass the email because this is how we are trying to find that user if we got the user or maybe if we don't we can return a 404 I'll say return uh Resa status of let's say 404 right invalid credentials or maybe let's say invalid email or password but I think I'll just go with invalid credentials right so you don't really want to say uh like invalid email or invalid password itself so that other users cannot just check if if an email is existing existing in your platform or not right this is what I like to do is just say invalid credentials more like a general message so the other users can't really check for different emails and now we need to just check for the password I'll say const is match or maybe is password correct we're going to be calling the bcrypt package as well let's say bcrypt js. compare the password that user passed in right with the password that we have in the database if this is the case then the password is correct but if password is not correct let's say is password correct is false then you would say invalid credentials but if we pass these if checks then we can just generate a token and set the Quicky just like this then you will say rest. status 200 and return the user so I just out completed all this code because this is what we have done previously where we just have a success message and we return the user object by deleting the password field and in the catch we can just say something like um console.log error in login controller and internal server error that we have just done previously okay so this is going to be the login function let's try to log in with one of these accounts I'll first make maybe duplicate this one so sign up copy this is going to be called as login let's update the endpoint let's say login and save this go under the body so this is the account that we have created let's put the wrong password it should say invalid credentials let's put the correct password but maybe wrong email and by the way when we log in we don't really need to send the username so let's delete it okay so if I put the wrong one it is going to say invalid credentials but if I try to put the correct email and password it should create a cookie in the response okay there we go we got the cookie and we have the user object uh where the password is deleted right and if you just click to this cookies you can see we have it and let's try to log out here we go we just logged out and we don't have any cookies in the Local Host okay so with this I think we have completed the authentication end points let's just try to quickly do a recap right I'll close everything so first of all we have created this backend folder and initialize a node module where we installed our dependencies Dev dependencies and put a script as well as changing our type to be module so that we could use this import export syntax then we have created a config file where we have the database connection as well as the environment variables to be able to use these we need to use this DMV package and we need to put our environment variables under the DMV file we set it up our database by getting this connection string and creating all these other you know like the environment variables that we needed then we created our route the first one was for the authentication and just to keep this code base clean we created a folder called routes and we have this oath route. JS file as the uh like as the convention we put this. route. JS at the end but that wasn't mandatory but it was an optional then we have all these routes sign up login and log out we even extracted the logic into its own file and folder which are this oath controllers right let's click it we have three different functions let's just say control shift p and fold all if you do this it's just going to fold everything in this file and let's start with the sign up um I think it just fold everything but basically we got the username email and password from the body to be able to get this we need to use this middle layer right which is a function that just runs and it allows use uh I mean allows us to use this request. body it pars that data then we got all of them added a couple of different checks just to make this working you know robust and we hash the password get a random image created the user set a cookie generate a token and save the user to the database and we send a response where we just ex I mean delete the password and send the user data back to the client we have the login function in the same way with a couple of different if checks then generate the token set the cookie and finally the log out function and for the user we have created a user model so that we know like uh the schema of our user that we have and we exported this user model so that we can really use it and interact uh interact with our user model that we have in the database so this is going to be for this uh part where we implemented the authentication and I'll see you in the next section so in this section we would like to fetch movies and for this we're going to be using an API that is called the movie database and I already have an account so if you don't have you should create then under these settings we need to create an API key so I have already done this but these are the steps that I have done so under the API under the create tab I selected the developer uh option then I accepted the terms and conditions then I just put the information about my application so type of use application name URL which is Local Host then the application summary and then just bunch of information then I just submitted this then I got my API key as well as the access token which is something that we'll be using now let's go under the API which we should be able to visit the API reference and here we can really just fetch lots of different things things let's say we go under the movies and try to fetch popular movies once you clict it it's going to give you a code example with JavaScript or any other languages that you could see from this list I selected JavaScript and let's try to just call it so there is an API and authorization header with your API key if you try it it is going to give you the example which is the response right let's zoom in so there we go we have a results array that just has a bunch of different objects so each of them is a different movie and so this is the basic usage let's try to copy this code and paste it to our vs code just for a second so here we have the API key for us right I'm going to cut this and put it into mydmv file I'll say tmdb API key and delete this part put my actual value now I'll take this uh environment variable and create it under the config let's say the movie database API key is going to be coming from the DMV file I'll go here um now instead of putting that value hardcoded this is how we'll be using it we'll just say ns. tmdb API key but we are not going to be using this in this file is because I i' like to create a separate service that is going to help us to really connect to this API so what I'll be doing is to just delete this completely right this is the server.js file let's create a different folder called services and we can put this file called the movie database. service. JS so this is just a regular Javascript file even though logo is different because I am using an extension called let's say create vs code icons let's see okay I'm using this extension that's why it shows this um so to say logo but it is just a regular file and same for this one now in this file we would like to create the service which is going to be the function that will help that will help us to fetch data from this API so I will just scroll a bit and and I'll say export const which is going to be my function let's say fetch from the movie database it is going to take the endpoint or we can call it as URL and it is going to return us some data now here in this file we will be using axis instead of Fetch and let's go here just try to use it again let's get this uh so the example request p past it above so that we could really have an example now in this function we can take this option and put it here instead of this um authorization header we could delete this value and get it from the environment variables so this is how I will get it and then I will say await axis. get put the URL and options so just like what they what I have done right the UR URL as well as the options now we can delete this part and we'll say con response and from this response we can just say return response. data so this is how we can fetch data with the axis in uh like in Fetch let me just pretty quickly show this in Fetch we would say res AWA uh Fetch and then your url right then this is going to give you some data which you need to say aate do I mean res. adjon then you can actually get the data so you would say return data but in axus you don't really need to do this step so it's a little bit easier to use and you can put your options with this let's say get we have post let's see delete right and we're using the get method so we can really delete it from the options and now in the options we just have our authorization header right now we can do a bit of error handling let's say if response. status is not equal to 200 then I'd like to just throw an error let's say new error fail to fetch from the uh this the movie database and we can even put the status code I'll just say response. status text so this is going to be the function that will be using as a service now the benefit of creating this function separately is because we we don't really need to really create those options in all the endpoints that we need right so let's say if we are fetching uh popular movies then we need to put this options if we are fetching top rated then again we need to put this if you are getting a different thing we always need to pass this options so instead of every time creating it we just created in one place that we're going to be using throughout our application which makes it really convenient for for us to use okay so this is our file and DMV file let's close them we are going to go ahead and create a different route I will duplicate this and our new route is going to be movie right and let's say this is the movie routes let's create it maybe we could import it here I'll just duplicate this one give a bit space we have our package Imports config Imports and Route Imports let's say movie routes and it will say movie route. JS this is going to be the file name let's copy it and put it under the routes movie route. JS so here I'll say import Express from Express create a router with the express and let's say export default this so this is what we have done in the O router as well get the express create a router and Export default it then we just have our endpoints right our methods um so what we can do is even create a controller for this I'll say movie. controller.js and we're going to have all of our functions that are related to movies right now here the first endpoint that we'll like to have is going to be the trending movies so I'll just say uh router. getet into the trending endpoint then we would like to call our function so instead of putting it here as I said we just have the moving controller file let's say get trending not movies but just movie it is going to return us only one movie and the reason is in the home page let's see okay so here there is just one movie that we will show which is going to be the trending movie even though the API return us multiple different movies let's just see how say contrl F trending let's say movies when you try to fetch it returns you multiple different movies under their results array and what we would like to do is just fetch one of them randomly so that every time we refresh we get a different movie in this background okay so this is the function logic that we will create let's go here maybe first save this file and save this one and like if you don't get this uh like purple formatting on this one if you delete this line and bring this back it should fix so this is kind of like vs code hack to just keep in mind so we got our routes which is for the movies we have trending and we'll like to just fetch one trending movie I'll go here and just say export async function get trending movie and this is going to take the request and response and and here we'll just try to fetch that trending movie right I'll say try catch in the try we will say const data we're going to be calling our function which is fetch from tmtp let's try to import it can't we let's just see fetch from the movie database for some reason it doesn't gives us let's see did we exported it yes we did fetch from the movie database but anyways let's go up here and import it manually I'll say import the like if I can type fetch uh from tmdp right and we will just put the JS at the end so that it doesn't crash and by calling this function we need to pass the URL which is let's see under the trending movies we need to copy this URL um oops if I can get it from here all the way up here so this is our URL that we're going to fetch which is going to return us the results array right so let's say data. results and from here we would like to just fetch one of them randomly we can open up this square brackets and let's say math. Flor math. random data. results. length and let's put this option optional chaining so if this is null so that we don't really get so our code doesn't break and this is going to be assigned to random movie okay so I hope this is not really confusing we just fetch the movies array and select one of them randomly with this kind of like basic logic and you will say resda Json and we're going to say success of true and I'll say content and and it's going to be random movie and let's make sure we don't have a typo here we'll just say content now why do we say content and not movie or TV uh I think this is going to make sense once we get into the front end part because like in the same component in the same page we can either fetch a movie or TV show and we can't really uh just say give us the movie or TV show in the response so it would be better if we have some gen generic name which is content um it is just going to make it everything super easier you could say like movie but I think this is a this is what I found is the easiest and just makes sense a lot to me and in the front end part I think I could explain this in a bit detail and you're going to see that okay so in the catch case let's just say res. status of 500 success of false and for the message we could just say internal let's see internal server error just like this now we could test this out by going to the by going to the postman I will create a different collection so here I'll just say create new one it should be blank and also let's save these and close them okay let's close it I will call this as let's say movies and just add a request into it let's say get movies or let's just say get trending right let's say get trending movie let's put our URL which is Local Host 5000 API V1 movie slash um it is going to be trending and let's try to just send your request okay it failed why this is the case let's take a look at the vs code here I'll just open up my terminal um I'll go to the bottom here it says get trending movie is not defined yes that makes sense because we forgot to import this and we need to put the JS at the end otherwise it is going to crash okay let's scroll to the bottom what do we have um n vars imported in this tmdb service file let's go tmdb service okay we need to put DJs at the end otherwise it is going to crash and if you wonder how do I open this command pallet is control e and you can really search for any file okay let's scroll to the bottom we don't really have any errors Let's test this out I'll say send and there we go we just got a content with the success of true and this is just a one movie that we fetch randomly so this works now let's try to fetch trailers right for a movie when we visit the detail page let's just see that where is it okay when you visit the detail page we should be able to see all the trailers so that we could go to the next one and go back to the previous one and for this there is an endpoint let's just say video from here um search for it so we have videos for movies let's collect it and maybe get the end point for this one as well I will copy this and we will go into let's say from here we need to First create a route now I will say router if I can type router. getet and we'll take to fetch the trailers of a specific movie and that's that's the reason we need to put the ID this is how we can put Dynamic value and you'll see what that means we'll say give us the trailers this is going to be our endpoint and I have a typle here let's say trailers just like this and I'll say get movie trailers okay let's try to create this function I will shrink this one say export ASN function get Trend I mean get movie trailers let's say request and response we'll have the try catch and we will like to get the ID from the prems so we'll say request. prems which we have the ID on top of it if you call this something like idx then this should be idx as well right I hope this makes sense now let's try to import this function as well save this file and we need to put the logic here let's even take this above the try and in the try we will say const and first we need to just call our function with Aus uh I mean not axus but we imported this service right let's say AIT fetch from the movie database function and we're going to just put the URL that we have right so I'm going to put this back text paste the value that I grab now here we need to put the movie ID which we are getting as a Prem I will delete this and make it to be dynamic just like this I will say ID and this should give us data right con data it is coming from our service function we could say r. Json with the success of true and we can just say instead of content now we can call it as trailers this is what we return and we'll just say data. results why do we say data. results is because this is what they return us I'll say videos let's put some random movie ID I'm not sure if this is going to work because this ID might not exist but okay it worked and under the results we can see we just got one trailer for some movies there are going to be multiple trailers and in that case you'll be able to just navigate them um so yeah this is going to be our function and in the catch case we could really just check if it is a 404 or is it an internal server error right let's say if error uh that message if it includes something like 404 then we could just return nothing back to the client right we'll say return pr. status of 404 and let's just say send null because we we couldn't find anything and we'll say res in the other case uh we'll just say internal server error I think this is going to be it for this function let's just try try to test this out under this endpoint I will go into the postman duplicate this one I will say get trailers save and here is the endpoint now we can really just put any value I'll say one two three this is the ID and the endpoint was trailers okay let's save and sent this request we just got one uh like one uh trailer for The Lord of the Rings if we just put something really random let's just make this uh so that it is going to crash so we couldn't find anything so we just returned null with 404 and we're going to be handling this in the front end where we just say no trailers found and let's put something uh like meaningful right like just like this okay so we got Rocky film and we got multiple trailers right there are three different objects that we can see okay this is going to be it for this function as well and the next R is going to be for details let's go here duplicate it and then just say details and let's say get movie details now why do we even need this function uh or this endpoint is because when you visit the movie page so from here let's say we click to this one it is going to take us to this page page where we see the trailer and below here like in this image you cannot see but there will be the details about this uh movie right this is the endpoint that is going to give us those values so we'll go here maybe save this file and create that function let's say export const get movie details uh let's create it like this now this could be an arrow function but I just want to be consistent uh just like these functions so I'll say export async function and I will just convert this to be a regular function like this by deleting the arrows uh like this so let's try to import this so that we don't really forget it okay here we'll go ahead and create the tri catch and just really try to fetch and the end point we need to grab it let's say details do we have anything like that under the account we have for the movies um so let's click to this is it going to be this one okay if we just search for something like one 12 three which was Lord of the Rings now we can just really see the generes that it has you know the title um like production companies the overview popularity kind of like different images for poster path and backdrop image as well so we'll be using a bunch of them so let's grab this endpoint and we'll go ahead paste it to here I'll say const data and maybe first we could again just extract this ID let's say con ID that is coming from request. prems because this is what we put here right we would like to get details of a specific movie let's say await call our function fetch from uh the movie database and open up this back text paste the URL and close that off instead of this one two three we'll just put whatever the user passes in let's say ID and okay so we will say res. status of 200 success of true and under the content we will just return the data and again we could really just check for the if case if it is 404 we'll say not found and in the else case that means there was an internal error okay let's test this out this was under the details so I will just duplicate this at this point I will say get movie details and here let's just say 1 2 three and details let's save and send this okay we just got the details under the content right this is what we'll be using in the front end application later in the video um let's go into the vs code and try to create the next route which is going to be the similar movies I will go here and then just say similar end point let's say get similar uh oops let's say get similar movies now we'll be using this endpoint so that we could really show this similar movies under the trailer right so this is going to be this is going to be a slider where we have a button here when we hover over it we're going to click to it and these are just going to go to the left and we can go back as well so this is the place we'll be using this endpoint let's say get similar movies copy this and paste that function export async function get similar movies and let's try to find the endpoint if I just search for something like similar and under the movies collect it and grab the endpoint okay I'll go ahead copy it paste it for now comment this out and here again we need to get the ID let's import this function let's say try catch before the try we can get the ID from the prems and in the try we will just call this function with the URL so I'll go here and just say const data is equal to this so I we have just done this multiple times that's why I'll just go a little bit faster for the movie ID we can grab it from here and let's make sure I don't have a typo then we'll just say rest. status now I think if you don't really sent the status by default it's going to be 200 but let's just be explicit and just say 200 adjacent success of true and we could say something like similar they're going to be data. results okay and then in the catch we could say Resa status of 500 like probably we are never going to hit the 404 because there will always be a similar movie for this right that's why I will just eliminate this part from here and we can delete this as well let's test this out I'll go here duplicate it for the name I'll say get similar movies say similar movies and put the ID make it to be similar end point let's save and send this out okay there we go we just got a bunch of different movies under the similar array right one two three four five and this endpoint or this API will really send you a bunch of them maybe more than 20 I'm not really sure so you could take a look at it from here but so yeah we can move on with the next function let's go into the uh vs code under the movie. route the very last one is going to be the category so let's duplicate this and put it at the very bottom this time it's not going to be ID but it's going to be category and let's say get movies by categories or by category and we will be using this endpoint let me just show this pretty quickly in the homepage so in the first section we're going to show one of these random uh movies and and then below this we will show four different um four different sliders so here we have now playing movies top rated movies popular movies and these are the category names right popular top rated now playing so we're going to pass one of those category names and fetch the related category movies and if you go here you can really just see that if I just search for category and let's just make sure this is lowercased do we have no we don't let's just say popular okay like under the movie list we have popular movies and these are the category names right let's say we would like to get this one I will copy this and put it here but first we need to create the function let's say export async function we call it as get movies by category which is going to take the request and response we can just open up here and we'll get the category from the request. prems then we'll have a try catch so at this point you know how to do this uh I don't even need to mention right we'll just get the data by calling this function passing the URL and updating this value instead of popular this is going to be whatever the user passes in let's say this would be the category just like this and we're going to get some results obviously let's say 200 Json and we can just say instead of movies let's say content and data do results then here internal error just like this let's save and test this out but first import the function now we had four different categories right popular popular top rated upcoming and now playing let's start with the popular I'll go here duplicate this one let's say get by category uh movie uh we're going to put the category let's say popular send it here we got the popular movies and let's see the top rated how do we have it top underscore rated let's send this request now it's going to give us the top rated values let's say upcoming so you know you can test this out upcoming and now underscore playing and it's going to give you all those movies so with this I think it's going to be it for these functions so I think we have created 1 two 3 four and five different endpoints and they controller functions these are are going to be for the movies and next we would like to build the same thing for TV shows because in the homepage user can like navigate between these two tabs right if they click to this then the movie data will be fetched and if they click to TV shows then the TV show data will be fetched and depending on this we will update this bottom part as well instead of now playing movies we will actually show the TV shows and you know you get the point we will update the rest of the categories so we will build the TV show end points next so welcome back in this section we would like to build the end points for TV shows in the previous one we built for the movies now it is time to build the exact same endpoint but for TV shows I'll just say TV routes let's duplicate this call it as TV routes and just say TV rod. JS file which is something that we will create under the rods and let's say import Express from Express con router grab it from the express and just say export default this router and let's go here so this formatting doesn't fixed so these are purple and this one is green to fix this you can delete this line and bring it back it should update now what we have done previously is to build all these endpoints for movies such as trending uh trailers details similar and category we'll just get the exact same thing but this time for TV routes let's copy it paste it and instead of these functions we will create different ones let's say get trending TV get TV trailers get movie details get simp similar TVs and get TVs by category and these are the functions that will be coming from under the TV controller let's say. JS and the content of these functions would be the exactly the same with these ones right what we have here let's just scroll uh at the top we have get trending movie get movie trailers you know all these functions and the only change will be the function name as well as this part so instead of movie we will just put TV under the endpoint and it's going to give us the data for the TV shows and this is something that you can learn from the documentation let's say trending movies if we click to it this is the endpoint let me just zoom in a little bit so trending and movie but if we go to the TV shows it is the exact same thing but the only change is this part instead of movie we see TV so this is what we'll be doing I'll go into the vs code copy this entire file and go under the TV controller paste it and we'll just update all of them one by one so get trending TV and instead of movie we'll just say TV right get TV trailers let's say TV we'll go here get TV details update this get similar TVs let's say like this and get TVs by category now we could save this file go back into our route and import all of them one by one so this one this and this and just make sure you put that JS at the end otherwise it is going to crash now you might be asking instead of creating these functions both in this file and in this file why don't we create one of them and take this movie or this TV as an argument well we could do so but I just want to keep this a little bit more beginner friendly and just instead create a TV controller JS file and movie controller file if you really want to you can create just one of these files and make all these functions that they would take the type as an argument so you would take the type this would either be TV or movie and you would put it under here as the dynamic value so you would just say uh type and you would do the exact same thing for all these functions and it would work but as I said I just want to leave it as a little bit more beginner friendly that's why I just copied and pasted these these functions okay so I hope this makes sense now let's go ahead and test these out pretty quickly I'll just go into Postman duplicate this one instead of movies copy let's say TV shows TV shows just like this and we'll go here get trending TV so we'll just update the endpoint and hopefully it should work we just got one trending TV show right let's copy this ID we will say get trailers for this one this would be mo I mean TV not movies put the ID and give us the trailers so it just has one right let's say get TV details and let's put uh put that exact same ID send it okay so we can get the name the title you know the overview uh original name the path for the image and all that you could update this name also to be get TV details okay let's say get similar TVs um let's just make it uppercased we're going to put the ID and this is going to be TV like this let's say send this is going to give us an array of similar TV shows and let's get by category uh let's see what do we have for the categories for TV series so we have things like airing today on the air popular and top rated let's click to this one on the air this is how they do it underscore separated let's send it um so we just got an internal error maybe we should say TV because this category is not a movie category let's say TV and search for it and there we go we just got uh some results right on this category and this is going to be it for this endpoint where we just built the exact same end points that we had for movies but this time for TV shows under this endpoint so this is going to BU for the TV routes and next we're going to build for the search routes and I'll see you in the next section okay so in this section we'll like to build the endpoint for search functionality where we can search for users um movie I mean like movies and TV shows but before we do that I just want to highlight something so even if we are not authenticated we can still search for movies or TV shows currently in our application let's just test this out I'll go ahead and log out okay I'll just say send this request now we are logged out successfully but we can still get trending TV shows which is not really what we would like to do if user is not authenticated then they shouldn't be able to fetch TV shows or movies so I'll go here and just try to fetch some trailers and it gives me the data back and I don't really want to see this it should say something like you are unauthorized so you need to log in right and this is what we're going to build now and this is the concept where we call it as a middleware so here we'll just go ahead and just say uh just protect this route with this function and we'll say Protect this one as well right I'll just say Protect route and now I know this doesn't make too much sense for now but once we create it it is going to be 100% clear under the back end I will create the middleware uh folder and inside I'll create this file let's say Protect route .js and we will import this function here this is going to say if a user wants to visit the movies endpoint first just protect this rod and check if they are authenticated or not if not then throw some errors but if so just call the next function which is going to be our movie routes right from there they can just get the trending trailers and all these end points with the related data okay I hope that this makes sense now uh we'll just go ahead and implement this function and as you can imagine if we want to protect this Rod we need to decode the JWT token that user has in the quickies so let me just show the diagram so that was the diagram we talked about it before right when a user wants to sign up or log in we we would create a token and send that token in the cookies back to the client and now if user wants to send a different requ EST let's say they want to fetch movies then first we would get the request and just check if it is valid or not if it is valid then we would show some success message or else we would show an error message so we built this part previously and now it is time to build this part where we protect the route right I'll just say Protect route and this is the section now we would like to build take the cookie from the cookie I mean take the token from the cookies and validate it okay let's go ahead and try to just build it and it's actually easier than you think let's say import JWT from Json web token package and we'll like to get the user model let's import it and just make sure you put JS at the end and also you would like to get the nend vars and again just make sure you have Js at the end so we'll go here and create this function let's exported so that we could use it in different files let's say Protect route which is going to be an Asing function that takes your request response and next so this next function is going to be as I said once this is completed successfully we'll just say call the next part and this is what that means and we'll create a try catch in the try we will just first try to get the token let's say con oops if I can type const token we would like to say from the request go under the cookies and find the token now how do we call this well it was JWT Das uh Netflix so this is how we called it if you remember previously when we generate the token we said that it is going to be JWT D Netflix and now this is the exact same thing that we are just trying to extract from the cookies this is not going to work if you don't do this uh so how do we call it if you don't do this configuration app.use we will say cookie parser called this function and make sure you import this package right so this is the package that we have installed previously I just put it at the top let's go here we had the Quicky parser that I said this is the package that we used to be able to parse the Qui cookies from the request so this is time to use it and this now allows you to access to the cookies under the request I hope this makes sense now and we'll say if there is not token provided then we will say return out of this function with the status of 401 which means unauthorized and we'll say Json let's just return success of false let's say and for the message we will say a unauthorized Dash no token provided and close this off let me just shink the sidebar so that we could really see this entire line and then let's say const decoded we will say JWT verify this token and we need to pass the token as the first argument and then the secret key that we hash this right we use this secret key to be able to create this Tok if you remember right now it is the exact same secret that we are using to be able to decode this and if this decoded is a falsy value let's say decoded is false then we will just return out of this function again with the rest status of 401 we'll say success was false and unauthorized let's say invalid token okay but if we pass this then we can just get the user from the database and to be able to do so again in this function we pass the user ID as the payload to the Token right now we can extract that ID from the token I'll say const user we'll say await user. find by ID where we have oops so let's say find by ID we'll say decoded. user ID this is the field that we passed into the token now this would return you the entire user document and I just want to deselect the password so I'll say select and remove the password then we will say if there is not user in the database we could say r i mean return rest status of 400 user not found and we could just go below finally call the next function right okay so that means we just protect this route and once everything is done successfully we can call the next function which is going to be this one or this one and what we would like to do also add the user to the request so let's say request. user is going to be equal to the user that we just fetch from the database so that we could know that this user is authenticated and we'll be using this I think later in the video let's save and finally for the catch we could say console. log let's say error in protect rod metalware and just say error. message also here we could return an internal error let's say status of 500 internal server error just like this now I hope this makes sense this is the concept of middle lay where just it is a function that you call before you do something right before you return the response back in this case we protected these routes so that when a user wants to fetch movies we will first check if they are authenticated or not and same thing for the TV shows let's import this function and just test this out again now if I if I try to get trailers for movies I am loged out it says unauthorized no token provided let's go ahead and just try to log in with this account okay so we logged in we have the cookie let's try to get the trailers for the movies again now we can really get the value if we try to update this cookie can we do so let's just check so under the cookies uh it says no domain I mean no cookies but we actually have um so here I'll just update this and looks like I can't update updated so if you I mean like if you update this value and send the request it is not going to work and it's going to say uh I mean it's going to hit this if check where you have the token but it's going to return a false value because you updated that token it says token is invalid but now since we are uh so since we are logged in the token is validated we just call the next function and we get some result back right let's just say get by C atory and we are able to get it but if we log out and try to send it it's going to say no token provided so this is how we can protect your routes in expressjs with JWT tokens so that was it for the protect route functionality and next we're going to build the search route this time so I'll see you in the next section okay so now it is time to build the search endpoint I'll go ahead into the server.js file and duplicate this last one and I'll say this is going to be the search where it is going to be a protected route and instead of TV routes let's just say this is the search routes and I'll go here duplicate this let's say search routes and this is going to be our file so in this Rod we should be able to search for person uh for movies TV shows and a bunch of different things we'll just see that later in the video I'll go here under the routes just put it let's say import Express from Express create a router let's say and Export this one so we can go here and again if you want to update this highlighting delete this bring this back and it should update then we will just create bunch of different inputs Point let's say router. getet if we search for a for an actor for a person right we would like to get a query so this would be the name of the uh actor or the person right so they would pass something like a Aon Pole right Aon pole and this would be replaced with it so we would be fetching this profile from the database from the API and in this case we would like to call the search person function let's duplicate this we are going to search for the movie right I'll just say search movie this time and duplicate this let's say search TV and update this part so these are the controllers that we would like to create now I'll go here say search. controller.js and create all those functions let's say export async function which is going to be the first one search person let's take the request and response and leave this function like this for now let's duplicate it twice search movie and search TV okay we could save and import all of them and just make sure you put. JS at the end and we can start by the person right I'll go into this function and before we try to fetch we would like to just take a look at the API so that we know the endpoint let's go here and just say search um let's click to enter so it's going to take us to the bottom where we can search for a person let's clect that we can get the endpoint I will just copy this and try to implement this function so I'll just leave it here as a comment and I'll just take this in a second let's say try catch first we'll like to get the query that user passed so from the prems you will get the query and that would be the name of the actor or the person let's say const response we'll like to call our function fetch from the movie database and we will just open up this back text take this put it inside and instead of let say I think it is the um where is it like search person so we should be able to see like query if I just go here and just search for Aon poll let's see okay they add this query right under the person I'll go here copy this part and put it here okay after the person we have the query field and we need to delete this make it to be dynamic which is coming from our query and oops uh just like this and then we'll just put this m% um let's just save okay this is how it should look like we just have our endpoint and we added one query which is the query that we are getting as an argument right from the prems okay this is going to give us the response we could just check if it is empty or not let's say response do results do length if it is equal to zero then we could just say return res status of 400 let's say 404 which means not found and we could just say send null and in the front end we will be handling that then if this is successfully done we could say res status of 200 Json value of let's say success of true and we would say content of response. results and in the catch let's just say console. log error in search person controller and just return an internal server error just like this now you might be asking why do we call results is because this is what uh API gives you let's say try it under the results we just got bunch of different results right different users so this is the first one with this name second one the third one so on and so forth and this is what we are trying to return back to the client but now there is one thing that we are missing in this controller is that once we search for a person we would like to save it to our history so let me just show you one of these images that I have so like we have the search history in the nav bar right if user clicks to it they should be able to see the search history um so here there we go we just have the search history it says you searched for this movie and this is the date you know the name of the uh movie image and you can delete it if you really want to so these are the end points that we will create also and this is how we can search for it we can search for a movie TV shows or people right which which are our actors okay so now uh what I'm trying to say is that we need to save it to the search history once we search for a person and it is going to be up here I will say first let's import the user model and make sure we put DJs after both of these and we will say await because this will take some time right user find by ID and update so this is a function that we could get and the ID of the user would be coming from the request let's say request. user doore ID so how could we get the ID from the request how this is possible well it's because we protect this route and in this function we added the user under the request. user right so this user object is now accessible from the request right and this is the users this is the user that you would like to update and let's just try to push some data I'll say push open up this part under the search history we would like to just add a bunch of different uh data right so first we will put the ID of the person that we just got let's say ID response. results and we'll just take the first one because it returns us an array let's say results of z. ID then we will just get the image let's say response. results zero and profile path this is the field that API gives you for the image and let's say title this is the query name right we'll just say results. name and we will get the search type which is going to be person and finally we will put the created at date let's say created at and this is going to be date. now or let's just say new date just like this and we're putting this search type and created at Fields so that we could see like the search type is it a movie is it a TV show is it a person and created that date here and as well as we have the image and title of the search okay I hope this makes sense but this is what we'll be doing for these functions as well let's move on with the search movie I'll go here and just actually do the exact same thing I'll just get the query from the prems and I'll have a try and catch in the try I think at this point I can just copy it and paste it so this is the I think exact same URL instead of person we have movie and we just pass the query we have the language so here it say as include adult is equal to false you could delete it or leave it doesn't really matter um I'll just yeah I'll just delete it from here and like I don't even know why do we have this I think by default the endpoint adds it so here it says this is the default value it's equal to false if we search for a movie let's see is it also equal to false yes it is so let's just add all of them right I'll just include false grab this and paste it to here as well and put in m% here okay so this is what API gives you by default so I'm not going to change it and then we'll just say if response length is zero then you'll just return 404 but else we would like to again update the search history so you could really type this out from scratch I'll paste and try to explain um so this time since we are trying to fetch a movie instead of poster I mean profile path we have poster path and instead of name we have title and for the search type we will just put movie just like this and then the create that date so I hope this makes sense I didn't really want to type this out from scratch because it's the exact same thing with a couple of different changes such as poster path title and search type and here we can go ahead and just return 200 set status let's say res. status of 200 and Json of success with the content and in the catch we could really return something like this right I'll just paste it error and search movie controller okay so this is going to be it for the search controller uh for the movies let's finally build the search TV again I'll get the query and build a try catch and then in the try I'll do the exact same thing where instead of person or movie I sh i s like a TV and let's include the adult will be false up here and just put in M percent okay if if it is null then we just return null but else we will just update the um database okay so here I just paste it again instead of TV show let's just say TV like this and we have poster path Name ID and you know search type created that and these fields are coming from the endpoint I checked out previously and you can really do so as well when you just search for a TV let's just say ha I mat and just try it it so here um what do we have like name and poster path right for the title we have the name and we have poster path we'll be using those values in the front end that's why we're selecting it like this and then here finally we'll just say success of true and in the catch we could just show the console log as well as the internal server error so hopefully this is going to be it for this file um like we just buil three different functions for each of them we search the value and then save it to the database so that we can see that in this in this page right in the search history and now we'll like to add two different endpoints as well one of them is going to be get the search history for now all of them are get for a search right now we'll like to get the search history as well I'll say router. getet slh hisory and let's say get search history like this then let's say router. delete where we where we will be able to delete an item from the history right I'll say history pass the ID that we like to delete and we could say remove item from search history just like this so that when we click to this button it would delete it and when you visit this page you would like to get all the items right I hope this makes sense now so we will go into this file and just try to create these functions let's start with this one is going to be pretty basic let's say export a sync function paste it and for the content for this file or for this fun function is just going to be one try catch Block in the try we will say rest. status of 20 200 let's say and let's say Json of success of true and for the content we don't really need to fetch it from the database because we already have the user under the request and we could just send it like this there we go and in the catch we would say rest. status of 500 and successful false message internal server error so this is going to be it for this function pretty basic right this is possible with the help of protect route middleware we put the user under the request and finally our function is going to be let's say export async function remove item from search history where we got the request and response let's get the ID from the prems I'll say ID request. prems and this is how we call it from here now actually before we implement this function let's just try to test this out like these ones and just check if they are working or not I'll go into the postman I'll maybe shrink all of these and create a different collection let's call this as search and I think this is enough as the name let's say add a request it's going to be a get request right let's say get person and we will put our endpoint under the search let's just search for let's say a Aon right or a a how do we call it um I'll just say sent this request it didn't work out let's see why this is the case open up our terminal here it says get search history is not defined yep obviously see let's import this and this one as well now it should be working let's send it it says like you're not authorized obviously let's log in now we can search for this okay again we just got an issue I think it's because we didn't hit the correct end point uh it was person right so API search person I did did a mistake now it should work okay we got some results back right and let's test the other one and before that let's just check to the database if we have this result in the user object right I'll go under the database under the search history hopefully we should have that value and the user that we logged in I think was Beth let's say users so the user we had was bath and there we go we just have an item for the bath under the search history let's collected we got the ID image is null um I'm not sure why this didn't work out we could take a look at it we have the title and search type is person now image didn't work out how do we fetch this image when we search for a person uh we say profile path so let's take a look at to the um API let's search for person to the exact same one I'll just say a aen let's say try it so we said profile path okay so for the first one it is null that's why we got that value okay if we just search for Aon poll hopefully we should have a profile path okay so it wasn't an error but this is how the API worked for this search and let's try to search for a movie right I'll just duplicate this let's say for the movie we could just say something like extraction let's say send okay we got an internal error do I have a typo let's see open up the terminal okay fet for tmdb is not defined yep we forgot to import it is it really case well we actually have it um so I think I have a typo here so this should be all uppercase tmdb because this is how we have it and since I copied and paste these it that's why we have an error sorry about this but other than this it should be fine let's save and just test this out once again okay now it worked we search for a movie called extract ction and these are the results that we just have let's take a look at to the database um just update or maybe refresh this page we should be able to have that value under the search history for this user right we have another object let's click that it this type of movie extraction image ID and created ad okay it that I mean that works let's finally duplicate this again let's say get person so why this is person copy let's just say get movie like this save this and go here let's say get TV and update the URL let's say TV instead of extraction let's just say how I met is it going to work okay it didn't probably there is nothing found let's just put um like how do we call it spaces okay so we just got How I Met Your Mother as the first result and the other ones right I mean for the different countries and again if we just check the database probably it should work okay it's going to fetch let's scroll there we go we got the third result which is search type of TV we got the title image ID and created that okay so everything is working as expected now we'll like to just uh be able to delete one of them so I'd like to delete this uh How I Met Your Mother from my database which is the idea of 110 right so let's first try to implement this function and we will try to delete it from the postman so I will get the ID from the prems and I'll say try catch and in the try I'll say await user. find by ID and update let's say the user profile is I mean user ID is coming from the request then since we would like to delete something from an array we should call the pull uh operator so we'll say pull and I have a typo here let's say a wait um this is going to be pull we will just say from the search history you would like to check for this ID that is coming from the prems if the ID matches then delete it from the search history and since this is an array we can use pull to be able to remove something and we use push to be able to add something into it okay so this should work and let's just say res. status of 200 and success of true as a message we could say like it is being removed we could add a console log for the catch case and Inter turn server error let's save and let's test this out if this is going to work or not let's say duplicate this this is going to be a delete method I'll go here I'll say search um TV and I think how did we call it I just forgot let's say under the search so we have history and we can just delete one okay let's say um just go here here oops what am I doing so search history and let's try to delete this one so this is the ID I'll just copy it and put it here now this is not going to work actually and let's see why I'll say send okay so it says item removed from search history but it's actually dead let's see I'll go here and I shouldn't be able ble to see the last one but it looks like we still see it and can you see the issue here maybe just try to pause the video and try to debug this and then I'll just try to explain so the issue here is that the ID is type of number here you can see it is not wrapped with strings and what we get from the prems is always going to be type of string so if you just go ahead and say console log type of ID you should be able to see something like string in the console let's scroll to the bottom send this request and open up the terminal it says type of this is string and type of string is not equal to the type of integer that's why this doesn't get called and we need to just take this ID which is a string and convert it to be type of number so since we'll be updating this let's say this is going to be be a let and you could say ID is going to be equal to parse int and put the ID as an argument so now this should take this string convert it to a number so that it could uh you know just match it and it should work okay save this and hopefully now send this request it should be deleted from the database let's refresh and okay here we can see we just have two different items and you can delete this one as well just copy it paste it send the request it's going to delete it um you can just test this out so here we just have only one item so I hope this makes sense this is something that I just wanted to really show you that's why I didn't implement this function and first wanted to test all of them and just show you that the type of string is not matching with the type of integer and that was something that I debugged while building this application then I just take a look at the database I saw that the type is uh type is integer for the ID and what I got is string so I just need to match them and I hope this would help you for the incoming projects where you have some same kind of issue and we didn't test test this out let's try to do so under the history we'll just send a get request I'll go here duplicate this one let's say this is going to be get history and just add this endpoint uh history like this let's send it so as we can see success of true and we just have one item in our database for this user right you can also update this name if you save the method should change you would say delete um item okay so I think with this it's going to be it for the search uh routes as well where we created all of our routes and protected them with this protect Rod function the middleware that we have created and as I said middleware is just a function and nothing else it just runs before you send the response back to the client and so depending on that you would either call the next function or throw an error in this case if we pass it all these if checks if it is validated then we would call the next function but else we would return some kind of er that would be either internal error or you know like 401 404 things like that your custom error handling um so yeah I think this is going to be it for the backend part I think we are not missing anything we just build everything that we would need we handled the authentication the movies TV shows search end points um so yeah like everything just works as expected we have a really cool code base where everything is uh you know maintainable modular we even have helper services that we could uh use to just have our code base a bit clean and now you might be asking why are we fetching these movies in the back end right why don't we just take this URL and fetch it from the react application in a use effect now this is a good question but this is a junior question at the same time because we are using our API keys right we have the movie database API key if we use this in the front end then everyone can see this input I mean this API key in the client but since we are using this in the back end nobody can see this API key so this is the reason why we wrap this um why we wrap this API with our own API we use it in our back end in our server so that nobody can see this code because as you might know the server code that you have is never visible to end users but the code that you have under the front end folder or in the client Cent will be visible to everyone because that code is shipped to the browser right if you open up the you know Dev tools you could really just if you know how to search for it you can see it under the sources Tab and this would be something that I could mention once again in the front end part so it's going to be it for the backend section I hope it was helpful and enjoyable let's just take a five minute break and then we will move on with the front end part and I'll see you in the next section so welcome back to this section where we finally would like to start with the front end part I will just go ahead open up my terminal as you can see I shut off the back end because we don't really need it at this time let's say CD into the front end and we will just say mpm create V at latest and we will just put dot at the end this will tell that just install it under the current folder which is the front end so this is what that dot means let's press enter it's going to ask us a couple of different questions currently we don't really have anything inside let's just say uh yes to this one okay we'll like to go with react and JavaScript now it just created all these files and folders but we don't really have our node modules folder which is our dependencies that's why it says run mpm install let's just say mpmi for short it's going to install all the dependencies that we would need and put it under the note modules folder under the front end right so let's just wait for this to complete and while this is installing let's take a look at the packages that we will be using in the front end so first of all we will be using react hot toast package so that we could really get this beautiful notifications for Success case and error case there are different things that you could use but these these are the ones that we'll be using and we'll be using Lucid react which are for the icons so they have really great icons that we could use you could search for anything and get the value get the code and use it so you'll see how we could use it and then we have the react player which is going to allows us to just grab a video from YouTube and show it in this kind of player this is the demo application right this is what we'll like to build and we'll also be using the axus package let's just install everything while we are here I'll just say mpm install first let's just say axus and if you cannot see it let me just bring it up here and we will have lucid D react we will have react Das player react hot toast and we will have react Das router dasd so let me just shrink this okay we'll be using this package package so that we could navigate different I mean navigate to different pages where we have the sign up page login page homepage um Etc and finally we will be using the zoo stand package which is going to allows us to really have Global State and it'll just make sense once we use these packages let's press enter it's going to install all of them and hopefully we should be good to go and okay so it is installing we have this boiler plate code that is coming from V so everything starts with the main. jsx file where we have the app jsx right this is what we are rendering and I'll just assume you know a bit of react so that we could really just speed up the process otherwise this would be a react crash course right just to be able to see the output I'll just say mpm run Def and it's going to spin up a development server for us at this uh URL let me just uh so what have I done I accidentally paste what I have in the clipboard so just delete it and I'll just visit Local Host let's say Local Host 5173 and we's kill this take it to the very uh first one so there we go this is the application V gives you what I want to do is just really delete the content so we could just put high for now delete this and if you if you're not not able to get this es lint errors so here it says this is defined but you are not using it it's probably you don't have the es lint um extension let's see you should install this so that you can really have this beautiful linting in your code I'll delete all of them and we can delete the app. CSS file completely we'll just have the index. CSS um so let's delete the content from here save this save this one um we can delete the assets under the source and now what I want to do is just initialize Tailwind to this project so I'll just go ahead and say Tailwind CSS with vat and click to this one we already created our project it is time to install the Tailwind uh packages right the dependencies that we would need let's open up our terminal and make sure you are on under the front end okay so because this is the where we'll be using Tailwind let's paste it is first going to run the First Command uh which is this one then once it is completed uh we can run the second one let's wait for this okay now here it says run this I'll just press enter and it's going to create a file for us which is going to be the Tailwind config file so this will take a bit time time to load and there we go we just got the file let's see the next step we need to copy this content and paste it to tailin config.js file I'll go here delete everything and paste it let's kill this terminal and leave it like this then here it says copy this content and paste it to your index.css file and also save this file close it um with this I think this should be good to go to be able to test this out let's copy this uh this H1 and paste it to our vs code oops this is not I not I meant to open right so I'll just go here paste this H1 save and we cannot get any Styles so we need to just kill our terminal and restart it again so we have text of 3x large font bold underline and let's say text red 600 so these are the classes coming from T CSS and to be able to get this highlighting right you need to install this Tailwind CSS um extension called intelligence and it's going to give you all the other options you have right so it's both going to give you the auto complete as well as this highlight when you hover over it now if we just go ahead refresh this page we should be able to get all these styles that are coming from Tailwind CSS and by using Tailwind CSS we're going to be building our pages so let's go under the main. jsx first we would like to set up the browser router so let's say browser router wrap our application with it um just like this and let's try to import this okay so we need to wrap our application with this browser router that is coming from react router D so that we could really have different routes in our application so Pages like um the login page sign up page homepage and that kind of thing and let's actually try to set this up I will kill the sidebar and from the app I will say return routes coming from this package and we'll just have a bunch of different routes right for the homepage let's say path if you visit the homepage you can return this element called home page and let's try to create this homepage now under the source I will say pages and I'll just say home page. jsx and let's create the login page login page. jsx sign up let's say sign up page. jsx and we could say RFC to get this Auto completed code and for this I am using this extension called react okay it is this one es7 react Redux react native snapits and once you installed it you can do things like rafc or maybe RFC where you can get this Auto completed code which is really convenient so let's save this file close it RFC to this one save close and to homepage as well save and close now let's duplicate this twice where we have the login route and we will have the sign up route as well for this we will get the sign up page let's say sign up page and we will have the login page let's try to import them one by one we will try to get the homepage from the pages folder and login as well as the sign up if we save hopefully we should be able to see that pages so we are in the homepage let's go to the login page it works and we can go to the sign up page as well so for now let's just try to build these three different pages and now to get started with we'll be using a bunch of different uh images and different assets so I will provide them all of you in the description that you can find and let me just copy the link and paste it to here um so let me just delete this comment right copy it paste it this is the link that you can get from the description or link might change but the content will be the same so we'll have different images this is what we'll show in the 404 page this is what Netflix does as well so these are the avatars we will get so we will have different images really we could use them in our uh in our application so go ahead and install all of them and then put them under this public folder so what you can do is just delete this content completely and drag and drop all these images this is what I'll be doing just in a second so I just drag and drop all these images and we'll be using them as we move forward with this uh tutorial now the very first thing I'd like to do is just go into the index. HTML file and I just want to update the fav icon which is going to be coming from the public folder that's what this slash means let's say fav icon.png and if you take to look at it there is actually that file this image that I prepared for you which I just basically grab it online let's save and just take a look at it here it's already updated our Fab icon and the other thing we would like to do as the Netflix does where we have this background right so this image is also provided which is going to be the hero.png and we'll like to just set it as a background we will go into the index.css and just create a class called hero let's say hero dbg and I will say background image let's say URL and we'll just go under the let's say hero. PNG and this should already work out let's save we can go here under the homepage let's say class name hero uh let's say the dbg and height screen let's see how this will end up if we visit the homepage okay we can see the image now we could add a bit more let me just zoom out we could add a little bit of gradient on top of it this is how we can do instead of leaving it like this we'll just put a comma and before this we'll say linear gradient call this function and let's say rgba 0 0 0 and lastly we'll just put point a and this would be the Top Value and let's just do the exact same thing rgba we'll just put three zeros and I think just 0.1 if you save this now it should have some kind of gradient going from the top to the bottom this is how we can change the opacity this is going to be it for this file and I think we can just start with the let's say sign up page let's go into the sign up page and just try to build the UI then we'll build the login page and then the homepage okay I'll go here and just say class name of let's say height screen this means the full screen it's going to take and with full hero dbg and now first we're going to have a header so I'll just say header which is going to hold the Navar component let's give our classes I'll just say maximum width of 6X large MX Auto so that it is centered let's say Flex items would be centered justify between and gap of not Gap but I think P of four which stands for pading and we will have a link component coming from react router D this is going to take us to the homepage once we collect it then this is going to have an image which is coming from the public folder let's say Netflix D logo.png we could just say this is going to be the logo right and class name of with 52 okay so this is going to be the header component we can leave it like this then below this we will have the dev component so in the sign up page we will have a form with input elements that is going to hold the let's say the email username and and password right so I'll go ahead and just type a bit of classes Flex let's say justify would be centered items would be centered margin top of 20 MX of three then inside this we will have a another dep right let's put classes width P let's say maximum width would be medium which stands for 40 I mean 448 pixels then let's say petting would be eight space y of six this is going to be the Gap in vertical direction we could update the background let's say black but change the opacity just decrease it a bit and let's say round it will be large this is going to give border radius and then shadow of medium and inside this we will have one diff this is just going to say sign up I think this could be instead of uh diff let's say this could be H1 this is the only title in this page and let's give these classes I'll just say class name of text would be centered text would be white which is going to change the color update the size Al bit font of bold it's going to update the width and margin bottom of form and below this we will have a form let's just say it's not going to have any actions but let's say class name space y of four each item will have space of uh four units which stands for 16 pixels and first we'll just have a div that is going to hold a label I didn't mean to autocomplete this let's say label and we can shrink the left hand side so here in this label we will have email text and we could put the HTML for to be email and let's say class name of let's say text small font medium and we'll say text text Gray of 300 and display of block so that it just takes the uh entire line right then we'll just put an input um this is going to be type of email where we can put couple of classes let's say withp you know petting X of three petting y of two let's say margin top of one we'll put the border border gray 700 let's say rounded MD and then we will just give the let's say background would be transparent and we'll say text White and the focus State we'll just say outline would be none and focus would be ring okay so I know this is just getting a bit boring but just bear with me we'll see the output just in a second let's say placeholder will be something like you at example.com and I think we can just also give the ID because we said HTML for email so we just give the ID to that input let's save and visit the sign up page here we can see we have the nav bar which holds the icon right the logo then we have this black uh div with this how do we call it like we change the opacity to 60 that's why it is all bit transparent then we have this input here let's just delete those and this is the title as well now we'll just duplicate this a couple of times we will have the username as well as the password so it doesn't make sense to write this from scratch right I'll just copy it paste it instead of email let's say this is going to be the username HTML 4 is going to be username since we updated this part we should update this ID as well now why do we have this label of HTML 4 is because if if you click to the label it is going to focus the input right this is why we even add this in the first place and type for this will be text and let's save what are we going to see there we go we have the username as well for the placeholder let's just say John do as the placeholder for the username and lastly let's copy this again and paste it we will just say this is the password type would be password and let's say password so that we don't really have a typo HTML 4 is not going to be username but it is going to be password so I just updated both of them and for this what I'll be doing is just really put this uh like put this character if you cannot get it you could put something like this but I'll just leave it like that let's see there we go we got the password username email and we can just have a button at the very bottom so below this div we will just say button let me just scroll little bit this is going to say sign up we could have the class name of with full petting y of two let's say background red of 600 text would be white let's say font would be semi bolt and rounded MD let's say and get a bit space on the hover State we could say oops I just did a mistake here we should be under the string let's say on the hover state background would be red of 700 and hopefully this should work out let's see this is the button and below the form we could have a div that says are you already a member right let's say class name text is going to be centered text would be gray of 400 and then and already a member let's just say already member or already have an account I'll just go with this and we'll just have a link that says if so just sign in and this would take us to the login page finally we'll just give the classes text R of 500 on the hover State we could just underline it hopefully this should work out and we don't really have a space here right could you see this let's give it if we do so it is not going to work how we can fix this is just give a JavaScript space like this and now okay come on update so it didn't update it because I forgot to add the space now it should work out okay so this is the everything we would need for the sign up page for now once we click to this it should take us to the login page and if we click to this it should take us to the homepage and while we are here we could keep track of these states right why don't we just uh do so I'll go here create three different states as you can imagine the first one is going to be for the email let's say email set email use State grab this let's get for the username and for the password and when we submit the form we would like to call a function I'll just say const handle submit function or let's just say handle sign up doesn't really matter it's going to take the event and we don't want to refresh the page once we submit the form so I'll just say event prevent default and we can just console log all of our states let's say email username and password now we need to bind these states to the inputs so I'll just say value for this is going to be email and on change we're just going to update the email with the set email function just like this we will take the event and update the state so let's do the same thing for this one take the value and own change and for the password okay and once we submit this form let's go here we'll just say on submit you should call the handle signup function Let's test it out I'll just open up my terminal I'll just say my email is John so I accidentally pause the video while recording um so what I have done is just put the email username and password so this is 1 2 3 and I just say sign up and I can see this in the terminal and it should be working the exact same way let's say 456 and here we just got the password as being updated we could say John do 2 uh John 2 and sign up we just got the uh expected values so this is going to be it for the sign up page so let's try to build the login page which is going to be pretty similar uh instead of uh username we will only have the email and password this is going to say login or sign in then we will have the button updated and this is going to say don't you have an account then visit the sign up page so it is going to be pretty similar to this one that's why we could really speed up the process a bit by copying and pasting the sign up page so this is what I'll be doing I'll go here maybe just copy this entire return statement and put it into the login page up here right and let's see we should have only one return let's import the link instead of handle sign up let's say const handle login which is going to take the event and we will just prevent the default which will just show the email and password let's keep them in the state so email and password let's grab this and paste it to here so we have the email we're not going to have the username on the login page so I could delete this and we'll just have the password instead of sign up we could say login and let's say don't have an account then sign up which is going to take us to the sign up up page now this is not an error this is a warning that we'll just fix in a second for now let's save and test out the login page okay there we go it just works as expected let's update this header as well I'll go up here and I'll just say you know login okay so I can go here and just test this out as well I'll say my email is this one my password is from 1 to four and it just works as expected and we can navigate from these two pages now we would like to update this error where we just it is not an error but it is a warning coming from eslint here it says instead of single codes you should use one of these if you take this and update it it works but I think this is really annoying the fix is going to be under the es lint where we go here here and under the rules I'll just say react I mean um no unescaped entities is going to be off or maybe entity and so this is the name it should be entities so this is how we can really fix those errors you just get the name and you even turn it on or turn it off enti like this okay now we don't really have have those errors so that was going to be I mean that was the login and sign up Pages next we can build the homepage now in the homepage we will do something a bit different so this homepage is both going to be the oath screen as well as the home screen so what do I mean by this this is the homepage that user visits okay so if user is unauthenticated then they are going to see this landing page that we have but if user is is authenticated and visiting the homepage they're going to see this kind of a page so we will have two different screens that is going to depend on the state of the user so let's build this oath screen first and this is the desktop version and this is the mobile version we'll just make it to be responsive and let's start with the desktop or really the oath screen I'll go here under the homepage I will create two different components so maybe what I can do at this point create a folder for the homepage specifically and I will drag and drop this into the homepage and update the Imports this is going to update that this is coming from the home folder and I will say oath screen. jsx and i' would like to have the home screen. jsx now this is going to make sense in a bit just please follow along with me this is the home screen this is the oath screen and let's save this file as well we will go into the homepage and we will just return something like this let's say Dev um here I'll just hard code this value for now but later this would be coming from the back end from our server I'll say now user is false and we will say if user is authenticated then show the home screen but else show the o screen let's import them um just like this now since user is false we will see the oath screen component in the homepage but if we say user is authenticated then we will see the home screen component right and let's start with the oath screen which is this one right this entire page we're going to build and at the bottom we will add the footer compon component okay so as always we will start with the hero BG background and then Navar and then this hero section where we have couple of different P tags then a like input and then a button okay so let's try to build it I will shrink my left hand side and head over to the oath screen component now as I said let's first just delete this put our class name here say class name background of hero but this is how we call it hero dbg and we could give relative into this probably we'll be using absolute positioning let's create the Navar component and I just want to uh copy and paste and walk you through so that we don't really waste too much time let me just import the link from react router so we have a header component the maximum width of 6X large which is this number of pixels we uh Center this to the middle of the screen and we give Flex so that they are side by side and we just say they would be just thei between so this would be on the left hand side this would be on the right hand side which is a link that takes us to the login page let's see if we go here to the oath screen we need to change this first let's say user is false so that we can see the oath screen component and there we go now we just have this um header component right and then below it we'll like to build kind of like an hero section I will go into the oath screen maybe we can close those and just focus on the oath screen itself and below this header I'll just say hero section and I'll go below we'll just say div this is going to have couple of different classes again let's say class name Flex now Flex would be column items would be centered and let's say justify is also going to be centered text centered we just Center everything basically ping y of 40 text of white not wrap let's say white and maximum withd again 6X large and just Center this with MX Auto and inside this now we'll just have an H1 that says unlimited movies TV shows in more and just to speed up the process I don't really want to type this out but paste it because there isn't anything complex here we just say text would be 4X large on smaller screens and medium screens and above we will just increment the font size to be 6X large which is about 60 pixels and here it is 30 let's say 36 pixels right this is how we can do responsiveness with tailwind and below this we will have a form let's say form element and as we do this you can always save and take a look at the output and just understand how that works basically we have three different elements that are vertically uh centered because we're using Flex colume then we're not going to have an action but let's say we will have a class name which is going to be Flex flex colume but in the medium screens and above is going to be Flex of row why do we do this is because in the medium screens and above which is desktop they would be side by side so Flex is row but in the mobile they would be Flex column right so they are in the vertical Direction so I hope this makes sense and this is how we can do responsive design with um Tailwind let's say Gap four and width would be half of the container and we will have an input at this point I could just copy it and paste it let's create a state for this as well I will say const email set email get it from the use State user will be able to type their email and we will keep track of it with this uh input with this state so we have these styles with a placeholder typing email and then we'll just have a button again I'll just copy and paste the button so please feel free to type this out or grab it from the source code I am not typing this all from scratch because I just want to focus on the full stack development instead of these super basic tailman CSS classes so let's import the Chron right from our icons which is going to be the Lucid react so I'll just go here this is going to be coming from Lucid react uh package let's save and just see what we're going to get let's refresh crash is it going to work so probably it crashed let's see why this is the case um it tries to reload okay now it just it is working let's open up our terminal or Dev tools now here once we hit the medium break point they would be in the vertical Direction because we're using Flex colum and this is already responsive okay I hope this makes sense now below this what are we going to have is basically a separator component here you can see let me just zoom in I cannot I cannot zoom in more than this but I think you'll just see it in a second let's go here below this form below this Dev which was our hero section we could put a comment we already have and below this let's just put a separator component I'll say [Music] separator I think it should be with a like this and we'll say div this could be a self closed div let's say class name of height of two width of full and we could put a custom background color so I'll just say hash 23 uh three times and since this is just a decorator screen readers doesn't really need to see this so we could say area hidden would be true and with this we should be able to get this um so to say separator I hope this is visible right and now let's try to build the next component which is going to be our very first section we will have text on the left and image on the right and in this image we have a video let's visit the Netflix website okay so this is how it works basically they they just put an image this is the image that I provided you then like we have the video that is playing and they position this video into the middle of the TV and this is what we'll what we're going to be doing we'll go here below this separator we'll just create our very first section so here let's just say uh one div with petting y of 10 let's say under the class name background would be black and text is going to be white okay inside this div we will just have a left side and right side that's why I'll just say um first we create a um container so this is going to be flex and once you say Flex the items would be side by side by default let's say maximum width of 6X large MX of Auto items would be centered justify centered as well medium and above Flex would be row and again I'll just show this what this means Flex would be colume and we will say petting X of four lastly medium screens and above pettings would be uh decreased a bit then we will have the left side and we will have the right side let's go here just say right side on the left oops if I can do this right we'll have left and right divs on the left side we will just have CL name of flex of one and we will add this class of Flex one to this one as well now what this means let's just say right and let's just say left this would take the uh half of the screen and this would also take the half of the screen not half of the screen but half of the parent my bad okay let's just test this out there you can see this is the entire width for the left and this is the width for the right you can see with the Border if you just give it let's say border let's say border red of 500 so here we can see they have the exact same width is because we give the flex of one to each of them now let's start with the left container um this is going to have basically two different classes as well let's say text is going to be centered in the smaller screens but medium screens and above text would be on the left hand side and this is going to take these two elements I'll just put H2 and ptag these are the things that I took from the actual Netflix website and on the right hand side we will have an image let's say image this is coming from the public folder where we have tv.png for the alt we could say TV image and let's say class name of margin top of four let's save and what we're going to get so basically this is the output now let me try to explain why did we put this Flex of row and column um let's see so Flex is going to be column on the smaller screens but here it is row because we're in the medium screens and above so once we hit the smaller screens or below the medium they are in the vertical Direction and here now this text is being centered this one as well but if we go into the a bit larger screens they are on the left hand side right they are not being centered and I hope this makes sense now we would like to take the video and position it absolutely in the middle of this uh image this is how we can do so we will just create a video element let's say video the source which is not going to take any Source let's go into here this would be getting a source element which is a self-closed tag let's say Source this is how we called it hero vit do m4v this is the file format and let's say type let's say video MP4 now for the classes we will just position this Absolutely I'll say absolute top of let's say health right uh 1 divided two left of the same thing basically this say 50% as you can see from here then we will just take it 50% back to the left let's say translate X of okay if I can type 1 / by 2 and I'll do the same thing for y I'll just copy it go ahead paste it and then we'll just say height would be 1 / by 2 okay so I just had really trouble typing this out but basically this should work out now it didn't let's see maybe we should say this would take the relative class okay now it just works out and why does this work maybe we could also change the Z index for a second I'll just say maybe Z should be something like zero or maybe minus 10 okay it has just gone completely maybe just say Z index of zero is it going to work and we could take the image to the front by putting Z index of 10 okay so this doesn't really work out because here you can see like this controller is back of the video maybe we should say something like this would be play in line let's say plays in line we will say also this would be Auto playay of true and we will have muted and this video would be on Loop let's save is it going to fix it let's refresh okay so it is playing but here we have the controller in front right let me just debug this and come back to the video okay so what I have done is just give this Z index of 20 and Z index of of 10 for this one so it didn't really work out until I add this relative positioning so if you leave it like this it doesn't work out and to be able to make an image get the Z index you would add the relative class once you do so now this would be in front of the video because the Z index is higher than this one okay so this is the output that we'll like to have and so the video is now being centered it is muted and playing automatically for us right like this is how it's going to look like in the normal Zoomed In level now next what do we want to do is just add a different separator as well or the same one now this time we will have image on the left and text on the right so this is how they do it as well and we will put this gif as well okay so we'll just go ahead and try to build the second section um I think first we need to just put a separator below this I will copy this two lines paste it and this is our first section now let's just say second section and try to build it it is going to be mostly the same with the first one in terms of classes but this time we will have the left side as being the image and on the right side we will have uh the text so let's scroll and try to build the second section I'll say class name of petting y of 10 background of black text of white just like this and below this we will have the exact same div that we had above which is going to be this one so we could copy it and paste it let's say class name this is going to be that container on the left hand side let's first try to build it then we will also have have the right hand side let's just go here and just say right side this is going to be the dev but we'll uh fill it later in the video right just in a second I mean let's say on the left hand side we would have the class name of flex of one let's delete this space and this is going to be relative as well then inside we will have one more div let's say this is going to also have the relative class and then we will go inside will say image and if we have the relative on this one I think we don't need to add it into this so we could delete it on the image we will show The Stranger Things large image let's say stranger things- lg.png this is the image that you could take a look under the public folder let's just say stranger things image and this is going to take the class name of margin top of four and and then below this image we will have this div let me just show it we will get this div and position it absolutely on top of this image so this is stranger stranger things large image and this is the small one so this is the div now we'll like to position it absolutely on top of this okay but is going to be this div let's say this is going to take the class name of flex it is going to be items would be centered gap of two absolute let's say it is going to be bottom of five and left of uh let's say half of the uh parent let's say 50% and we would like to say translate X would be 1 / 2 so it is 50% back BG of black let's give a bit space then width is going to be 3 / 4 and this should be inside right but in the larger screen and above width would be half of it just like this and height would be 24 it's going to have a border with the color of slate 500 and we could say rounded would be MD finally petting of two now inside this parent we will have an image which is going to be the stranger things Dash small.png and we could give it a name uh just say image you could give a appropriate alt I'll say class name this is going to take the full height and below this image we will have a div that is going to say downloading these strer things I will just give a couple of classes to this one Flex let's say justify um it should be between items will be centered width is going to be full and we will have one more div let's say Flex of colume and gap of zero so we will not have any Gap in between these span elements so we'll have two different let's say stranger things and then we will say downloading with the three dots let's say this is going to take the text of small and color of blue 500 and we can go here and also say this would be a bit larger text such as medium larger screens and above this is going to be a bit larger font would be bolt let's say okay so finally below this St we will just say we'll like to have one more image this is going to be the download GIF I'll say that down load D icon Das GIF and class name of let's say height 12 let's save hopefully we should be able to get the output that we would like to have this didn't work out let's see what why it didn't um so are we missing something let's just say this is going to be relative is it going to work so it didn't obviously that wasn't the case but first we are just just having the wrong image let's see why this is the case we have download icon. GIF so this GIF is working but the small image is not working stranger things okay I have a typo here let's leave it like this uh but this is a bit too large let's see class name of height full so I think it's because height 25 is not defined it should be 24 I just had a typo here and we could delete this relative class let's save okay now it works at least the height but the position is not correct do I have some kind of typo here let's see left like 15% I mean 50% this also works so I just pause the video and take a look at it it's because we are missing the class name of Flex one on the right hand side now they would be having the exact same height or I'm sorry the width let's say right side now this has the 50% of the parent and this also have the 50% that's why now this has the uh appropriate width if we go into the smaller screens let's see here you can see like the let me just show this the width of this is going to be increasing a little bit more because this is the classes that we just gave and if we hit here now they are in the vertical Direction right so we have this and then the right side and the right side content is going to be really really basic which is this uh H2 and ptag let's go ahead and try to build it for the right side I think what I'll be doing is just copy and paste it entirely like this we have an H2 with a P tag and let's give the classes medium of text left and smaller screens it would be centered so this is what we have exactly done above so here we go now let me just take it like this and here is how it works now what Netflix does they take this and put it at the top in the Mobile screen let's see okay here we can see they first show The text then the image but in our case it is in the uh different order because we didn't fix it let's try to do so we will go into the parent which is this one right instead of flex colume let's say Flex colume reverse let's see if this is going to fix it once I hit here there we go the order has been reversed we first see the um title and text then the image so this is going to be it for this section as well what we want to do build the third section again I can really take the separator and put it below and what are we going to have on this section let's see a different image and video on the right hand side so this is the exact same thing we can copy it and paste it so we have the separator let me just put the comment and I will just take this entire first section and and put it here I'll just say this is the third section okay let's save first take a look at it then we will just change the content okay so let's start with the ptag so instead of enjoy on your TV we will say watch everywhere and for the ptag we can just put this coming from the Netflix side and now this right side is going to be I think a bit different let's say this is going to be relative and let's say overflow would be hidden then we will have the device pile image let's say the device- pile. PNG we could really put device image as the old tag for the classes margin top of for Z of 20 and this is just going to take the relative then we'll have a video with the source being video devices Das the devices. MV I mean m4v and now if we save let's see what we're going to get this is a bit different right the positioning doesn't right and we can update this by taking this video to the a bit top and maybe change the width a bit so these are the values that I really work with and even take a look at it from the Netflix uh website so they use maximum width of 63% and they also use height of let's say four of six and I think this should fix it let's just see it didn't uh for the translate X we have this value for the left and for the top instead of 50% they just use eight pixels okay so this still didn't fix it maybe we should delete the Translate Y part okay so this is how that work and as I said if you are wondering how did I get these Dimensions or these values basically I just said inspect and really go deep into this Dev tools and just see the computed values how they did it and I was able to to come up with these values just to make that work the exact same that we have here for the video Let's update the value or did we already update so it looks the exact same thing but like they have this video Let's see which is is it this one so video devices Hero video um so it should be this one actually video Dash devices for some reason it didn't work Let me refresh this page okay so now we just got this video right and finally we can build the next section and as always we will just get a separator let's copy it and paste it after this section which is this one then we'll put the fourth section not footer let's deleted let's see what we have an image and a title right so just like this one but it is a bit simpler so I will say not footer fourth section and create a div let's give it space So this is going to take the exact same classes that we give above ping y of 10 background of black and text of white let's say say white and inside this we will have Flex let's just say class name of flex okay this is getting a bit annoying but let's say maximum width of 6X large MX AO items of centered justify centered Flex of let's say colume and medium screens and above Flex would be row and I think this should be Flex colum reverse so that we got the exact same thing as we did above ping XG of for medium screens and above we could update the Ping Al bit okay inside this we will have an image as well as the right hand side so what I'll be doing is just really copy and paste this is going to be the left hand side feel free to type this out or grab it from the GitHub repo uh we just done this multiple times that's why I don't really want to waste time by writing those classes so once we just hit here they should be responsive and like it just works as expected at the very bottom we could show the footer element so it is going to be looking like this built by you and the source code is available on GitHub let's build that footer as well so let's close this under the front end let's create a folder called components and I'll just say footer. jsx and this footer component is going to be pretty easier than what we had so far so let's say this is going to be a footer component and now you know like footer is pretty basic at this point I just don't really want to waste time please uh don't get mad I'll just paste it and you can really update these values with your own we have bunch of classes that just um that just includes a ptag with two different links you could put your own GitHub GitHub repo and GitHub profile and we would like to show this footer component below all of our routes let's wrap this with fragment and just call the footer component and this is the entire file if you really want to just type this out okay so let's test this out if we go here we should be able to see the footer and why do we put this footer outside of the rods is because we'll like to see this every single page if we go to the login sign up or homepage we should be able to see it right so I'll go here into the login uh oops let's say our Local Host was this let's say sign up we should be able to see the footer component here and if we go to the login again we should be able to see it so this is going to bit for the oath screen page as well we just built this entire page with the footer at the bottom and I'll see you in the next section okay so in the last section we have built this oath screen and we even made it to be responsive now maybe it is time to build the signup functionality and to get started with we'll just put our email here and once we say get started it should take us to the sign up page to here and if user just visit the/ signup we will take them to this page immediately but now the benefit here would be if I just put my email here let's just say I put ABC email.com if they say get started this should take them to the sign up Page by filling this email so let's just try to do this and let's see how we can implement it so under the oath screen we have this form where we can submit this right I'll just say on submit uh let's say on submit like this I'll say handle form submit and we'll like to create the function for this I'll go here say const handle form submit we'll take the event and we just don't want to refresh the page we'll say event up prevent default and what we want to do navigate the user to the sign up page so I'll go here I'll say const navigate which is going to be coming from use navigate Hook from react router D and I'll say navigate to that page and which is going to be sign up and we can add an email as an argument right or as a Prem so we'll just go here take the email which is coming from the state let's try to do so I will save this file and just go to the homepage I'll say ABC email.com and I'll say get started here you can see we can get the email in the URL so here we'll go into the sign up page and grab this from the URL and put it as the initial State for the email so let's visit the sign up page and this is going to be the component where we'd like to Fage the email from the URL right I'll go here and I'll just say new URL and just make sure it is all uppercased we will say document.location and this is going to give us let's say search PRS I'll say con and let's grab the search prems just like this we will go below and we can just get the email value I'll say email value search prems doget the email this is how we store it in the URL and I'd like to take this above the email so that I could give it as the initial value I'll just say email value if it is null then we can just have it as an empty string right let's save and now if we go here we just got that value as the initial state right let's just try to do so I'll say XYZ and add gmail.com I'll just submit this form there we go we got the starter point and from here and out what I'd like to do once I fill up this form once I click to this button it should send a request to my endpoint right which is something that we have already created under the oath routes so what we can do is create a global state where we can store the currently authenticated user with the functions such as login log out and sign up so you'll see uh just in a second why we do this let's try to build it I will say create the store fun uh store folder where we just store the oath user.js file and in this file we will be using the zoo stand package if you go under the package Json this is something that we have already installed which is going to be the global State Management library that we'll be using um if you haven't used it at all let's try to just build this a bit and you'll see the benefit of this and how how convenient is this so I'll say import create function from zo okay just like this let's say export const we basically create a hook let's say use oath instead of user let's just say oath store and we'll like to create call this function which is going to take an argument okay it's going to be a function as the Callback right and it is going to take a Setter function okay let's go here and just say this is going to return an object so I will wrap this with normal parenthesis that means we are returning this object from this hook so whatever we return from this object is going to be the state for us let's say we'll like to have the user state which is going to be the currently authenticated user and by default this value is going to be null then we will have let's say sign up function right I'll just say sign up and this is going to be an async function and okay so this is what we have we will add bunch of different things so we'll have login log out and even uh something called oath check so let's just uh rename them I'll say login we'll say log out and we could have this oath check function now the benefit of using this file this zo St is that you can now go into the any of the pages or components call this hook and get any of those values so if you want to get the signup function on this file you would say use oath store call it uh not like this just like this okay you just call the hook now you can get the sign up function or you can get the login log out or anything that you can really have in this file in this case we'll like to get the signup function and we can put the logic into here and this is what we'll be doing let's just say this function will take the credentials which is going to be let's say the username email and password and here let's say try and catch in the try we would like to just send a request to our endpoint let's say con response we will say AIS and let's say await also import the package let's say this is going to be a post method and if you remember our endpoint so we had API V1 oath SL signup right then login and log out let's handle this one first now instead of every time putting HTTP Local Host 5000 SL API slv1 SL oath SL signup what we can do is just eliminate all this part right we don't really want to put this on every request so to be able to fix this we can go under the V config JS and add a proxy and maybe before that a server object here we say this is going to be our proxy object and we will say Target um so not Target let's say/ API then this is going to be an object where we have the target is going to be Local Host 5,000 so what this means is that whenever we use SL API it is going to prefix this with that so if you just say SL API then it is going to put this part on top of it but you don't really have to do this I hope this makes sense now right so we have our endpoint we just sent a poster request with our credentials I will just put it as the second argument and once we sign up we can set our state so we had user was null now we can really update it we will call the setter function where we want to update our user State we will say it is going to be uh let's see response let's say response. dat. user this is what we are returning from the back end right let's go into the sign up controller we say if we sign up successfully then we'll just return the user object and we also have the success state right okay so this is what we are really trying to return let's save this file to make that work and um so like what we can do else just add a loading State for the sign up functionality so I could say something like is signing up is going to be false by default and once we uh try to do this maybe even before that we would say set is signing up would be true and once we get a response back we would say is signing up is going to be false and while this is true we could show some kind of loading state right and then in the catch let's say toast uh. error this is this toast is I mean sorry this toast is coming from the react hot do package that we installed and to be able to use this we will just do one configuration pretty quickly but first let's just put our message so we'll say error. response. dat. message and if this is empty for some reason we could just say an error occurred right or you could say sign up failed and below this again we will just say now set user is going to be false as well as the loading State let's say user would be null would be null because this one just failed okay and to make this toast work we could go under the app.jsx and outside of this routes we would just get a toaster component from react hot toast and we could maybe put it before I mean below the footer okay if you put this then you can use these functions is coming from toast object let's say here we could say toast. success sign up successful right or let's say account created successfully account created successfully okay then maybe before we try to implement login and log out we could really just test this out but first just make sure that you open up a new terminal and under the route you say mpm run Dev which is going to go ahead and run the API right it's going to run the server.js file and let's wait hopefully it's going to uh connect to the database and while it is trying to connect we could just open up the mongod DP so that we could really check uh our dashboard so let me just try to sign in pretty quickly okay so I just logged into my mongod DB account right I just have my overview of the database I can see all the users that have created previously and I have my terminal up and running mongodb connected so what we want to do is basically call this signup function in this file which we already destructure it and once we submit this form if you remember we are calling this function let's see under the form we say onsubmit um call this function we prevent the default so that it doesn't refresh the page and now we can just basically say call the sign up function right I'll just say um delete this line and maybe we could create TR catch but probably we don't really need it because we already have done this um in the in this file where we will be showing a toast under the catch right I'll just say sign up call this function with my credentials which are email uh username and password so hopefully this should work out let's save and just try to create an account I'll go to the sign up page let's see this crashed for some reason let's open up the terminal on the front end so it didn't crash let's see I'll just go to the homepage okay so for some reason it didn't load but let's say I would like to sign up with ABC at gmail.com I'll go to the sign up page put my name let's say my name is ABC and password is 123 let's say sign up there we go we just got our first error that says password must be at least six characters let's delete the username it should say all fields are required because we are checking all these errors from the uh in the back end right and let's just say ABC now put a valid password such as 456 and now it says account created successfully let's check our database I'll go here and just try to refresh hopefully we should be able to have the ABC account at the very bottom there we go this is the user account that that has been created now what we want to do once we sign up it should take us to the homage and uh like let's see how we can do this basically under the homepage let's see where that is under the homepage we say user is false this is hardcoded value but what should really happen is that this value should be coming from our API and it's going to say is user authenticated then this would be true right otherwise it would be false and depending on that we would update our UI currently this is false that's why we always see the oath screen in the homepage right so we cannot really navigate to the home screen and to be able to fix this we will just create a different endpoint in our routes so under the oath route. JS I will just say duplicate the last one and this could be a get method because we will just check for the authentication so here I'll just say oath check and I will call the function o check we don't have this function we will create it just in a second and we could make this a protected route so I will say import this protect route function and this will basically uh handle the protection right if user is not uh authenticated we will return something like unauthorized IED no token provided or invalid token but in the other case we would put that user to the request object right so now that we have protected this Rod let's try to create this oath check under the oath controllers I will just scroll to the very bottom I will say export async function which is going to be oath check let's say request and response this is going to be really really uh basic function we will just have a try catch and in the try we would like to just send the user right I'll say rest. status of 200 Json of success true and instead of message we could really just return the user and this is going to be coming from request. user but there is an issue with this is that under the request we have the password I think let's go into the protect route function oh okay so we don't actually have the password because we remove it right um so I thought we didn't um that's why I said there is an issue but as we can see since we removed it there is not any issue by returning it like this and so basically this is going to be the try case and in the catch let's say console log first um error in O check controller and we could just say internal error okay so this is going to be just a simple function that will allow us to check if user is authentic ated or not which is going to be a get method right so we can go into the uh let's just close all of them we will go into the oath user and call this or handle this function where we can just check for the authenticated user so I will just go ahead and just say try and catch again let's create a loading state for this I will say is uh let's say oath or maybe let's say is checking oath which is going to be false by default or maybe uh this could be true right so why this is the case is that when we just refresh the page it should immediately check for the authentication we would show some kind of loading until we just see if user is authenticated or not so that's why this is going to be true because immediately we will just call this function and you will see um just in a second before we try to handle the logic let's say uh set is checking out will be true even though it is true let's just put it and make it explicit in this function and I will say const response AIT a.get and we will just go to our endpoint so API V1 uh oath and we called it as oath check we could probably call it as just check as well but I'll just go with oath check name and this is going to give us a response which is going to be the user so I'll say set the user is going to be response data. user and state is going to be false because we are not checking it we just got a response back in the catch case we could just say set user uh or maybe is checking out is going to be false and user is going to be null so here you don't really want to say toast. error um I'll just show you why uh for now let's comment this out and I'll try to explain this just in a second okay so this should be our function and we would like to call this in the app.jsx so for now let's save this file and close it we didn't change anything here really I will go into the app.jsx and I will say let me just call the use oath store right which is going to give me the currently authenticated user I can say con grab this object and we even have the state called how did we call it is checking o so this is going to be true for a second when you refresh the page let's just say console.log the user we could say oath user is here and just console log it okay let's see and hopefully we should be able to have something in the console because we just signed up with ABC account let's see I'll just refresh this page okay it looks like we didn't get really anything um why this is the case let's see we have the user here uh let's just say maybe response do we have any errors by the way in the console okay because it crashed let's see oath check is not defined in the oath route I forgot to import this function that's why it didn't work out just make sure you get that function save this and now we don't really have any errors let's save this file is well we didn't change anything here and we should be able to have the user in the console so we still don't let's see do we have anything wrong in the terminal okay so we don't why this is the case let's just take a look at the network tab or maybe in the application under the cookies do we have JWT Netflix okay so we have it also right it says like so we just got the token it should authenticate us um maybe we could just do some console login right I will go into this oath check and I will say console. log request. user is equal to the request. user so this sometimes happens let's just refresh okay so we don't even hit this function for some reason because we didn't see the also log let's see in the network tab so this is some live debugging so don't get bored please um so we are in the homepage looks like we didn't have any network requests why this is not happening um let's close the signup page in the app.jsx so if we are not hitting that function it might be probably we having an issue in this file so API V1 oath and we call it as oath check right um so we have this function but we never called this right I just find my mistake we never called this function that's why it is not happening so sorry about this it was my mistake we should get the oath user function right and we'll like to run this in a use effect so that it runs only once use effect let's import it and let's maybe delete this part we will say just call the oath user function and why did we call it as oath user um maybe we should call it as oath check so this is how we have it I'm just making too too many mistakes at this point but let's just say o check and just try to test this out now here we can see we just got both of the like requests if we refresh we should get all only one uh is because we're getting two is because react is rendering twice in the development mode but that's fine at least we just see we have the network requests let's go under the console at first user is null until it loads we got this response from the back end and here we can see the user profile and there is not password in this response right let me just zoom in and here you can see password is eliminated right it is being deleted and now this means if we are authenticated maybe we should take the user to the homepage right they shouldn't be able to see this oath screen I will go into the homepage component and instead of getting the user like this I will say give me the user from use oath store call the function and did we call it as oath store um so let me just close all these files they are really getting annoying we have user right okay this is how we called it now this is a True Value we're going to see the home screen let's save and go to the homepage there we go we just see the home screen which is something that we haven't built but let's try to add a log out button here for temporary reasons and we'll just try to log out I'll go here and I'll just say this is the home screen that we have let's put a button that says log out and on click to it we'll just call the log out function which is going to be coming from our hook let's say use oath store call it and grab the log out function so I hope now we are able to see the benefit of this using zo stent where it really gives you Global state that you could use in every place now you can really go into any of your components just imagine you have multiples and in the later indiv we will have actually lots of different components and we can just go call this one line and get the currently authenticated user just by doing this it is like a context okay so we'll say log out and let's try to implement the log out function I'll go here this is going to be pretty easy to do I'll just say this is an async function where we have try catch and let's put a loading state for this as well I'll say is logging out we'll just say false for now once we go here we could just set it to be true and in the try we'll say const maybe we don't even need to say const response because the response we got is not really important we could really just show a tost let's say await axos do it is not going to be get but it's going to be a post method let's say API V1 oath log out and if this is completed successfully we could just say set user to be null and loading state will be false but in the catch case we will just update the logging out state is going to be false and we could show a toast that says an error occurred or maybe log out failed and here we could say um logged out successfully let's save and once we click this button it should work out I'll just zoom out a bit and for some reason it already logged us out um I think it's because when you change one of the back end code um it just logs you out let's try to sign up with a different account I'll say um I don't know like let's say XYZ at gmail.com get started my name is XYZ from 1 to six now we account is created successfully let's go to the homepage and I will say log out click to this button okay there we go it just says log do successfully and if you take a look at the application the quickies you cannot see the quickie because it is being cleared out and now what we can do is if we are in the sign up page and if we log in it should take us to the homepage so this is how we can do we just got the user right so here it says you're not using this but this is fine we're going to be using this just in a second for now let's say if user is visiting the signup page and if they are authenticated let's say if we have the user then let's say if we don't have the user then show them the signup page but if they are authenticated we could navigate them let's say navigate and shrink the left hand side so that you can see this now navigate them to the homepage I hope this makes sense now we just say if user is visiting the signup page and if they are not authenticated show them the signup page but else navigate them to the homepage let's do the exact same thing for the login I will put this and grab this part and let's just test this out if I try to go to the login page I can go because I am logged out and if I try to go to the sign up page I can but if I go and try to sign up I'll say John [email protected] because we already have the John account in the database let's try to sign up with this account it should say username or email already exists let's try to with this one okay it says account created successfully and we just redirected to the homepage right there is no way that I can go to the let's say sign up page it just takes me to the homepage immediately let's try to go to the login page and as you can see we cannot we can't just visit that page but there is an issue here if I just try to go to the sign up page just take a look at it here for a split second we see the uh sign up page right just for a second like it's really quick and I don't want to see that effect and that's why we even have this if check right or this uh loading State we will go into the app.jsx and in this case we will just return a loading State So Below this use effect I'll say if we are checking for the oath let's return this part I'll say return with this div where we have the class name of height screen so that it takes the entire page let's say we have a Dev that holds the loader icon coming from locd react and for the class name we will say animate uh let's say animate Das spin which is a class coming from Tailwind let's say text red of 600 width of 10 and height of 10 so as a pro tip for the Tailwind if you're using the same width and height you could just say size of 10 and if you hover over this here we can see width and height is equal to 10 units which is about 40 pixels let's give a couple of classes for this one as well Flex justify center items Center as well and background black height would be full and just make sure you import the loader from Lucid react and now we could save this file and here it wants you to pass this oath check um into here so let's just make it happy and save if we now try to visit the signup page for a second we are not going to see the sign up page but the loading spinner right let me just make the network to be slow I'll say slow three uh 3 and if we try to visit the login page so this is going to take a bit time but let's wait for it okay so this is really really slow but here we go we have this loading spinner until uh we got a response back from the server and I hope this makes sense now at this point we are able to check for the authentication show a spinner and we are able to protect our routes we are not protect protecting the homepage is because we already have this logic in the home screen right and we don't really need to uh we don't really need to return this div let's make it a fragment because it doesn't really have any classes okay so we are making a really good progress at this point let's build the login functionality and as you can imagine we will go into the oath user.js file and you could pause the video and try to imp implement this login function just to get a bit of um practice so I just give you one hint basically we will take the credentials um as an argument and you can now try to build the logic and now I'll just try to do so I'll say try catch before we try let's update the uh logging in state which we need to create let's say is logging in is going to be false once we call this function is logging in is going to to be true right um not like this we should say set call d is loging to be true and then in the try let's say con response uh like this await ax. post to our endpoint with the credentials and we will do the exact same thing that we have done above just like this so we set the user state with the response which we are grabbing the user object and updating our state and for the catch case we could show a toast and updating our state to be false and we could also say set user to be null because if we failed that means we couldn't log in and user data should be null okay so here instead of this message I'll say login failed and here I'll just say sign up failed right U failed okay just like this and I think this is going to be it for this uh file and I said said I'll be explaining this uh let's see why did I set like this right I'll just bring this back let's save this and go to the log out right let's try to log out make this to be no throttling so it is faster so we just logged out and now if you refresh this page you're going to see this toast errors that says unauthorized and we don't really want to see this that's why we don't put this toast instead we just only update this state and I hope this make sense now so this is why we don't add it okay let's try to log in so I had an account called XYZ gmail.com and we'll just put from 1 to six let's try to maybe put the wrong password I'll just say seven and so probably we got an error in the console let's see um in the vs code I'll just scroll to the bottom okay so it works but when I clict to this okay so because we didn't implement the login function right I always forget this but let's just try to do so under the login page once we collected that we should be able to call the login function with our credentials let's say login put the email and password this login function is going to be coming from the hook that we just have use oath store let's import it save it and maybe give a bit space so that it is formatted okay so I'll just try to log in let me just put the email and the wrong password from one to three here it says invalid credentials but if I put until the6 okay it just logged me in I have the user I am in the home screen I can go to the application under the cookies I can see the J WT token is here right these are the fields that we have now secure is not true because we are on the under the HTTP which is Local Host right it is HTTP only the same site of strict and expires in 15 days okay so everything looks seems to be working right now what should we do next so I think next we can work on the homepage right so we don't have any UI design for this and this is going to be next I'll see you in the next section so in this section as I said we'll like to just focus on the home screen content right for now we don't really have anything so I'll just go into the let's say home screen component that we have under the pages let's shrink this under the home screen we would like to build our UI for now I'll just delete this part and I will say class name of let's say uh relative and and height screen so that it takes the entire screen and I'd like to just say TT white so that everything is uh color of white right obviously then I'd like to wrap this with a fragment because we will have a different child um after this so I think here we'll have div but that would be later in the video for now the very first component we'll like to build is going to be the Navar component let me just show this so we're going to build this Navar component and it is going to be responsive so in desktop we will have these three items right and in Mobile we will have this hamburger menu once we clict it we will just see these three items and we can close that off obviously right let's try to build this let's start with the Navar component I'll go ahead and create the navb bar. jsx file and here I'll um I'll import the Navar component which is something that we need to create and let's import it okay we're not going to be using this logot function in this file so let's delete it and we could delete this line as well we'll go into the navbar component and just try to build the UI um as quickly as possible under this return let's delete this this is going to be a header list let's say and we will give a couple of different classes let's say maximum width of 6X large MX would be Auto let's say Flex Flex of WP and we will have items would be centered and justify would be between and padding of four height of 20 which is about um 80 pixels then we will go below this create a Dev which is going to hold the logo first let's say class name of flex items would be centered and gap of 10 let's say Z index would be 50 so it is always at the top then you will have a link component that is going to take us to the homepage let's say to home and import the link component which is going to be coming from react router down so let's say import um link just like this inside we'll just put an image which is going to be Netflix - logo.png let's say Netflix logo class name of width would be 32 on you know like really small screens and small screens and above width would be 40 we just increment the size a bit let's save and below this link we will have one more div um let's give couple of different classes now this is going to be hidden on smaller screens but smaller screens and above this is going to be Flex so let me just put a comment this is going to be the desktop navbar items okay so that's why it is hidden on smaller screens and below and above it is displayed Flex gap of two items would be centered and we will basically try to get three different link elements the first one is going to take us to let's say uh let's say two to the homepage we'll have couple of classes I think this is just going to be one on Hover we'll just say underline and let's delete this space this is going to take the movies content let's duplicate this once and twice this is going to be let's say TV shows and again this is going to take us to the homepage and this is going to be search history which is going to take us to the history page right these are the classes we have for this and below this two divs okay below I mean above the header but below these two divs we would like to put the mobile nav bar this time okay and to be able to have this let's click to it coming from API layer okay let me just um uh discard all of these emails okay sorry about that I just discarded all of them now here we would like to create our mobile uh Navar items and we are going to need a state for this let's go above and just say const is mobile menu open and get the setter state by default this is going to be false and let's create a Toggler function I'll just say toggle mobile menu which we can just really say set is mobile menu and negate it if it is true then it's going to be false and if it is false it would be true and we can shorten this by deleting this curly braces and leaving it like this we'll be using this function in just in a second then below this header we will go here and just say if his mobile menu is open then we would like to see this mobile items and I think I could really copy and paste pretty quickly this one div with these CL feel free to type this out and then inside let's just save first to get this formatting inside I'll just have a link component which is going to take me to the homepage again right we'll have the class name of block let's say hover would be underline and ping of two and here what we say is that on smaller screens and above this is going to be hidden but below this this would be visible actually so this is how we can create uh responsive navbar items so you first create the desktop version which is going to be visible only smaller screens and above and this is going to be visible only smaller screens and above right I mean smaller screens than below above that this would be hidden so you just take this value and negate it right and it just works magically below this class names what are we going to have when we click to it let's just say on click you should call the function which is going to toggle the state let's say this is going to take the movies and I think we could duplicate this um twice this is going to take us to the search page and this is going to be search history let's say search history just like above and this is going to be TV shows hopefully we should be able to test this out right I'll go here to the homepage um so now everything is white let's just say for now background is going to be black just for a second and okay so we cannot see anything on the right hand side but uh so I think we didn't put anything right okay so we are going to add it but for now let's just test this out if this is going to work if I go to this screen um so I cannot see this icon um I think we're missing something right so I just got the point let me just build it more and I'll try to explain so here we'll just put one more div let's say class name of flex gap of two items would be centered and Z index of 50 and then below this you will have a link that says to the search page and we'll like to show a search logo coming from Lucid react let's say search and this is going to take class name of let's say size six and cursor would be pointer let's try to import the search from Lucid react let's say lucd react and then below this search what we're going to have is basically an image this is going to be the user Avatar so I'll just say image and let's try to grab the user from our hook I will say use o store uh for some reason I cannot get these suggestions but let's try to do it manually so where are we now uh we'll just go one up we can go under the store and we have Oath user filed okay we call this hook now which is going to give us the user State and we can say this is going to take the source as the user user. image and then alt let's say Avatar class name of height 8 Round it um let's say round it and cursor would be pointer and below this image we will have the log out logo let's say log out coming from Lucid react and this is going to take the class name of size six and cursor would be pointer and once we click that we could basically call the log out function which is coming from our hook right let's say log out okay I'll just close this off below this finally we will have one more Dev let's say this is going to be class name smaller screens and above this is going to be hidden which is going to hold an menu which is the uh hamburger menu icon right boet react imported class name size of six let's say cursor would be pointer and on click we will just tackle the state okay so this was the thing that we are missing which is going to be on the right hand side okay so this is what we have the image is null let's see why this is the case so we say image which is coming from the public folder right um so we say user. image let's refresh so what we have Avatar 2.png do we have this under the public Avatar 2. jpack okay so this is a JPEG why this this is why it doesn't work what you can do is update this to be PNG as well I'll go here and just say this is PNG now if we try to refresh this page okay we can see this image right we have the search if we click to it it's going to take us to the search page but now let's try to do this okay so here we can get the menu if we click to it it's going to open up this state and we can just toggle this we can go to the search history uh the homepage and we can even log out so I think this is going to be it for the navbar component this was the only thing that we were missing to be able to make that work this is going to be for the mobile items when you toggle the state right you're able to see this but else you're going to see this part and as you can imagine if you click to this it is going to log you out and it's it'll just say logged out successfully let's try to log in to this account put the wrong credentials it just says invalid but put the correct one now we just logged in now what should be built next is going to be this component where we have a background image and we could uh position position this absolutely on the middle of the screen right we're going to have in let's say title the year the type of this right is it 18 plus or is it not in this case it isn't and we will have the you know overview play button and more info button let's try to build this we will go into the home screen now we can really close this Navar component maybe shink the public folder as well build loading Navar component we will try to build it so here I'll just go ahead and first put my image let's say image tag and for this we'll be using another image let's say extraction. PNG which is something that I have provided it is a JPEG so let's try to update this part okay jpeg alt we could just say image and maybe you could say hero image and for the classes we will just try to position this Absolutely I'll say absolute top and I have a typo here let's say absolute top of let's say zero left of zero with full height full object cover and we will just try to put it at the very end of the screen right so it's just going to be pushed back with the Z index of 50 let's save what are we going to get we cannot see anything because the background is black let's try to delete this and it should be up here what I want to do is just give a bit of uh gradient that is coming from the top so I'll go here and just try to say uh maybe below the image I'll just put a div and at this point I could copy it and paste it it is just one line self Clos tag it is positioned absolutely coming from the top and this is the background of black and the opacity is 0.5 if you save now you should be able to see this black background on top of it right it's is the overlay and since this is just a decoration we could say area hidden is going to be true so that screen readers doesn't see this and this is an accessibility best practice below this div we're going to have one more let's just give a bit space Maybe scroll and give up all of our classes let's say absolute we'll just say top of zero left of zero width full height full um let's say not hover but height full just like this we will say Flex flex colume and justify would be centered ping X of 8 and as we grow the screen so medium screens and above petting X would be 16 and larger screens and above we will just duplicate it with 32 right it's going to be 3 to in the larger screens and above and I'd like to just give one more dep that is going to be kind of like an overlay but it is going to be coming from the top so here how you can use it with Tailwind you basically say background gradient to the bottom starting from the black color to the transparent and Via transparent let's save and you're going to see we just got an overlay at the top right let me just zoom in I can not so maybe I could try to try to do it like this right we have this overlay and if you don't add this via part let's see what's going to happen it'll just come all the way to the middle of the screen but if you add it it's going to make it even halfth so only the quarter of the screen so now that we understand this let's go into this Dev maybe below this we will create one more which is going to have this class let's say class name maximum width of 2x large which is about 672 pixels this is going to take an H1 which is going to be the title let's say class name of margin top of four text of x large we could say not x large but six x large and you could say font would be extra bolt and finally TT off balance okay and below this or inside we could just just put a name let's say extraction just like this and below the H1 we will have the ptag which is going to be basically the overview or maybe the release date my bad let's say 214 and just put something like 18 plus and I'll say class name of let's say margin top of two text of large okay let's just save and see the output for a second this is how it's going to look like and we are trying to build the remaining part which is going to be the description and these two buttons okay so below this P tag so at this point I am really bored because I don't I just don't really like to type this classes in tutorials but I think I just have to so we'll go ahead and build this ptag as well so I wish I could just copy and paste and don't even have to be explaining this but not everyone can be happy with that approach so I just have to you know just type all of them out so I'll say class name for this ptag and I'll just put an overview so let's see what co-pilot gives us okay I'll just get this it is not really important because that would be coming from the database at the end of the day right we'll be using our API let's say margin top of for for this text of large and below this PC and below this div what we're going to have basically a link that is going to take us to the watch page for now let's just say one more Dev with the class name of flex margin top of eight and we will have one link with a couple of classes so here it says you should put a two property let's say it's going to take us to the watch page and the IDE of the movie for now let's hard Cod it we will update this later in the video and but this say link is not defined let's try to import it from react router d right and for the content we will just say play and before this we need to put a logo let's say play coming from Lucid react it is going to have the size of not eight but I think we could just put six and let's say inline block and margin right of two we could say black okay so let's save we just got this button but background isn't black so let's try to add it to this link I'll just say class name and I think I'll just copy and paste this class right background of white text of black and let's see how this is going to look like I could shrink this so that you could see the entire class name right okay these are really basic classes this is how it looks like and if you don't say inline blog let's see what's going to happen it still works so we don't even need it because we have the flags in the first place below this link we will have one more button and let's just duplicate this this is also going to take us to the watch page let's leave it like this this is going to say more info and for the logo we could say something like info coming from Lucid react classes would be the same uh fil would not be black for this one this is just going to be default color and let's change this classes as well I think I'll just delete everything and I'll say background would be a gray of 500 and I'll just update the opacity to be 70% on hover State we could make it to be just the color itself text would be white not rap let's say white and petting y of two ping X of four and rounded and flex item Center okay so let's save and there we go this is the output that we would like to have so this is almost the exact same thing right this is going to be it for the hero section for the homepage and next we're going to try to build let's see where that is he will just try to build this slider component right and maybe even before that instead of having this as hardcoded value we could actually fetch this from the DB right for this we will be using the get trending movie or get trending TV endpoint so what I want to do before calling it is just create another Global state it is because we will be using the content type in multiple different places and the content type is either going to be movie or TV so when I click to this part it should show me a movie and when I click to this one which is TV show it should show me a TV show and it should also update this Sliders in the homepage that's why uh like we we need to just create some kind of global state for it because we'll be using it in multiple places really I will just go into the store and create a new file in Hook I will just call this as maybe content.js so I am calling this as content so that it is just a general name because it would be both TV and movie it is just going to be one of them so I think the content name makes sense here at this point I will just get the create function from zent and I will say export const use content store we can call this function exactly what we have done previously and we will just here basically have a state let's say content type it is going to be initially movie This is the initial State and just a Setter function let's say set content type which is going to take the type and update the state with it so this would be either movie or TV we will be able to call this function to be able to update this state okay so I hope this makes sense let's save now we can go into the navbar component and just try to test this out I'll say use content store right call this which is going to give us let's say con content type if I can type let's say set content type as well let's try to console log the content type I'll just say CLG content type okay we'll just see this in the console and once we click to one of these we would like to just update this date um so here how can I do this maybe I'll just go here say onclick I'll just say set content type to be let's say movie for this one and this should be called under an anonymous function right I will copy this paste it to this one and this is going to be TV basically it'll just update the state let's try to see by default it should be movie this is what we see in the console if I click to this one now it says content type is TV if I click to this one back it is going to be movie I hope this makes sense now and we'll be able to use this content type to be able to fetch the related movie or TV show okay so we're going to delete this because we will not use it in the navbar component let's go into the home screen and just try to fetch a trending movie or TV show I'll just shink everything and I just want to create a custom hook where I can fetch a movie or TV show so I'll just say Source Hooks and I will say use uh let's just say use fetch or let's say use get trending content. jsx so this is going to be the function where we have the logic so that we can really get a trending content so this is not going to return jsx but instead it would return a state so I'll just say con trending content by default it is just going to be null let's say use State import it and maybe we could shrink the site Side Bar I'll say const give me the content type which is coming from our store right and depending on this we will just change the url let's say use effect so I'll just go here whenever the content type changes we should be able to run this uh use state or use effect my bad let's say content type we have a typo okay here I'll just say const get trending content function and call it and let's put the logic now so we had an endpoint if you remember for both of them let's take a look at it under the back end routes so maybe starting from the server if we visit API V1 movie SL trending we are going to get a trending movie if we visit the TV then we're going to get a trending TV so this is the endpoint that we'll like ahe I will import the axio first and I'll just say await axio doget and put our endpoint so slash API slv1 slash we call it as movie or TV which is going to be the content type that we are storing right this is why we have this state in the first place and we're just going to get the trending movie or TV depending on the content type which is going to give us a response back let's just say res and we'll say set trending content to be res. dat. content so now I hope you're able to understand why we called this let me just navigate so why we call this value as a content and not a movie or not a TV so we just call it as a Content because this is going to be you know a more General name that we could just grab here so we don't just say TV or movie right we just say content whatever that is depending on our state okay so this is the entire logic that we would need finally from this hook we will just return the trending content so I like to open up this object and send it like this we can go into the home screen now and just say use get trending content which is going to be our let's say trending content and let's try to just console log it I'll say trending content and just show us in the console there we go we already fashed it right as soon as you refresh the page you'll just get a trending content in this case this is a type of movie because this is the default type if I clict to this it should run again and it just gives us a type of TV right and this is the name the image you know overview and everything we would like to grab this data and you know just display it on the screen now our code base almost feels like an English sentence right we just say okay we are under the home screen where we just want to get a trending content and we just got the value back right everything is being abstracted for us so we'll just take this maybe source for the image and display it which is under the let's see I think it's is going to be backdrop path and as you can see this is not a URL but it is just a path so how can we use this let's go into the API um I will just say the movie database API and if you click to this you will be able to see maybe let's say images search for it is it this one I don't really remember this but let's just say V3 or maybe was it under the guides I'll just open it open it up in a new tab and here there we go under the images we have the basics and from here they just show you how you can use the images so you can read this but basically let me just zoom in they give us two different endpoints where we can fetch the original image or a slower size of it so this is going to be our base URL and then this is going to be the backdraw path which we have here right this is the backdrop path or poster path we will just prefix it with these end points so what I'll be doing is just copy this go into the front end folder under the source I will just say constants and you will see why let's just say maybe we could put this into a utils folder first I'll just say UIL and I'll just say constants do JS file and now I can delete this folder so I thought I would be creating this folder but then let's just put it under this file now what we're going to do in this file is basically creating those environment variables not environment variables but you know helper variables okay let's say con small image base URL which is going to be equal to let's see to this one I will copy it paste it to here as a string and this is going to be the let's say export const let's say original image based URL right we could really take this and this is the endpoint that auto I mean co-pilot suggest us so if you are not really sure you could copy it and paste it but basically it is the same thing okay so we'll be using this to be able to render an image I'll go into the home screen I will say this is going to be first uh let's say original image based URL plus trending content backdrop path let's save now it should update the background image every time you refresh so it's going to give you a different image right let's say TV shows it is going to give us a TV show background image but for the movie it is going to give us a movie let's try to update this part so I will just go into the home screen where we have this title so I'm going to delete this and I will say trending content. title and here autopilot I mean co-pilot suggests something else let's Auto accept this and then I'll explain what this means let's save okay so this is the name which is the title for the movie and if you click to this it is the name for the TV series this is what API returns you when you get a movie it gives you title but if you get a TV show it gives you a name so it's strange but this is really how that works uh depending on that you just check which one whichever is available you get only that one and now here again we will do the same thing for this one for movies it says this is going to be release date but for TV shows it is called as first a date I will copy it and paste it it is pretty basic let's just save and I'll try to explain so again for the movies it is called release date and for the TV shows it is first a date this is going to give you something like let's say 2024 uh let's say you know July of let's say 15 what we do here is just split it by these and just take the first one which is going to be year this is what we're trying to do we just try to get the year and from here we do the exact same thing and here we'll just put the uh age so I will say if trending content is adult then it is going to be 18 plus but else PG13 let's save hopefully it should update and you can always see this from the object what we have here is that is it adult let's see it is false so we see PG13 we have first a date I think is because this is a uh is this a series let me just refresh the Page by default we got a movie which has release date and if you click to the TV shows it should give you a TV show that has first a date and I hope this makes sense at this point for the overview let's see from the console now it could be really long overview or it might be short and we would like to check for this we will basically say if it is longer than 200 characters we would like to put three dots at the end after the 200 characters but else we'll just leave it as it is so let's just try to see this is longer than uh 200 characters that's why we put three dots at the end right and and I think it is going to be it for this page or for this component at least once we click to these buttons it should take us to the watch page for now it takes to this ID but what we want to do is put the actual ID so here we have an error let's see okay so it says um you cannot read the read the property of null it's because let me try to explain trending content is null for a second and while it is null you cannot just say trending content. overview if we optional changes then it should work let's save okay so it works but what would be better is to maybe show a loading skeleton I'll just leave it as a to-do I'll go up here and I'll just say to do um add a loading spinner just like this and to be able to get this highlighted uh comments I am using better comments extension okay it is this one so yeah we're going to add the loading spinner later but for now let's try to update this ID I will delete this part maybe cut it this is going to be watch page trending content. ID and let's copy this line uh it should would be like this and maybe like this okay so we're going to get this and put it to this one as well now if I go here click to this button it should take me to the actual ID and this is the page that we will Implement later which is going to be let's see where that is you know it's going to be this play page where we have the trailer and details about the movie or t let's go back and I think that would be it for this component what we can do is just maybe pretty quickly try to add this loading State while we are here right and instead of leaving it for later let's just do it quickly I'll say if there is not trending content we could return a loading spinner or some kind of UI right I'll just say we'll like to return a Dev let's say div just like this we will have a couple of classes age of screen let's say text of white where that is and let's say relative and what I want to do is just show the Navar component while we are loading as well and I will just have a dep with a couple of classes this is going to be self close tag let me just type this out and then I'll explain what this does let's say absolute of top zero left zero width p height full so it's going to take the entire screen background would be black of 70 U capacity Flex would be items centered and let's say justify centered as well then Z index of let's say um minus 10 and lastly the Shimmer class so this is a class that we will create let's copy the name save this file go into the index. CSS fil and what we'll be doing in this class is basically putting in animation I will just copy it and paste it you could type this out but this is the super easiest uh I mean super easy Shimmer effect let's save and we should be able to see that just for a second um so can't we see it and I think we are missing one more key frame right obviously we're using animation if we don't don't put the key frames it is not going to work let's save and try to see this um I'll just say if this is true right then we should be able to see this part okay this is what we're going to have while the image is loading sometimes it is going to take long but sometimes it's going to take like even less than 1 millisecond so you're not going to be able to see it but just in case we will have this loading state right this is going to be our backup so when you refresh the page you'll be able to see that spinner just for a second and if you really want to understand how this works probably you could just copy and paste to the chat GPT right it could explain better than me in this in this case but so yeah this is really the Shimmer effect that is pretty popular and the easiest implementation at this case so with this I think we completed the first section of the homepage and next we'll like to build these movie sliders let's see where that is okay next we're going to build these components and I'll see you in the next section okay so this is where we left so far we just build the hero section for the homepage now as we talked about it uh next we'd like to build the movie slider below so it's going to be looking like this where we just have the component with elements right we just have the movies that is under this category called now playing and the same thing for top rated popular and below this there is going to be one more called upcoming movies and we're going to fetch the exact same thing for TV shows as well and like these categories are going to be coming from our API if you go here these are the categories for the TV series right there are four different categories and we have the same kind of uh categories for movie lists so we'll like to just build these categories first I'll go here open up the constants uh file and here I just want to create those uh categories I'll say export con moviecore categories and let me just copy and paste it actually so this is the categories we have for movies so you can take a look at it from the API basically we have four uh four of these and let's get the categories for TV shows as well so I'll just paste it feel free to type this out or get it from the you know source code basically we have these categories that you would like to uh map over so that we can put those movie sliders so we'll go under the home screen component and at the very bottom maybe after this St let's shrink this we'll just go here and just say we like to have a if this is going to have the class name of flex flex colume and we're going to give a gap of 10 between each slider we'll say background is going to be black and ping y of 10 now we will just check what is the content type here I'll say content type let's first try to import it at the top I will delete this and I will say content type that is coming from our use content store so we will say if content type is equal to movie then we will do something here but else we will do something here right I'll just say in this case let's open up this actually and then open up this here I'll say uh movie categories. map let's get the each category and for each of them we're going to return turn a movie slider component which is something that we will create let's say movie slider and we can pass a key into this let's say key um is going to be the category name itself and we're going to just pass the category into it and we'll just do the exact same thing for this one okay I'll just go here copy it paste it but instead this is going to be TV categories and we have I think Miss missing something let's close this off and what this says uh do we miss one more here okay so this is what we're going to be doing let's try to create this movie slider component we will just go into the components let's say movie slider. jsx oops my keyboard just got stuck hey what's happening so let me just delete all this sometimes it just happens okay now which just fixed let's say movie slider. jsx now even though we call it as movie slider we'll be using it for TV slider as well um you can put something like content slider but I think it is fine just to have this name let's say rafc just going to be taking the category as an argument or as a prop right let's save and just go here import it now I think we're are getting an warning from uh ES lent so first it just says you are not using this value even if we use it let's say console log category it is still going to give us an error that says you should add prop types and this is something that I don't want to add uh so this is the rule for the esent react slpr types let's go here and then just uh disable it under the rules I will maybe duplicate this this is going to be react prop Dash types if you save it should get rid of that error right okay let's save this one and did we import it yes we did so we're going to just try to build this movie slider component for now if we just render the category into it let's say category um let's just say text would be white so we just see now playing top rated popular and upcoming these are the categories for movies let's click to the TV shows it is going to say like airing today on the air popular and top rated now we will just show each uh category one by one let's go into the vs code into the movie slider component and we'll just first build the UI design so here let's delete this console log maybe give elit space and delete the content um this is going to take a couple of different classes let's say text white let's say background black Also let's give the relative class into this petting X of five and as we uh larger the screens right on the medium and above we will just put petting X to be 20 and then inside this we will have an H2 this is going to hold the category name let's say popular uh popular and then we could put the category name or I think like the category name itself is going to be popular or you know airing today or upcoming so we'll just say category and then the content type so it would be either movies or TV right I'll say con content type let's say use uh content store let's import it call the function and it should give us the content type as well okay but this is not really formatted let's take a look at it we just see this it's a type of TV but it should maybe be capitalized just like we have here uh like m is uppercased but if we go to here it says you know just movie let's try to format this I will create a variable for this first I'll say con formatted content type and I will say if content type is equal to movie then this is going to be movie but else it's is going to be TV shows so this is just a strength that we make it to be formatted if we put it like this now we can see it actually being updated it says movies or let's say TV shows we can update this part as well um let's say we're going to go here and const formatted uh category name let's say name and we will basic say category. replace all we will replace all the underscores with an empty string just like this then we would like to take the first character and uppercase it let's say two uppercase and we will just leave the remaining characters as they are okay so I hope this makes sense let's save um so it didn't update because we are not using this value let's replace it okay now it works so we just got got rid of those um brackets or I'm sorry the underscores we don't really see that it's being replaced with an empty string and the first character is capitalized now what we want to do is basically fetch the data for these movie uh sliders or these categories I'll go ahead create a use effect here uh let's just initialize this one like this as the content type changes let's say content type and category changes we're going to be calling this use effect again we'll say con get content or you can call this as get movies doesn't really matter let's call the function so that we don't forget this get content and let's put the logic into the function so we will just basically get a result from axus let's say which is going to be a get request to our endpoint which which was let's delete these uh codes SL API slv1 and then the content type so it would be either movie or TV then the category that we are passing as an as a prop and we will just say set movies let's create that state don't really have it let's say const you can call it as movies but I think I'll just call it as content uh set content let's say this is going to be empty aray initially okay I'm calling this as a Content because this could be either movie or TV show right I'll say set content you will get the res. dat. content this is what we are returning from the API and we'll be using this content just in a second let's go and scroll below this H2 I will say this is going to have a Dev with these classes let's say Flex uh Space X or four it is going to give space in the horizontal Direction and inside we could say let's just map through this content I'll say content. map give us each item and let's return this jsx I will say we'll like to have a link coming from react router D this is going to take us to watch page so let's say slatch slash uh the item id let's go here item id which is basically going to be the movie ID or TV ID right then this is going to take couple of different classes let's say minimum width of 250 pixels if you are putting a random value or a custom value then you should wrap this with these brackets let's say relative and we're going to give this group class and I'll explain what this does let's say we're going to have a div this is going to have the class name of rounded LG and overflow will be hidden let's go into this div we will just have the image this is going to hold the uh basically image for the movie or TV show and you will say uh small image base URL plus the backdrop path let's say content or we called it as item let's say item Dot uh backdrop underscore path for the alt so we have an error let's see what this says okay it says you should add a key into this because we are mapping through something let's say item. ID okay so we just got let's say put an alt we could say something like movie image and then we'll just give couple of classes to this image I'll just say class name it's going to have the let's say transition of transform and then we'll have the duration of 300 milliseconds then the function will be is in and out and we are using this so that when we hover over this group so I'll just say group like this uh if I can type correctly let's say group on Hover State we will scale this image Al bit let's say scale 125 okay let's just save hopefully we should be able to see something on the screen there we go as we hover over this we just see that image is scaling that's why uh we even give these durations and transitions if we delete this this is just going to be suddenly happening which is looking really really ugly right if we just bring this back now we have a smooth animation that just looks better right now the content is overflowing as you can see what we can do is just uh put the Overflow as a scroll into this element into this parent here I think in the this one or maybe even into this div uh this one I'm sorry this is the actual parent for these movies people will say overflow X is going to be scroll let's save and just take a look at it on the browser so now we have the scroll bar onto this parent right which is holding all the elements so this is why we put that overflow X into this uh parent container what we'll be doing is that we're going to remove this scroll bar we don't really want to see this but instead we will have this kind of buttons where we can click go back and go forward right this is what we're going to be doing just in a second but for now let's try to uh what we can do is maybe display the movie names below these images so after this div after the image um so here I'll just say give me a ptag this is going to have the class name of margin top of two text would be centered and we will say we are having the item this is either going to be item. title or item. name and this is the case that I have explained previously if you're getting a movie this is going to be getting the title field and if it is a TV show then it's going to give you name property this is how the API works that's why we say which whichever existed give us that one now if we go here then we just can see let me just zoom out a bit okay we can just see the name below the image this is the TV shows let's click to movies it should update the trending movie and it should update here as well now it says movies as we can see maybe we could give a bit petting or margin bottom to this um H2 I'll go here and let's just add a couple of classes I'll just first say class name of margin bottom of four let's say text would be 2x large and font is going to be bolt so I will just save this and try to see the output now it is being updated this is a a bit larger we have some space what we can do is just add that previous and next button into this component so that when we click it it's going to scroll for us to the right or to the left we are going to have a state for this this is just going to be called as let's say const uh show arrows and set show Arrows by default this is going to be false and we're going to make this true once we hover over this um element let's say on Mouse enter into this div we're going to make this to be true and once we leave this we're going to just make this to be false let's say on Mouse leave state is going to update and I think I didn't explain this group element let me just try to do so this group class since this link is a group element when you hover over it it is going to scale this image that's why we say if you H this group element this should be scaled um this is how we can really do this parent class binding with tailin cs say you give the group to the parent and when you hover over it if you want to update the child you say group hover and then whatever the class name is now I hope this makes sense um below this uh div maybe we could just try to put those arrows right okay below this I'll just go ahead and just say if we show the arrows we would like to run this right uh right hand side oops it should be here so basically we will try to have two different buttons let's put a fragment so that we can have multiple child inside I'll just go and just say button class name this is going to be taking a lot of different classes let's say absolute top of 50% let's say we are going to just translate this one on the Y AIS to go uh 50% back so that it is centered let's say left of five units medium screens and above left will be incremented to 20 and flex items would be centered justify centered let's say uh give a bit space size would be 12 and we will have rounded to be full so that it is a circle background black background opacity let's say background opacity is going to be 50 I'll just go here and select this and when we hover over it we could increment the opacity a bit let's say background uh opacity it is going to be let's say 70 or maybe 75 let's update this opacity it should be just like this and we'll say text is also going to be white finally Z index of 10 okay so that was a long class name but let's just try to see we will put Chevon left uh icon that is coming from Lucid react size could be 24 and let's save just try to see this once I hover over this element I can see because state is just being updated and it is here maybe this is a bit too large or maybe am I just zoomed in a bit okay so we will say left should be five looks like it is not working or medium screens and above left should be 20 so what happens if I just try to increment is to be 40 units okay it actually works like maybe uh let's go here instead of 20 because 20 is just you know like next to this border what I want to do is maybe have it like this one okay so here it's also you know uh just next to it but I think we could just make this to go a bit to the right hand side let's say 24 maybe 24 is just a bit too large let's say 22 and 22 doesn't work let's just see uh we just have 24 okay I think this is just better than the previous one what I'll be doing is just add the exact same thing to the right hand side let's copy this and paste it we will say Chon left right and we're just going to first import this then update this classes Al bit so instead of left this is going to be right and same thing for this one and it should work out okay so once you hover over it you can see this and when you hover over the item itself the opacity changes on the background now once we clicked it what we' like to happen is that this should go to the right hand side alet right and for this we need two different uh functions one for this one and the other one for this one let's create those functions I'll just first scroll to the top and let's say const scroll left this is going to be an arrow function and let's duplicate this this is going to be scroll right so we would like to have a parent reference so I'll just say const slider ref and use ref is going to be null initially and we're going to uh bind this uh ref into our parent which is this one right I'll just say ref is going to be equal to this slider ref and once we click to this uh button let's say on click just call the scroll left function and on click to this one call the scroll light I mean scroll right function right we'll go here and just try to implement both of them and it's going to be really easy just one line you will say if slider ref. current is um available so that we could run the right hand side so I'll just open up this part I'll say slider ref. current do scroll by let's call this and this is going to be taking an object which is going to be our options let's say from the left we will just say minus slider ref. current offset width and behavior is going to be smooth so we'll do the exact same thing for this function but this time this is going to be uh not minus but plus okay so the default value and if we save hopefully this should work let's see once I click it it is just going to scroll and if you just take a look at it so the very last item that I see is this Spirited Away if I click it it is going to scroll up until to the next element next to it right now I see Pulp Fiction if I clict to this it is going to be the very first item in this container ER which makes it sense so that we can see all the items that we have this is how that works the only left uh thing that we need to do maybe just remove this uh scroll bar and for this we'll be using a different package let me just check what was the name I couldn't remember so I just checked it let's open up the terminal and uh like split this front end and just make sure you are under the front end you will say mpm Plus make it to be lowercased mpm install it's going to be tail vent Das scroll bar Das height so this is the package that we'll be using it is lightweight and it's going to help us to just scroll the uh scroll bar on specific elements to be able to make this work we need to go into the Tailwind config.js file and we'll just do a simple plug-in um Edition here let's just go at the very top let's say import tail when scroll bar height from Tailwind scroll bar height package and we will take this and import it here and with this this should be good to go but I'll just kill my terminal and then just restart it again so that it works and we need to add a class just to make that work so I'll go into the movie slider component to our parent element which is going to be this uh div right this is our parent where we just say slider ref and I will just say scroll bar height and this should height that scroll bar for us okay so there we go we don't really see that scroll bar but it works as expected it just Scrolls for us to the very left or to the right and if you're in the first one obviously it is not going to go but if you're in the last one it's also not going to go to the forward right it only goes backward so I think this is everything that we would need for this movie slider component we can f the TV shows um format the title and really just scroll as we expect now there is one thing that I think we are missing uh in this component when the image loads we could show this okay let me just show this um so here we said that if there is not a trending content show this Shimmer effect but we could also show this while image is being rendered because large images takes a bit time to load and to be able to just have a fallback we could use this on load function so I'll just say onload and we're going to be calling this part let's say we will have a state called called let's say const image loading and set image loading by default this could be true because as soon as this page loads uh this would be true image will uh image will be try to uh rendered right it'll be tried to load so here we'll just say set image loading will be false once image loads uh this function will run and while it is loads we can show this Shimmer effect once again here I'll go ahead and maybe just copy and paste the content which is just a div with the exact same classes that we have above with this Shimmer effect right it is the same thing basically let's try to see this in action okay it looks like it crashed it says used state is not defined let's import it okay now could you see like there is is 1 second of that loading State and let's try to make this go a bit slower under the network if I refresh so we have the loading State and here you can see it just tries to load and this is what your users are going to see if they have a slow connection so it just takes forever for the image to load and and once uh once the image loaded we just don't see that Shimmer effect because state is being updated so this is a really cool optimization that you could add let's say uh cool optimization hack for images and I have a typo here okay so I just fixed it and let's save this file I think there is one more mistake that I have done and I just realized what while editing the video when we click to the search history we uh take the user to the history page but here we take them to the search page which is incorrect for the mobile nav we should also take the user to the history page let's open up this and it should be working as expected if you click to this one it should take you to the history page and if you click to this icon it is going to take us to the search page so with this I think this is going to be it for the homepage completely we have movie sliders everything is working as expected if we click to one of these it is going to take us to the movie page here we can see it just says watch and then the IDE of the movie and here on this page we should be able to fetch that so that we could show the trailers and similar movies uh with this one which is going to be next okay so let's try to build this watch page I'll go and just close close everything open up the app.jsx under the front end and I will say if we visit the watch page let me just duplicate this one let's say if we visit watch and then an ID this could be anything that's why we'll just put this Dynamic value then let's say if we have a user then they should be able to visit the watch page but if they are not authenticated then we will navigate them to the login page let's try to create this page now under the pages watch page oops it should be jsx at the end let's say watch page. jsx and just export something from here and let's try to import it obviously we cannot get so let's just say from here give us the watch page and we should be able to render this now here if I go to this page I can see this is the watch page let's try to grab this um ID from the URL this is how we can do it we will say use prems hook coming from react router D which is going to give us the prems let's say prems and just try to console lock this um like this open up the terminal and from here as you can see we have an object with the ID so this is called ID is because we said this is ID if we say idx or if you put hello here then it would be hello but here it says idx now I hope this makes sense this is the exact same thing that we have done in the backend part um we're going to take this and just extract it or destructure it right this is going to be the ID and depending on this ID we would like to fetch the uh trailers for this movie and we would like to fetch the details about this movie or content so let's create our states I will say trailer and set trailers by default this is going to be an empty array let's say this is going to be use State and give a space sharing the left hand side we would like to keep track of the current trailer let's say current trailer index I'll just say idx and we'll be using this index so that we can really navigate between these trailers so initially it's going to be the zero index once you clict to this it'll be incremented and once you click to this it will be decremented by one that's why we start with zero in the first place then let's try to have the loading State set loading so that we could have some kind of loading spinner in the screen by default this is going to be true because we will just try to fetch immediately and let's say con content this is going to be either the movie details or TV details let's say by default this could be null or let's put an empty object and then like it doesn't really matter you could also put null because we will update this value in any case right I'll just leave it as an empty object in this case then finally we'll just get the content type let's say content type coming from our hook we'll be using this in this uh page as well let's first try to get the trailers I'll say use effect let's try to import it and I think we will be running this whenever the content type changes and whenever the ID changes as well so when you navigate between different pages it should run this use effect so that we can fetch the trailers get trailers function let's say async and just initialize it and call it now we'll just put the logic into here I will say call rest await a.get and our endpoint which was SL API slv1 then the content type this would be either movie or TV then the ID and finally trailers so this is how we called it if you take a look at the backend folder and let's say set trailers we're going to get the res data. trailers this is what we return and like we could also check for the the error handling that's why I will cut this and just create a TR catch paste it into here and in the catch you will say if error. message includes 404 let's say includes then you could just say instead of this let's say state would be empty set trailers is going to be zero okay in this case we could save and this should give us the we should call this it should give us the trailers we will render this just in a second but for now let's say console log the trailers let's try to see we have 25 different trailers for this movie and like each of them has an ID that will'll be using to be able to display a YouTube video and you're going to see how that works but for now let's maybe try to uh build our other use effects so we will also have the similar contents so I forgot about this let's say cost similar content and set similar content by default this is going to be an empty array let's try to get the similar content on this um that is similar to this movie right what we can do is basically copy this use effect paste it and we'll just change the function name let's say get similar content and we'll change our endpoint which was API V1 content type ID but this time similar and set similar content we will say and just update this part as well so this should be working out as expected you could console log it let's say similar content say similar content okay now we can see similar content is undefined for some reason let's refresh okay so probably we we should have some kind of error or mistake let's see I'll open up the terminal um so I have some console log here but let's just try to see do we even hit this end point I'll just say console log the oh okay so I just found my mistake instead of trailers we should say similar right and now it should be working out we got 20 different similar content to this one and uh what should we do next is to also fetch the details on this movie and for now like we are just putting these use effects but we'll be using them just in a second with their data I will just say maybe duplicate the exact same use effect put it below and we will say get movie details or get TV details this is going to be running for both of them let's say get content details then because this is a generic function let's say AIT uh V1 I mean API V1 content type and ID then details this is the end point that we have let's say we're going to return the content this is what we are returning from the back end that's why here we say content here we set similar and here we set trailers okay so this is depending on the function that we have in the back end and if this is case um if this is the case we could say set content would be null right so if we return 404 obviously this is going to be null but here let's say set content it should be and we have a loading State what we can do finally we will just update that state let's say set loading is going to be false either we successfully complete or if we failed and this is going to run whenever the content type changes so you can console log the movie details as well let's say content and we'll just return this in the terminal there we go we just got everything about this movie now we can finally go ahead and build the UI for this let's scroll a bit to the bottom on this component and let's just try to build the UI initially I will delete the content and just say class name background of black let's say minimum height is going to be screen text of white let's say and this is going to have another div with the class of MX Auto let's say container petting X of four petting y of 8 and height is going to be full then inside we are going to show the nav bar at the top let's import it then below this we will just check if we have even any trailers so let's say if length is greater than zero then we would like to run this right hand side and here basically we will have a Dev this is going to hold our buttons let's say close this off and I'll go inside say class name Flex justify between and I items centered margin bottom of four let's just make sure we don't have a typo here and we will have our first button which is going to be Chevron left icon okay we'll just import it let's say size is going to be 24 this is going to be having a couple of different classes I'll just say maybe we should have back tis let me just scroll out bit open up the back text we will say the background is going to be gray five 00 sl70 then hover State it's just going to be gray uh 500 and I think this should be background gray or 500 let's say text is going to be white like this then we'll have petting y of two petting X of four rounded and this is going to be disabled if we are in the first trailer right so to be able to give this effect we will just change this style a little bit I will say uh open up this Dynamic value we'll say if current trailer index is equal to zero then add this classes where we have cursor not allowed and we will add the opacity to be 50 so it is a bit grayed out but in the else case we could just leave an empty string so it is not going to change the classes uh we should close that off so probably I have a mistake let's see so I am missing a curly braces or single code here okay this button is going to be disabled if the current trailer index is equal to zero and let's put it here just like this okay so I hope this makes sense if we are in the first one the previous button is going to is going to be disabled basically and let's duplicate the exact same button but we'll just change the content albit let's say chavon is going to be right let's import this from Lucid react and we will say if we are in the very last trailer so we'll say if current trailer index is equal to the last one and we could say trailers. length minus one this is how we can check for it and we'll just update the class name in the same way we will say if it is equal to trailers. length minus one that means cursor is not going to be allowed and it's going to be gray out and let's just save are we going to see anything on the screen we should be and here we go I'll just refresh it looks like this is not being grayed out do I have a typo here um opacity is going to be 50 so it looks like I don't have a typo but I'll just try to zoom out and refresh so this is not allowed we are in the first one but I think this is not being grayed out for some reason let's just say opacity is going to be even 10 okay so it doesn't work out let's just see can we say like background opacity do we have something like this say 35 it's going to be okay like it just never updates maybe we could just take a look at it in a second I don't know why this doesn't work it should be and we should be able to to see something like this um but anyways now if we click this we can go forward and this is now not disabled I was going to say but we didn't implement the logic so let's just make it in a way that when we click to this it should increment the uh number of index I will say on click to this right uh icon on click I'll just say handle next and I'll say on collect to this one let say onclick um if I can type onclick handle prev right handle previous but instead of adding them to the icons we could I think put it to the button itself it would be a bit better option then we'll just try to build those functions which is going to be easier than we think let's just try to delete these and just say [Music] const handle next and then we will duplicate this which is going to be handle previous and in the previous case we'll just decrement the index right I'll say Set current trailer index whatever the current value is let's say uh current trailer index minus one but if it is zero then we don't really need to do uh do this we'll say if current Trail index is greater than zero only then actually decrement this otherwise it would be minus one let's copy this and paste it to this one as well we will say um increment this by one but if the index is the very last one then just don't do this we will say if current trailer index is less than trailer length minus one so this means if we are not in the very last index only then update the number right let's try to test this out I will collect this and before that this is like um so cursor is not allowed but if I click to this now cursor is allowed and I can go forward and go backwards now it is not allowed and it is working as expected and to be able to make this gray dot we should go here and just put this class before the cursor not allowed I will just uh paste it to here and I'll just say capacity is going to be 50 now if we save it should update actually and it is gray out as we see here in the demo application and we could do the same thing for this one let me just try to go forward to the very bottom so now I am in the very last one it says cursor not allowed let's try to update the opacity for this one as well cut it from here and paste it now it should actually actually be grayed out okay now that this works we should should be able to show the video element on the screen I'll go here and Below these buttons below these curle braces we will create a different D this is going to have again couple of classes let's say aspect width of 16 and aspect let's say height of nine let's say aspect height of nine which are the classes I thought coming from Tailwind but looks like we don't so I think if we just put something like aspect of video it is going to give us the exact same thing to the 16 divided by nine right then we'll just say uh margin bottom of eight petting of two small screens and above petting will be 10 petting X would be 32 medium screens and above okay inside this we will just try to return a react player let's say if trailers. length is greater than zero then we would like to see this right hand side okay in this case we'll like to show our package let's just see mpm react player which is something that we have already installed and you can take a look at it to learn more about this we will be using this to be able to display a YouTube video and each YouTube video has an ID so let me just show this pretty quickly so if you visit a YouTube video then you should be able to see this ID at the very top so after this V equal to you're going to see an ID and if you put this ID into the react player it should be able to display you in a video right the exact same video in the YouTube player this is how that works we will try to get the ID and just put it into the react player component so I'll say let's return the react player which is going to be coming from our package let's just say import react player and this should be like this okay react player if I can type correctly we will just try to put the source into it first I'll just say we' like to see the controls so that we can you know move forward pause the video and things like that they are the controls then we'll give the width to be 100% of the parent element let's say height is going to be 70 uh VH then we'll say class name is going to be MX Auto let's say overflow will be hidden and rounded LG and then inside the most important thing is going to be the URL which let's just open up these back Texs I'll say https and just say 3ws right youtube.com watch we're going to put this parameter of V which is going to be holding the ID we will say give us the current trailer ID and this holds the key into it so you can console lock this to be able to see but this key is actually the ID for the YouTube video and if we save we should be able to see the trailer on the screen there we go this is the first trailer that we have if we collected this one since the index is being updated we you see this also gets updated and we could play the videos as well I'm not going to play it because I might get copyrighted but it is actually working I promise so as you can see you could even subscribe to the channel from here um so below this what we can do is also have some kind of fallback where we just say if trailers that length is equal to zero then we'll say no trailers available for and then the movie or TV show name within Emoji so this is what we have below this we're going to show the movie details so I will go outside of this div and we will have one more div let me just put this down here so just make sure you're under this div and let's say uh movie details so this is the div that we have with these classes you can can take a look at it and we'll say Dev is going to have class name margin bottom of four and medium screens and above margin bottom could be zero um so here this is how it should look like then we'll have the H2 this is going to hold the name of the content so just to speed up the process I will do this copy it and paste it text 5x large font bold text balance so either title or name whichever the available for us then we'll have a ptag and again I will just try to copy and paste it is pretty easy to do so where we just format the release date so in the TV series it's going to be first a date in the movies it's going to be called as release date and what does this function is coming from well basically we'll just try to create it up here so this will be a utility function that we'll be using only in this file so I could just paste it here which takes the date and formats this lbit this is something that we could do uh just like this and you're going to see how it's going to format it below this ptag we will have one more ptag this is going to hold the overview let's put it save and just see the output this is the inside out to movie and we can just see uh you know the uh title the formatted date the category for the age and then the overview what we can do is also have an image and let's try to put it below this um I think below this div right we'll just have an image element let's say source is going to be original image base URL plus the content. poster uncore path and here we could just say for the alt poster image and for The Source we could give our classes let's say maximum height is going to be 600 pixels and round it is going to be MD okay let's save and we're going to get an image next to it which is going to be the poster path for this um for this movie so that was a movie let's try to fetch a TV show uh let's say uh Vikings let's say play which is going to take us to the page we can really navigate this uh all the trailers that we have we can go back if we are in the first one we cannot go back and we can get the poster image with the name and all the details the very last thing we'll like to render on this page is going to be the similar content so it is going to have this kind of let me just uh show okay so we'll have the similar movies or TV shows section and again we will have an icon this would take us to the next or previous uh sections it is going to be same component with the movie slider so let's try to build this component I'll go here and since we're going to have the exact same functions we could basically copy and paste them from the movie slider component which were these functions right we have scroll left that is using the slider R to go left hand side and the right to go to the next one right this is the exact same function that we have done that's why I just copied it and pasted let's create a slider ra let's say not react but use ref it could be null as the initial value and we'll just try to build the jsx now and then try to use these functions So Below the very last div that we have um we'll just say if similar content. length is greater than zero let's try to render this right hand side which will have a div let me give a bit space um let's close this off then I'll say class name of um let's say margin top of 12 maximum with of 5x large MX Auto and relative class then inside we will have an H3 that is going to say similar movies sltv shows and then and let's just make this to be a little bit larger by scaling it up let's say font bolt margin bottom of four on this one and below this H3 H3 we'll just say a div um I think we're not going to have a Dev oh I think we'll have Okay so let's just try to test this out I'll say class name flex and we'll just do the exact same thing that we have done previously overflow X of uh hidden and mean scroll this is what we have done previously then we will just hide the scroll bar with this class and gap of four ping bottom of four and group class and we'll also put the slider as a ref let's say um how did you call it like slider R inside we'll just try to map through the similar content array so we could just get each item or you can call it as a Content let's say content and we'll just try to return this jsx I'll say link which is coming from react router D it is going to have this key to be content. ID and let's say to um to the watch page let's say watch and SL flash we'll have the say watch content. ID and this is going to be taking these classes let's say class name of with 52 in inside this link we will have an image this is going to hold the source for this we'll be using small image based URL plus content. poster path for the alt we could say poster path let's delete this space and we'll give a couple of classes with full height Auto and let's say round it empty and below this image we will just have an H4 this is going to hold the title or the name depending on the content type let's say class name is going to be margin top of two text of large and font semi old okay hopefully this should be working out let's try to test this out these are the similar shows um why this why this is looking like this maybe we should say this link is going to be Flex none do we have this class Let's test this out okay so this basically means don't try to shrink them and we can scroll this with our mouse pad if you have a laptop this is what I am doing but but if you are on desktop we should handle this as well we should put some kind of like a button here so that users can go forward and backward what I'll be doing below these similar content map I think I'll just copy it and paste it because these are these are the things that we have done previously let's import the Chevron right and left we already have done you could feel free to type these classes out I'm not going to do it so we could just speed up the process a bit and let's try to see this on the screen okay there we go once I hover the group element I can see the icons I can go forward and I can go backward so it just works as expected and with this I think this is going to be it for the watch page component so I think we have written about 200 lines of code but if you take a look at it there isn't actually anything complex we have already built these Logics right scroll left scroll right uh functions where we have a handle next and handle preview functions as well which is going to only update the index depending on this if checks then we are fetching the content details we are getting the similar content as well as the trailers so you can create custom hooks for these maybe extract the logic into different files and just make this Alit more clean right also we could take this and put it into a file so I'll just cut it open up these UT tails and just say functions. TS or maybe what should we call it instead of functions let's just say date functions not TS but JS because we're using JavaScript let's say export this one and we can go into the watch page and just import it from from that file and here it says you are not using the loading State that's true let's just try to handle this I will go here um and just say if we are loading then I'd like to return this part here I'll say i' like to have a div let's say class name of minimum height of screen background will be black and petting of 10 and inside what I want to do is just show a watch page skeleton let's try to create this component under the components I will say skeletons and just grab this name inside the skeletons you will create this and say rafc so if you remember we have created a class called Shimmer effect right this is what we had in the CSS file so we're going to be using that class to be able to show some watch page skeleton so this is what I mean we'll be using this Shimmer class to be able to have the loading effect so what I'll be doing is maybe copy and paste this code which is about 10 lines of code or even six we have this animate pulse class with you know background rounded width and height and this Shimmer effect for each of them if you put them let's just see what we're going to get let's say if true so that we can just see it on the screen let's import it so this is what you will have in this page we have a bunch of different loading items so imagine this is the video this is the title uh maybe the category and overview this will be shown until the loading State completed and I am having a typo here it should be minimum height screen now this is what we're going to get okay this is going to be only in the loading state but now what happens if we don't have a Content so if we got 404 then we could show something like no content found let's refresh and just to see this loading state for a second and I think we crashed let's see poster path cannot read properties for this um let's say poster path if we just put this question mark it should fix it this is coming from the content or movie details okay so let's refresh again it says no trailers available for this content let's see did it crashed again um let's take a look at the API okay we don't really have any errors here but let's just go to the hom page and try to come back to the movies maybe click to this one okay so it just worked out I don't know maybe we had a bug when we just refresh the page but now it works as expected do we have any issues here let's try to see I'll try to refresh once again and it just works as expected let's click to this movie it's going to take us to this page we can see the similar content for this one as well okay let's click to this now we have this issue of if there is not an image we just see nothing what we can do is just remove the items that doesn't have an image so I'll go into the similar content section which is this one so what I'll be doing just cut this for a second I'll just make this to be a function and return what we have just cut it and I will say if content let's say if content doesn't have a poster path because this is what we are displaying if it is null then just don't return that element now we are not going to have that issue okay so this is one more optimization that we just added let's try to visit any of these so here it looks like this is not being shown but let's refresh to get the latest value so it looks like no trailers available for this one but we can see the value for this right the details and similar movies API doesn't return any trailers for this that's why we just don't see anything here okay let's also handle the 404 case so because if I go into a random ID that doesn't exist it says no trailers available for this one but what I'd like to see is something like no content found at all so I'll say if there is no content you'll like to return this section so I'll say return open up this and I'll just get this pretty quickly let's just try to see okay this is what we're going to see if there is no content found so if you put some random ID and just search for it it's going to have a loading state for a second then it says no content found for this one but let's try to fold an actual one to find an actual one okay so we can get the trailers details and similar TV shows so with this this is going to be it for this page where we just buil everything and next I think we can build the search page and I'll see you in the next section okay so welcome back we are making a really good progress at this point we have built most of the things that we would need such as the homepage right we built the trending content movie sliders we built the specific movie page as well um we just have let's see the trailers we could go forward go backwards and we can see the details as well as similar TV shows and we have added a bunch of different error handlings such as if uh the movie doesn't exist we show something like not found or we have loading States and a bunch of different things that we have added so far now we would like to build this search page that is going to look like this where we have Navar at the top then three different tabs where we can search for movies TV shows and actors and we'll have an input element once we search for it we're going to get the results back so let's try to build this under the front end folder where we have app.jsx first I will just say let me shrink the left hand side duplicate this one um duplicate this uh looks like I cannot I'm not sure really why but let's copy it and paste it now can I duplicate this okay wait my keyboard wasn't working for a second now it works I can just duplicate this in then just call it as search page right for the element I will say if user is authenticated let's show them the search page but if not let's navigate them to the login page let's create this page under the pages. jsx and just say rafc save and just try to import this okay I'll save now we should be able to build this page and let's start with the UI and even before that let's create create our states such as the active tab so this this would be either let's see movie TV show or people or person let's say the first one is going to be movie the initial value this is what we have then we will be able to search for a value right let's say search term this is going to be our query by default it's going to be an empty string then obviously we'll get some results back let's say results set results and we're going to get the content type from here let's say use content store call it and not going to get the content type but set content type and you'll see why we're going to be using this so what I'll be doing is just scroll a bit and have this div with the classes of background of black minimum height of screen and then text of white inside we will have our nav bar at the top let's try to just import it okay and below this we will have a Dev with the class name of container and MX Auto let's say petting xo4 petting y of 8 and below this we will have a parent this is going to hold our buttons let's say class name Flex justify centered and gap of three margin bottom of four and we'll just have a button let's say button with these classes this is going to say something like let's say movies and classes will be a bit Dynamic so this this is why I'll open up the back digs let's say pading y of two x of four rounded albit and we will just say if the active tab is equal to movie we would like to add this class of background red of 600 but else let's say this is going to be background gray of 800 okay and in the hover State we could just add something so this is not going to be dynamic but it will always be shown on Hover State we will okay it is really annoying but let's say background red of 700 okay let's just try to see on the screen we just have movies since this is the selected State we can see it is getting this class and we can just duplicate this once and twice let's say this is going to be TV shows like this and this is going to be person you can call it as actor as well let's save and okay all of them are taking this classes is because we just say this is movie as well let's say this is equal to person and this is equal to TV let's save now they are going to have the different backgrounds once we clict them we'll like to update the state let's say on click set um let's first call it this Anonymous function let's say set content type is going to be TV copy this one paste it to here this is going to be person and then same for this one we're going to say this is going to be content type of movie but I just realized that in the content type we don't actually keep track of the person right we only care about the movie or TV um what we can do just able to fix this maybe create a function so sorry about this we're not going to hold the person as the content type because we almost never use it instead I will just say const handle tab click this is going to take an argument as the tab so we'll be calling these functions actually let's say handle tab click this is going to be movie this is going to be TV and this is going to be person instead of putting the person into the content type we will put it into the state which is going to be the active tab right I'll say set active tab is going to be the argument that we are getting and what we can do is just say if tab is equal to movie then in this case we would say set content type is going to be equal to movie but in the lse case let's say set content type is going to be uh TV right so we don't really care about person on the content type we only update the state uh for the active tab this is going to be the person right let's save and once we collected this we'll like to just set the results to be n or the initial value which is going to be an empty array okay so now we can clict to this it just updates as we expect let's try to create an input element that is that is going to allow us to actually search for a user which is going to be under a form let's say below this button uh below this div maybe here I'll just go ahead and create a form element it's not going to have an action but let's say class name it is going to have Flex Gap of two items would be stretched let's say it's going to have margin bottom of eight maximum width of 2x large and MX Auto so that it's being centered then let's say input what I'll be doing is just copy and paste we have an input this is keeping track of the state that we have and it says search for a active tab so whatever the value is is it TV is it movie or is it person let's save so search for a TV search for a movie and for a person next to it we will have a button let's copy it and paste it you could type this out but I just speed up the process a bit instead of width and height of six let's say size six it's the exact same thing let's see we just have this button now once we submit this form we'll like to call a function I'll say on submit I'll say handle search so we'll just send a request to our endpoint I'll go here and create this function let's say handle search async function it's going to be taking the event let's say event. prevent default so that it doesn't be doesn't refresh the page let's say try catch in the catch we could have a toast with an error message which will come back to this in a second in the tri let's say con res AWA axis . getet to our endpoint SL API slv1 SL search uh let's say search and we had things like person uh movie tab that's why we have the state it is going to be dynamic active tab whatever the user is searching for and then the search term which was our query let's say search if I can type really and this is going to be the dynamic value that's why we'll just wrap it with this um money sign right then this is going to take us the results let's say set results data dot content okay in the catch case that means we could get a 404 error let's say if error. response. status is equal to 404 then we can show this toast let's say um nothing found make sure you are searching under the right category and let's make sure we don't have a typo here okay in the else case we could really show something like let's say else an error occurred or something like this right okay this should be working let's say save and try to test this out but we are not using the results at all right I'll just say console. log the results for now open up my terminal if I just search for something random okay let me just search for it okay it says nothing found let's just search for Aaron pole and once I search for it I should be able to get 14 different results right these are the uh actors that are matched with this name what we can do take this and render it on this screen so we'll go here under the form we'll like to just map through the results what I'll be doing is just go under the form have this Dev with these classes so this is going to make it to be responsive where in the large screen we will have four elements next to each other on the medium screens two then smaller screens I mean here three two and one we will see how this will look like let's say um results. map give us each result where we'd like to return this jsx part what I'd like to do is just do the same optimization that we have done previously first I'll delete this part this is going to be a function I'll say if result dot let's say um result Dot poster path is not defined right if this is empty and let's say if profile path is also empty then we'll like to just return nothing and you'll see the benefit of this just in a second let's say return we'll like to return this part here we have a div let's open up this div this is going to take the key let's say result. ID let's give our classes I'll say background gray of 800 ping of four and round it okay inside this Dev we will have uh couple of different checks let's say if the active tab let me scroll if it is equal to the person we would like to render this part let's go here inside we will basically have a link let me copy and paste you will say image source is going to be original image base your well and whatever the path is here we have the H2 with the name of the person and below that that means uh the content is either going to be a movie or TV show right I'll just say in this case we'll take to render this part where we have a link element let's import it and let's say um [Music] original image base URL plus d path okay so I hope this makes sense let's save and just try to see this in screen there we go once we search for this user we can get these results now we had actually 14 different results but why do we see five of them it is because we added this if check let me just delete this and save now we can see the users that doesn't have profile image from the API that's why we say if we they don't have an image then just please remove them so that we have this a better UI right so we can take a look at these their profile path are null so we don't really see it and we are in the larger screens we see four of them next to each other but if we go medium we have three or like two one and this is how it's going to work and that's why it is responsive right okay I hope this makes sense now if we click to this one nothing should happen we have this link it takes us to the actor page but let's just delete this this should be an actual div because we're not going to have the actor page if you really want to you could add it maybe after this video taking a look at this uh API if there is there is an endpoint for that as well so that would be maybe a to-do for this after completing this video let's say this is going to be a Dev and let's save okay so we cannot click to them and let's try to fetch some movies now if I collected this it is going to delete all of them from the UI and you might be asking why it's because we have added this set results will be empty array this is actually the case once we call this function this state will be updated to be nothing let's say um extraction search for this movie and here we go we just got all the results that we have and we can collect them because it is a link let's just click to this one is going to take us to the movie page where we have trailers we could go forward they just have two trailers and we can see the details and similar content right okay what we would like to do next is maybe build the search history and let's just test this one as well I'll just say how I met and let's just search for it we should be able to get these results let's clict to this one we can go here show the trailers they just have one and the similar content okay the very last page is going to be search history so I'll see you in the next section okay so in this section let's try to build the history page I'll go visit the vs code close everything maybe open up the app.jsx shrink the left hand side put this above and duplicate it I will say if I have the history page page if user is authenticated show them the history page but else they shouldn't be able to see it so we'll just take them to the login page let's try to create this page under the pages we could call it as history page or search history page doesn't really matter let's just say jsx and let's say rafc and I think it would be better if we just say search history so it is just a bit more readable right this is what I'd like to do let's delete this content and try to create it again and save this let's try to import it okay so let's try to again build the UI pretty quickly and maybe before we build the UI let's try to fetch the data as always right I'll just say search history it is going to be an empty array as the co-pilot suggest us so in this case we could really just type out the use effect but since we have done this more than 10 times I'll just paste and just walk you through it so this use effect will run only once which we call the axus with this endpoint we say give us our search history and it is going to give us the history field we just update this state with it and if there's an error we console log it for debugging purposes and set this state to be an empty array and obviously we call the function right there is nothing complex here that's why I just didn't type this out and what we can do is just say something like if search history length is zero that means we didn't search for anything for now we could say no search history found with these uh Styles and inside this return you will actually return the elements if we have anything let's say class name background black text white um let's say minimum height of screen and inside this Dev we will have the Navar element and and we'll just go here just say a div with the class name uh maximum width of 6X large MX Auto petting X of four and pettings Y of I mean petting y of uh eight and we will have an H1 this is going to say search history and below this we will have one more div again this will make it to be um so it's going to make it to be responsive with this grid elements so all just go inside this St basically we will try to map 3D search history so I will just open this up instead of calling it history I'll just say entry so each value is going to be an entry or you can call it as item right I'll go with entry here we would like to just have a Dev let's open this up close this off and we will say key is going to be entry. ID and we can give couple of classes let's say class name of background gray of 8 100 ping of for rounded flex and items would be let's say start okay inside this step we'll just basically try to show our content right display them we'll have an image let's say um grab the small image base URL plus the entry. image this is how we store this value in the database right and then for the alt we could say history uh image or you could really put something meaningful then we'll have couple of classes size of 16 let's say rounded all object would be cover and margin right of for it is going to be and do we have something missing so we could delete this because we already self-closed it up here and we will have let me just copy and paste basically we will have the title as well as the created ad date and let's create this format date function which is something that I took from chat GPT okay so I didn't type this out by myself as you can understand from the comments uh basically this will take the date as a string and convert it into this format and we'll just see this in a second we are calling it as created ad because this is how we stored it in our database and below this we will have a span this is going to just say if this is the type of movie TV show or person let's just say we call it as search type if you remember let's try to see the search controller when we search for or something we say let's see where that is we say search type right this is either person TV show or movie and this is what we're going to show in this section let's try to maybe save this and see what we have in the in this page we got I think cannot read Properties or it says length let's see where did we use the length in this page by contrl F length okay we'll just say if it is an empty array okay so it says cannot read properties of null on the map okay so it looks like we cannot fetch this let's see just console log the history say search history what are we going to get back it says under defined um here what did we return let's just say console log res. data so we returned it as content that's why it failed we didn't call it as history this was my bad let's say content now it should be working out let's just bring this back delete this and delete this one as well okay so we're going to see the search items that we have done so far this is a TV show movie person and looks like all of them has the same background it is because we are having a typo so we'll say if search type is movie but M should be like this this is how we store it and this is should be this should be TV okay now it just updates what we can do is just maybe format these in just make them to be uppercased I'll go here and just say uh search type let's take the first element uppercase it and just have the rest of it this is how we can format this and I think this looks a bit better and the very last thing we're going to put a delete icon so a trash icon below this spin let's try to import it and this is going to have let's say class name of size five margin left of four cursor is going to be pointer on Hover State we are going to fill red 600 and on Hover let's say text it should be like this text red of 600 and on click to it let's say on click we're going to call a function called handle delete but we need to call it under an uh Anonymous function so that we can really send the ID into it so I'll just say handle delete and you could just return the entry into that function let's try to create this at the very top maybe below this use effect below this if maybe up here right just go here say cost handle delete this async function this is going to take the entry as an argument and the content for this is going to be about 10 lines of code let's say try and catch in the catch we could say toast. error fail to delete search item let's say and in the try we'll just say AIT axios do delete this is what we what we have as the method and API V1 search history and then the IDE of the item that we would like to delete then here we'll like to update the UI we'll just filter out the item that we just deleted okay let's test this out I'll go ahead refresh this page if I click to this one it should delete the extraction from here and if I refresh again I'm not going to see it because it is being removed from the database as well and let's try to delete everything this one and this one it says no search history found okay so this is going to be it for this page as well now if you visit a page that doesn't exist what are we going to see well we'll just see nothing other than footer component and let's try to see how we can build a custom 404 page well basically under the app.jsx you say if any of these routes didn't match where you can put an estx and you would just say let's return a 404 page now let's for now let's just say custom 404 page this is what we can return here it says uh like 404 but we what we can do is just make this a bit better right a bit more beautiful I'll just say 404 or maybe let's say not found H the jsx well not jsx obviously this is not how we call a component this is how we call it let's try to create this I will open up my uh sitebar and just say 404 jsx or maybe not found. jsx let's say rafc and this is our page name so let's try to see how Netflix does this if I go to the netflix.com SLS something something I will just see this lost your way with the image coming from Lost in Space movie and we'll just build the exact same thing and for this I have already provided the image which is called let's see 44.png so we'll be using this to be able to display it what I'll be doing is maybe just copy this in entire page and paste it then walk you through what it does I mean what this does right let's delete this return import the link okay so basically we say we have a div this is going to take the entire screen and this is the background image that we put as a URL which is coming from the public folder and it is called as 44.png then we have a header this is going to be our Navar where it just has the F logo right as the image and once you click to it it takes you to the homepage then inside we just have like a main tag that says sorry we cannot find that page and you can go back to the homepage let's try to import this and just test this out I'll go here and this is the exact same thing that we have but in their example they just have a bit background here so that this white text is readable okay so I just take a look look at how did they build this and I saw they have this before or maybe yeah I think it was this let me just go inside it should be this before element let me just zoom out um this before element has some Styles and this is how they call it error page content and before element I just copied this classes and put it into my CSS file so let's just do it together so they have this class right we will just go into the index. CSS and just try to create the same class I'll try to copy and paste from my code here okay this is what you'll like to build or what You' like to put to make that work we just have this class that we put here and before element we added this uh radial gradient background which is a black back now if we save we just got the exact same output I am not sure if it is visible from the video uh but like we have the same thing same black background in the middle of the screen and if we collected this it should take us to the homepage now one more thing um when we just refresh the homepage we see two movies uh loaded pretty quickly right we just have a flier effect really quick okay so did you see like let me let me just do it again so we got once and then it just updates with this one it is because react is rendering every component twice in the development mode if you remove this it is not going to be the same thing now if you refresh you'll just see one at a time you don't get that effect and we are not going to have it in the production so once we deploy this application we will not have that issue just know that it is because of this strict mode it just uh renders each element twice in the development mode okay so I think we built all the pages that we would need let's take a look we built even 404 page as as kind of like an optimization for our user experience if you just visit now any anything right that doesn't exist you will see L yourway 404 page where you can navigate back to the homepage and with this I think we have just built everything that we needed for this application um so we have sliders let's just test it out for the last time so that we see if we have any issues or not we can update the UI for the TV shows and for movies we can update the sliders these are for TV shows categories has been updated we can go into a specific page where we can see the details with the trailers so this one doesn't have for some reason and we have the poster path the details similar movies TV shows and let's just go into any of them it should be working as expected right there are no trailers we handle this case as well we can search for anyone let's just say Brian Cranston we just got this let's collect it uh we cannot go to that page because we didn't build it but if we go into the search history we can see this let's search for a movie something like extraction we can visit that page because we have the watch page so here it says content not found and I think this is an error that we should fix so I'm really happy that we test this out so that we came across to this error so why this didn't work it is because we selected the TV show in the homepage right from there we try to find a movie so let's just do it again let's say extraction So currently our content type is TV show and if you click to this there isn't a TV show with this ID what we should be doing in this page let's say do it again extraction once we clict to this we should update the state to be type of movie let's go here into the search history page not history but in the search page so here on this page once we click to a movie which is going to be this link element I'll just say onclick let's call this function here we have set content type it is going to be let's say the active tab which is going to be either movie or TV let's save so it is not going to be person because for the person we have this jsx let's test this out hopefully this should work I'll just say extraction click to it here we go now we just selected this I hope it was clear previously when we go into the homepage if we select the TV shows and from here we go to the search page and search for a movie such as extraction our state is still TV shows and when you click to it the ID search for a TV show but we just fixed it by adding this set content type with this on click function okay other than this it just works out let's try to navigate the trailers we can go forward backward the not allowed is also working we got the similar content let's get the search history so we have bunch of different extraction uh it's because every time we search we add it to the database if you don't really want to add it more than once you could update that logic under the search controller where we search and update you could just add an if check you would say if it exists then don't add it um but this is not what I have done uh you could always feel free to update it and if you delete this one all of them will be deleted for the extraction because they all have the same ID let's delete this okay all of them are gone and if we delete everything it is just going to say no history found and other than this I think everything is responsive let's go here and just try to hit like 300 pixels and looks like everything seems to be working right let's go into the mobile phone let's select this one and maybe just make it 100% it just works as expected everything is responsive as we could imagine okay so with this I think next we can deploy this application and I'll see you in the next section okay so welcome back to the very last section of this tutorial where we'll like to deploy this entire application that we have built before we do any configuration I just want to explain this concept where we currently run our server and client on different places right what you'd like to do is just take them maybe under the same domain because if we now deploy this uh on a different place and deploy this on a different place then we need to send a request from client to the back end and like this is fine we could do so but it would be a bit more convenient for us if we just take them and just have them one place right so let's say this is going to be our server let's say server let's say uh the URL for this could be something like Netflix do let's say Das simple or let's say clone. comom we're going to deploy this in a place like this and this will be both our server and client and this is the concept that I just wanted to mention so we are not going to deploy both of them separately but instead just have them under the same domain and here in this case our hero is going to be our server code right this is going to be our backend code this is going to both serve our API endpoints as well as our react application so I know this might sound a bit complicated if you have never used it but this is just going to make sense in a second so let's go ahead and try to configure this I will go under the backend under the server.js and here in this file we will just do a bit of configuration let's first say import the path package coming from from node okay this is a built-in module and we'll like to create a variable called uncore directory name and we'll say it's going to be equal to path. resolve and after all these routes we will like to create let's say an if check we will say if process do uh env. nodecore EnV and I just remember that we are not using environment variables like this but instead we have created the configuration called Nars and we can get the node EMV from here right if this is equal to the production then you would like to do this uh code block right so what you'd like to do is just convert this front end folder to be static assets and in the production we will run this script under the package Json under the front end it is called built let's try to do so and just see what is going to happen I'll just kill this terminal and kill this one just to make things a bit easier for us let's say clean the console and just say mpm run build so this is going to build the production version of this front end folder it is going to put everything under a disc folder so let's wait for this once this is completed there we go we just got the disc folder and this is what we're going to have in the production so we will say let's say app.use and we can and call this express. static function where we'll like to convert this path to be a static path basically let's say path. join uncore uncore their name and I'll I'll explain what that means we will go under the front end and we have the this folder this is going to be the static assets that we will have which means this would be our uh client application right this is our react application and this underscore their name is is means I mean it means that we are under the root because this would be the place that we are that we're going to be running this file so from the root go under the front end and from there go under the this and make this to be our static assets so if you go here you can see we have index at HTML all of our image images right all of our assets and we have the JavaScript code that has been optimized and converted okay so this is the first thing that we have done and we will say app.get any other routes than these API routes we would like to run this controller request and response let's get this one and we'll just call it like this we'll go here in this case we'll like to just res. send file let's say path. resolve their name go under the front end go under the this and return the index.html file this is something that we have as well under the disc assets um no not under the assets so under the disc we have index.html this is the path this is the file that we're going to be returning I hope this makes sense at this point we just say if we hit API routes then handle it but any other routes than these you should show the react application and we're going to see this in action so this is the entire configuration that we need for the server.js just a simple if check we convert our front end folder to be our static assets and we're using this folder which is our production ready code and we'll go into the package.json we have not this one we have this under the back end right so this is the development server that we just use when we build our application but once we deploy our application we' like to have one more just like in the front end this is going to be building our code right our code base so in production what do we want to do first well when we deploy this application we are not going to have the node modules because we don't really push them to the GitHub as you can imagine so what we'll be doing is just first say mpm install this is going to install all the dependencies for the back end okay it is going to install this package or this folder then we could say you should install the dependencies but this time for front end so we'll just say prefix front end and this basically means run this command under the front end folder so that we can get the note modules for our react application as well and once you completed this then you should build the front end application we will say mpm run build and again prefix front end so that it is going to create this this folder so this is going to be it for the build command and finally we will have the start command now that we have built our application it is time to start it in the development server we'll say start we will just say um let's say node backend server.js in the development we run with node Manon but here we just run it with node so it is going to start it only once and let me just take this above put a comma so that I just have the dev start and built in this exact same order and when we run the dev what we can do is just set the node EMV to be development and copy this when we start the application it is going to be the production environment so production just like this now let's try to actually build this application and start uh start this out in our uh machine and then we'll try to deploy what I'll be doing is just first delete the note modules for the back end let's say yes delete this and it is asking for the permission okay delete permanently it is gone let's delete this one as well in the front end because when we deploy our code to GitHub this is going to be the exact same thing we're not going to have them in the GitHub repo and let's delete the this as well we're not going to have it as well okay so when we deploy our code to GitHub this is the code base that we will have maybe here we could add a get ignore I am going to take this and put it to the root let's just see we have these folders being ignored let's just add the EnV at the end so that we don't really leak our environment variables to our GitHub account okay so we'll just go ahead and run this mpm run build command let's see what's going to happen let's open up a new terminal kill the front end we should be running this on the route I'll say mpm run built and it is going to first install the dependencies for the back end we should get note modules folder there we go then we will install the packages for the front end we should be able to have that one as well and it's going to now build it so we'll get the this folder under the front end so this is what it is trying to do let's just wait so it just installed the packages for the front end and now it is trying to build it right we just run all of them mpm install for the back end for the front end and now it is building it let's see if we're going to get the this folder or not probably we're going to get okay so everything is being compiled we got the this folder now we could just say mpm run Run start which is going to start it as the production environment I'll say mpm Run start and if we cannot see it I could maybe bring this up here so let's see now it is being set to production and our server started and mongodb connected let's visit Local Host 5000 I'll go here 5,000 now if you visit this this is going to be the home page as you can see we are visiting our backend uh Port but we can still get the react application it is because we are hitting this if check where we say if we are hitting any end point other than these show them the react application but if we try to log out then we will send a request to this endpoint under the oath so it just works as expected it just runs the controller and log us out and now I hope this Mak sense you can use this logic in all of your incoming projects where you build and deploy your application under the server right under the server basically you build uh and install the dependencies for your server for your client build your react application and serve them under the server.js file with that in mind we can initialize a get repo I will open up my terminal K this and we have some I think console logs under the back end let's just see for the oath controllers let's just say console.log if you really want to you could delete them some of them are not really needed so let's delete this one first we could delete this is an error handling maybe we could leave it or maybe we could delete it I'll be deleting this deleting this one foru search controller we just have the debugging I mean like logging for the server we could leave them as it is okay I'll just leave it like this let's try to initialize this as a git repo I'll say get in it and let's add all of our changes maybe I'll say close all and just make sure that your dnv and node modules are being ignored so it has being gray out I can understand they are being ignored and you should make sure that you added this. MV into the get ignore okay so we'll go ahead and maybe say uh get add all and then we'll just say get commit dasm I'll just say initial commit okay so I just committed my changes now what I want to do is just visit the GitHub and push this code so now I just want to create a new repo by clicking to this and here let's give it a name I'll say m Netflix clone and for the description you could leave it empty this is optional I'll just make it private if you want to you could leave it as public right I'll go with this one and let's say create the repo and what I'll be doing is just copy this okay just make sure you copy it and we're going to push this uh push an existing code uh to this repo that we have right I'll open up my terminal and just paste it okay I'll just say push it should take this code push it up into our git repo let's refresh there we go the initial commit has just been done 1 minute ago now we'll be using already have so I'll just log in and go to my dashboard I'll say log in with the GitHub account okay now I am logged in I'll just say create a new web service let's click to it okay we'll like to deploy this one I'm going to be clicking to it let's say connect and from here and out let's see it says loading we could leave everything as it is for the build command it is going to be mpm run run build and start command is going to be mpm run start right these are the uh commands that we have added into the package.json file so we have built this is going to be installing all the packages and buil the front end then uh start is going to start it okay this is the things that we just put I'd like to go with the free plan and the only downside for this is that it just get it just gets um like inactive if you don't visit your website for 15 minutes and once you visit it after 15 minutes it's going to take about 1 minute to load um I think like it is bad but for a side project it is not really that much of a problem and if you want to get rid of that you know uh inactive State you could add some kind of Crone jobs this is how we type it so Crone jobs and I have explained these in my previous videos you can take a look at the deployment part in the previous M Stack applications so it should take about at most like 10 minutes I will need to add my environment variables as well so I will go ahead copy this file let's close these or delete these empty places copy it and paste it oh okay I thought it's going to paste all of them but let's just do it manually I'll just add one by one U and then the value for it and I'll say add new environment variable so I'll be doing this uh just pretty quickly let's say Port is going to be 5,000 and maybe I could speed up this process now okay so these are the environment variables that I have added I didn't add not DMV because when we run the build command it is already I mean when we run the start command it is already going to be production so I'll just say deploy this web service this is going to be taking a bit time but let's wait for this to complete once this is done I'll just be right back okay so there we go without any issues the build was successful it tried to deploy that and here we go it just says your service is live and we can see mongodb connected and server started it even though it says Local Host but we just got an actual endpoint or a URL let's click to it it should take us to this page and here we go we are here um for some reason it didn't get the background image so maybe we could fix this just in a second let's try to go to the sign in page so we can we cannot still get this um there might be a issue we're going to fix it let's try to sign up here I'll just say um let's just say I don't know for the name we could say Chris email.com let's say Chris and if we put one two three it should say password must be at least six characters let's put 456 and make this to be an email that is already existed it should say email exists okay I think we don't really have that email in the database that's why it just logged Us in uh we can test this out again but there we go now we are in the homepage we can see the movies let's say TV shows there we go it is just being updated we can see the TV shows with the categories we can scroll to this list let's select any of these TV shows it takes us to the watch page where we can see the trailers we can navigate them go forward go backward and if we are in the first one we cannot go back right we got the detail with the poster path similar movies or TV shows it just works as expected let's try to search for a user I'll just say maybe Aon poll okay there we go we got this user let's try to search for a TV show let's say Hawai met and it should fetch all the related TV shows let's say movies extration and search for it okay from here we can navigate it see the watch page trailers we can go to the search history there we go we just got all of our search we can delete them and it's going to say no search history found if we try to go a page that doesn't exist it should give us 404 with the image and we have the footer as well so we have a tiny bit uh styling issue maybe you could remove this padding or is it marching bottom I don't know it is pretty basic you could remove it um we can go back to the homepage and we can also visit from here right so all I all I am trying to say it just works as expected let's try to log out and for some reason we cannot see this background image I think it's because in the front end um in the index that CSS we just say hero.png maybe this should be/ hero.png what I'll be doing is just open up my terminal and just say mpm run build and test this out once again in my in my local machine and if it is working then I'll be deploying this uh into the production right I'd like to save this file as well let's close this and let's wait for this to complete okay so it says it is completed let's just say mpm run Dev or not Dev but start because now we are in the production we'll like to see the production build let's visit Local Host 5,000 it looks like background image is working now let's try to deploy this once again I will say get add all and maybe we could remove this 404 page style let me just fix it um okay so we cannot get it because we killed the server let's just start this again and I will refresh this page okay why do we have this styling issue let's go into the not found page did we call it as 404 Yep this is what we have let me just zoom out a bit shrink this left hand side so we say minimum height screen let's delete this um so okay um maybe it's because this is positioned absolutely let's delete this for now oh okay so it cannot update even if you refresh this because we are running in the production every time you do a change it is not going to restart this right here just watch me I'll just bring this back bring this back save this and it doesn't restart it it is because we are in the production environment we don't run it with nodm but we run it with node where that is let me just show it so since we are running this we call the node and this is not going to restart it every time you do a change so I think I'll just leave this to you to just uh remove this space at this point you should be able to do so right I'll say get add all get commit DM and I'll say index. CSS hero b fixed and just get push this okay so this is going to push this code to the GitHub and let's just see the latest commit was just now and render is going to see that change and it'll try to redeploy your application so you don't really need to do anything it'll take this and try to deploy it and you can check your logs and just see if it is going to fail or not and once this is done I'll just be right back to the video okay so it just says your service is live server started mongodb connected let's visit once again and we should be able to get the background both in this page in the login in the sign up and we can really try to sign up once again let me just try to sign up with the John email I'll just put any name if we put this password from 1 to six it should say email already exists right but now I can put something like Chris and just say Chris hem worth I think this is the correct name let's just say one to three password must be at least six characters let's go from 1 to six sign up we should be able to sign up and it's going to create our account right now we can really navigate everything and as I shown you it just works as expected so with this I think this is going to be it for this tutorial I think it was helpful where you just learned the fundamentals of full stack where you have your database your API your authentication system and on the client we had a react application uh so you know like everything that we have built I hope it was helpful thanks for watching and hopefully I'll see you in the next video okay so just a quick pause here I already said I'll see you in the next one but there is just one tiny fix that we could add it is that we don't have a loading State when we sign up or when we login right let's try to add them even though we created those states such as in the oath user.js file we have is signing up is logging in and is logging out let's try to use these states if we go into the sign up page well basically we can just grab this state and destructure this and we can use it in this button so instead of just saying sign up let's delete this we will say if is signing up then we will just say signing up or let's just say loading and we could put three dots and otherwise we will just say sign up let's do the exact same thing in the login page I'll go ahead copy this and here I'll just say I mean not copy but we'll go here and copy this one is logging in let's paste it we could go here and just say loading or let's say loading otherwise we'll just say login and we could make this button to be disabled if we are logging in and let's do the same thing for the sign up page this button is going to be disabled if we are signing up okay these are the things that I just wanted to add and if you want to use this logging out State you could also use it but logging out is going to be super fast so I just don't even want to use it I'll just leave it here in case you want to use it but as I said uh I'm not going to be using it and the very last thing I just want to update is going to be the scroll bar that we have in this application so let's go into the homepage we see this uh scroll bar is fine but we could really make it all bit better so I'll go into the index. CSS and I'll provide you couple of lines of code so basically we will have a dark mode grounded uh scroll bar so just like this this is what we have we change change the width scroll bar thumb background color and Border radius as well as the scroll bar track let's save and just test this out there we go now we have this scroll bar um on the right hand side and it is a little bit more elegant and let's try to just log in or sign up I'll say I don't know just put something random I'll say Jesse [email protected] and for the username let's say Jesse 1 2 3 1 2 3 4 5 6 if I click to this I should have a loading State okay there we go now we are logged in account created successfully and it should have the exact same state in the logging in let's just try to do so 1 2 3 4 5 6 there we go it just works as expected okay so these are going to be the changes that we have now I'll just go ahead kill the terminal and push this to the repo I'll just say CD up and get kit add all which we have three different changes one of them is under the index. CSS we added the web kit for the web I mean for the scroll bar Styles we added the logging in state as well as the signing up state so these are the changes let's say get commit dasm which stands for message and let's say floting States added and just commit this changes and finally I'll just say get push so that it could deploy the latest change that we have so this is going to do the magic let's take a look at the render if we go into the dashboard it should be able to deploy this from scratch so it is going to be working the exact same way in the production and with this I think this is going to be the actual time I will see you in the next one