Full Stack Netflix Clone in React, Firebase, Tailwind CSS | Full Project | 2023

hello engineers and welcome to my channel I am Yash and in this video I will show you how to create this amazing Netflix clone with Firebase as backend and Tailwind CSS for styling you can create this project and add it to your portfolio so that you can get your dream job as Junior developer now if you're not familiar with Firebase or tailb do not worry we will be creating this project literally from scratch literally from npx create react app and take it all the way to deploying it using Firebase hosting to build this Netflix clone we will be using all the amazing Technologies we are going to use wheat Tailwind Firebase react icons we will also use axios to fetch data from the from uh IMDb API and much more so let's get started okay so first let me show you what we'll be building today guys look at this this is what we'll be building today and as you can see this is currently hosted on Firebase hosting okay now uh look at this amazing banner and if I refresh the page we see another Banner right another movie which is like totally random right super awesome and guys we are fetching all this data from tmtb API I will show you how to sign up and it's totally free you don't need to use credit card for tmdb or fire base or anything else to build this project okay now if you scroll down you can see all this amazing poster of different movies right with this amazing labels upcoming trending top rated comedy and we can just use this slider amazing slider to scroll through the The Collection right super awesome guys super awesome and not just this right you can see this like icon here if I click here it will tell me log to save a movie so we will be using Firebase authentication to create a user right so let's let's go and do that first let me show you my Firebase so this is authentication if I refresh the page there are no users so let's go ahead and sign up I I click sign up and here another uh another thing guys so uh if we go back to my fire store now fire store is Firebase database right like uh think like that now here I have users collection now once I click sign up here so dog gmail.com and a password I hit sign up and Bam look at this guys sign up turns to log out and profile right and if if I take you back to my collection you can see that here we have a users collection with dog at gmail.com with saved shows as an array now this is database and if we go back to authentication and refresh here you can see a new user is just created right now we can use same credentials to log back in to our profile right awesome now let me show you how like works right if I keep this open and keep this here scroll down and just uh hit like here and Bam look at this guys we just added a movie to our database right click this awesome awesome stuff right so right now we have three movies and let's bump it up go back to our profile and now uh come on profile and we can see all these three movies right here guys awesome now let's try to delete them right so I'll delete this bam out out awesome right let me show you one more thing go back and we have this email as well right which will uh which we will be getting from our uh database right our authentication Firebase authentic ation now let me show you one thing I click this now if you go to profile you see the movie Barb right but what happens now this is a profile right now guys we will be using react react router Dom as well right and I will show you how to create protected routes what do I mean by protected routes now look at this SL profile right uh right now I'm able to see SL profile because I'm logged in what if I log out I log out I'm here right and of course there there is no button to go to slash profile but what if I enter slash profile right here and click here nothing right you cannot access profile because you are not logged in right awesome guys so this is what we'll be building today from scratch so let's open up our terminal and get started okay so here I have my terminal opened up and I'm inside an empty folder so let's go ahead and run the command NP M create weat at latest and if you are already inside the folder where you want to create the product just hit period but I want to name it react Netflix YT and you can name it whatever you like and hit enter and it will ask you here we will select framework uh react actually react is not a framework it's a library but anyways react JavaScript plus s swc okay LS and we can see uh new folder is created so we will just CD here inside our reacting net flixy folder and if I LS now we can see public and Source directory right let's clear this up and uh first let's do code period so that it opens up my VSS code and let's put our VSS code this side right like you know what we can make it a little bit bigger and we can bump up the icons let's let's just see your app.js right I think this fonts are good this is good right let's do this and uh let's keep this open as well but uh next we need to do one more thing uh we can keep this open uh first run npmi make sure you are inside your folder where all the public and mainly you need package.json right so make sure whenever you do LS you see package.json and then run npmi okay now everything is installed so I'll just do npm run Dev which should open up I mean you need to go to this link so uh generally it's 3,000 P 3,000 but this one is 5173 but we will change it right now okay so go back to vs code and search for so I hit command P so that I can quickly search for a file so it's going to be V.C config.js go down here and just say server uh it's an object and the here we will say port and Port is going to be 3,000 now uh you can see uh 5173 Port here right as soon as I save it it's going to become 3,000 right and this will not work because it's 5173 it will work on Local Host 3000 okay now let's start by removing some stuff right we don't need app.css we also don't need uh react. SVG we don't need weed do SVG right from public folder and inside this app.jsx just delete everything and I'll do ra fce now this is a amazing plugin which I'm using which let you do this so just go to extension and you will say uh you can write react Snippets right and you should see something like this by DS uh not there if you have watched my other videos you know I always use this plugin so make sure you get it right and this will let you do this so ra fce uh pretty fast uh gives you a baller plate right now if you go back VC app here we still have some styling here uh so go back to index.css remove all this crap and save it and Bam awesome right now this is a very basic project now let's install V right so what I'll do is I'll go to Google and I'll just say install Tailwind uh wheat very simple guys Google is our best friend right now as you can see we are here we already run this command already right so I'll uh copy this right this little icon is to copy and I'll go back here and um let's stop the server paste it here and it should do some tail windy stuff right and just waited to install okay we are done uh go back here and copy this thing and go back to vs code and here we are going to search for Tailwind once again guys the shortcut is command P go here remove all this paste here right uh that's awesome next thing we need to do is copy this right and go to index.css once again command p and uh save it here awesome now let's run the server so that we can test our Tailwind stuff okay uh of course uh we go here and you know what let's put it here so that we can see it along with our code okay now this is uh a good approach I think all of my student students like this when we code and uh have output side by side right so let's test our Tailwind so this is going to be text F XL text red uh now guys if you're new to Tailwind this is this is how you do styling okay now if you noticed so if I start typing font it will give me all this intelligence right here right you can see all this intelligence now for that you uh you may not be able to see all this because you don't have this installed so search for Tailwind now this is amazing extension which will make your life a lot easier so get it Tailwind CSS intellisense right this is must have if you are going to use Tailwind awesome so go back here now this is how it works now if you want to see what's happening behind the scenes now eventually everything gets converted to normal CSS so if you hover over text F EXL it will show you that when you use text text F Excel what happens is font size is set to three R which is 48 pixel and line height is one okay that's what's happening behind the scenes right and this is what happens with color and you can see uh similar for everything else right so we are going to do font bolt save it and Bam look at that guys right super awesome now we installed the Tailwind we need one more thing we need to add custom fonts right guys uh so let's add custom fonts okay now for fonts uh I'll just open up my desktop right and I'll put this here as well and as you can see I have this Netflix Sans fonts right what I'll do is and you will be uh there will be a link in the description below you can get the same fonts right so I'll just drag and drop inside my assets folder right make sure you drag it inside your assets folder right awesome now we don't need this and also bump this guy up and let's make this like this let's go back to our code and let's try to use this fonts right uh you know best thing to do is remove all this styling for now right remove all this styling and instead of app let's just say um you know what let's say Netflix and here so inside our styling we can say uppercase this will make it all uppercase right uh let's add our own fonts so we already dragged our font font files here inside assets folder and here we will say font face hit enter and open this and this is going to be font family and name it and sense uh regular right and next uh is going to be source which is going to be a URL and here I'll do period ass set and this is going to be Netflix and regular now save it here let's just say body and here we will just say font family and this is going to be at this for now so this are backup fonts if this font fails uh your website your react application can try to use this fonts right uh so that it still is able to show stuff now here we will just say enance regular right now guys once I save it you will see the font changing right so I'll just go ahead and save it and uh I mean we didn't see much right no no no I think we need to start the server okay it's already start so let's do npm run Dev and here we are but a good way to verify is Click inspect uh inside the inspector what we can do is so here we can filter for font family and we can see ense regular right here right I think uh when we make it bold or something it will uh make more sense right or another quick test is comment this out and save it and we can see right uh a little bit of change okay save it now similar to this we need to do for rest of the other uh font faces so what I'll do is I'll copy it from my notes and just paste it here and you I'll stick here for a second and you can just type it it out right now this one's the regular which we are using it here and for others we will create uh Tailwind extension right make sure you type this out I'll go to tailwind and here inside extend we will say uh font family and this is again going to be an object and here inside this what we will say is n sense light now this is going to be n sense uh light right l g HD comma and copy this paste paste and second one is going to be medium medium and this is going to be medium and this is going to be bold and go back here and make this bold as well and if you notice right like if I'm here I'm selecting the whole word for this I'm doing I'm pressing command D and I think if you on Windows it's going to be contr D right so it will select medium right and how this works is so if I'm here and I select command D it will select the first instance and if I hit uh command D again it will select another instance of same word okay and now you can actually edit all of them together which is super handy right and which I'll be uh using it a couple of times during this project okay so I'll save it and let's test all this fonts out right what we will do is so we have this here and let's just create H1 here and this is going to be Netflix I hope it's okay uh paste paste paste and we have four Netflix here and let's just say class name this is going to be font incense light save it awesome look at that guys did you see this is going to be font and sense medium okay oh oh something's wrong here so medium is medium why it looks like medium and regular looks pretty similar right medium oh okay regular is supposed to be regular here so regular and save it okay now you can see the difference right so uh make this regular I mean so this is the default one so this is going to be regular right and this one let's make it font insense medium right and this one is going to be font in sand bold right super awesome guys you can see the difference right we can see all the font sizes and which looks super sick guys if you really like this font and I think many of you have never imported fonts like this go ahead and hit that like button right destroy that like button guys so let's go ahead and uh next thing we need to install uh dependencies right so so uh once again stop the server right the way you do it is you hit I think you hit control C right I think yeah uh it's alt C or contr C just figure it out right so dependencies which we need are so first is uh let's say react icons we need react icons we need react router Dom we also need axios we need five higher Bas and we also need uh uh okay for now uh this should be fine let me double check my notes and I think we need one more which is going to be uh okay right here now this is going to be Tailwind scroll bar hide now this will let us hide our horizontal scroll bar right which is super cool so for now we need react icons we need react router Dome we need ax us Firebase and Tailwind craw bar hide hit enter and it should install all the dependencies and give it a couple of seconds okay awesome should be fine now awesome just clear this and we are here and also let's just clear this we don't need all this right now and we can start working on the project right this is too big okay we also don't need application now let's start by setting up uh react router dor right uh so first let's create a new folder inside our source folder which is going to be called pages and inside Pages we need uh home. jsx and once again rafc save the file uh create so make sure you save it and once again create another one which is going to be login login. jsx R fce save it and create another file inside Pages this is going to be sign up. jsx R Ace save it and Pages last one which is going to be profile. jsx rafc enter and save it okay make sure you have some data inside all the files uh so that we can test all the routes right save it and also home.js save it now we can close all this uh tabs right the way you do it for uh Mac it's command W and probably for Windows it's going to be control W right close everything uh open app.jsx you know what before that we need to open a main. GSX okay I think I hit some Shortcut and it just got minimized so let's open main. jsx and here remove this we don't need strict mode and here start start typing browser router and for me it's uh asking me to import from react router Dom and I'll hit enter and you can see it added import statement right here right make sure you do that uh uh if you don't get Auto Import right just Google it how to uh make it happen otherwise just type this statement out okay and I'll put this copy it and put it below app and save it awesome right now inside app.jsx right right now I'm inside my app.jsx what I'll do is I'll start by creating all the routes that I require first we don't need uh D we will create empty element here and just say uh routes and once again hit enter and it will Auto Import close it and here we will add route and this is going to have path of uh slash and element is just going to be our home element so home uh once again I'm not getting Auto Import here right but generally what I do is I go back to home I hit save a couple of times go back here and hopefully this works right home awesome right look at that guys uh and once again we also need to close this uh let's copy this and past it uh three four times because we have four paths this is going to be login and this is again going to be login and once again I'm not getting Auto UT so I'll just go to login uh hit uh command save couple of times and Bam look at that guys awesome right this one is going to be sign up and just say sign up uh right here let me just do it here let me show you how it's done so I'll just copy paste here and change this once again I did command d right so it's going to be sign uh sign up hopefully it works and this guy here is going to be profile and now this profile is going to be our protected route guys I'll show you how to uh make it protected later in the video once we set up Firebase okay so this is going to be profile oh man uh let's go to profile hit command save a couple of times come back here and profile awesome so that it Auto Imports save it we need to run our server so it's going to be PM run Dev and we are here and we can see home here right if I zoom in we can see home here and we can go to login we see login sign up we see sign up and for profile we see profile awesome right cool so let's go back to homepage and we will start working on our uh our nowbar right so first create a new folder here this is going to be components components right inside components we will say nar so not jar it's going to be n. jsx rafc enter bam right go back to app.jsx now we want to use nabar everywhere so it's going to be right here right uh we don't want it want it to be inside routes or anything right because Nar exist everywhere so now once I save it we can see naar on every every p path right on home you know what can we style it is it uh you know what just leave it so even if we go to a login right so if I go to login we still see narar right and if we go back to home we still see narar which is super cool and that's how we want it so uh we will start off by uh working on the HTML part right here uh just say div and inside this div we will have H1 right and and this is going to be a link right actually let me show you how it's done so let's say link and once again you uh it wants to import from react router Dom so hit enter and it will create the import link right here okay uh I think every uh this is a built-in feature inside vs code so hopefully all of you are able to Auto Import just like me and uh if you were not able to Auto Import and you figured out how to Auto Import please mention mention in the comment section below so other people can uh do it as well okay so this is going to be link uh this is going to be our uh Netflix logo so Netflix save it and say class this is going to be uppercase text red and say 600 font and sense bold and cursor pointer and we also want text F XL save it bam look at that guys looks so beautiful right it it really looks uh looks like Netflix right actually the font is Netflix sand so Netflix has their own fonts and I think that's what we are exactly using right so I'm I'm not zoomed in here so this is completely uh so 100% right no Zoom right once I'm Zoom you can see percentage here but uh I'm command zero and no Zoom right and we are here so what we'll do is uh first of all let's go to home and remove this we don't want to keep seeing it right and that's the link there right after that what we need to do is create a div here and now this is going to be another link and this is going to go to uh login login and here inside login we are going to create a button which is going to say you know what let's just say login right uh sign in doesn't make sense uh capitalize uh yeah capitalize text white right I think uh did we add index. CSS you know what we need to so go back to index.css background color is going to be black save it and also add color which is going to be font color right default font color is going to be white right so that we don't need to mention it every time so if I save now oh we can see log in here right Netflix is red because we mention it here so you you can override font color right so we can say t Yan uh 400 and it will pick up this one but if there is no font color given it will be white so that's convenient when we have black background right so let's make it look like a button right this does not look like a button uh n pr4 this is going to be padding right of four because we are going to add another button here so just copy this guy and pasted here which is going to be sign up sign up and here just say sign sign up and wec sign up right so we need to add some other uh styling here so capitalize BG red 600 px6 and if you notice guys I'm not typing whole uh whole thing right so for here I'm not like literally doing BG red 600 right notice what what I'm doing I I'm doing BG red r600 right it will pick it up so that's what intellisense is guys okay so BG red px6 py of 2 now px6 is padding on xaxis so padding left will be 1.5 RM and padding right will be 1.5 RM okay and uh you may have guessed py is going to be top and bottom okay and we also want it to be rounded save it and we see rounded right there are we missing something so it's going to be cursor pointer and text is already white so uh now this needs to go here right so for that I think we need to style this div here uh are we missing something I think so we need to style here now this is going to be absolute width will be full right save it and nothing happens padding of four so P4 means padding on all xes uh basically uh Left Right top bottom okay four four uh padding of four which is going to be 16 pixels I guess and when I save it we can see padding right there right so padding of four let's say Flex items Center justify between and Z of 50 as its uh navigation bar right awesome guys look at this we are done here right nbar looks super awesome now if I click on login it will take me to login if ick click on sign up it takes me to sign up and if I click on Netflix it takes me to homepage super cool guys super cool okay so now our nbar is done so next we will work on the hero hero page right the big uh movie poster uh that we see when we open Netflix right so uh we can see that uh let me see this was my app right uh we will work on this poster right here okay so let's go back to my project and close this this as well we also don't need this and let's keep this open right so we will be working on this part okay let's first uh we also need to get data from API but first let's create a component which is going to be hero. jsx ra fce uh save it couple of times and go to home. jsx and remove this we will have empty fragment here and let's say hero and make sure it's imported right here okay so uh I save it and we see hero right here okay so uh let's get uh let me show you how you can get API right so go to go to Google and search for tmdb API and uh just click on the first link okay very straightforward guys uh okay this is not it this looks different uh no go back and go back here uhu so what if I search for tmdb I think here login okay yeah I think uh this one it's the same thing but anyways just go to the movie.org right make sure you go to this link right uh right now you can see I'm logged in I mean I can log out and show you okay I think we were at the right place but we just need to click login so I'll login but if you have never used tmdb before just hit join tmdb and just fill out the form right and then you will be able to log in once you log in you will see something like this what you need to do is click here right click here if you hover you will just see profile and settings you need to click it go to settings right and click on API and here this is your key right guys please don't use my API key it won't work right I'll show you how to regenerate so this is what I'll do once uh I'm oh my God big problem okay now our app will not work because my key is changed right so this one will not work if I refresh because my key is disabled right probably it won't work after some time anyways uh this is going to be our new key right please don't use my API key uh so just go here API and copy this so I'll copy it now go back to our project here inside our source folder right inside our source folder you I want you to create new folder which is going to be Services services and inside Services make sure it's inside source and inside Services create uh movie services. JS right that's it and this is is going to be a con key and I mean we can paste it here but this is not safe right so what I'll do is I I I'm going to create a EnV file so it's going to be in my root directory not inside source so it's going to be EnV and this one uh so if you're using V your environment variables need to start with this right so it's going to be V tmdb uh key and just paste it here okay that's how it should be and another thing what I'll do is I'll go inside my G ignore and I'll add EnV here right so uh basically you never push EnV files to your GitHub or just don't share it with anyone they are supposed to stay on your uh your computer right so that's that I'll save it go back here uh I'll save this okay we don't need to save this so what uh here what we need to do is we will say import. meta Dov do we tmdb dokey now this needs to match uh this guy here right uh it's pretty obvious so make sure you do that okay with tmdb and and you also don't need quotes right just paste it here as it is uh one good thing is just copyed uh from there and paste it here right so that there is no chance of error and this is going to be base URL you know what what I can do is I'll just copy this and you can type it out right so this is this are all the end points right which we'll be using now what I what I have done here is now here we have base URL right this URL does not change and it stays same for every endpoint we hit right so we have base URL basically I have constructed my own string and then this is the uh whatever you say like path and we add API key here right so that it's consistent and uh pretty easy if we need to change anything in future and we also need to do export default end points right I mean we can uh you know what let's keep default another thing we will be creating is another function you know what we don't need it right now so let's go back to our hero and let's try to Fed some data right let's see our uh key is working or not so go back to hoo and what we'll do is here uh okay close this so first we need uh state right so this is going to be movie this is how we will keep track of the movie and this is going to be use State hit enter and you should see this UT right here if you don't just type it it out type it out and I'll just save it we also need use effect hook and this is going to be eror function and this is going to be an Mt right make sure it's a comma right there are two arguments uh to the use effect function and here we will use exos hit enter and once again you should see import statement at the top and this is going to be end points once again once you hit enter you see this import statement uh basically we are getting endpoints from that file we created which is movie service this is what we are going to use right uh a basic object guys right and go to hero and inside this endpoints we will use popular then we will get a response right so go here and open it up cons movies you know what what we can do is we can console log response. data right awesome now uh okay this one and go back here here I and I think something's wrong oh right here do we see it okay this this is it okay guys results awesome so uh another thing we can do is just say results awesome uh refresh again and we get 20 movies right guys this is super cool so we are able to get data using our new API key right uh awesome so now let's try to choose a random movie so this is going to be movies response. dat. results right and just say random movie and this is going to be movies and here we will do some math right so math. floor math.random and guys see uh this like I did not come up with this I just Googled how to get random number right that's how everything works like I'm not that smart too right what I'm good at is I'm good at Googling so what I do is right if you go here uh and just Google right let's say JavaScript random so basically react as JavaScript right so just say JavaScript random right and open W3 school it will say mt. random and so what this will do is and just click try yourself now this will give you this kind of number right which is what uh we don't want that right if you go back to my source code what we are doing is this is movies array right this this movies has 20 objects right 20 movie objects now we just want to pick a random object so we need to pick a number between 0 and 19 right basically that's what we are trying to do now we don't want this this kind of number right we need a number between one and uh like 0 and 19 because it's an array so now here see now it's telling us returns a random integer from 0 to 9 now if we try it every time you refresh we get random integer now but instead of hard coding in 10 what we will do is we will uh add movies. length right so movies. length and this should do the trick right like literally you know what what you can do is just copy this formula and CLG here past it here now if we go back here uh close this close this close this and actually we don't need this page as well you know we can keep it open but just move it to the side and and if we refresh the page right here uh number nine refresh 11 so number will always be between 0 and 19 right that's that's how you pick random number now instead of just printing out uh random number what we can do is print out random movie right cool right see every time you know what and we can narrow it down to title right so that it's easier to visualize see mag 2 saw x a retribution of awesome guys super cool right and so instead of console logging what we'll do is just set it uh to our state which is going to be this one right once again we are using UST State hook to uh to set a state right so that we can use it inside our div now uh sometimes when you first load uh react component uh it's still trying to fetch all this data so what I like to do is if there is no movie right I mean uh many times it's so fast you will never see this uh part but sometimes if it's slow uh your user can see what's happening so if there is no movie it will just return fetching movie right okay but uh right now it's so fast that we just get hero right uh awesome next thing we'll do is so we need couple of things from our uh movie Object okay so after this part so just say const and we are going to use all object destructuring which is going to be title backdrop path now this backdrop path is uh a link to poster right release date and we also want overview and this is going to be Movie awesome I mean you can we can change this movie to title and we can visualize what's happening right so if I hit title we can see after everything retribution right super cool and uh you can also add some Tailwind if you want right so what we can do is uh control X this H1 paste it here and a class this is going to be text red uh you know what let's just Sayan uh 500 and text 5xl and save it and we can see the none too right I mean uh our Z index is higher so that that's why we are saying our now bar before but anyways uh so we are getting our data guys so I'll close this we don't need our console right now so let's start working on the uh div right so first let's start by adding classes to our uh pent div which is going to be width of full height is going to be fixed so this is going to be 550 pixels and if uh so now this is a breakpoint like if you don't know about this breakpoint basically so let me just type it out and I'll tell you what it is so what what this is saying saying is right so if uh normally uh and first of all Tailwind is mobile first so all the Styles you apply they are mobile first then you can add break points for uh larger devices right so what we are saying here is when screen size is greater right greater than 1024 pixels height of this is going to be 850 pixel right and you will be able to see once we add image what's happening right once again add another div and this one is going to be width full height full right and this is going to be a div class of absolute with full and once again uh we need to copy this so just you know what instead of typing this uh pasted here now whenever you add box and add hardcode the value this is how you can add custom values to your Tailwind right and this is going to be a gradient uh to right basically this is a backdrop right uh gradient to right from black I think probably we will we won't be seeing it because it's already black so I'll just hit enter here uh what happened okay just hit enter here and this is going to be our image so instead of adding anything to alt what we can do is we can add title to alt tag right so if there is no movie we can see title here now let's add Source now uh for for Source uh let me show you so this is going to be a path right this is how you get images and this is going to be original and here this is going to be backdrop this is the file name right uh actually we need to use template literals so remove that inside this inside this and when I save it and Bam look at that guys right so as I keep increasing the size you can see it okay uh we need to add some uh classes to our image right let's do that first right so what I'll do is add some classes to our image now this one will have with a full height of full and object cover and object top okay save it and hopefully it works who look at that do you see guys see the height dropping right do you see right now it's 550 pixels as soon as we hit uh that 850 pixel break point I think we can see height in pixels somewhere let me open this uh I think we so first of all let's see so for large it's what uh minimum width is 10 24 pixel right so I'll I'll do command shift M command uh control okay alt M right and I'll if I open this up right now so only if I able to drag it so right now it's this right as soon as here you can see I think this so 1025 let's keep 1025 as soon as I make it smaller the the poster size decreases right that's what breakpoint is so once again go back I'll put it to the side okay it looks cool guys right so we are done with the image part now we need to add uh this text right see our API has stopped working because I regenerated the key I should have not done that uh anyways so just go back uh let's keep working here and do we see the backdrop no I I don't think we see the backdrop because we don't want this div and this div is going to be self closing div and now we see the backdrop right did you guys see it uh if I remove this line you can see the difference right now with the backdrop it uh it looks much cooler so after image we want to add some more divs right so first is going to be a div inside this it's going to be H1 now this is going to be our title right title and after this H1 we have another div inside this div we will have button of play and we will have another button which is going to be watch later and after this div we will have a P tag which is going to be release date save it and another P tag now this is going to be overview awesome but we just need to put uh style this right so first add absolute with full and it should go up what's wrong so image inside withd full height full so last three days I think we we still need to add some more styling so this top is going to be 20% right 20% inside square brackets uh and when it's larger devices we want it to be 35% okay and uh padding of four when for medium BR break points padding of eight save it and okay it just went up right so we we still need to add styling to our H1 tag which is 3x XL for medium 5 XL save it and what we can make it 6 XL yeah 6xl looks good 6xl font instance bold save it wow guys look at that and then we will style this so margin top of eight and margin bottom of four right once again you can hover here and see margin top two Rim which is 32 pixels this is going to be 16 pixels right now let's style our button this is going to be capitalize border border gray 300 and py of 2 and guys if you're building this project uh for your portfolio I mean you literally don't need to uh do everything as I do right you can play around you can create your own buttons you can add rounded and just just experiment with different stuff right that's how you will learn and what we can do is just copy all this or we can just type it out uh capitalize border border gray border gray 300 uh py of 2 PX of five and mL of four actually we don't need uh we just need ml4 here we don't need it here because no point giving margin left right there uh now something is wrong here border gray uh so top one is supposed to be BG and now it should work now instead of text white we want it to be text black so that we can see it and it looks pretty neat right I think it looks sick okay cool next uh let's uh add sing to our P tags now this is going to be text Gray of 400 and text of small text small right uh right here this one and let's also now this uh we can see that this overview is like coming out right so what we need to do is we need to truncate it so if the overview is greater than certain length we want to add like that dot dot dot dot thing right so let's create a function here right which is going to be con truncate right and this will have two parameters which is going to be string and length right and if uh string is not there right we just want to return this empty okay something is wrong okay this is not an arrow function now if I save it it works and if if string exist what we want to check is string. length is greater than length right if it's great uh now we are using tary operator here right so what we will do is string do slice zero to length and and plus dot dot dot otherwise we will just return string right should work uh and instead of overview we will just say trunk it and this is going to be overview and let's add 165 here and once I save it look at that guys we see dot dot dot right here right looks cool dot dot dot super awesome right uh but we still need to style it so this is going to be with full MD Max width of 70% and large is going to Max width of 50% for Exel breakpoint Max width is going to be 35% uh and text Gray of 200 okay let me tell you what's happening here so max width is how much width uh that element can use right so as we increase you can see the text is not like going over there which does not look great right and it's it's even harder to read but it it stays consistent and looks good right that's how it works guys so let's say for this whole thing if I make it 100% it will look really ugly so instead of let's say after Excel we make it 100% now now look at that how ugly it looks right it looks good for other screens but as soon as you hit Excel right if I refresh it looks it does not look that good right I mean uh because we are truncating it it it still looks fine but if I do 265 and look at this it's it's really hard to read right so I'll just command Z make it 35 and make 165 again right okay awesome let's put this back here so uh we have finished working I don't know sometimes it's just coming down oh okay I think it sometimes it stays up huh yeah I think it's running down right so uh let's okay let's make it 10% and let's make this guy uh 25% yeah I think looks good better now it looks better now right otherwise it was just coming down right so that's how it works guys right uh you need to play around with uh all the CSS and once you keep working on projects and uh building more clones uh you will get used to it right you will learn more okay next we are going to work on all this rows right once again we are not able to see it because we have changed our API key okay cool now let's start working on the row component for that we will create another component which is going to be movie row movie row. jsx ra fce save it and go to home and here we will just say movie row save it and uh paste paste paste now uh okay save it looks good right here we can see movie row okay now uh first of all let's just close all this uh tabs right we don't need all of them and we forgot to do one thing uh let's go back to hero. jsx what what I want you to do is uh because we will be using uh this link often right so I'll just copy this right uh cut it and we will go to movie services and here go down what I want you to do is create a new function so create image uh URL and file name and this is going to be size okay and just just say return and paste this here all right I want you to paste it inside back text now instead of backdrop path this is just going to be file name and original change it to size right okay guys this is super cool now this is totally reusable and we will be able to use this when we create row component right guys that's how uh like it's it's pretty modular right and we can paste it here right and just say create image URL hit enter and uh it automatically imported here but if it did not uh import for you just make sure you have this line on top right and so here uh we need two uh parameters so first is going to be backdrop path right and another one was size for that this one is going to be original and save it and now if I I refresh it it works completely fine guys right smash that like button for this create image URL because it is super Sleek right now uh right like the good thing about this we are going to use this uh create image URL in all the other components uh inside our uh project right now in future let's say uh this tmdb site comes up and changes this URL you need to come back to your project and just need to change once and it will work for every other places where you have used this function right and uh same thing goes for base URL right so that is a really good approach guys cool so uh close this we are done with movie services and we also don't need index.js uh index.css and we are also done with hero. jsx so open app.js um okay go to home uh so that's command click and Movie Roll right now we will start working on our movie R first of all here we will get two things first is going to be title and URL right now URL is going to be the URL uh from where uh it is going to be a tmdb URL uh and that URL will specify which movies to fetch right and uh save it cool uh let's add some uh basic you know what yeah we should do it so first it's going to be empty fragment and H2 and this is going to be our title right title and save it now we don't see it because we don't have it so go back to home and we need to add bunch of title right so we will have let me see what we have here okay so first title is going to be title UPC coming okay it should should be a string guys up coming and URL we will add it later you know what we can add the URL right now so it's going to be end points make sure it gets imported on top and this is going to be upcoming and once again title oops title is going to be uh trending and URL is going to be endpoints do trending and once again here uh you want title oh my God what's wrong here right only if I can type top rated right top rated and you know what we can uhuh just say top rated and don't worry about capitalizing guys we will just add uh capitalizing using our CSS right a very Sleek way of doing it title and this is going to be comedy and URL is going to be endpoints do comedy and this one is going to be title oh my God it's so bad popular and this one is going to be endpoints do popular okay cool right and we see our title right here guys so we need to style it right that's uh that we know so go back to our uh movie R right here and we will just say class this is going to be F and sense bold and MD text Excel and we want padding of four and we also want capitalize capitalize save it wow guys look at that looks good right super cool super cool guys and you know what uh we we should also fetch movies right so for movies we need State uh and that is going to be movies set movies and once again use state and this is going to be an empty array for now and we also need use effect so use effect and here we will have this and we also want uh it to change if the URL changes right so uh movie okay yep so we wanted to change when URL changes so what we'll do is exos once again make sure it's imported on top get URL do then now this will have some response right and you know what uh if you want I can show it to you but you know what instead we can just set movies rest. data response. dat. results right save it and uh we can log it here maybe just say conso log. movies and if I open this up wow guys look at that we are getting all this uh movies right right and popular trending and all sort of movies super cool guys super super awesome okay next thing we will do is uh let's just uh add a posture and all that stuff right so that we can see the pictures so after H2 what I want you do do is add a div now this div will have class of relative Flex items Center and uh we also want group here you know what I I'll show you group later so after div inside this div we will have another div now this div is going to be width full height full and overflow X scroll and wh space no wrap and scroll smooth and scroll bar height scroll bar height okay uh for that we need to go to tail WI config and in inside this plugin just say require and this is going to be Tailwind scroll bar height save it and now if you go back you can see scroll bar height save it right here okay and this div will also have ID of uh we want to use this brackets and I'll I'll tell you why right I'll tell you why later uh when we work on implementing the slider now inside this what we will do is movies. map now this is going to be a movie and open this up and you know what for now we can just say uh for now we can just say H1 and just say movie. tile and save it look at that guys super awesome right uh now let's work on the movie part right uh eventually now uh instead of working inside this map right what we can do is we can create a new component Now call it movie item right because this is going to be one item ra fce e save it and this will uh take movie right uh we will pass in a movie here and for now let's just remove this right remove this and uh say ptag and here we can say movie. tile right save it go back here and instead of H1 just say movie item save it now if you save it you don't see anything because we we need to pass in movie here right so first of all let's add the key here so movie. ID there is ID when we get a movie right uh I can show it to you so movie and let's just pass in the movie from right here okay this movie we are passing it here save it and now we see uh this again and uh this ID is passed with this movie you know uh I can show it to you so after movie. tile we can say you know what let's do add this and also add brackets and add a dollar sign and what we can do is do this and we can also say movie. ID awesome now if we say save it guys we see ID here right now this are always unique right that's how databases work and anytime you are using API I'm pretty much sure there is a unique identifier right that's how you know that's how you differentiate between two uh pretty similar objects right so uh we get movie ID and the reason you need to add it here is so if you remove this right if you remove this and open your console you will always get this error right each child in a list should have a unique key now this is because this is how react knows if if a state changes for a particular item in in a map right uh it will just update that item and it is identified using this uh key and it needs to be unique okay and now if I save it and refresh again we don't get the error okay this is for something else uh don't worry about that right and as you can if you open this up uh open this we actually get all this data okay all all this data we get it cool now close this uh now instead of showing names right which does not look great let's go and uh show our posters okay first uh remove this go back add class here and we will need a state here but we can add that later so relative width is going to be custom width so which is going to be 160 pixels for small it's going to be with of of 200 pixels and for medium it's going to be width of 240 pixels so 240 pixels and large is going to be width of 280 pixels uh guys I know this is a little messed up to type but uh just we need to do right in line uh block rounded large overflow hidden and cursor pointer and M2 and guys uh all this stuff like it's not really in my head I I do have my notes with me right now right and like getting styling right first time it's really difficult for anyone so you don't think that uh like I'm not a pro or something I have I made this project like three times before I'm showing it to you so I mean I'm just seeing it from my notes and typing it out so but if you are working on your own project and like don't feel that somebody else is able to do it uh like quickly like anyone on YouTube right if you see any project which are like so big which are bigger than 1 hour or 30 minutes like I'm pretty sure there are notes right there are notes uh okay and there is no point remembering all this right so I'm uh seeing it from my notes just letting you know and this is going to be all tag you know what we can use object restructuring right here so we can say a con uh title and movie now this is not in my notes but still we are making it so that it's just better right now okay we have title here so let's add Source here now this is where we will use our create image URL create image URL once again which is going to be move movie now this is going to be backdrop uh path and uh let's add and this was supposed to be size right if you remember so backdrop path and we need to do it here so backdrop pad save it and now we see images guys super super awesome okay uh and we also want poster path let me tell you why save it now if you scroll down let's bump it up okay what happened uh let's increase the size if you scroll down we don't get uh backdrop path for this right this movie does not have backdrop PAAD this one does not have it too and like uh I have a like I'm scrolling on my uh mouse pad here but for you uh if you're using a computer you won't be able to scroll like this but don't worry guys we are going to add buttons okay but I I'm just trying to show you guys this are empty we don't want them to empty empty we don't want them to be empty so what we what we'll do is if there is no backdrop path what we want to do is we want to use poster path right and if I refresh now uh and increase the size we can see now this are posters right uh we just need to fix the styling so what we'll do is uh add some CSS to our image tag so with a full height is going to be 40 right I think height did we add it above okay no and this is going to be block object cover and object top save it go back and look at that guys right we see all this as well which is super Sleek right awesome so that is done now we need to add backdrop and add title to it okay and let's just put it here so after the image tag what we have here is this is going to be our backdrop now backdrop are okay we don't want it to be self closing because we are going to add title to it so absolute top zero left zero with of full and height of 40 right uh it should match this height so if you're changing this height make sure you change this height okay uh BG black and this is going to be 80 and opacity is going to be zero on H we want opacity to go to 100 save it and inside this we want want a ptag this is going to be movie do title uh and once I save it probably if we look at that guys we see movie title right but we just want it to be in uh in the center so first uh let's add classes here so wh space uh normal text uh extra small so text extra small and for medium it's going to be text small Flex justify center items Center and height of full and font and sense bold okay save it go back and now if we have uh we see title and it's in center and it looks really cool right now we need to work on the like icon right we still don't see the like icon so let's go ahead and add like icon first we need to import them so the way we do it is so import uh this from react icons now we need to add slash and here we are going to use fa let me show you how all this works so open this up Google and just search for react icons go here I'm showing you how to search for icons right so right now we are going to use heart so heart search for heart now look at this guys there are so so many icons here right so we are going to use fa heart which is right here right now if you click click it it will copy right so if I click here you can see copied fa heart so go back here I'm sorry so you can just say import pasted here from it will always be react icons but after that add slash and you need to add the first two letters so in this case it's going to be fa okay that's how you import it we also need another icon now this one is going to be fa regular heart right okay I'll close it but guys do do make sure right once you pick your icons make sure you close this website because I think it's really resource intensive and if you have a slow computer it will just make it more slow more slower okay uh just a quick tip and I'll also put it on S side so that we we see this uh I'm sorry I'll just have some water okay uh let's continue here here so we what we want here is after a P tag we want another P tag and inside this P tag now I was talk talking about the state right so here we can add state which is going to be like set like and this is going to be a use state which is going to be false by default it's going to be false but uh we will work on it later on uh but for now uh we will just say like question mark and here we will just say fa heart this is going to be normal heart and if it's not light then we want to use fa regular heart and save it and now we will be seeing heart okay we are not seeing it because of rounded corner and pedding so right now let's add uh okay we should not add classes here let's add styling here so what I'll do is I'll select this I'll select this one as well by pressing command D two times and first add size which is going to be 20 uh go here let's add classes so absolute uh top two left two uh text grade 300 save it and now we should be able to see the heart right we are still not able to click it but we are able to see it now we will come back to this and make it uh clickable right so that we can add it to our Firebase database guys but for now now uh let's just uh stop let's start working on the sign up and login page right because front end is looking pretty pretty good okay uh now let's uh close all this tabs and we will open sign up. jsx and also go to sign up page here as well uh first uh let's start by adding our HTML right uh so so I'll just cut this and this will be empty and here we will have div div will have class of with full H screen save it and inside this D we will have image and all is just going to be this now for this image what we will do is let me show you how to get that image just open uh private browsing so Netflix now I think I'm in India so it will uh show me like slash in probably can I remove it no I think it it is just picking it up so anyways doesn't matter uh just we need this image right here right so for that what we will do is uh you know what just just do inspect and here this is the link here so you can command click it and it will open this and just copy this link okay uh close all this we don't want that and come back here and just put it here and inside the source right now if I okay I need to start my server okay started and it should work now okay we see this image now need to add some classes here so this is going to be hidden on mobile devices and once we hit small uh breakpoint we want it to be a block absolute uh width full height full and object cover now it will look amazing guys right uh it looks a little blurry because the resolution is not that great but we will be adding a backdrop so don't worry about that now this is going to be a self-closing tag so there uh so basically what we need to do is Da and just do this okay I don't have a closing tag and here this will have class of BG black and this is going to be 70 uh fixed save it top zero left uh left zero with full a screen save it awesome look at the backdrop guys looks amazing right now after this we will have another div now this is the div where we will have our form and all that stuff right so first class fixed with full uh PX4 py 24 uh P 24 and Z of 20 save it and inside this uh we will have another div class okay we need something to see right so inside this D we will have another D inside this D we will have H1 this is going to be sign up save it and okay we see the sign up so now let's add all the CSS so that we can see what's happening right Max width of 450 pixels and uh height is going to be 600 pixels guys so height is going to be 600 pixels MX Auto BG uh BG black and this is going to be 80 and round it large save it and awesome right I think we need uh we we need to have some padding so I think uh padding comes next so inside this this one is going to be Max width of 320 pixels and uh MX Auto and py of 16 save it and we see it uh we see there's some padding right there okay for the H1 we will have class of text 3 XL font Sans bold and Sans bold and wow amazing guys amazing now we will have form right but uh we don't want action here right uh we will have onsubmit Handler but we will work on it later so inside the form let's add some classes to the form with full Flex uh Flex column and py of4 py of4 inside the form we will have input now this one is going to be of type email and it will have placeholder of email uh autocomplete of email save it and let's also add some classes uh which is going to be P3 my2 BG gray 700 and rounded save it looks amazing so just copy this and paste it here save it and this time this is going to be password and autoc complete so autocomplete is going to be current password now with this autocomplete like your browser is able to autocomplete right like uh it suggests you you know if you remember like when you try to log to your Gmail or something your browser tells you do you want to use this login uh it uses this to identify that this text field is email this uh other text field is uh password and all that stuff okay that's how it knows now this one is going to be a button and button is going to be sign up and this will have class of PG rate 600 uh py of three so padding y AIS 3 margin y of six and rounded uh and font bold so n sense Bol save it and sign up looks great guys looks great so uh next we need to add some stuff here now I think we can see that part if we go to sign up we we need to add this remember me need help and already subscribed to Netflix that part okay so after button uh there is going to be another do now this one we'll have class of flex justify between items Center text gray 600 inside this we will have P tag P tag inside that we will have input this is going to be checkbox and we don't want all this now type and class name is going to be margin right so that there is some padding now we will add some uh functionality to it like we are going to add state to it but uh after some time and this will be remember me save it and if we go back we see it right here awesome right now if you don't add margin right you can see what happens like they come pretty close we don't want that okay so after that P tag and this there what we want is another P tag no uh so P tag okay this P tag was supposed to be here and this is going to be need help question mark okay what happened okay and this is going to be another ptag which will have class of margin y4 inside this we will have a span span is already subcribed to Netflix and this is going to be a link okay so make sure you import it so once you hit enter make sure you have this link here otherwise uh it it won't work okay and this is going to be to login so login stop it sign in save it okay uh need to add some styling so this pan will have style of text Gray 600 save it okay looks amazing and what we can do is MR2 just like before and now if I click sign in it takes us to signin page and if we go back sign up works completely fine now now let's just uh make this functional and when you hit sign up we can like uh print out email and password right that is something we can uh do so for that we need to add state right okay how we do that is so uh we are going to use UST state so remember login set remember login use state true con now U the uh I'll tell you why right so set email uh user State and this is going to be empty string uh con password set password and once again this is going to be empty string uh and also make sure you have used it in your import statement okay let's make email functional so where very simple guys so value is going to be email and on change what we will do is we will do this and just say uh set email and this is going to be e e. target. value and what we can do is just copy this whole thing and paste it below for our password so this is going to be password and also so this is going to be S password okay I probably should work fine and also for remember me our checkbox so and we are not going to use it later on but what we can do is check if we just do check it will tell us that a component is changing an uncontrolled input right so I don't want this error for that we have already created the state so check is going to be remember login and on change we will do e uh set remember login and we will just uh change the polarity right save it now if we refresh we don't see the error and now uh it's already checked the reason is right when you refresh it's checked because this is said to true now if I make it false uh you see that the default is false so default is unchecked right so if we go back to true it's checked cool uh now let's try to print our email and password right so cons handle form submit and this is going to be an arrow function CLG uh so what we can just do is email and CLG password save it and form will have onsubmit Handler so on submit this is going to be handle form submit but and so let's say blah 1 2 3 and if I hit sign up nothing works right okay uh it is supposed to be email so gmail.com because it knows uh the type is email now if I hit sign up okay there is a problem uh we do see this output I don't know what that is but uh the page is refreshed we don't want it to refresh so what we will do is we get this so e. prevent default uh this will stop it from refreshing so blah gmail.com and 1 123 sign up cool look at that we are able to print it out awesome now now uh our login is going to be pretty similar right so what uh we can do is literally copy all this right literally copy everything inside this so let me bump it up and on this side we can open login here save it so first copy this because we need that to save it and copy everything from here till here copy uh cut this paste it here save it and let me just bring it back so we don't want here we are going to work here inside login now if I save it and go to login we see same thing but we need to change some stuff okay so this is going to be login instead of sign up so log right now we can see the difference right so sign up is sign up login is login but uh still we need to change this uh so change this to let's say new to Netflix and this will become sign up save it and this is going to be login and everything should work just fine right probably yep and we can just test it out so blah gmail.com and blah one two three and if I hit login okay everything works completely fine guys so now we are on the exciting part of Firebase okay so first we will start off by implementing authentication so we will make sign up and guys we are going to use context API right so uh let me show you how it's done first uh let's start up fire just go to Google very simple Firebase console go here and just a second let me open up my notes so that we can see what's going on uh click here very simple guys and just say get started or actually we should have clicked uh anyways so we will click uh add project here and this is going to be reati Netflix YT because and make sure okay just hit continue we don't want Google analytics create project bam guys super simple okay and once it's done it should take some time uh we need to do one thing right uh before we do that what we can do is uh go back to Firebase uh sorry go back to vs code and inside your Source folder uh I want to okay so inside your Source folder create a new file which which is going to be Firebase actually you know what we can create inside uh services so this is going to be fire base.js okay and we are going to use this file guys so now we are inside the project okay here once you are here once you see uh this part right uh get started but click on web right because we are on web and just name it uh it will take some time to to be enabled so re net flixy YT YT I mean I think it doesn't matter right uh and uh we will be doing Firebase hosting but we are going to use CLI for that but uh so make sure it's unchecked Register App and guys we have already installed Firebase in our project so if I go to packet. Json we can see Firebase here right so everything is done copy this part once again guys this is supposed to be private information once I'm done with the project I will be deleting uh my Firebase project and of course my tmdb API API keys so make sure you get your own okay do just follow me right it's really simple guys okay we are here now once again this is not safe right so we will move everything to uhv files so we will go here you know what I don't like do EnV there uh I want EnV to be in the first screen right what we will do is to make life easier I'll just copy all the strings right at least uh that will avoid me from typing so I'll bring it here uh click all this because we don't want it okay now this API key will come from here so copy it paste it once again equal to uh copy this whole thing and copy okay cut it so that we know what we have already used so and guys everything is in order so just do step by step and this is going to be react Netflix bucket I don't know yeah we are going to use storage so make sure we have that as well and we need this app ID guys once again do not use this credentials right uh okay I'll just save it and we need to shift tab this so that we are all aligned okay my environment variables are saved up now let me show you a cool trick right so I'll save Firebase as well now go to Firebase let me show you something cool what we can do is we can use object destructuring so we don't need to type import. mat. EnV every time and come here uh go back to this EnV thing copy this go back here paste it okay what we will do is we will select this equal to press command D and if you're on Windows control d uh hit backspace it will delete uh your equal to and if you click uh control K right it will delete everything and just add comma here super fast right and if you don't want to hit uh command K you can just like select all like shift uh command a or control a and just remove it and comma okay uh pretty straightforward and just need to add all that stuff here so that it works so API key just start typing you will get it so D Au [Music] domain project ID store bucket and messaging sender ID app ID okay save awesome so we are done here but we are going to use authentication so go back here continue to console so first go to build authentication and of course we are going to use authentication so get started and uh email and password enable this save it bam so we have enabled authentication right so if you go here uh there are no users and we have just enabled okay uh another thing we need to do is fire fir store database and once again we are going to click get started only if this loads create database right and make sure you select region closer to you right if you're in United States select something in United States if you are in uh whatever right if you're in Europe you can select London Frankfurt urri or anything you like now I'm in India but sometimes this Mumbai Mumbai servers are slow so I'll select Singapore Singapore is pretty close so uh there should be no problem now make sure to select start in test mode right like of make sure you do this otherwise it won't work right uh you know what just in case right let's say you end up selecting this let me show you how you can fix it okay uh okay guys smash that like button for Firebase right Firebase is so cool you are going to love it right so I mean uh database uh provisioning takes some time so let's just stick here for a while okay uh you know what go back to vs code and until then we can import some stuff so import get Au now this is going to be for our Firebase so Firebase and this is going to be Au and this is not right I know get Au okay so import that's why I like to add uh this packages first so that we don't make like a mistake right and then if you do uh vs code knows what to suggest right and then you will do export cons o and this is going to be get o and just pass in this app now this app comes from here okay and you don't need to export app so make sure you just export this to and DB is going to be get fir Store app and done so we are done with this part like uh Firebase part we won't be needing this file so I'll just close it uh even. EnV file so close it if we go back now as I said if you selected production before your rules should look something like this now this won't work right so if you ended up selecting production only if you selected produ production right if you selected test mode then you don't need to worry about it you will be fine for 30 days okay but here what I'll do is I'll just set it to true and publish okay if you selected production change it to true and hit publish you will be fine okay so cool uh let's put this back here and let's start by creating our context right so for context what I'll do is uh we can I think we should create new folder but we can also put it inside you know what let's just create a new folder uh context and this file is going to be Au context. jsx okay make sure it's jsx if it's not jsx uh White will uh White wheat will yell at you for some reason right I don't remember but make sure it's jsx because when I was working on the project I ended up using JS and uh it was having some issues so first let's start by having o context and create context once again hit enter it should be importing from react okay create context and this is going to be export function uh Au context provider this will have children and open this now inside this what we will do is we are going to return so return uh this is going to be Au context. provider close it and inside this just passing children okay and this will have bunch of values so don't worry about it right now just keep it like this okay and Export function user Au and return use context and Au context okay now this Au context comes from here guys okay now inside this we are going to have a bunch of functions okay let's just set everything up we are going to have a state so for user so user and use State now this is going to be empty object okay let's create all the functions so sign up and this will have argument of email and password and pretty straightforward guys here you will just say create with create user okay it is not Auto suggesting me so now we need to import all this stuff so uh let's import from filebase Au and we need create user uh with email and password we want sign in user okay sign in email sign in with email and password sign out and do we need some something else yeah I think we need uh on o State change okay we need four uh four of these so make sure you have it I think we also need Au and DB but probably we should be able to get it you know what let's just do it right uh if Auto Import doesn't work so Au and DB from uh dot dot okay uh where was our Firebase so inside Services Firebase okay nice so we have sign up so let's work on sign up right now so create user with email and password now this will take Au email and password okay save it that should be fine guys this is how simple Firebase is okay function uh login now log in this I mean you can name it whatever you like uh just don't name it sign sign in because I think it uh no yeah uh it's not about login but don't name uh sign out sign out because it clashes with this so just make sure you do that sign in with email and password Au and email and password now guys if you forget this Au uh it won't work okay this Au comes from Services right we created this file and this is the Au which we are using right I think that's how you app uh that's how Firebase notes knows that uh this is the app uh it is working with okay and it's your app so uh don't name this sign out otherwise it uh it won't work so you can name it log out and just do this written sign out and we just need to pass in AU here okay now in this value we need to uh send user sign sign up login log out and we also need to do one more thing right so we are going to use use effect now what this will do is whenever State changes right whenever user signs in or whatever happens this will uh update your app accordingly right so unsubscribe unsubscribe and you can name it anything you like uh because it's just a cons so Au so on state change Au current user set user and this is going to be current user okay pretty simple guys and also return and this is going to be aror function unsubscribe save it awesome so we are done with au context part I mean we will be coming back to this for our fire store because as you can see we have still not used our DB but uh don't worry about that we can come back for uh we can come back for it later right now let's uh start using our o context right so first go to app.js and we are going to surround everything with a Au context provider now I think we can do this in our main.js right we can surround app we can do it here as well I think it's one and the same thing no let's keep it here right maybe in future if you want to do something which does not require Au context then you can add it outside okay but we will be needing it in Nar and every every other route so that's that now let's start by uh fixing sign up with our new with au context right so we will go to sign up and here here uh what we need to do is first we need to import two things which is going to be user oops uh you know what let's do this uh user o right once again make sure you get this import link okay we are importing from Au context now this is what we are trying to get from okay so make sure you see this import link and we messed up somewhere so uh const user o user Au and make sure you add this parenthesis if you don't add this parenthesis once again it won't work so user sign up uh not this one so sign up right I think you don't get auto complete for Au context yeah anyways we also need a navigate navigate navigate is use navigate now this comes from react router Dom once again make sure it's imported Ed okay now remove all these console logs we don't want them and we will use try catch block so try and await sign up and here we will just say email and password and if it's successful we want navigate to homepage okay and uh catch error if there are any errors and we can just say error okay save it and this is yelling because a wait we need to add a in modifier okay okay fingers crossed guys let's go back let's go back here let's click sign up and see what happens okay uh we are here our authentication is completely empty as you can see go back I'll just say dog@ gmail.com and I think this is dog 1 2 3 4 and if I click sign up wow guys see we were redirected that means we are successfully logged in and if I refresh this page here wow we see dog@ gmail.com right so now let's uh change this to log out if a user is logged in right and uh also have a profile here and we can also work on protected route so first we will go to Navar so go to Navar and here uh what we need to do first is we need user from o so oh my God I cannot spell cons correct so log out and this is is going to be use user o once again you see the import link on the top cons navigate and this is going to be used navigate uh once again from react router Dom okay now we need to do two things uh first let's do uh it here after link so if do this user. email if user. email exists what I want you to do is copy this whole thing I want you to copy this whole thing paste it here and if it does not exist open another one and paste it here actually we should have used cut but remove this right and inside this uh first of all this is going to be log out uh I mean we don't need link because it's going to be just log out and we can just say log out right and remove this link what did I remove we want the button log out save it and we see log out guys because the user is logged in super cool and this is going to be profile and save it and this is going to be profile right save it awesome so right now what what's happening is if you click profile it will take you to profile right but we need need to make log out functional so how you do it uh so on click we need to say for button no this is sign up here inside log out onclick handle log out okay and let's create this function const handle log out and async and just say try and this is going to be log out and once user logs out we want to navigate to Once Again homepage uh and I think we can do this in one line CLG error probably oh okay I think we need parenthesis it's mandatory H it here and uh save it I think we should be able to log out now if we click log out guys we are logged out now what we need to do is uh let's you know what let's let's work on the sign in first so that that uh we can sign in we don't need to delete the user again so if we go back here nothing happens right now right probably if I hit login I think we just see we are just seeing the print out uh dog gmail.com and we are just seeing dog 1 2 3 4 okay now let's go to sign in so log in pretty I think for uh by now you may have figured it out right it's it's pretty straightforward guys Firebase is really easy to use so first uh we need user and log in from user Au right uh this is going to be pretty similar to signup and navigate is going to be use navigate and make sure it's imported on the top here remove this and it's going to be a tri block await uh login guys uh one of the reason this this looks pretty simple is because we have we are using context API reacts context API guys super cool and we also need catch block and make sure we are just logging it out and save it this is yelling because we need to add async if I refresh there are no errors and now guys if are we able to log in okay dog gmail.com login bam guys look at that we get profile right awesome super cool and I think let's remove all this uh so if we go to I think this is movie row and we don't let's remove this CLG because we are getting bunch of this print outs we don't want that and now we can go to profile right now let's work on the protected route guys protected route for that we need to create a new component which is going to be protected route protected uh route. jsx pretty simple ra a fce e save it uh first and we also need children here so children guys we don't need to pass children so children is basically anything inside an element right when we will use protected route right like this anything inside it is going to be the children right I'll I'll show it to you and this is going to be user this is going to be user Au right imported make sure it's imported if user does not exist what we want to do is return navigate of course it should be imported from react router Dom okay uh this is a self closing tag make sure uh it's self closing and this is really straightforward we will just return children okay pretty simple guys that's it now in order to use it go to app.js now we need to surround surround profile right I'll just uh copy it and uh what was that protected Pro oh oh my God I don't know save it again go go to protected route save it again and now we get it protected route profile now guys this this thing so if I save it uh this thing anything inside protected rout right maybe if we have div or something it will uh it it is called children right so uh in current scenario this children is going to be our profile uh this profile element now if I save it uh what's wrong why okay profile we don't have any anything here but you do see profile here right now what H what happens if I log out now if I go to profile look at that guys it does not work smash that like button for protected route guys super awesome super super amazing now let's log in using dog@ gmail.com of course we we have our user here okay so we are done with protected route we are done with uh all the authentication part we are able to log in we are able to log out and we are also able to sign up guys now we need to work on this light part right we need to set a Firebase so first step uh for Firebase what we need to do is go to alt context right alt context uh the reason we are doing it here is because every time user signs up we need to do two things and for that we need to import from fire store so I'm going to say import from uh Firebase fir store and we are going to import Doc and set doc okay make sure you get this and when the user signs up when the user signs up what I want you to do is set doc inside this we will have a doc right sorry dog and this Doc is going to be DB once again this DB comes from our uh this thing right the file which we created when we were setting up Firebase okay so DB and this is going to be users I mean you can name it whatever you want uh but uh users uh sounds good to me and here we are going to uh say you know fave shows okay and this is going to be an array now now the part is let's say a log out actually we need to delete the user we we also need uh fire store so let's open fir store so I'll delete the user delete account so we don't have uh any user right now and we don't have any data inside our fire store right okay guys and and did you see guys right because of this use effect right because of this uh use effect right as soon as we deleted the user uh Firebase notified our app that the user no no longer exist in its authentication right in its authentication database and we were logged out okay now let's try signing up right once again we are going to use I mean we can use something else uh let's come up with cat gmail.com and we can say Cat 1 two 3 4 and I'll sign up bam we are logged in guys and hopefully uh we have created the database right we have created a user uh document now if I refresh this bam guys look at that cat gmail.com and fav shows okay now let's make it functional okay first and the way we do it is for that we will go to movie item right close this let's close everything and movie item right movie item here now we have the state here we we need to create a new function so this is going to be uh fave show Mark fave show right and make this async and this is going to be this const user email so we need to get user email uh save it if user email basically if uh user exist user Doc is going to be Doc and uh okay I think we we should import all this we also need to import DB probably uh okay let's import from Firebase fire store and we need to import three things array Union Doc and update doc update doc okay guys and we also need DB right here so I think probably we can Auto Import DB so doc right Doc and inside this doc we are going to say DB okay Auto Import sometimes it works sometimes it doesn't work so we are going to get uh DB from I think uh services and it's going to be Firebase guys okay make sure you do this DB uh once again users user email now why we are doing this what we are trying to do is we are trying to get this particular document right just imagine there are lot of users right cat dog Mouse uh we are fetching this document so that we can update it right so that is what this says and we are going to manually like it right change the polarity await update doc here we will pass in user doc because that is what we are trying to update and and here this was what uh fa shows fave shows make sure it's similar to what you named it and array union now array Union is a feature from Firebase so of course you can look it up uh from fire stores documentation and anytime you want to read documentation inside Firebase you can just command click here it will take you to docs right here you can click on uh build and fire store this will bring in everything right everything you need to know and that's how I have I came up with all this stuff right I I read the docs and I planned for the app okay so I hope you get that so I'll go back here and let's try to make this work and movie what I'm doing here is I'm just getting this movie from uh the movie right the movie it's here it will save this movie right here okay pretty simple and if the user does not exist just alert log to save a movie okay we'll get an alert now the way to use this is p find the P tag and onclick save show uh Mark fave show and class name let's say cursor pointer right so that we know we are hovering over it uh now if we go back here guys it's uh okay now we see cursor pointer I mean it's I think it's already Point what happens if I click it does it work hopefully it works let's click it oh did not work something is wrong user is not defined yeah okay I think we forgot to get the user so this is going to be be user and hopefully this time Auto Import works oh my God why Auto Import is not working okay see uh it happens sometimes so we are going to say from Context o uh context and uh user o and hopefully this works now if I refresh go back and like it wow it just likeed but the did it come inside the database guys look at that right it looks super cool you know what we can see it side by side so if I bring this here and put this here we don't want this and if you're are here uh and let's fave another movie and did I click it bam guys look at that it is so quick right next uh let's fave a couple of more movies and then we can work on a profile part right that that is where we can show uh all the faved movies right if we go here I want to see all the faved movies right here okay so we will close this and go to profile. jsx right because we will be working here okay guys before we work on profile I just remembered that we forgot to add uh the those uh slider buttons so that uh people on desktop can uh slide this right for that what we need to do is let's close profile for now go to movie row right go to movie row. jsx and first uh let's add you know what we can add that later uh next thing we we need two icons first okay so I'll just say import and this is going to be from uh react icons do uh slash MD and this is going to be MD shev left MD shev R left MD uh shev right okay left and right pretty simple right and we will add this icon before slider right left is going to be before slider so MD shev left and uh after slider we will have uh MD share right okay pretty straightforward guys once you save it you will see the small icons uh so basically we just need to add some classes so if I select this I think we can add you know what just add classes to this one and then we can just uh copy and paste them to other another guy right and this one will have class of PG white around it full absolute left two uh for right it's going to be right to but we will change it right opacity is going to be 80 uh text Gray 700 and we want Z of 10 we want hidden by default it's hidden and group hover uh we want it to be block and cursor pointer now in order for group hover to work we want to add group here right inside this div the div containing both the icons make sure you add group here okay then it will work now if I save it uh once you hover you see the icon right uh but it's not functional right now uh let's make it functional uh let's copy this first copy and paste it here save it now instead of left make it right save it okay uh HD save and now we can see both the icons right uh super cool uh next let's work on the on click right for now we can just say you know what uh let's just create the slide and this is going to be offset const slider document. getet element by ID this is going to be slider and slider. scroll left is going to be slider do scroll left plus offset okay pretty simple we are going to use one function for both the buttons guys yes one function on click and this is going to be slide and this is going to be minus find it because we are going uh left and as you may have guessed for right it's going to be oops it's going to be 500 hopefully this works saved it refresh it and slide look at that guys looks so amazing right and uh what happens if I click here right do you see the problem because if you see here get element by ID every time we use this first of all all of this uh sliders have uh slider as ID so it's picking up the first one okay so we need to uh uniquely identify them the way we are going to do is once again we are going to use math. random so row ID we are going to give a random ID so math. floor uh math do random and multiply by th so what this will do is right like we will get uh random number between zero and uh what it's going to be yeah 999 probably yeah we will get random number between zero and uh 999 yep so that's that and we will just add it here uh so first we will add it here and another we will add it with the ID so plus row ID save it now if I refresh and hit the slider this one works wo look at that guys smash that like button for this row ID and amazing work around right this is super neat guys super neat I hope you like it right so we have fixed the slider now we have a slider a completely functional slider guys now the only thing we need to do now is add profile and then we need to host this project on Firebase hosting okay so uh close this and go to profile okay so let's start by importing some of the stuff right first we need some icons so first it's going to be react icons and this is going to be MD and this icons are actually yeah yeah we do need this icons so shave left and MD share right uh once again this is going for uh we are going to use it for the slider guys and another one is going to be react icons Ai and this is going to be AI outline close AI outline close okay another thing we need is we want user o user o uh wow uh uh autocomplete is working right now so import uh DB wow okay cool uh good for me and we also want create image uh create image okay create image a URL uh from services and this is going to be movie Services okay and do we need something else yes we also need uh this thing so array remove uh doc on Snapshot and update doc cool so this are all the Imports that we will be using for our profile so first uh let's we need state so first let's uh fetch the movies right so and we can store it to our state and use State hook and this and we also need use State we also need use effect hook and I think Auto Import is working for all the uh reacy stuff and here we this is very important part guys so this is going to be user. email now here we will just say user and user Au okay uh that's where we get the user from and inside this we are going to check if user is there uh we want to do this on snapshot on Snapshot uh this is going to be a doc so doc uh DB and once again it's going to be users and make sure this is a string so user. email uh so we are using string uh string Builder right this is how uh make sure it's like this and after this there is a comma Doc and open this it's going to be an arrow function if doc. data if data exist what you want to do is set movies okay what uh I think we spelled it wrong so set movies once again I use command D to rename both of them so doc. data and this is going to be saved okay it was fave uh let's go to our database and we have we call it fave shows right it needs to be similar guys so fave shows okay awesome so I think this should work fine now what happens if I print it out right do we get all the movies so go back here and Bam guys we have five movies which are favorite and we get it right we are getting it awesome so what we can do is uh start working on the the part I think it comes so first of all uh let's do this uh yeah let's let's work here right remove this console log we don't want it and uh another other thing is uh also if if user does not exist right if there is no user return actually it does not make sense because if there is no user uh no you cannot access this page but anyways for now let's just do it uh fetching shows okay and that should be it uh let's work on this one so this is going to be first of all empty fragment inside this we are going to have a div inside that div we will have another div and this they will have image tag now Source once again this is going to be this now Source we will get it from uh where is that picture uh sign up so we will use this so just copy this again copy go back here and put it as Source paste it and we can see it right uh do need to add some classes so classes is going to be block with full height is going to be 500 pixels guys 500 pixels and uh object cover okay save it and it looks pretty neat right after this image tag we are going to add uh now this is going to be self closing so this way right make sure it's self closing tag and BG black and this is going to be 60 B basically we are adding uh the backdrop so top zero left zero with full height is once again going to be five 500 pixels guys save it and we can see the backdrop another da inside this div we will have H1 and we can say my shows my shows right and this da is going to be absolute top uh 20% right uh padding of four and MD padding of eight I think uh okay nice and H1 is going to be T3 XL for MDT 5 XL and font in sense bold and mf2 save it looks great guys awesome right and after this H1 we will have ptag which is going to be user. email and save it we can see the user font inance light andt gray 400 tlg text large awesome uh we have this backdrop we have the image and we also have this email guys super good right now after this we need to work on the movie row right we need to work on movie row so this is going to be movie row here actually what we are going to do is we are we are going to just grab everything from here right so what I want you to do is uh actually grab everything right everything so everything inside this bring it here right uh and don't worry about it we will fix it okay uh so first of all you know what let's start fixing it first of all we don't need row ID because there is no row ID uh and we need slide function right so we will go back uh copy the slide function and uh bring it here okay so make sure it's above if no user and once again we don't need row ID and now if I save it does it work okay uh I think it's yelling okay it's yelling for this title and let's just change it to fave shows okay oh I think it did work uh oh movie item is not Define yeah yeah we need so go to movie item right let's go to okay my bad uh go to movie item and once again copy everything from here right I want you to copy everything this whole div copy it go back here and instead of movie item I want you to paste so first of all add some spaces here okay and uh right if you want you can put a comment there but we are going to fix it first of all we don't need this whole thing so we don't need to get the state I mean we can keep the ptag because you know just remove the P tag we will add it later uh and I think this should work and this will need a key which is going to be movie.id save it ah man backdrop path is not defined okay we are uh you know what what we can do is let's use D structuring here this is going to be genius idea title backdrop path and poster path I think that should work we also move our Title Here I think all this works guys look at that it it worked awesome we have all our fave shows guys awesome and of course with the backdrop right and we also have the slider right if you have more uh fave uh it will work right you know what we can go back and add some more faves uh let's add this let's add this let's add this this this this and this okay now if we go to profile guys look at that slider works these are all your favorite movies right now we need to add the cross icon so that uh we can uh close it right we can uh we can remove it we can remove it uh so I'll put this back here go back here where you see whes space normal right and below that P tag find another P tag tag I'll create another P tag and this is going to be AI outline close self closing and size is going to be 30 class name is going to be absolute top two and right two save it and now we will see cross on uh every show okay now we need to make this work so on click what I want you to do is uh handle unlike show right uh yeah whatever right you can name it whatever you like so we need to create this function now okay and this is going to be the last thing we do guys after this we are going to deploy this project uh on Firebase uh hosting okay handle handle uh unlike show and this is going to be async and just say movie here because that's what we need and uh what we'll do is const user doc just like before this is going to be DB users uh once again we are trying to get the user dock right so that we can delete it and pretty straightforward guys await update doc uh this is going to be user Doc and saved shows uh no it was fave shows fave shows and array remove and this is going to be the movie super simple guys hopefully this works right hopefully this works now uh let me bump it up and see does it work ooh something is wrong uh it says movie is not defined okay okay where I mean we are getting it from here okay okay let me see oh man I get it I get it it's because of this uh I think we cannot use this we cannot use object destructuring here uh anyways guys uh just remove all this just say movie here and so we need to add movie in front of all this uh our variables right and just add it right like it it's not a big deal save it hopefully it works yeah I think I think we are good now awesome guys look at that look at that guys okay this is our uh fire store and look at that guys once I delete it you can see the changes happening right if we delete enough there will be not much left and guys look at that this is going to be empty awesome awesome and now we can go back to profile uh we can go back to homepage and add new faves right cool super cool guys super cool okay guys smash that like button for Firebase and all this functionality right guys smash that like button okay cool and remove it awesome awesome now next thing what we will do is we are going to deploy this on Firebase hosting okay okay guys now it's time to deploy so I'll open up my terminal uh just to clear and make sure I'm inside current directory right our project directory uh so first what you need to do is you you guys need to get Firebase tools now I already have it uh just do npmi hyphen G Firebase hyphen tools okay this will install Firebase tools like globally once you are done you will be able to use it in any other application right not just this application so just do it it should take a couple of minutes and you will be good to go after that after you run this command next command that you need to run is Firebase login now I I must be already logged in because I have used Firebase hosting before now if you have used it before uh you will be logged in as well but if you are not it will ask you to click on a link it will open up a browser select your Firebase account and you will be good to go just make sure you select Firebase account from which you created this project okay make sure you do that next thing of course we are in the project directory we will do uh Firebase in it and it's going to open up this console what you will do is uh select hosting configure files for Firebase hosting and optionally set up GitHub actions deploys right now you uh the way you select is uh hit space bar then hit enter right just for this scenario if you hit enter directly it won't work okay use an existing project enter and select your project uh which you created in Firebase react Netflix e YT for me and uh now here this is very important part guys this is going to be D because we have used wheat uh V's uh build output is going to be a disc folder right that's why hit dis configure as a single page app hit Y set up automatic builds and deploy with GitHub uh say no and now for me this already exists because I tested it out uh for you I think you will not get this step but for now I'll just even if you get it just hit Y okay override now Firebase initialization is complete what I'll do is I'll clear this very simple step guys npm run build it will build your project right it should take two uh two three uh like 15 seconds and now we are good to go and next last last part is Firebase deploy and we will be good to go guys uh okay uh it's working it's working awesome guys see this is our link to our app which is working amazing right now let me walk you through uh the whole thing right once again this is live this is not my previous app because my previous app is not working because of API change right what we can do is of course scroll Works everything works what happens if I click like log to save a movie awesome now here inside uh we have Firebase open on the right let's try to create a new user so sign up what I'll say is okay we can use dog at let's say this dog works at apple.com right and here we can say password is going to be 1 2 3 4 and what happens if I sign up guys bam look at that we are signed up if you click profile you you can see your email ID here and if I refresh my authentication page in Firebase we see new user and if we go to fir store we also see a new uh user okay let's keep this here on the side go back here and like some shows right you can see on the right that Firebase is adding it to its database right we can add couple of shows awesome guys now if we go to profile and Bam look at that guys works completely fine super amazing right you can log out we can also log back in right we are going to use dog at gmail.com login and Bam guys bam super good if you refresh it works completely fine uh you can delete the shows right you can delete the shows and if you log out and try to access profile you won't be able to do it super awesome guys super awesome now what if now you may be wondering what if you want to make some changes right let's say uh I want to add another X to this file you will go back here and uh okay uh I don't know about this I think don't worry about this I don't need to save it so we will go to Hero right we'll go to hero and what I'll do is uh I'll just say Netflix where is Netflix so I think not here we need to go to NAB bar and na bar we will add another X right okay very simple guys uh so this is our deployed app which has 1 x and this is our uh Local app right so just to test it out we will just say npm run Dev and we can see that we get another X on Local Host but it is still not deployed right so how do you get it deployed on uh Firebase right uh on Firebase hosting I think it's pretty simple what you will do is once again run npm run build so it will build your project now this part is really important right so that it builds a new project for you and then after this is done which should take another another couple of seconds what you will say Firebase deploy again right and this should deploy your project again with your uh new changes right only if it works and it's taking some time uh it's trying to upload new files that's why and we are here now if I refresh the page we should get another X guys Netflix that's how you push changes to uh Firebase right once again I'll show it to you let's switch it back to normal Netflix right if you if uh npm uh run Dev so that we can test it on local if you go here we have 1 x what you will do is close this server npm uh run build hit enter it should take a couple of seconds guys smash that like button if you like this video guys it will uh promote this video to other developers who may be helped by building this project and getting their dream job just like you guys okay uh next thing will do Firebase deploy and we will fix it right now it's double X but once it's deployed it's going to be a single X because we made the changes guys okay okay nice guys we are done with the project okay so if you enjoyed this project guys hit that like button also uh feel free to comment in the comment section below and uh also follow me on Instagram or Twitter links will be in the descript description below guys I I personally prefer Instagram so uh whatever you like guys and I'll see you guys in the next one thank you

Channel: Yash Patel

Views: 15,683

Keywords:

Id: e8rV-9zm1Kw

Length: 147min 57sec (8877 seconds)

Published: Fri Nov 10 2023