🔥 Build NETFLIX With React JS - Tailwind CSS - FIREBASE - Front-End Web Developer Project

hey what's up guys in this video i'm going  to show you how to create a react.js project   styled with tailwind css something that you can  use on your very own portfolio to help you get a   job as a junior front-end web developer so this is  what we're building today we're building a netflix   clone okay but what's cool is we're gonna be using  firebase for our backend so we're gonna be able to   create a new user with an email and password we're  gonna be able to sign in with that user and we're   actually gonna be able to store user specific  data and how we're gonna do that is we're gonna   be using firestore which is a cloud storage for  firebase okay and whenever we create a new account   we're actually going to store this user into our  database that way we can store some specific data   so this is the front end of our application today  like i said netflix here got a nice nav bar at the   top any kind of a hero presentation banner image  here and down here we have a row component and   we're going to be using the movie database api  okay we're going to be using a lot of really   cool stuff in here like firebase um like i said  we're starting everything with tailwind we're   gonna be using axios to make our api calls we're  gonna be using context api you state uh use hook   a lot of really really cool things here in react  so notice how we hover over here we get a little   button here to save a uh save the movie so it says  please sign in to save a show so let's go ahead   and do that i'm gonna show you how it works let's  click on that sign up page and i'm just gonna say   and test bob is this guy's name at email.com his  password is password you see it's not very safe   so notice when we sign in we automatically get  redirected to the home page here and that's using   react router dom and then let's go ahead and  click on our account page so we can see we have   no movies saved here so let's go ahead and save a  couple movies we'll save see northman batman and   this spider-man movie if we cruise back on over  to account you can now see that these movies are   stored into our account so we can log out and log  back in the movies will still be there because our   in our database firestore database using firebase  so let's go ahead and delete these and i'm going   to show you how to build this from scratch  like i said using react.js and tailwind css   so if you want to see how i built this you  build it along with me feel free to use it   in your own portfolio so you can get a  job as a junior front-end web developer   so let's go ahead and build this thing from  scratch i'm just going to drop that thing   down here and all i am in here is um it's  just vs code which is a blank code editor   and i've already created a file that i'm in this  netflix react.js i'm just going to bring that over   so let's just go ahead and hit control back tick  button to open up our terminal we're going to   create our react application so i'm going to say  yarn see create and then react dash app and i'm   just going to hit the period there so it installs  it into our current directory that we're in   so we're going to be building this with  tailwind so and that's the first thing that   we're going to do so i'm going to go over  to tailwind css while this thing installs   and like i said we're gonna have some protected  routes you guys which means i'll show you real   quick we go to the account page notice we're not  signed in right now we go to the account page it   should just bounces right back to the home page  so protected routes if a user is not authenticated   be doing a lot of really really cool  things in here so in for tailwind there   tell ncss.com go ahead and click on get started  we're going to click on framework guides   and then going down here i'm  using the create racked app okay   first thing it wants us to do to create our  react application so we've already done that   next if you're using npm just copy that whole line  uh i'm using yarn so that's why i'm only going to   copy this part of it here i'm just gonna say yarn  um add paste that in and this is next command here   mpx there go ahead and copy that whole thing  there go ahead and hit that and this is going   to create a tailwind config file there and this is  very important because the next step is actually   copy this into the content array okay so that's  what we want right there and then we need to add   this into our index.css so let's go ahead and  just replace all that boiler code with our with   those styles there and that's all we need from  tailwind okay so next let's go ahead and install   some dependencies that we're going to be using  for this project so and right there i just hit   the command b button okay to to toggle our sidebar  here if you're wondering what i was doing there   so like i said let's install our dependencies  for yarn add and i'm going to install axios   we're using axios to make our api calls we'll be  using react router dom for our routing then we're   going to be using firebase i'll go install that  and see go ahead and get those installing there's   a couple more so and while those are installing  this app.css the app.test logo.svg the report   web bottles in the setup test these are in the  source folder i'm going to go ahead and just   delete those to kind of declutter a bit there and  we're only going to be working out of this source   folder right there so we should just have the  app.js index.css and index.js so let's go to our   package.json axios firebase required on perfect  so i forgot the other ones we're going to need um   yarn add we're going to need react icons for this  portfolio or for this package here and we're also   going to need uh we need tailwind scroll bar hide  okay so and what that's going to do basically um   so we have this row and we don't want to show  the scroll bars so a tailwind doesn't have a   class name directly to uh or natively to to  remove those so that's why we need that there   so we got those two more packages in there done  with package.json so in this uh config file or   sorry in the yeah in the config file what we  want to do to use that package is say require   then we're going to put in here tailwind scroll  bar hide that's it right there perfect that's   all we need to do for that there and what we do  need to do is uh add in i want to add some base   styling here and i'm just going to bring over a um  i'm going to bring over a font that i'm going to   be using you don't have to do this you can use  whatever font you like the the default font or   if you want to go to google and bring one in i'm  going to paste one in there like that then this is   about the only uh css i'm going to write but i'm  just going to say background color but background   color and i'm going to give it a color of black  all zeroes there and then font family like i said   we're going to be using lotto and then it's always  a good idea to give secondary fonts just in case   the browser does not support that so that's  all we need to do in our index dot css file   i'm going gonna close that there now let's  go ahead and start our server with yarn start   now if you've already started your server and then  you start you installed tailwind while your server   was already running then you're not gonna  see the tailwind styles go into effect so   make sure you restart your server if you if it  feels already started so we should just have a   blank screen here we have uh our errors here and  that's okay let's go and fix those so our index.js   let's go and delete that report web vitals we're  getting those errors because we deleted those uh   all those cluttered files so in our app.js we're  gonna delete that there and we're gonna leave   this as an empty frag there perfect that's  what we want and if we type in here h1 hello   we're not going to be able to see  this because we'll give us last name   text white we should be able to see some text in  there perfect that's what we want right there you   guys that's what we want perfect so let's go  ahead and um kind of start our layout of our   project here so inside of our source folder okay  let's create another folder called components and   this is where all of our components are gonna live  so let's create our nav bar component navbar.jsx   js or jsx it doesn't matter i use jsx so i can use  my html snippets to kind of save a little bit time   and then just a few uh plugins that  i'm going to be using in a vs code here   in this build i recommend you get these as  well so go over this plugins tab so if you're   using tailwind i highly highly recommend you use  this uh where is that tailwind css intellisense   what that's going to do is while we're typing our  class names for tailwind it's going to give us   suggestions and it helps it saves you so much  time when you're developing so definitely get   that tailwind css intellisense also we're  going to be using this prettier function   this prettier right here and what that's going  to do every time we save it's going to reformat   our code and just keep everything looking nice and  neat then the third thing we're going to be using   is the es7 react redux snippets and that way we  can generate functional and class-based components   just with like literally a few characters so  we're going to save a lot of time and this is   the react redux 7 shortcut right here r a f c e  is going to generate a functional component and   that's all we have to do to generate functional  components here so for our navbar let's go ahead   and import our navbar here so our app.js say nav  bar go ahead and hit enter there so auto imports   another little trick here you guys if it didn't  import you can just press uh if you're selected   at the end of the component you just hit ctrl  spacebar it's going to open up this little dialog   box and it'll it'll usually always prompt you  if you want to automatically import something so   just to save a little bit of time there  so inside our nav bar let's get started   so inside our nav bar we're gonna have an h1  in here and this is gonna say netflix just like   that perfect and then we're gonna have a div and  inside this div we're gonna have two buttons going   to have a sign in i'm going to copy this down i'm  just hit shift alt then the down arrow that lets   us copy things down or up that's what we're going  to say here so let's just give this a class name   so we can see what we're doing so i'm going to  say text white first of all boom there we go now   actually i'm going to leave that blank for now  because we're going to come back and install   everything individually so we let's do this h1  first so we can actually see what we're doing so   class name i'm going to say text red i'm going to  be the 600 and text this is going to be our size   i want it to be see 4xl font bold there we go and  cursor not auto but pointer there we go i'm gonna   string that down so you can see a little better  but that's what we want right there perfect and   for the buttons here i'm gonna press this alt  button so we can actually type on multiple   lines or actually i'm just going to style this  button here and i'll show you why so let's go   ahead and give this button some styles and i'm  going to say for this button we want it to say   fiji red 600 that's a background red of 600 the  numbers go from i believe 100 to 900 the higher   the number the darker it is so if we said 200 for  example this would be almost like a pink color   so like i said i'm going to leave this at 600  and then for padding p x i'm going to say uh c6   it's just padding then p y for padding on  the top bottom i'm going to say two and   the way tail one works for numbers four  is one rim okay so if we hover over this   if i hover over this you see that dialog box pop  up that is the tailwind css intellisense plug-in   that i was referring to so super powerful it  helps you a lot so as you can see four is one   ram uh if you did eight that would be two ram  but and two would be uh just point five rim   so that's what we're gonna do right there now you  can just say rounded to get some rounded corners   cursor pointer this is how fast tailwind  is you guys you can style up button so fast   just like that um without having a css file so  that's how we're going to do that there and then   for this button here we'll say class name and i  want this to be text y and i'm actually gonna say   margin or sorry padding right of four which is  one rim so but we want this display on the same   line so let's give this a class here we'll say  flex items center then we're going to say justify   justify between and then p4 so we want this  to stand out just like that that's perfect   that is what we want right there you guys  everything's looking good um we're add a few   more styles to this here so we want to give this  a z see 10. i'm just going to give this a z of   100 i'm putting this in brackets because z-100  does not exist in tailwind and whatever we're   going to put a value in tailwind we can replace it  with brackets and we can enter in our own value so   i'm just going to enter that in just like so and  that is all we need to do i do want to make this   positioned as absolute perfect  so let's have a look boom refresh oh what's going on oh i deleted  the wit full sorry about that   there we go width full that's what we need there  perfect so i'm going to re adjust it here i want   to make sure i'm in this video there for you  guys so there we go that is all we need to   do for our nav bar for now at least and what we  want to do next let's open our sidebar back open   and the way we're going to structure our our  application is we're going to have a home page   right and this is going to be considered the  home page we're going to have a sign up page   a sign in page and also a login page so four  pages and let's go ahead and create those here   so inside of our source folder right we're going  to create another folder called pages and for now   i'm going to create one page and i'm going to  call it home.jsx now i'm going to type rafce   so we can get our functional component here  and let's go ahead and uh import this here so   like i said we're going to be using react router  dom and so we can start using links and routes   let's go ahead and configure react router dom  so let's go into an index.js i'm just going to   select that and i'm going to replace this so  the way what we have to do with regular dom   we actually have to surround our entire  application with browser browser router zoom   just like that and go and import that now in some  in some builds you might see somebody just say   something like this router that's fine too but  if you do that you have to go up here where you   import and say browser router as router it  doesn't really make a difference uh people   just do it because they think it's a little  bit cleaner so that's what we're doing there   so let's go back into our app.js now we want  our nav bar to be displayed on all the pages   no matter if it's a home page sign in or login  page doesn't matter we want it everywhere so   i'm going to leave our nav bar at the top and  then i'm going to say routes okay and this is   all for react router dom so we have routes and  then in here we're gonna have individual route   and this is gonna be sorry not path but two or  path not two to the home page and then the element   we want to display i'm gonna put this in curly  brackets we just wanna display the home so i'm   close that out like so there we go so routes is  not defined or route so let's just go ahead and   like i said before control space bar just  like that lets us auto import it we'll do   this one as well perfect that's looking good  right there so what we're going to build now   is our actual uh main component right there  at the top so let's go ahead and get started   with that thing so inside our components  folder create a new sorry not a folder   inside the components folder we're going to  create a new component i'm going to call it main   dot jsx okay and r-a-f-c-e and we're going to  be doing a lot of things inside this component   here we're going to be using axios you stay  and use effect all those hooks inside here   but we'll auto import those here when they come so  let's go ahead i'm going to open up my um terminal   here or sorry our console there so that way all  our developer tools we like to have the console   open so we can use that to our advantage so inside  here let's do a few things so we're going to have   we're going to have some state so i'm going to  say const open this up it's equal to use state   it's gonna be an empty array because that's what  our that's what our our api call is gonna return   so in here let's say movies and set movies  okay and then let's make our api call   so before we make our api call now would be a  good time to get set up with our actual api key   so i'm going to open this up a bit and we're going  to go is the movie database here now i'm already   signed in if not go ahead and create account is  100 free you don't have to supply a credit card   or anything like that just create a free  account and once you're signed in here   just click on this button here go to profile  and settings sorry down here settings   and then over here on the left we're going  to look for the api just right there perfect   and then over here this is our api key now i'm  going to copy my api key don't use my my api key   it's not going to work once i'm done recording  this i'm going to i'm going to close the account   so make sure you get your own account and your  own api key so where are we going to put our   api key so what we're going to have is a file  to keep everything nice and neat a request file   they're going to have all of our endpoints so  inside our source folder we create another file   and this is just going to be called requests.js  okay and in here i'm going to say const key   equal to and this is going to be a string i'm just  going to paste it in there just like so and then   next i'm just going to copy this over because  i already have all the endpoints that i want   to use for this build and i'm going to just kind  of show you what we're doing so basically i put   everything as an object in here and then we're  going to export this so we can use it outside   of the um outside this file so export default  requests and these are the imports or imports   or sorry endpoints right here that we're going  to be using and this is our key and all we did   i put these in backticks that way we could use a  template literal otherwise you would just have to   paste your key in there like that but to keep  things a little bit more organized and secure   you just wrap everything in a template literal  just like that but make sure you have backticks so   you can do use that functionality so if you want  you just grab these these are popular top-rated   trending or upcoming if you want to cruise on over  here to the tmdb here um click on that developers   we're gonna see if you wanna  make if you wanna find other um   other endpoints you can just kind of cruise around  here and find them like try it out so this one's   for a specific id get similar recommended get  latest now playing there's all kinds of things   that you can do with this uh with this api so but  i have the one that i'm going to be using here   so what we're going to do is go back into our  main okay and we need to import this import   request from those from request there we go  perfect now let's go ahead and use axios to   make our api call and what we're going to do  we're going to wrap this axios in a use effect   that way we're only going to make a api call  whenever the component mounts whenever this uh   whenever the page loads so we're going to add in  a dependency dependency right here otherwise your   api will just making non-stop calls and it'll just  wear out your api you'll probably get banned so   make sure you add that dependency array there so  what we're going to say is axios dot get then our   url goes in here right and our url is from this  request so we're going to say requests dot and go   in here we can say dot popular or request popular  or uh top rated whatever you like i'm just going   to use this top one popular so that in here there  we are so request dot request popular let's return   a promise so dot then and this is going to take in  a response here okay the arrow function response   and we're going to set this to set movies so  our state there and we want to set this to   response dot data and let's just leave that  like so and i'm going to console.log movies   so we're making when our when our component  mounts we're going to make an api call   okay and it's going to grab the data and store  it inside set movies and then we're going to   console log it so we should be able to see it down  here so let's have a look oh we need to ah sorry   we need to add our main here so let's go to  home there we go and inside here we'll just say   main so let's go and import that there  we go leave that as a fragment there so   see we got some errors here requests not defined  not fine that's fine so let's go into our main   and so we have that we need to  and import the use state okay   get that imported there we go perfect  now okay just didn't spell that right wes what what is it i misspelled this line 11 requests and then requests there it is just add an extra s in there perfect okay that's  what it is you get hung up on these little things   there okay so back i'm going to go back to our  main so now we're locking the movies here okay   so this is what we're logging we're getting back  some data here so page results total pages now   i actually don't care about any of these except  for the results so for the results what i want to   do we can actually kind of um narrow this down  a little bit more i'm going to say dot results   and if this updates again now you can see we only  see this results right here so we have a list of   20 20 movies so what i only want to display one  movie at a time and we want this to constantly   reload every time we uh refresh the page so this  is how we're going to do that here we're going   to come over here we're going to use some plain  javascript on here it doesn't matter really where   you put it as long as it is above this return kind  of in here somewhere so what i'm going to say is   const movie okay plural right now i'm going to say  movies then open up there right here i'm going to   say dot we're going to use floor okay it's going  to be math dot random times math or sorry movies   dot length there we go and now instead of logging  movies means log movie so what this is doing   is taking the movies and just  picking a random one each time from start to finish there so as you can see this  is the idea of the movie 69 542 if we refresh this   it should change there we go now we're getting  a different id every time we refresh the page so   that is what we want right there you guys that's  perfect now that we know we're getting data back   and we know we're getting like correct that's what  we want we're getting a different movie every time   now what we want to do is actually go ahead  and display some stuff on the page here   i'm just going to shrink this  down so we can see a little better   i'm going to bring this open there we go and so  let's go ahead and get to coding down here on jsex   here so what i want to say this outer div let me  give this class name i'm going to say width full   h i have my little cheat notes over here i can't  remember all of this styling right off the top my   head so this just keep it going a little bit  faster here so then in here and we only want   the image to be 550 pixels high okay so that's  what we're saying there 550 pixels now this next   one we're going to class name we're going to say  width full h full perfect and then let's do our   image in here okay so image now instead of this  alt tag kind of cool trick here instead of just   putting the slash you know you always want to  have good alt tags not just because react will   start throwing errors but it's also really really  great for seo you never want to have any blank   alt tags so i'm going to replace replace those  quotes there with brackets and what we can say   is um let's say movie okay movie dot uh title  if you look down here we cannot re let's see   here i might have to use some optional chaining  there boom there we go so we're going to use   this optional training that way we can reach  uh nested objects in our in our array here   so this is what we're looking at the title down  here that's where that's coming from you can see   it display right there so perfect now let's grab  our image now if you see our image down here we're   looking for the backdrop path that is our file  path that's the image path but if you see that's   just kind of like um that's not an entire url  path so let's go on over to our developers here   for our api see what's going on the introduction  let's click on images and basically what this   is saying is that you have to have a base url and  then you just add this to the base url so this is   a full example here but this is actually the base  url right here this little part right here is a   sizing right there and then this is the actual  endpoint so i'm just going to select that okay   and i'm going to scroll this back down and now  that we have this i'm just going to put it in   here and so inside the curly brackets we need some  back ticks okay so go ahead and paste it we're   using the back ticks so i'm going to say original  for the sizing and this is actually a part of the   movie database okay and then let's put a slash  and then this is why we use our back text we use   our template literal again so the dollar sign and  then our curly brackets and then we can say movie   or do our optional chaining okay and then  we're just gonna say backdrop that group   backdrop underscore path now we should actually  see our image that's what we want there you guys   that's cool right there so uh let's add  some styling we haven't really added any   styling yet to it so let's go ahead and do that  for this image i'm gonna give it a class name let   me say width full h full and what that's saying  is the full is just it's the same as saying width   a hundred percent if you're say uh w dash screen  that would say with 100 viewport width so that's   what the width full is and with screen whenever  we get to that so that's what we want right there   but i'm going to add in object fit because right  now our aspect ratio gets all messed up so all we   have to do is just say object fit and that fixes  everything man i love telling you guys this is oh   something's not working here we need to add a  couple more things cover is actually what it   is sorry this is how easy tailwind is you guys  no matter what size it is it's going to stay   looking right there that there's going to be no  aspect ratio of distortion so perfect that's what   we want now we actually going to want to add an  overlay over the image okay that's kind of black   on the left and just kind of a gradient over  to the right and the way we're going to do that   we're going to add another another div in here  and let's put it right here and nothing's going   to go inside this div we're going to position  it absolute so we're just going to say absolute   we'll say width full same height of 550 pixels  and again we're using these brackets so we can   put in our own values it could be pixels rim  percentages uh degrees any type of custom input   we can put inside these brackets and tailwind and  so we're going to use a bg gradient and this is   how we add a gradient and tailwind so we'll say to  r for bg gradient to right and all we have to say   is uh from dash black now we should get a nice  overlay look at that that's starting to look clean   that's starting to look clean okay you guys  so let's add in this div right here with   that information next so we've still got  a little bit more to do on this component   so right here let's go down and for this div here  we're gonna have div and what we're going to have   is let's see we're going to have the buttons  and then a couple p tags so for our button i'm   just going to say button this one's going to say  play i'm going to copy that down this one's going   to say we'll say watch watch later so what i'm  going to do i'm going to click right there and   i'm going to press the alt button right and click  in another spot that way i can type in two spots   at the same time so save some time there class  name and for these uh buttons here say border   border or c border bg gray uh we'll say  300 text black border gray 300 py2 and px-5   all right perfect now um on this one here actually  on this watch later i don't want a background so   i'm just going to delete that and actually want  the text to be white on that button so i'm just   going to change this one to white and then  i'm just going to give a little bit margin   margin left 4 for one rim so it kind of slides  over a little bit now the this div in here um   i forgot a div here i'm going to create another  div okay and so the div that contains these   buttons i'm going to press the alt button  i can just slide that up and there okay   let's save it so it's nice and formatted so  the button the div right here i'm going to add   that we just created and this is going to contain  what i do this div right here is going to contain   everything and then the button the container  we just did the div we just did just held   those buttons so it's the outer div right there  i skipped over it so this div what we're going   to say we want it to display absolute width full  top and then we're going to use our brackets again   so we can this time use percentages top 20 percent  and then we'll say p 4 and then we're going to use   a media query md for medium.p 8. and tailwind  is a mobile first design approach meaning all   the styles that you enter in here are going to be  deployed applied on the smallest device going up   and if you want to make any changes all you  can say is md so that means anything above the   medium break point which you can see right there  768 pixels anything above 768 pixels apply this   style specifically so they're small medium  large and it goes up the chain like that so   that's what we want right there and in here we're  gonna have h1 and this h1 is going to be movie   use the question mark for optional chaining and  then we're gonna say title so boom there it is   that's what we want right there perfect all right  you guys i'm loving this smash that like button if   you feel like you're getting some value out of  this i know you're going to get some value when   we get to the firebase part so here we go let's do  text 3xl on all devices right then anything above   the medium break point we want that text to shoot  up to 5 xl so as you can see this is 3xl and once   we get up i believe it's 768 pixels so we see that  top right let's get up to 768 we should our tech   should shoot up and boom there it goes perfect  so that's what we want right there you guys   that's what we want and let's also say font  font bold like that that's nice there so   this div here that is just holding our buttons i'm  gonna give it a class name and i'm just gonna say   my four just to get a little bit of margin there  there we go now underneath the div that holds   the buttons i'm gonna say p tag we're going to say  released and then in here we're going to say movie   optional chaining release underscore date and  that's what we're grabbing right here perfect   that's what we want right there and let's  give this class name we'll say text gray um   400 then text sm and that's going to be for  small right there perfect next we want the   little overview okay that's the overview just  a little quick information about the movie   i'm gonna put that right below  it's gonna say movie dot overview   okay and let's go ahead and style this this class  name we'll say width full and then i'm going to   copy the rest of this over just to save some  time but i'm going to explain it to you guys   so what we're saying with a hundred percent then  like i said anything above medium is going to be   seven percent seventy percent for the max width  and then until we get to the large break point   if we hover we see that's 10 24 pixels then it's  going to be a max width of 50 then up to xl which   is 1280 we're gonna have a max width of 35 and  then just text gray 200 so as you can see we're   on a small break point so it spans 100 of the  screen as we get larger here it kind of goes down   less and less so that's what we want right there  now that's kind of a lot of text on the screen   especially some of these are real long some of  them are a lot shorter but um we're going to use   what's called truncating text and what that means  is kind of cut the the text short and just kind   of add a few dots kind of like when you see like  a read more click here to read more or something   like that so we don't want to show all this  information gets kind of jumbled up and that way   if you get over here you'll just cut it off after  a certain number of characters and we can add in   the the dots right there so the way we're going to  do that we're just using some javascript for that   so we're going to come over here and we don't  actually have we can just uh comment that out   so we don't need to see all this stuff in the  in the developer tools down there so what we're   going to say we're going to const this is going  to be an arrow function so we'll say truncate   truncate string okay this is going to take a few  values and take a string and also i'm going to   say num you can say you can call it whatever you  like then in here what we're going to say is if   string dot length is greater than the  number that we pass in then what we're   going to want to do is return string dot slice  and in here what we're going to say is zero   num and then we'll say replace it with  these dots else we just want to return   the string okay so let's go ahead and save that in  those prettier formats everything so it looks nice   and neat and to use this we're going to scroll  down and i'm just going to copy that i'm just   going to cut it right and i'm leaving the curly  bracket so we can use our javascript in there and   what we're going to say is we're going to run  this truncate string then you pass in our two   values our two values of the string and also the  number so i'm going to paste in our string then   our number for example if i put 20 you can notice  it only shows 20 characters but we're going to use   150 for the character length and i think that is  going to be good right there so there we have it   you guys we have finished that main component you  guys we've made it a good uh that was a good good   accomplishment that we've made so far everything  is looking great smash the like button if you   feel like you're getting value out of this so  let's go ahead and close that main dot js there   the nav bar we're done with that for now for the  home let's leave this home open because next we   can close this app.js close the app index.js  next what we're going to create is our rows so let's create our row component so command b  open up our our sidebar here in our components   i'm going to create another file row.jsx our afc  is going to generate our functional component   now the way we're going to be reusing the row  component right because right here upcoming   row popular row trending row top rated this  is one component but we're passing through   properties that's how we can reuse the component  so just under main here we're going to say row   go ahead and auto import that perfect just like  that now in this row let's go back here let's   pass through our properties first so we're gonna  have a title okay and this is gonna be a string   this can be whatever we want we can like make  this first one i'm gonna say upcoming so up   we'll say upcoming just like that and then  we're going to have something called fetch url   because we're going to do all the data fetching  inside each row component that we're going to   map through or each through each component they're  going to map through our our movies so what we're   going to say here we need to actually import  our request remember so import requests from   quests there we go and in here what we can say  is requests and let me show you we're saying   request because that's the name of the object  dot and then we can just grab any one of these   and we're gonna end up grabbing all of them so  for home request dot that and i'm just gonna paste   that in and i'm just gonna copy this down a few  times just like that so this next one we can say   popular okay just like that it should be one word  let's change that popular and then let's do uh trending and again we'll change these it needs  to be popular popular request popular quest   trending and then we're gonna get the top  rated and horror there so this one's gonna be top rated top rated and then this last  one is going to be the horror   there we go so let's look and see now uh  so we haven't actually added anything so   in our row component let's go ahead and  accept our properties here so title and fetch   fetch url perfect now inside of our we're  going to be doing a lot of stuff inside our   row component but it's going to be worth it it's  going to look awesome whenever we're done so   inside this row okay let's go ahead and i'm going  to leave this as an empty frag i'm going to add an   h2 to start and inside this h2 is going to be  our title just like that so let's go ahead and   give this some styling because it's over there  we just can't see it because it's black text so   what we're going to say for this h2 and  i'm going to say text x white so we can   start seeing our text and i'm going to  say font bold and then anything above um   medium let's say text xl let's say p four  for a padding of a four rim so you can see   these are all of our rows that we're going  to be using and let's go ahead and add some   more info in here so we can get to our images so  underneath the h2 we're going to have another div   and in here i'm going to give this class name  we're going to have a relative we're going to   flex items center just like that perfect go ahead  and save that save that just like so perfect now   inside here this next div here is going to be  our slider so i'm going to create another div   and i'm going to give this an id of slider but  i'm going to put this inside curly brackets so i'm   just going to put that in a string just like that  and i'm going to show you why i um i'm gonna show   you why i did that here in just a minute here okay  so and let's go ahead and give some styling here   um no let's go let's go in and i want to  show you let's go and move on about here so   what we're going to do we're actually going to  map through all of our all of our movies so we   actually need to make a request because right now  we don't have any data so we actually need to make   a request inside of our row component and we're  going to do that right here just above the return   so we're going to have uh you state right so  equal to the state and this is just going to be um   empty object and basically this is going to be the  same what we did on the main so i'm going to run   through this part so we're going to have movies  and set set movie okay and then we're gonna have   our use effect and inside our use effects we're  gonna have our axios right so use effect and that   use effect takes in an arrow function and again  let's add our dependency array but we're going   to actually add in fetch url that way whenever the  url url changes the component will fire off again   so in here axios go ahead and hit enter to make  sure that imports and what we're going to say   is dot get and then here we put our url but we're  bringing in our url with our uh we can go ahead   and close that with our state so right here  all we have to enter we're passing in fat url   and that's the url grabbing so all we have to say   is fetch u r l and that's actually gonna um be  the correct endpoint that we're looking for so   sorry dot then okay and we're gonna get a  response but this goes inside an arrow function   and person is set sorry set movies is what i want  to use set movies response dot and then remember   we want to narrow it down so we're going to  use results and again if we just console.log   this we'll say movies we should see this down  here you state got to import you state okay   go so now looks like okay boom  there we go okay there we go   that's what we want right there you guys perfect  so we should see we're uh console lugging on each   of our rows here so we got five of these down  here so that's what we want right there perfect   so let's go ahead and map through now we have  some data let's map through this stuff so we're   going to say open up our curly brackets we say  movies dot map okay and it's going to say map each   through one as an item and we're going to give  an id as well and sorry not curly brackets but   princesses right there we just want to render out  a div just like that perfect and what we can do   so inside this div here um let's have our images  i'm going to give this a class name so it kind   of doesn't throw everything off the page and  so what we're going to say for this here i'm   actually going to copy this over because it's  kind of a lot um this isn't necessarily a css   tutorial but i just want to show you i'll explain  what i'm doing here so when we map through the   data this is going to be what we're mapping  through the the this width right here is each   movie so what we're saying is on small devices 160  pixels anything above the small bring point 200   mediums will be 240 and then large 280. we want  this to be inline block cursor pointer whenever we   hover we want to see a cursor then we want to be  relative because we're going to add some overlays   on it relative then uh p 2 for the padding so i  hope that makes sense you guys now in here we're   going to have an image tag and for our image we're  going to be using that same backdrop path right so   let's use that same trip here for our alt tag so  here we can just say item dot title here we go   refresh everything looking good so all right and  here now let's grab that same endpoint on our main   so all i did was when you press ctrl p it  opens up this box and you can search for   uh components or or files rather up in here  so that's what i did to open that up i had   a few people asking me about the shortcuts i  use so i want to make sure i explain those to   you guys so i'm going to grab here is that  right there we can go ahead and close that   now for row let's open up some curly brackets and  remember to put our back ticks we use our template   literal okay and instead of original this time  i'm going to use what it was recommending this w   500 with 500 there so that's what i'm  going to use so we'll just say width 500   and then in here we use the the dollar sign  our brackets for our template literal right   and what we're gonna say is just item dot backdrop  underscore path like that perfect and uh let's go   ahead and add some optional chaining just so we  can avoid uh any errors if we get any errors there   so we'll do the same right there boom that way  we can avoid any problems before they occur   so that's looking good you can see we're  now mapping through all of our images   um we just have tons of images here and they're  not displayed how we want it but we are getting   back data and it looks great so let's go on and  what i want to do is add a little hover effect on   each of these hover and an overlay so we're gonna  put that see just below the image here and say div   here and then let's give this a class name this  is gonna be our overlay so absolute wanna say top   top zero left zero with full h full and then we're  gonna say we give it on hover unhover when i say   vg black and then we're gonna say 80 percent  and i'm just going to open this up so you can   see a little bit better and okay so background 80  opacity and otherwise we want opacity to be zero   and we'll say text white and i think that should  be good right there perfect perfect now we need   to do a few more things here so inside of  that right there um we also want to say here   is our p tag and then here is going to be our  item optional training here dot title okay   see if we can see anything nothing yet  here so let me make sure i get this right   that's e0 on hover black absolute perfect now i  also want to add some styling to this image let's   give that a place name i'm going to say width full  h auto then we want that to be displayed as block   perfect that's what we want right there and now  absolute top 0 left zero with full full no hover e   and also opacity zero and on hover  we gonna want the opacity to be to be 100 now that should look a little bit better  perfect so we can see our title in there as well   we still don't have anything uh displaying  properly so we have our title in there we have our   overlay so let's work on our p tag here give this  a class name and what we're going to say white   space normal here and then we're going to say text  extra small okay then anything above medium break   point want to say text small fi bold we're saying  flex justify center items center all right full   right full and then text center so  tech center height is going to be 100   which is hype full flex justify center item  center font bold and then some font sizing   in there so let's go ahead and save that so  everything gets nice and formatted perfect   that's what we want right there now let's add a  little heart okay so you can see his little heart   and whenever we click this we  want it to change back and forth so let's go ahead and add those and  i'm just going to copy these over   so what we're going to be using here  we're going to be using react icons so   what we're going to say import react icons here  so import curly brackets and these are the two   icons we're using fa heart fa regular heart and  you can import this from react icons and then you   can't just stop there you have to add this little  pretext so whenever you're importing an icon you   just add that text afterwards there otherwise  you'll get an error and it won't work properly   so what we're going to use is f a heart  here and let's add some more state const   and we'll say like whoa like  set like equal to use state   say false there we go and in here okay  this is gonna be another p tag in here   inside of our overlay okay and what we're  gonna say is just uh we're gonna be using uh   ternary operator here and with say if like is  true then what we're going to display is this icon   else we're going to say fa sorry the  other icon which is whoa but it's fa   reg part i believe perfect uh-huh so perfect you  see the hearts in there let's get them positioned   correctly so i'm just gonna click i'm gonna  drop that some click hold my alt button down so   i can type on multiple places here and what we're  going to say is i'm going to give it a class name   don't need to do any sizing here yet class name  absolute and we're say top 4 left 4 and then text   gray and we'll say say 300 see how that looks  boom so there we go that's what we want right   there and then we'll come back i know we set  that state but we're not going to use that   until we incorporate firebase so everything  is looking good so far and uh let's go ahead   and see just a quick recap here so we have our  data that we're bringing in we're passing in   our title and our fetch url there so we're making  our api call inside of this use effect using   axios we're grabbing the fetch url there and  then we're putting this into our movies state   and then there we're just mapping through right  here we're just mapping through each uh movie   or each piece of our state but what i want to do  is just kind of simplify things instead of having   all this um all this code here we can refine  this a bit more and we'll map through another   component we'll just call it a movie component  so let's create a new file in the components   folder called movie.jsx go ahead and hit save  rafc to get our functional component there   then all i'm going to do this div here i'm just  going to select that i'm going to cut it okay and   in here i'm just going to say movie just like that  and then in here i can say item equal to item or   whatever you want to call it but i'm just going to  pass in all of our data so in here i'm just going   to replace this i'm just going to paste what we  copied and uh in here we just have to take in item   and that should be all we need to do so movie's  not defined we probably just didn't import it   boom control spacebar let's import it and  we're gonna go ahead and give this a key   because react does like uh keys so  key id that way it has a unique key so   it's not defined that's because we moved  everything over so um that's okay let's just uh   we'll cut that out and put it over here  and we'll have to import or use state   there we go and let's go back here and we'll just  cut these out and just move that over on over here   there we go that should take care of all of  our errors let's see let's refresh perfect   that's looking good don't worry about that  one we'll come back and fix that later on   so looking good we still need to go back to our  row so we can actually uh display this properly so   but i think that's it for the movie component okay  so i'm going to drop that sidebar back down and   we can close that component for now now for our  row component what we do want to do is um add in   our styling for our row so this is our id slider  here this surrounds our roast apparent container   so what we're going to say is just give this  a class name and we're going to say for our id   we're going to say width full height full object  sorry overflow overflow x scroll there it is okay   now white space no wrap we don't often see that  there scroll smooth because we want everything to   scroll nice and smooth and then we're going to  say scroll bar hide just like that and i think   that's all we're going to need to put we are  going to need to make this relative actually   everything will display properly and that boom  there we go look at that guys smash that like   button whoa smash that like button you guys  this is looking good right here look at that   so let's open this up boom look at that netflix  you guys look at that and i'm scrolling on my   trackpad how awesome is that dude look at that  nice hover effect we have the title there we're   gonna be able to save this into our database here  in just a little bit when we connect firebase   that is looking awesome you guys but one thing  you know i'm on a track pad right now so i can   slide through here but if i'm on a desktop using a  mouse i don't have any way to to cycle through the   movies so we're gonna add these react icons and  the ability to slide through our rows so let's   drop this back down okay and what we're gonna  do was leave it like that and drop it down a   little bit further and we're going to use react  icons again to add in our um add in our icons   over here so on our row we saw a row let's add  in some more icons we're going to be using so   we'll see import yeah from react  icons and in here what we're going   to be using i'm going to copy them over so  md chevron left okay then md chevron right   there we go and remember like i said you just  add that pretext after here because right now   we're going to get an error if we just add slash  md that's all we need to do just right there so   for these buttons i'm going to put them outside  of this slider container there that slider diff so i'm going to paste that just like right there  and this one is going to go on the bottom side   now i'm going to type hold my alt  button so i can type it a couple places   now we actually have access to a size property  and this is with the react icons package   and i'm going to say size 40 just like that now  let's give some class names here so class name   again we're styling both of these here at the same  time and what we're going to say is a bg white   okay we want rounded full this is going to give a  nice full little round button boom just like that   rounded full we'll have absolute the opacity  by default i want to be 50 and then on hover   opacity um let's say 100 i  believe would be good and then um   what we also want to do also when i do over here  when i say sorry uh still need type two places   cursor pointer cursor pointer and  z10 so he's always on top there we go   now so we actually want these to be hidden and  then only show whenever we hover on the row   and where are we at here i'm going to say  just real quick so we can say hidden okay   and then we only want these to show whenever  we hover on the row so the way we do that   to have these show without hovering on  them specifically but we want them to help   to show whenever we hover over the parent  div so we just need to add to this right here   this parent div we're just going to add  group just like that then we can go into our right here we can say group then hover and we'll just show uh block i believe  should be good or flex everyone boom so that is   what we want right there let's do the same thing  group hover block i'm gonna put that right there   so now we cannot see any of the icons now we hover  on the row you now see the icon showing up that's   perfect right there so let's go over here for  this bottom icon with full boom there we go bg so we need this one to show on  the right side so let's just say right zero and this one needs to be left left zero let's have a look   boom there we go now up this needs to be  the right button no one's turned around there we go i thought i fixed that there we go  all right how are we looking look at that you guys   now we can just oh we got to hook them up though  right so how do we actually scroll through these   things whenever whenever we click on the button  so we're going to use some javascript for that   so what we're going to use we're going to put  that right here we're actually just type over   that we don't need to console.log that anymore  and what we're going to say is let's see const   and we'll say slider or let's see let's define  we have two functions a slide left and a slide   right and they're going to be arrow functions so  we're going to say slide left they're not going   to take in any values here and in here we have  to say we're going to be using constri to define   our our slider we're going to grab it by the  id so we're going to say var slider equal to   document.getelement by id and we're grabbing  the slider here okay and then in here we'll say   var um slider yes there we go slider equal to  scroll left sorry slider dot scroll left apologies   dot scroll left equal to slider dot roll left  minus 500 so let's go and save that and we're   going to copy this thing down and we'll just  use the same thing but we'll say slide right   and then even though we're sliding right  we're going to leave all of this the same   except for this minus we're going to change that  to positive right there and then let's go ahead   and hook this up so slide left and slide  right are the two functions we want to run   so on the to slide left we're going to say on  click we want to run the slide left okay then   down here on click we want to run slide right or  it's capitalized so let's go ahead and save this   let's see if it works look at that you guys boom  everything is looking clean all our rows here   and that's gonna that that's gonna be a problem  so i just forgot about this actually this kind   of stunt me here and i had to ask a friend to  help me out with this so basically whenever   we hit the to slide the row our first row is  the only the only row that slides and that's   because we don't have any unique ids to defer for  react to determine which row we're referring to   so the way we're going to change that let's go  back into our home right and in here i'm going   to add i'm going to click alt here i'm going to  type multiple lines what i'm just going to say   you can say whatever you like i'm just going  to say row id we want to give this a unique   uh a unique number there unique key so i'm  just going to say one this one's gonna be two   three four and five as long as they're unique  that's all we need but this row id we're gonna   hold on to that okay then back over to this  row we need to so we're passing that in as a   property so we need to bring that in and we're  gonna bring it in right here there we go and   then we actually need to add this here so slider  plus row id and this is what it's grabbing okay and then we're to add it in right on our row right here and that is why we  wrap this in curly brackets okay so now give   it a save when we scroll through everything is  working properly dude smash that like button   look at this we have a full ui netflix completed  in probably about maybe an hour and a half i'm not   sure how long it's been right around an hour look  at that we've completed the front end build of   netflix using rack.js and tailwind css so are you  ready to connect the back end we're going to start   hooking up firebase now is the time so let's move  on to firebase we're going to be using context for   our api managing our state see if a user is logged  in or not so everything's looking good smash the   like button you guys and subscribe to the channel  if you haven't already i'd appreciate that   so what we're gonna add next is uh  firebase right so let's cruise on over   we can actually probably just close  out this tmdb stuff let's go to firebase.google.com we don't  need to rest that stuff there we're gonna click on get started okay you do  need a google account for this don't worry   about these other projects but it is for you  guys as long as you stand to the limit which   we will be so what we're gonna say here is  um here's the name of the project netflix   i'm gonna say dash react yt for youtube go  ahead and start now we don't need to use google   analytics for this don't worry about that now  what we're gonna need to do is create a firebase   a firebase file here so inside the in the source  folder new file firebase firebase.js some people   call it firebase.config whatever it's always a  little firebase file on there it's going to do   okay so it is ready boom there we go so this is  our project right here i'm gonna open that up a   bit and what you see right here this page  right here is just a console for firebase   so what we wanna do we're gonna be working with  uh authentication but before we do that we need to   connect this project to our application here our  application to this project here in firebase so   this is a web project here if you're using  apple ios android like i said we're using   the web so let's do that here wants us to name  it again netflix netflix youtube just like that   don't worry about the hosting we're gonna  come back and do that here a little bit later   so let's go ahead and get started boom that's  all we need look at this so mpmi install firebase   we've already installed firebase but if you hadn't  go ahead and run that i'm using yarn so to say   yarn add firebase npmi firebase if you're using  npm so next what we can do is just copy this okay   we're going to paste that inside of  our firebase folder just like that   so now you see again you guys create your own  account with firebase don't use any of my keys   i'm going to put this i'm going to put this  project in the description below a link to my   github so feel free to clone it if you want to use  everything that's fine but if you just clone it   and install the dependencies and hit start it's  not going to work the front end's going to work   but firebase will not work because i'm deleting  all of my keys after this so please get your own   but and since we're going to deploy this after the  build since we're going to deploy it we don't want   any of our private uh keys out in the public so  what we're going to do we're going to hide all   these in a env file and um let's go ahead and  do that right now okay so i'm going to create   a new file and this is outside the source folder  okay this is just in our main main uh folder here   say dot env and what i'm going to do i'm  actually going to just uh copy this over so   it kind of saves some time save some time typing  here but don't worry about these keys they're not   going to work either just get rid of those but  what do you want to type here what's important   at least is react all caps here react underscore  app underscore firebase api key and then we're   going to just kind of go down the list so what  i'm going to do i'm just going to grab this here   so i'm just going to grab that copy and  we're going to paste it here as the api   key does not need to be in quotes  it won't work if it's in quotes it's   not a string here in this env file this is going  to be the auth domain next is the project id   after that we're looking for storage bucket message sender id and the app id so that's what we want to do  there now to have access to these let's go   back to firebase and what we're going to say get  rid of all this here we're going to say process   dot env then we're looking for what  it is process.env react underscore app app underscore firebase what i call it  api key in fact i'm going to go ahead and copy that over don't worry i'm just pasting it here so i  can so i can copy it i'm going to delete   it here in a minute but what we want to say  here i'm just going to copy this actually   this domain though let's  just delete all these here boom there we go this is worth  the wait you guys i promise you   you don't want to you definitely don't want to  uh leave these codes out for the world to see so   definitely recommend adding in the the env file  here so just hold it all again so we can type   on multiple lines here and we'll say process dot  e and v dot okay and now we've already got that   top one this one's to be auth domain there  we go comma and we're gonna grab the project   id go ahead and do that there the storage  bucket boom there we go this message ascender and this message app right there boom all right  so let's go and get rid of that unsightly perfect   so that is what we want right there you guys  um you need to restart your server once you   do the emv file so make sure you restart your  server otherwise you're gonna get lots of errors   so and nothing's gonna work properly so now  that we have our server restarted perfect okay   so we're not actually connecting far we  are connected firebase but we haven't   added authentication or anything else and we're  going to do that we're actually going to do   that right now so if you're ready to get started  with authentication we're gonna be using context   api okay context api with uh with firebase  here to add in uh all of our state to see   if a user is logged in or not so what we're  gonna do next is continue to the console okay   and let's click on authentication  and now we can just click get started   and here there's all different ways you can  be authenticated using firebase i have another   video put in the description below if you want to  see i did a video on how to sign in with google   you can sign in with pop-up or redirect to google  really really cool stuff i'll put a link in the   description but for this uh build we're going  to use email and password just build my drink   so enable save there we go and that is all we  need to do for that so as you can see here we   have a blank table no users we haven't created any  users yet so what we need to do is actually add in   and i'm going to show you how to do this  we're going to cruise over to the docs here   and say build and we're looking at authentication  okay you click down here web now get started   we want to import the sdk software development  kits here for us so we can do is just actually   copy this and we're going to import it actually  says right here add sdks for firebase products   you want to use we want to use authentication so  that's the authentication one we're going to use   and then we need to add this here at the  bottom perfect but we actually need to export   this here because we're going to be using this  outside of this file and that's what we're going   to do right now we're going to create a context  folder so let's go over here in a source folder   and create another directory here called context  and inside context we're going to create a folder   called say auth context dot js perfect that's  what we want to do right there now there's a lot   of stuff we're going to use in this file let's  go ahead and get it uh let's go ahead and get   it set up for now so we're going to import a few  things from react we're going to grab the create   context okay let me grab use context we're going  to grab use effect we're also going to be using   the use state okay so first we have to create  our context so we're going to say constoth.com equal to create context yeah boom there  we go perfect and then in here what we're   going to say is export function this  is going to be our context right auth   context provider it's going  to take in some children okay and down here we're going to return   and what we're going to return here the  bottom here see auth context dot provider   return children and this is gonna have some values  in it but we're gonna come back later and uh edit   that add that in later so what we need to do also  kind of wrap everything in the context provider   first we need to export this export another  function and in here we're going to user auth return use context off the contact perfect so the  way context works we actually have to wrap our   entire application so i'm gonna go to our app.js  and um i do want to include the navbar in here   because we want our navbar our component needs to  have access to the to our contacts because we're   going to be able to conditional render our buttons  whether you log in or log out whether or not a uh   user is logged in so auth context provider boom  just like that and again we want everything to be   in there so all just slide it up there save  it so it gets all formatted nice and pretty   perfect so now our context is set up so inside our  context is where all of our logic is going to be   for signing in and out of accounts um creating  new accounts an on off state change to see if   the user is currently logged in or not all  that is going to be inside of this context   and what we're going to need inside of here  we're going to need some stuff from firebase   we're going to import so from  firebase we're going to need this uh   auth right there so let's grab that auth from  firebase there we go and then from firebase   but this isn't from the firebase file but  from the firebase dependency that we sold firebase slash off there we go and in here we're  going to need a few things we're going to need   the um we're going to create  a new user with email password   so you create new user email and password and be  able to sign in new email with email and password   we're going to need the assign out method and  we're going to need on auth state changed so   that's all we're going to need for now and we're  actually going to put those in here there we go   so first off we're going to need some state okay  so open up our brackets here equal to use state   and we're going to set this to an object not a  string and we'll have user set user there we go   now first let's do the sign up so what we're  gonna do is sign up whereas we're gonna need   a create a user with an email and password  so let's do function i'm going to call this   sign up there we go and this is going to take in  email and password right there we go and inside   here we want to return the great user with email  and password and we're going to need auth email   password that's all we need to do but we actually  need to pass this through remember this is going   to take a value we don't have that in there yet so  value and we need to throw all the things we want   available to all the other components which is  the sign up we're also going to want access to   the user state just like that let's go ahead and  save and gets nice and formatted for us so that's   looking pretty good right there now that's a sign  up function let's go ahead and also add a sign out   so it's a function and this is going to be log log  out there we go and in here we just want to return sign out and let's do a sign in as well so we have  signed up log out and this is going to be sign in   we'll say log in email password we say return sign  in with email and password we need to grab auth   from firebase auth and then email password then  also we need to do our on off state change i'm   going to keep that at the bottom here so function  and that actually let's wrap this in a use effect   so use effect that way it's only going to  run it's going to check once uh whenever   the component mounts to see if a user is logged  in or not and we're going to say const on sub   scribe okay equals to on auth state changed and  we need the auth and then we're going to have an   arrow function here and this is going to take  in the current user okay this is going to set   user to current user okay then down here  we're going to return an arrow function   to uh unsubscribe it's a method go ahead and save  that i don't see any errors that's a miracle you   guys so go ahead and save that now we have to pass  these as values in to our auth context provider so sign up um log in and then we have log out and  i believe that's all we're going to need it's all   we need for now so everything is looking good make  sure we don't have any errors come back and fix   those that's not a big deal look everything is  looking nice so now we have all of our firebase   connected we don't have a sign in page yet so  let's go ahead and uh let's go ahead and create   our our sign in page or sign up page so let's do  that first here so for our pages what we want here login.jsx rafc is going to get our functional  component i'm going to go ahead and create our   sign up dot jsx and let's do also our  account.jsx boom there we go perfect   so for our login page let's go  ahead and get our all of our sorry rafce there now our afce perfect  go ahead and close that down so for our app let's create some routes  too so route path and we want one for login   and this is going to be  element i'm going to display   the login element close that off  and again we want to do this for   sign up this is going to be the sign up component  then also we want to have a route path to account go boom whoa not md account tree  that's not what we want right there okay perfect now we need to import this  does not want to okay that's cool it's   not one to import for some reason no big deal  we'll go ahead and import account from pages   account there we go all right perfect so go  ahead and close that everything looks good   there we have sign in login you know what let's  go ahead and go to our nav bar and kind of create   some routes here so on this sign up button go  ahead and add let's do this too our netflix   button our netflix logo we want a link to be able  to sign in so we want this to run to our home page shove that up there go and save and for this down  here link is not fine that's right we'll link to   link to and this button we want  to have to log in there we go and this one here is going to be linked to sign up perfect all right let's go ahead and import  that link there and everything is   looking nice if we hover on this see we  navigate to the sign up to the login page   there we go and back to the home page that's what  we want right there so let's close this close the   app.js close this emv file don't need firebase  don't need the row don't need that home either   so inside of our sign up um inside of our sign  up component let's go ahead and create that there   so what do we want to do here let's go ahead  and say class name will say width width full   h screen there we go i actually want to wrap this  side fragment just like that like using those   so that's going to go up in there perfect now  for our background stretch out over here for my   knees sorry for my background i actually want  to use uh the netflix background so let's just   cruise on over to netflix and i'm just going to  right click here and just say copy image address   i'm gonna leave that open for now in case we  need it so for our image image just give it a   little slash there and i'm just gonna paste that  in okay boom there we go looking good now let's   give this some styling okay so class name and  actually don't want it to be displayed at all   on on on mobile devices so i'm gonna say hidden  then anything above small we want to display block   absolute with full right full object cover  okay and that's all we need to do take up the   full width and height of the screen and i want an  overlay on this thing okay so div and in this div   let's give a class name so we can add in overlay  to be absolute and then for overlay you see bg see if we need that b g black we'll say 60 for 60  cent percent opacity i'm just use fixed instead   top top zero left left zero and um with full h  screen and that's saying h screen remember i 100   viewport heights that's looking good right there  on smaller devices it should just be black boom   there you go looking clean yeah i like that i  like that all right so below that div next what   we're gonna have so we're gonna have another  div here and this one's gonna be class name   we're say fixed okay with full with full um  e x four so padding on the x axis of four p y   twenty four then z fifty z index of  fifty now we want to have an overlay   see a little overlay over our form just like  that and then we scroll down it's just going   to be a form on a black background so let's do  that right now in here and so i have a div here   and this is going to be a class name we'll say  max width and let's open up our brackets we can   put some custom values in there i'm going  to say this one's going to be 450 pixels   height of 600 600 pixels there and now  we're going to say mx auto bg black   75 75 and then everything inside text white  perfect that's what we want right there you guys   and then let's have another div in here  let's go ahead and save so it gets all nice   then class name and this is going to be a max  max width of 320 pixels what i want mx auto p   y 16 there we go now let's have our h1 in here  we assign up save perfect that's what we want   right there let's go ahead and style this thing  i'm going to say class name text 3xl font bold   smash the like button if you like tailwind if this  is your first time using tailwind let me know what   you think of it and in the comments below like i  know you're saving a lot of time using tailwind   especially uh especially once you get  used to all the styling it's incredible   so under the h1 uh we're actually gonna have our  form itself right and so our form we're gonna   have two inputs and a button we're not gonna  be using any labels and we don't need the form   action so we're just gonna have an input and this  is gonna be email okay and we don't need any name   or id or anything like that and  then input it's gonna be type password there we go don't need that let's  just add a placeholder that says password and placeholder email just like that and we're  getting some errors down here show auto we can   do auto complete i guess it wants us to do  that autocomplete and we'll just say email and anything else password grant password so  auto you don't have to do this i'm just trying   to minimize some of those alerts down there so  it wants us to say current password there we go   all right just some recommendations here should  refresh that looking good okay and then i don't   know why i moved that one not the other one that's  cool but let's do a button that says sign up okay   and let's go ahead and style the button here and  for the button the styling is gonna be pretty   easy last name bg red and we're gonna use 600 p  y 3 and we want a margin y of six uh rounded and   font bold let's see how that goes there we go  perfect perfect now um let's see here for our form   let's give our form some styling here  so class name we're gonna say with full   flex flex column and then py4 and next let's grab  on to perfect and nice okay a styling here so um   add the styling at the same time again just  hold alt and then we can type multiple places   here class name now for our inputs i'm  just gonna say p dash three padding three   my two so we have a margin of 0.5 ram on the  top and bottom there that's looking pretty   good already off the bat there so we'll  just say vg gray we'll say 600 pounded round in i might even lighten that up just  a bit i actually had it darker but yeah i'll leave it like that yeah with  that that's looking good right there   uh dang look at that looking good okay so what  we want to add just a couple p tags down here   we'll be done with the form then we'll hook  everything up so it's working uh working properly   so inside of the form just below this button  here what i want to add is a div here and inside   this div we're going to have a p tag and we're  going to have an input of check box there we go   and again let's just get rid  of this and we'll just say remember remember me like that go and then also  we're going to have another p tag that says um uh need help there we go perfect perfect okay  and then we'll say class name and this is for   right below we'll say margin uh sorry flex then  item center is all we need flex go by between okay perfect perfect now on this here let's just  give class name we'll say uh margin right two   there we go all right looking good look at that  look at that nice and we can change the color   there yeah let's change this text here we can drop  down the text a little bit so i'm center there   uh text small and text gray 600 there we go  perfect looks good right there now we can also add   just this text down here artery already subscribe  to netflix then click here to sign in okay and   we're gonna put that just below here and what  we're gonna say is let's actually give this a span okay already um subscribed to netflix sign in okay and that looks good and  we'll just give this class name um py4 last name text gray 600. let's see  how that looks right perfect and i have a sign in what we can  just say just give this a link to log in just right there boom and we'll  just move that up a notch go ahead and save   link okay let's import that boom how about  that damn look at that looks nice man   nice there we go we can give this a little  more padding if you want that looks good though   we always give this a little bit more um a  little more padding so let's see here why   you see how that looks boom there we go man  looking nice all right you guys so that is   our sign up component let's just go ahead and copy  all of this so just copy that div right there all   the way up and let's just paste that in here now  we're going to go through change a few things so   let's just first get that imported okay now  let's cruise over the sign in page okay now   we're on sign in page let's update this because  really it's going to be most all of the same code   just a little bit different so sign in email  password is going to stay the same uh we could   probably change this button to sign in remember  me need help already subscribed we'll say hey   um new to netflix and we're going  to redirect to the site well   if you're new to netflix then you  want to sign up we'll just click here new to netflix sign up should take us  to the signing page boom there we go   with that looking clean all right so how do  we actually sign in to netflix well we've   already done the hard part which is adding in our  context right so really all we need to do now is   start with our sign up here all we need to do and  actually i'm going to console.log something here   right and here i'm just going to say  tell you what let's do it in our navbar navbar we'll come back in a minute so first  sign up let's go ahead and log in okay and   i'm gonna go over here to our user table we have  no users in there so let's go ahead and do this   so here we want to import and this is our sign  up okay we're going to import the user auth from   context flash auth context there we go now in  pier what we're gonna have we're gonna have some   state we have a lot of state and then also we need  our context as well so let's just i'm sorry here   cons user equal to user auth okay just like that  perfect and we're also going to want the sign   up that's not what we want we  want there we're looking for   yeah sign up from user so go ahead and  make sure that's what we're looking for uh so let's go back here and it  finished adding our state in here that's what we want though perfect right there  so let's add our state we're gonna have cons   and then we're gonna have um let me use state  here it's gonna and empty to uh sorry empty   uh string not object and let's go ahead and copy  that down so for this one it's going to be email   and set email okay because we want to take  the values that the user enters and password   and set password okay so now and we're gonna  have a handle submit so const handle submit   or whatever you'd like to call it doesn't  really matter that's what i'm calling it here   and in here this is actually gonna be a  asynchronous function here and we don't want the   form to be submitted so we're gonna prevent the  default so make sure you pass in that event there   event dot prevent default we don't want  the page to be submitted every time we   submit our form let's import the use date there  we go sign up here and what we want to do this is   actually going to be an asynchronous function okay  so we'll say async here and then here we're going   to say try catch block right so in here catch  error and we'll just console.log any error then   here we want to await and we're already bringing  in the sign up function and that's what we want   sign up and what we just need is the email and  password so now let's go down here and connect our   state here as well as our bizarre form submitting  so this is our form we'll say on submit and on   submit we want to run the handle submit function  here and then for our input this is for our email   input we're going to say on change now on change  what we want to grab is there to set an arrow   function here to set the email to event dot target  value okay and i'm just gonna copy that right and   save a little bit of time paste that in there save  it but instead of email let's say set password   that's all we need to do so let's try this  thing out and see if we get any errors all right   let's go and try and sign up i'm going  to create test at test.com the password   is going to be password and before we do that  let's let's go ahead and let's just try it   oh okay so we submitted did anything  happen let's go here let's refresh   yes so now we successfully created a new user you  can see it inside our user table yeah smash that   like button you guys that's how powerful firebase  is that's how easy it is to set up a back end with   firebase now um once a user logged in it doesn't  make any sense to just sit here on the signup page   what we want to happen is actually sign in and you  get redirected automatically to the home page so   what we're going to do here is import with react  router dom we just want to use navigate there we   go oh sorry don't add any any brackets there just  use navigate then here what we can say is cons   navigate equal to use navigate there we go  just like that and then here after we sign in   what we want to do is navigate to the homepage  so let's try this again we're already signed in   i want to do i'm just going to delete i'm going  to delete this guy right boom he's deleted   and real quick you guys before we sign  in and test out this navigate i want to   do some conditional rendering which means  on this nav bar here if users not signed in   i want them to see just like it reads now to sign  in or sign up if the user is logged in i want it   to say account right here and then give them the  option to log out so let's go into our nav bar   okay and what we want to have in here we first  want to pull in our context right so import   user auth right from auth context then we need  to grab our user to find our user so const sorry   this goes in curly brackets so user  we're also going to bring in the log out   that's equal to the user auth there  we go these are a function okay so   what we want to do here we're going to use some  uh let's do this first of all i want a console.log   user and it should say null right because we're  not logged in so now let's go ahead and test   this out to see if we get redirected to the home  page summon again we don't have any users in our   database because i just deleted them so test  at test.com password we should be redirected   yes we're now redirected and look if you look  down here in our console our user is now changed   and this is our user object okay so you now have  access to all this data in in firebase and you   can see that is our email boom right there so  what i can say in here for example if i change   this to user.email it should just now display our  email of the logged in user okay so we can go and   comment that out and what we want to do down here  for this div right here i'm going to go ahead and   select that i'm going to cut it actually so  let's open up our curly brackets we can use   some javascript and what i want to say is ternary  operator we're gonna check to see if a user we're   using optional training here dot email right  if that is true okay if that's true we're gonna   display and i'm just gonna paste this in here  we're gonna change that else we want to display   this right so this is what this is correct but  if a user is logged in we actually don't want   i don't want this to be uh there could be a  buttons fine but i want this to say account okay and this should be since we're actually  logged in this should reflect properly say account   perfect i want this to say log out so otherwise  it should show login so let's just log out we   don't have any logout functionality let's go and  add the logout functionality a lot to do here so   let's add a log out here we've already pulled  it in here from our context so i'm going to say   arrow function i'm going to call it handle handle  log out okay we're not taking anything in here   it is going to be an asynchronous function  though async and then what we want to say here is   a weight sorry this would be a try catch  here and catch i don't have any errors no and what we can say is a weight log out  just like that and we don't need anything else   oh try to catch what's going on there we go go ahead and save that and that  should be all we need to do there   and that's all we need and once we  log out we probably want to navigate let's import that as well   use navigate once we log out we want uh users  to be automatically redirected to the home page okay just like so we'll just say navigate okay  so now we are logged in now when we log out   this should log us out once we  connect it so just this button here so we actually don't even need this to be a  link we don't want it to be a link because   it's just going to log us out and we're going  to say on click we're going to run the handle   logout function go ahead and save that  prettier takes care of the formatting   let's log out now this should say once once we  log out here it should just say sign in and sign   up and let's have a look hey there we go is that  right perfect there we go all right so for our   account that's perfect okay sign in let's do take  care of the sign in first okay so now everything's   working properly let's go into our sign in  okay and let's go ahead and see use navigate   we're going to need that one there and we're also  going to need our context so let's import you no oh user auth there we go okay and i'm just going  to copy this over so i'm going to use all of this   here let's just copy this whole thing okay copying  this whole thing from the sign up so we're going   to use the const this you state email and set  email we're going to use the password state   we're going to use this but instead of sign up  we're going to say log in because that's what   we passed through here log in that's what  we're grabbing right here just to be clear   so log in and then handle submit we can leave  the same but instead of sign in we want log in   and that should be all we need to  do use state is not defined okay so let's see here let's sign in  and remember test at test.com   and password we should be logged in i'm going to  show you something real quick let's write p-a-s-s   and see i'm going to just  comment out that right quick see test at test.com pass and we should be getting  an error oh we got a print e dot prevent default here oh i forgot we need to add our on submit  there uh handle submit there we go and on change   this is for our email what we want to add is event  set email whoa yeah well that's right target value   and this is going to be arrow function let's let's  fix that and then this for our password on change that target value so go ahead and save that  let's check this out so test at test.com   pass boom and so you see we have an error down  here wrong password i did that on purpose and uh   that's great but for our user we're not seeing the  not letting our user know that we have any errors   that's not very user friendly so what we can  do is actually set in some error state so i'm   going to say const error set error and that's  going to be equal to the use state we're just   let that be an empty string misspelled that there  perfect so what i want to say here is we'll say um not there we're going to set error to  an empty string and then down here set   error to error we say air dot message  okay and then we can come down here   and we want to render this out on the  screen i'm going to put it just befo   below our h1 here so we can use our itinerary  operator again and what we can say if   error is true okay so if error is true  what we want to show is a p tag else and in here what we're going to say is let's see  error just like that let's just give this last   name let's go ahead let's go and see what it's  looking like so far so we can style this thing   test.com pass boom so there you go we have our air  cool that looks good that looks pretty good right   there so we can actually just probably leave it  like that if hey we can just do this we'll say p   p three v g red four hundred see how  that looks boom yeah so that way you can   big uh warning just like that perfect  i'll say two so that's a good right there   now let's get the actual right  password this time log in oh we need to   we need to navigate to our homepage sign in boom  there we go and now we have our account page   so what we want to do next is actually  make this account page a protected route   so we actually have to be logged in in order to  view that that uh page here so the way we're gonna   do that we're gonna be adding another component  here it's a protected protected route here   so let's go into our component and i'm just  gonna name that protected route dot j s okay   let's say changes over react here r a f c is  going to generate our functional component here   now we need to import a couple things i'm going  to import we're going to need the navigate okay   equal to or sorry from react router dom there  we go and we're also gonna need our context   so user auth go and this is  actually going to take in   children okay and then what we're going  to say in here we're going to say if   user is not true then what we want to  do is return and um to be a navigate okay navigate to the home page there'd be a  self-closing tag else return children and   we can just get rid of all that just like that so  go ahead and save and oh we forgot their user off   so let's do that right here const user equal  to user auth just like that so we have a method   there perfect that is what we want right  there you guys everything's looking good   now we're not done yet with a protected route  we have to make one last final thing here in   our app.js and basically we just have to wrap our  account or anything that you want to be protected   ah protected route we just have to wrap  it inside there so let's just cut that   and we're just going to move it inside of  our protector route so go ahead and save   that's all we need to do now um we're on our  account page because we're authenticated okay   so next let's log out and try to go to our account  page and what it should do is just bounce us right   back to the homepage check boom there it works  how about that you guys check that out perfect   and if we log back in test.com password we should  be able to just hang out in the account page   perfect that's what we want you guys hope you like  what you're getting so far smash that like button   we have now finished authentication with  firebase.js and this netflix project but what   we do have left is uh we want to use firestore in  firebase and what firestore is is cloud storage   for firebase so to get started with that you  can close app.js uh we can close the the sign   up here close the protected route this login we  don't need that anymore we can close the nav bar   we're going to leave open the auth context  okay we're not going to need that anymore   or so we're gonna we are gonna need that  but let's cruise on over to firebase okay   we can see our user in here now let's open this  up and what we're gonna look for is firestore   database okay we're not using the real time  we're using firestore which is cloud storage it's   awesome to use you guys super powerful so let's  start here in test mode all this is is the read   and write permissions so basically it's saying  within 30 days you don't have to change anything   anybody can read write to your database so that's  all we need to do click enable now just make sure   that fl sorry the cloud firestore location is the  closest to your location it should be selected by default so this literally only takes a couple  minutes here maybe less so there it's already done   and that's all we need to do we don't  do not need to do any more configuration   past the provisioning of the of the database  so cruising back over here to our docs we're   in authentication let's go into the cloud  firestore and in here introduction let's   do get started now we just need to add the  firestore sdk okay so we can come down here   and we're gonna use that get firestore right there  so again we're using version nine the modular   version nine um this came out probably within  the last 12 months for sure probably less than   that actually so if you see it done different ways  it's kind of like the older way of doing things so   like i said we're using version nine here so what  we need is just that cloud firestore right there   so we do need to go back into our firebase here we  go and we should add it right there with our other   sdks and then we just need to export const db  equals to get firestore there we go and just our   app just like that just make sure that's correct  here yeah db get firestore app and again we need   to export that because we're not gonna we're gonna  be putting all the logic in our context here so   here is what we need to do and this is actually  really easy you guys we just need to go in here   and import a couple things from uh  firebase we can actually at now add   db okay from fireboy firebase we also need  just like we imported these from firebase auth   we need to import some things from firebase slash  firestore firestore directory there and what we're   going to need is set dock and also dock okay now  basically whenever we create a new user and i'm   just going to go ahead and real quick go into  authentication i'm just going to delete this   delete account boom so now we have zero users in  our authentication account right zero users so the   way we're going to do this whenever we have a new  user sign up okay we'll get some errors down here   whenever we have a new user sign up  we automatically want to store this   user inside our cloud firestore and also  initialize an array just an empty array   of uh saved movies but it's going to be empty by  default then whenever we add a movie it just goes   into that array so what we're going to do we're  going to do that here in our auth context okay   so we have our doc and set doc imported  and right here in our sign up function okay   what we're going to want to do  is remove that return because   basically if we return that nothing else after  the return would be processed so what we're   going to say here is set doc okay and then  here we say doc db and they're looking for   users email okay and then what we're gonna want  to have is saved shows is what i'm going to   call it save movies save shows whatever and  we're going to set that to an empty array   okay so now whenever we run this function which  is ran every time we sign in sign up a new user   we're going to automatically create in our  database a user's file here and then an email   okay so let's see if this works let's cruise  on over here getting some errors that's okay   just refresh that thing there boom there we go  so let's sign up a new user i'm gonna say test   and test.com remember i just deleted  this guy so there's nobody in here   password hit enter so let's check and see we  should have let's refresh let's see if it worked   any errors we have a user boom there we go and  we have an empty array look at that that's how   how easy it is to create a backend in firebase and  just to show you we can close that again just to   show you i'm going to log out and just sign up a  new user i'm going to say joe at say joe gmail.com   password sign him up and now we should actually  refresh this and now we can see another user here   now we have joe in there boom and save shows so  now what we want to do now that we can actually   log in and and save user specific data what we  want to do is be able to actually store this so   whenever we click on this heart we want to store  this specific movie inside our save shows array   so we're actually done with the auth context  and where we want to go next is the uh   the movie here our movie component okay and  inside our movie components we're going to   import a few things we're going to need  our user auth right so our user user auth yeah these are auth context there we go so we're gonna need  that as well uh we're gonna need import   oh whoa db it's going to go in curly bracket sorry  i'm so i still have not i've yet to get a mic   arm for my my new mic here so let's go into fire  firebase okay and then also we need we need a few   things from the firebase flash fire store there  we go in here we're going to need uh up array   union okay doc and update doc there we  go so that's what we need right there   so let's go ahead and grab access to our context source say const and this is going to be uh user  here okay equal to user auth there we go unsave   now we're going to want a few more things of state  in here we're going to want a saved and set saved   and i'm going to show you why we're going to  use that here so let's say saved set saved equal   that saved pull to use state and it's going  to be false and there we go okay so let's next   what we want to do here is i'm going to create  a movie id reference here so i'm just gonna say   const movie id okay equal to doc and this is gonna  be db user users okay then we're going to use back   ticks we're going to use a template literal and  what we're going to want to grab here is user   optional training here dot email so what we're  saying we're the referencing we're referencing   the database of users and then we're grabbing the  specific user email that's what we're referencing   right here okay so uh even number segments users  have one that's fine don't worry about that   right now we'll come back and fix this so that's  looking good right there pretty sure that's good   all right so what we want to do next okay what  we want to do is have a save show a save show   function it's going to be an arrow function so i'm  just going to say save i'll say save movie save   show honestly it doesn't matter here so save show  and this is going to be an asynchronous function   okay and now every time we say we should what we  want to do is check to see if a user is logged in   but we only want to run this if a user is logged  in else we're not running anything at all so if   we'll say user optional training email right  so basically we're saying if user.email is true   otherwise it's null right if nobody's  logged in so if a user is logged in it will   be true what we're going to say is set we're gonna  say set like to opposite of light okay set saved   to true and then we're gonna want to await update  doc okay and then we're gonna grab the movie id   okay movie id and then we want to say  saved shows and this is how we update okay   this update doc save shows and the way we update  documents and firebase is we use array union i'm   going to say array union just like that then we  can throw everything in here we can say id since   each movie has an id was we have to in order  to save something or delete something in   firebase it has to have an associated id  and luckily for us in here all of our uh   our movies have their own id so what we can  say is id here and we'll just say item dot id   and then here we're gonna have a title  and that's gonna be equal to item   dot title then here we're gonna have the image and  that is gonna be the item dot backdrop path just   like that now go ahead and save and but that's  if we're logged in else we want to send an alert   okay it says please log into save a movie okay now  go ahead and hit save let's just refresh this here   good now we're not logged in let's click oh let me   hook this thing up first so um movie  id so let's hit save to set saved   so where are our hearts so for this p tag right  this both our hearts are inside of a p tag   and on click what we want to do is run the save  show let's see if it works so when we click this   right now it's fa heart whenever we click this   we want it to change heart so it's now a filled  heart so change the icons and save this movie   into our database but we're not logged in  right now so it should give us an alert   please log in to save a movie there we go  you guys that's looking good okay so let's   try and log in now and we'll log in to one of  our users let's just do uh we'll do joe there   so we'll log in we'll let joe log in at gmail.com  and then let's sign in with his unsecured password   of password there we go now joe likes this  movie uncharted so he's going to save it   boom there we go we did not get the alert and now  you can see our show has the heart button so let's   just see another one he like sonic hedgehog and  maybe batman now let's go and see in our database   look at that we have the id the image and now  we have access in our database now we can go   into our database grab this information  and display it on our account page so and   this is user specific data so if we look at test  nothing is in there and again now we can log out   let's log in with our other user test at test.com  his password of password and you know he can still   log in he doesn't have any shows not listing  any shows so let's go ahead and log him out   let's log back in with joe here so  we can see joe shows so joe gmail.com   password and now what we want to do is we're  going to want to go to the account page okay   so we're going to go to the account page and that  is where we're going to show out our listed movies   or shows however you want to say it there so  let's have an account now let's go ahead and close   that movie there we can close firebase and what  we're going to be working in is the account okay   and for our account we're  going to create a new component   called uh saved shows let's just go and create  that saved shows.jsx rfc get our functional   component now inside of our account what we're  going to want to do is display we'll display   i can't log in here that's cool  we're going to have an account page   and let's go ahead and style that right now so  inside of our account page make this just an   empty fragment so let's have a div and in here  let's give it a class name of width full text   white there we go perfect perfect that's what we  want now this image is going to be our background   and i want this to be let's go into our  login and i'm just going to grab this   right i'm going to grab that whole  image element element altogether paste it in here perfect now  i don't want this to be hidden   or blocked so we can actually just delete all  of that there and what i want to say with full   h volt that's fine an object cover that's what i  want but for the height i want it to only be 400 pixels so 400 pixels see boom there we go and  if we resize we're maintaining our aspect ratio   perfect that is what we want you guys there we  go we don't need that little space i do want   to add an overlay on here so we get a nice  little overlay so let's create another div   and let's give that a class  name it will say bg black   60 for a 60 opacity fixed top is going to be 0  left 0 and width is going to be full and height of   height of 550 pixels there we go perfect  and that's what we want right there nice   little overlay in here and in this div we're  going to have um we're going to just save   this div class name this is we're going to have  it's going to say account or my shows rather   just say absolute top we want this to be 20  from the top there and then we'll just say p   for md of a padding with eight so anything above  the medium break point we have eight i'm padding   and in here we're gonna have h1 and this is  gonna say actually yeah it's gonna say my shows   perfect that's what we want  let's give this class name text 3xl anything above medium when  i say text 5xl and font bold okay   that is what we want right there you guys that's  perfect now we want to render through our shows   down here okay you guys we want to render through  all our shows but we only want to grab the shows   that are in our database okay so we're going to do  that in a component called the save shows that we   just created let's go over to our save shows  and this is going to be pretty easy because   it's real similar to what we've already done  so far with the rows and the movie component   so what i'm going to do here is i'm actually  just going to go ahead and find our row here   and we can just kind of select our row that's what  we're going to need there um for our save shows so   for our row what we're going to do is just grab  all of this here everything inside the brackets   and i'm going to put this in here  make sure we got that h2 perfect   so i'm just going to make sure we get  everything correct here so inside our save shows   let's just paste that in there go  ahead and save we can get rid of that   and instead of this title here we're going to say  say my shows let's say my shows just like that   and we don't need any of this row id stuff so we  can ditch that don't need that in fact we get some   errors if you leave it so get rid of all that and  this is my shows here we go perfect and so we want   to render everything out down here we're going to  need a few more things okay from uh from the row   and if we haven't done so already you're going to  want to import these so boom auto import that one   and that one there we go and we don't need  this movie so instead of that movie we're   actually going to just let's grab our movie  component and just grab this entire thing   we're going to copy that and close that instead  of this movie component here this is what we want   to map through but this p tag here for the  hearts we don't need any of that right there   and this is actually going to be img okay and the  reason it's not background path we go to our image   because we're grabbing this from our database  now we're not grabbing this from the api   no longer are we doing that we describe it  from our database and we saved it as img   and just the file path there so that's what we  want to do there and we're keeping this base url   so that's looking good and we are  going to need inside the row here   we're going to need that slide left  and slide right so let's just put that   inside of our um we're going to put that inside of  our account here or sorry inside of our save shows   so let's throw that in here we're going to need a  few thing few other things inside here as well so   we're going to need the you state and use hook  so let's go ahead and stay and also the use hook   or sorry use use state and use effect apologies  we're going to need our context so user auth okay context go and let's have this here so we're  gonna need the cons user equal to   user auth oh not that auth method there okay  and then we also since we're not while i see   this let's get rid of that we don't need  the row id so we're not going to do any   of that crazy stuff in here now we need to  get a few more things here so we need to get   import db from our firestore or sorry firebase and  then actually from from firestore so this is going   to be from firebase firestore what we're going  to need it from here is we're going to need the   update update dock i think we're going to need  dock itself and then also on snapshots we're   taking a snapshot of the database and what that  is basically is just taking a picture if you will   of the database at that current time and we're  going to wrap that in use effect so every time   our component mounts it'll take a snapshot  and it'll relay what's uh in our database   so we're going to put all this um down here and  we are going to need our use date here and it's   going to be just like the ones before it is the  empty array there we go and we say just movies   set set movies just like that okay so perfect  let's go down here and do our snapshot okay   so for our snapshot we're gonna say uh we're  gonna wrap this in ease effect so use effect   there we go and instead of in our dependency  array we're going to send a set instead of an   empty array we can just say user optional chaining  the email so every time there's an email change   the the use effect fire off so what we can say  is on snapshot okay then on this snapchat what   we want to do doc db okay we're looking for users  and then backticks we're gonna do our template   literal and what we're looking for is user with  our optional training dot email okay then just   outside of that we're gonna have an arrow function  with doc there like that they're just going to set   our movies to doc dot data optional chang dot  saved shows go ahead and save that now we need to   import this so put our saved shows just  like that go ahead and auto import that   make sure we're imported here save shows  that's what we want right there perfect perfect   all right so let's go see if we have any  errors now looks like we do cannot read   properties of undefined reading map  okay so this is in our saved shows   so we're mapping let's look at  what we're doing here so we're   see we are we have our state we're having a  use effect okay we're looking at on snapshot   we're not having any syntax errors we're going to  our users user email doc set movies doc dot data look at that so save shows okay let's see that  should fix let's see if we get any more errors   boom there we go must use all right there we go uh  it was a unique key prop but let's do that so id   and we can just say key equal id there we go  so again let's refresh and boom look at that   now we can't delete anything yet but hey  let's go ahead and let's delete one of   these so we're deleting that uh delete batman  get rid of you need it and let's have a look   look at that on this that and that's the snapshot  you guys so every time the snapshot changes okay   right we run this use effect okay and then it  takes a snapshot and it updates just like so   so let's we want to add a little uh icon here a  little close here so we can delete that thing so   what we're going to do we're going to do that in  um don't need that we're going to do that here   inside the safe show and where we're going  to put that didn't really matter where we   put it here we'll put it um here when i put it  over here we're going to put it right in here   we can say inside of this  p tag i guess we want here   let's pat it right here so let's give it a p  tag and we're going to use a i outline close   yeah close just like that and this is another  react icon so let's go up here and just import   ai outline close from react icons do you  remember what we're supposed to add right here   ai it's correct here we go ai directory perfect so   of course it's going to throw some more errors  oh we're good so there's a little x you can   kind of see it down there so let's style  this thing um basically we want this to be class name right we want this to be absolute okay  text ray 300 and then we're also going to say   top four and right four so we should see our x  up there boom there we go perfect that's what   we want you guys now almost done dude we're  about to wrap this up so let's give this   some a delete functionality here so on this p  tag we're going to have an on click okay and in   here we're actually going to have um i'm going to  pass something through here an arrow function okay   so we're going to say go and in here  we want to delete show with the past   id like that that's what we want right there so  i will say item id we are going to use a pass   id but item dot d like that then up here let's  actually create our function the delete show   function and we're going to put that right here  just in there and what we're going to have we   want to have a movie reference right so movie  const movie ref okay and in here it's going to be   doc there we go doc and this  is going to be uh db okay then we're gonna have users and then our backticks  here so we'll use our optional training   and this is say user.email not now be sure we add our optional chaining in  there and and uh that looks good there okay and   next we're gonna have a use of or sorry our our  delete show function so we're gonna say const   delete show okay and this is going  to be an asynchronous function async   and this is going to take in the past id now now inside our function what we're going to  do we're going to have our try catch block okay   so try catch error there we go on console.log  error go now inside here what we want so   firebase is a little difficult right when  we delete objects in here out of an array   so basically what we have to do we have to  do this on the client side so we have to   basically remove it from our state on the  client side and then push it back to firebase   the updated array without the id so that's why  we did that past id down here in our um on our   delete whenever we click the delete button so  what we want to say and we're going to put this   in a result right so const you can call this  whatever you want here const result is equal   to movies dot filter okay and we want the item  the arrow function and we're gonna say item id past id then what we're going to say is a wait   wait if we can spell it right now we're doing  update doc okay and what we're saying is update   doc movie ref okay movie ref and then  we're gonna say saved shows to the result   so let's see hopefully we get this correctly  let's refresh make sure we don't have any errors   cannot read properties of map  save shows what's going on here   okay yeah i know what that was everything's  working we click this it should delete our show   yes and let's just have a look at our database  here and we have one last show we're logged in as   joe here so sonic the hedgehog and that's what we  see here let's delete that and as you can see boom   it is gone so let's wrap this thing up and let  me just explain that one more time for you guys   so like i was saying firebase won't let us just  delete an item out of the array on on the server   side so what it wants us to do is just handle it  on the client side so just to reiterate what we   did there down here on our function the delete  show function we're passing it in an id okay so   that's what we're passing in on our function now  on our actual function right here the delete show   what we're saying is we're taking the past id and  what this constant is this result we're saying   movies.filter and what filter does is basically  it takes your array it creates a new one minus   uh what you don't want in there what you set  the rules for and what we don't want in there   is this past id right there so and that's what  we're showing as the result in here so we're   just removing that id out of our result and then  just pushing it back to firebase so that's how   that is working right there and uh i apologize my  my my video cut out my phone cut out is recording   with my phone so i apologies so we're gonna have  to finish the build with just the mic here without   a video but that's all right cause we're about  done with this thing we have actually finished   you did awesome smash that like button if you like  what you did today if you got some value out of it   i'd appreciate it also consider subscribing to  my channel i'm going to be putting out some more   content just like this but let's go ahead and get  this thing deployed um and we'll get this thing   finished up so we're going to do this in the  cli here so i'm going to be using firebase cli   so what you need to do if you haven't already  we're going to install the firebase cli tools   so the way we do that i'm not sure if you can just  use yarn for that i'm going to use npm i this is   actually i'm installing it globally i'm on a mac  here globally and we're going to say firebase dash   tools there we go perfect and that's  what we need to do right there all right so next um after that is done installing  we're going gonna want to run the firebase init   and this is probably taking a minute since  we're recording here it should be pretty   quick it's probably gonna be a lot quicker  on your side so and we're like i said we're   not gonna be using anything in here we're just  using the console in order to host this thing so   all right now that that is finished what  we want to do next is run the firebase   login okay and let's see here already logged in  perfect now what we can do now is firebase init   initialize firebase and what we want to  do we want to come down here to hosting   that's what we want to do hosting configure files  for firebase hosting i'm going to make this just   a little bit bigger there and what we want to  do i selected the spacebar to select that what   we're going to do is use an existing project okay  and then we're going to use this netflix react   youtube that's our project we're working out  of and real quick here we want this to be the   build folder so pay special attention to that make  sure you type build here for our public directory   figure yes and we'll just say no for  now okay so next what we want to do   is type we're going to use a yarn run build  and go ahead and press enter and what this   is going to do is build out our project  it's going to create this build folder   and basically it compiles our react application  and puts it into this build folder a bunch of code   that you're not going to be able to read so that's  what that's doing right now and once that finishes   what we're going to do is just deploy this to  firebase and i'll show you how quick that is looks like it's almost done here everything  goes down a little bit slower whenever   you're recording at the same time so boom there  we go awesome so now we have now we just need to   deploy it and we're going to say firebase deploy  just like that and it is going uploading there   it goes boom that is it you guys check this  out we're going to have a look what this is   hey there you go check it out our live hosted  very own netflix right there smash that like   button you guys i hope you liked it let's go ahead  and sign up here create a new user i'm gonna say   what's this guy's name tim gmail.com and his  password is going to be password and just   again here let's check this out there's no tim in  here refresh make sure and we want to log in just   in case you think we didn't do it here so sign in  boom there we go and let's go ahead and save some   save some shows for tim here boom north man  batman there we go let's see it let's see   it boom there it is and inside tim there  we go you have his save save shows there   all right you guys smash that like button  thanks for following along i hope you enjoyed it   um if you if you into reacts into programming  consider subscribing to my channel i'm going to be   pumping out some more react videos so thanks a lot  for watching you guys i'll see you on the next one

Channel: Code Commerce

Views: 128,301

Keywords:

Id: ATz8wg6sg30

Length: 140min 16sec (8416 seconds)

Published: Sat May 07 2022