🔴 Let's build Netflix 2.0 with REACT.JS! (Stripe Checkout & Webhooks, Redux, Firestore, Google Auth)

yo what is going on guys welcome to the Netflix 2.0 build today we're going to be building the incredible Netflix clone in just four hours get ready let's dive straight into today's features so in today's build we're gonna build a beautiful UI and ux just like Netflix it's gonna pull all this information in from a tmdb database you're going to be able to log in and log out using Google authentication and then to top things off we're actually going to go ahead and connect the stripe payment processor to our app we're also going to allow users to have a monthly recurring subscription this is going to be powered by the platform strike we're also going to use the firestore database provided by Firebase and in particular we're actually going to be using the stripe extension to automatically keep track of user subscriptions and their records in the database so what tech is involved in today's build you're going to be polishing and mastering your react.js skills you're going to get tons and tons of CSS experience in today's video especially especially with the BAM naming Convention as we build a beautiful UI and ux experience you're going to learn about State management using the production ready redox toolkit we're going to authenticate payments with the striped Payment Processing platform we're going to be handling authentication through the Firebase authentication API and finally to pull in all of our beautiful movie information and data we're going to be using the tmdb API and database to go ahead and populate our screen with the stuff that we need once you've built out this beautiful Netflix app you're going to learn how to deploy it using Firebase hosting this is a perfect solution for any react.js app that has Firebase as a backend without further Ado make sure to like the video subscribe if you want to see more videos just like this and enjoy the build let's jump straight into it let's go guys I am so goddamn pump are you guys ready for this let's have a look at you guys we got a sign in screen everything was perfectly just like Netflix completely responsive everything's great over on this side let's go ahead and sign in we've got the full Netflix app I'll show you that in just a sec let's go ahead we've got the full Netflix app crazy stuff and never seen before we have Netflix payments so I'm gonna go ahead and click subscribe check this out guys check this out full stripe Payment Processing [Music] this is using the latest the greatest the best stripe integration with Firebase is a brand new extension and guys I'm gonna teach you how to use it all inside of this build gonna be absolutely crazy this is what we're going to be building right we're building Netflix with react but we're not just doing the standard stuff guys we're gonna literally cover with covering Stripe Right Now stripe and and Firebase if you didn't know they just released so this is like brand new stuff guys they just released a crazy good um extension now that allows you to connect these two really easily right so it's not even uh it's not even a lot of work to do but it allows you to process payments and manage all of the subscription data in stripe so we're already gonna do some crazy damage over there you know that guys right if you haven't already seen Redux right so we're covering Redux so if you're interested in learning about Redux and you're in the right place okay and then we have react okay we have a react and let's build the Netflix app let's do this guys okay right we're using Redux so the first thing we're going to do right CD into a place that we want to put our stuff so I'm going to put mine inside of my build folder and then I'm going to go ahead and say MPX create react app okay so create react app this is a tool given to us to allow us to set up an app right so we need to give it a name here we're going to say Netflix build and let's just say YouTube right it's because I'm doing it for the YouTube right so create racked up it's a it's a very powerful command line tool right and it allows us to go ahead and set up a react app very simply just from the command line okay so we're going to run this and then what we're going to do is we're going to say dash dash template right dash dash template and then after that we're going to type in Redux okay so this command is extremely important now what this is going to do is it's going to set up a app called Netflix build YouTube with a template and it's going to be the Redux template okay so we need to do this okay so go ahead hit enter and this will start setting up your app in the meantime what we need to do open up Chrome so I'm going to go ahead open up Chrome and I'm going to go ahead and drop in to Firebase so let's go to Firebase and then once you're over on Firebase you want to make sure you're in your correct account so I'm going to go into my team account does this work on Windows yes it is going to be on Windows do not worry right let's go go ahead and go to console at the top right and then what I want you to do is go ahead and add a project okay so here you want to type in the Netflix clone YouTube okay Netflix go on YouTube now what we want to do is we're going to go over to continue okay perfect we're going to continue and then for the analytics we're going to hit no okay so in this case I mean it's up to you guys I'm not really too fast with the uh with the analytics first one but you want them go ahead and do that okay so you want to go ahead and create that now while this is loading we're going to go ahead and go to our desktop right we're going to go back over here and see it's still in it's still setting up the template okay so this song this can take some time sometimes so just give it you know be a bit patient and it doesn't matter by the way if you're using yarn or npm it's gonna work okay but make sure whatever you're using you stick with it so now I'm going to go ahead and say CD into our the app that we just built okay so CD build YouTube nice gonna go inside now what you're gonna do is type in so I'm using Code insiders but if you want to use the all you need to do is download vs code so you remember as I said guys vs code right and once you're inside a vs code you go ahead and set up a code extension I'll show you how to do that but what you can do is then you can go ahead and say code dot yours is just going to be code dot Mine is codeinsiders dot so we're going to open this up all right now if you don't have that code inside this or if you don't have code dot then all you need to do is command shift p and then type in install and then you for you it would say install code insiders command in path okay so you need to do that and then that will give you the ability to open things up just like I have right here okay once we're at this point what we're going to do is go ahead and check out the file structure so I'm going to make this a little bit bigger for you guys so you guys can see what's going on okay so I'm going to close this out this should be pretty good for you guys to see right now okay so what we're going to do now is we're going to go ahead and head back over to our Firebase project we're going to click continue and then we're going to go ahead and move this over so make our workspace quite neat nice then over here at the top we're going to click this Cog icon click on Project settings at the top okay perfect go down here go ahead and this is where we go ahead and get the credentials for our application okay we're gonna click it then it says register your app so over here all we need to do is type in Netflix I'm going to type in Netflix clone YouTube setup Firebase hosting yes because we want to deploy this app afterwards then we're going to click on register the app perfect [Music] so now what we're going to do is Click next we don't need to care about this for this one you do need to run this but you're probably going to have to write sudo in front of this you'd write sudo npm install G Firebase tools okay and that's going to allow you to install the Firebase tools into the CLI Okay click continue and then we'll do these steps after we do and click on continue to console and go ahead and click can config perfect right so now what we're going to do is copy this config copy it go back to our code I'm going to go next to app.js and I'm going to click the little plus icon and I'm going to type in Firebase dot Js perfect I'm going to go ahead and paste in that config and we're going to use that later on all right so we're going to use that later on the next thing we're going to do right is at that point we can we can pause that for the Firebase stuff we're going to come back here and there's a few things we want to do you want to delete app.test.js delete logo.svg and we want to delete setup tests.js we're going to go ahead and we're going to delete those files now hopefully my computer doesn't freeze it always has a way of freezing when this happens so for me I get this little spinner so we're going to give it just a sec while it goes ahead and cleans itself up okay so it's probably gonna freeze up here but in the meantime what we're gonna do go ahead and go over to Cloud firestore on the left hand side click it and we're going to be using the database at some point so I'll go ahead and show you what's happening actually we're not gonna we're gonna just go ahead and click on authentication sorry authentication and we're going to enable our authentication while we wait for vs code to get started when we click on get started over here and then over at this point what you want to do is type on the click on the email and password saying and then click on enable right and then save so now we've enabled email on password um authentication inside of our project right so this again I'm stuck on the loading screen of death but in the meantime what we can do is let's go ahead and have a look at what we're going to be using for today's build okay so we need to go to IMDb I am no tmdb sorry tmdb okay now this is what we're going to be using to go ahead and get the film information for our Netflix build okay all right so why am I have to force that to restart itself to be fair all right so I'm going to go ahead and force that to restart my vs code is just freaking out today I guess I can't handle it so I'm going to go ahead and force quit vs code right so I'm going to go ahead and open up the builds so that way we can go ahead and get past this so let's go ahead and firstly we're going to do code insiders dot so code insiders dot so we're going to open up this folder and then this time you know what I'm just going to leave the Aptoide tester.js file but for you guys I guess you I want you to delete those files you don't necessarily need them I'm just going to Liam because I'm not going to delete him today but you know my computer is being a bit of a bit annoying about that right so what you want to do at this point is go ahead and delete this line you don't want the counter inside the app.js you don't want the logo in here and everything from header downwards we're going to go ahead and delete okay so we're going to delete all of this and I'm going to say H1 and then I'm going to go ahead and said let's build Netflix right so let's go ahead and build Netflix so at this point I'm going to change this to a lowercase a because we are going to be using the BAM naming convention okay so perfect and then inside of features right over here what you want to do now is actually go ahead and we're gonna delete this photo right but again I'm kind of worried that it's going to freak out I'm going to click on counter and we don't actually want counter we don't actually care about counter module but I care about the counter nice okay so I'm going to grab the counter size and drag it to features that way it goes outside of that photo okay and type in yarn start okay yarn start now what we do here enter and this will go ahead and run our application okay now we're gonna for a sec and then this will come up and it should say let's build if we did everything all right okay so I'm gonna go ahead and start this app up now I have app I have Netflix running on a local Port I think or unless I've got rid of that one let me go ahead and actually pull this up right so we're gonna go ahead and get rid of that and then it says compiled successfully so now we go over to our Local Host three thousand so we're here what we're going to do everything is working perfectly now what we're going to do is we're going to first start off app.js okay so over at app.js over here we're going to go ahead drop this down and we're going to create the home screen first okay so we're going to go ahead and create the home screen right now we have the home screen over here so the first thing that we're going to do is create this component okay so I'm going to go to this plus button at the top and type in the home screen dot JS okay perfect now we have this up and running now for app.js we're going to go ahead and get rid of the let's go Netflix because we don't want that anymore we don't really care about that and then what we're going to go ahead and do rfce to create your home screen component and we're going to go ahead and click on the class name okay so the class name is going to say home screen and we're going to go ahead and we're going to create an appropriate home screen.css file okay so home screen dot CSS file okay just like this okay so we're going to go ahead and import this inside this box we're going to say import and here we'll go ahead and say dot four slash home screen dot CSS save okay this will pull in the CSS from the appropriate file so now we're basically where we want to be let's think about Netflix right at the top we have a navbar right we have a nav bar at the top and then let's think about we have the banner that we need to create and then we just have a bunch of different rows okay so we have a bunch of different rows they get rendered on the screen okay so this is how it essentially is going to work let's build out the lab bar okay so the first thing we're going to do is go ahead and create a component so we're going to create a component called nav.js okay this is going to represent in that bar at the top of the screen again so uh we're going to do rfce and this will pull up the nav bar and then here we're going to go ahead and say class name equals not perfect all right everything should be perfect on that front and then what we're going to do is go ahead and open up a CSS right so CSS so a nav.css file perfect right and then here I'm going to say import and then I'm going to say nav dot CSS nav dot CSS perfect right so now we have our nav CSS styling and everything's perfect right so over here we're going to have the nav bar and this is going to be responsible for the top area of the portion okay so now at the home screen we're going to go ahead and first you want to render this on the screen so let's go over here and let's import this into our file save and then we go ahead and refresh right so we should have a blank screen right now which is perfect because we have only a navbar inside but we need okay so it's called nav like so now we're going to go ahead and import the nav perfect let's just say this is the nav okay so this is the nav and then that's what we're gonna that's we're gonna start from okay I mean it doesn't look that great right now but we'll go ahead and make it look perfect and the first thing that we're going to do is go ahead and set this out so I want to do a few things here I want to go ahead and firstly have a picture in the nav bar so we're gonna have an image tag right and then also going to have the Avatar itself okay so I'm gonna go ahead and have the image let me go ahead and pull this up a bit more easier so I can see it yeah so we've got the image over here so I'm just going to go ahead and I've got a Netflix image here for some reason I don't think that Netflix image is actually valid anymore but we'll see if it says let's go ahead and refresh if this is the Netflix image okay so it's not actually that we need a Netflix image okay so we're gonna go to Netflix and we're going to type logo and we're just going to go ahead and grab a Netflix logo uh hopefully a transparent one would do the trick perfectly or a black one we can go ahead and do this possibly and then I'm going to go ahead and copy the image address and first you just want to make sure that it's an actual PNG there we go perfect okay so I'm going to use this one as my reference for the Netflix logo right save it and let's just go ahead and give this a try firstly okay so I'm going to go back here perfect okay so we have Netflix up hey it's all working yeah all right so everything is good bye um so we have Netflix up and running um so now what we're going to do is have a second image and this is going to represent the Avatar okay so at the top of the screen we're going to get I've got a picture of an avatar over here and then we've got this one over there so guys you can go ahead and literally use any Netflix picture and it'll work the same so I've got an avatar link over here for a picture you guys can go ahead and pause the video you can pretty much copy that out if you want to uh but here we're going to give it a class name of nav underscore logo okay and then a second class name over here of nav underscore Avatar right Avatar like to save it and perfect everything works really good so far okay so we're going to go back over here and now we should be able to style these appropriately when we need to okay so first thing I want to also do is I want to have a surrounding div around this area right so I'm going to go ahead and say div Dot and I'm going to say nav underscore contents and this is the BAM naming convention okay so we're going to go ahead grab the image tags like so pop it into nav contents and save okay so now we go ahead and save and then we go ahead and hit refresh perfect and it's working all right so make sure you just you know at regular into intervals you go ahead and you have this working and as you need it right so we're going to go ahead and open up nav.css I'm just going to pop this to the side over here right so let's start this out a little bit let's get this looking a lot more like the Netflix app okay so what I'm going to do is I'm going to pop this on the right hand side and the first thing that I want to do is actually fix this sort of styles right so this is huge right now we don't want it that big okay we don't want it that big so on the left hand side I'm going to go ahead and firstly make a nav content so this container right here I'm going to give that a flex okay so it's going to be a flex and I'm going to justify the content to be spaced between now you can see it's done this kind of janky weird Behavior right so it's not perfect at this point there's nowhere near perfect but we're gonna get there right we're going to go ahead and get there right so at this point what we're going to do is we're going to go ahead and uh we're gonna get the logo right the logo is way too big right now so I'm gonna install the logo and for the logo I'm actually going to do a little trick here I'm going to say the position is actually going to be fixed okay this is a position is going to be fixed right and it's going to be to the right 20 pixels now what I'm going to do is make this a little bit easier for you guys to see something so I'm going to go ahead and pop this to the left hand side and I'll pop my nav underneath and I'll go ahead and get the code and pop this on the right hand side on off on our page okay so give me one sec let me go ahead and Chuck this in here and now you guys can see as we're coding how everything look and feels okay so let me go ahead and pull this up nice so now you can see the logo is a bit strange right now right it doesn't look quite Okay so we've got some weird stuff happening right now and this is definitely not what we want as our result okay so the way we do it is we go ahead and we say our nav logo to be fixed and it's going to be a left of zero sorry left of zero this one is what we want and that's going to flip it over there and you can see right now it's hidden because the Avatar picture is behind the logo okay so the first thing I want to do to fix that is Target the Avatar so Target this Avatar over here so now I've underscore Avatar and then I'm gonna go ahead and say all right so we've got a position fixed and then we've got right and I don't want it to touch aside so if I do zero it's going to touch the side but 20 pixels will make it slightly a little bit out right it'll just make it slightly a little bit out from the side okay now what we're going to do here is actually give it a width and height of 30 pixels okay so width and height of 30 pixels okay so width and a height of 30 pixels I'm going to hit save now you can see whoa that's actually too small that's tiny right now so that's not exactly the one I wanted um so I'm going to go ahead and oh sorry it's correct it's correct it is actually correct it's because I'm zoomed out right now so I need to make sure we're back in at 100 there we go perfect so you can see it's actually right up there right that's actually what we wanted and the Netflix right now is just too big okay so for here this one we're gonna say it has a width of 80 pixels okay now you can see that's perfect it's gone to the top right hand corner okay so I'm going to zoom in a little bit so you guys can see this all right so now when we have this at the top of the screen what we're going to do is we're going to do object that contain padding left of 20 pixels and I'm going to make it a cursor pointer because right now if I hover over this guys it doesn't show the cursor as a pointer okay so if I go ahead and do that now you can see now it no longer touches the side but I also get this nice little Casa pointer as I go over which indicates that if something is going to be clickable okay so what we're going to do on the right hand side is very similar we're going to give that cursor pointer as well okay so at the top I'm going to say casa pointer like so and it's a position fixed and we've already done this correctly and everything looks pretty good at that point okay so now if I go ahead and hover over this one I get the little finger to represent the pointer cursor okay that's exactly what we wanted to be in the place that we want to get okay perfect this is nice right so you can do you can change this up as much as you want honestly uh if you want to go ahead there's many ways to write this stuff um but you guys can feel free to do it as you please all right so at this point what we're going to do is I'm going to go ahead and give the background a black color okay I'm going to give the background a black color and what I actually want to do is if you see over here right now this one's kind of messed up but what we actually want is we actually want a transparent Netflix logo for for a reason I'll show you so I'm going to actually grab a different next Netflix Netflix logo and it's going to be a transparent one and the reason why I'll show you in just a sec I'm going to write Netflix logo transparent and here you can see if you click it and it has the little boxes behind it that's golden right so I'm going to click copy image address I'm just going to check that that's actually a PNG perfect it is and then I'm going to go back to our code there you go so this is the new Netflix logo all right so I'm going to go ahead and drop this one over here and there you go and now we should if we refresh have a different Netflix I'll go perfect okay so now what we're going to do is we're going to have at the top right where we have the header sort of at the top of the page what we're going to do is we're actually going to add an additional class called nav black okay and I'll show you why we have this one right so for now black I'm actually going to go ahead and install and do not black and give it a background color and this is the Netflix black okay so if we go ahead and do that and I go ahead and save this one and refresh let's go ahead and see and we should see at this point so right now it's not actually come through so we need to double check what has changed here so we've got another black at the top and then we've got our style inside okay so at the top of the nav let's go ahead and firstly style out the nav and then we can go ahead and do it because there's a reason why this isn't happening because we have fixed elements we need to say nav there we go and we're going to say here position is fixed for the Navigator it's going to be fixed at the top so we can say fixed at the top I'm going to say top of zero okay perfect and then here we're going to say it's got padding of 20 pixels right I'm going to give it a width of 100 okay perfect so I'm going to go ahead and say width of 100 and you can see if I save it you see what's happened here guys right so everything looks almost right almost right and then we're going to say height of 30 pixels so we're going to restrict the height here and then we're going to go ahead and say this has a z index of 100 and I'll show you why that is actually important options we can use one for now that's fine okay now we are going to have some animations on this where it shows where it reveals and then it disappears okay the way that we do this is we go ahead and we're going to use these lines of code right here we're going to have animations right it's going to say transition timing function ease in and transition for all of the elements 0.5 seconds okay that's how we get that nice effect if you go ahead and smash the thumbs up button it's going to help this video get out to so many more people okay so let's go ahead and go back and you guys can see at full full size it looks pretty damn good okay now the Netflix logo we just need a slight adjustment on that so for the Netflix logo I'm going to go ahead and actually change the position here to say um let's just go ahead and maybe reduce the padding to 10 pixels let's go ahead and see no we still want 20 pixels but you can see there's an animation to that right now it's actually pretty good but for now we'll keep it as this and we'll go ahead and fix it afterwards okay so this looks pretty good but why actually one is when it Scrolls down on the page I want that to show and disappear so I'm going to show you guys how that is I'm going to say position top of zero and I'll show you what happens there so if we do top of zero we can go down maybe 20 pixels let's have a look and up so it's too much 10 pixels might be The Sweet Spot here Perfect Right 10 pixels and there we go Netflix is at the top okay so it looks really really nice so at this point what we're going to do is we're going to go ahead and have the show and hide functionality okay so the way we do that is inside the home screen what I'm going to do just for testing purposes is I have a H1 that just says uh let's just say test right here right and the reason why I'm doing right here is I'm just going to spam this out right and save it now check this out if we go ahead and refresh so now the reason why I've done this is because I want to have this I want to have a scrollable container right the reason why I've done this is because I want it so that now if I go past the certain point in the page it's going to go ahead and have um it's going to go ahead and disappear right I want to sort of make that top disappear after you scroll down okay so after we go ahead and scroll down then it's going to go into that um but what we're going to do now at the top is where we have the nav black right so what we have nav black over here at the top of our nav.js just clicking so where we have nav dot JS uh we're going to go to the top and we're actually going to use something called uh the we're going to use a user effect but it's actually going to use something called an event listener right and what we're going to listen to is when we scroll on the screen okay so what I'm going to do here is I'm actually going to have a piece of state so I'm going to go to the top of our nav and I'm going to just close the nav bar for a sec and I'm going to say const so let's go ahead and say const oops let's go ahead and say const and then here I'm going to say show and then here I'm going to say handle show okay so handle show like so then we'll say equals use State all right now here it's going to be a default value of false okay so then we're going to go ahead and create a function called transition navbar okay it's going to be the transition for the nav bar right and now here what we're going to say is we're going to say if the window right the window scroll y so the vertical scroll height is greater than a hundred so you imagine if you've scrolled more than a hundred right so if you've scored more than 100 on your screen then we're going to go ahead and say handle show and we're going to say sure okay so we're going to say then you should show the nav bar you're going to show the black bit of the nav bar right else we're going to say handle show false right and this is going to be representative the representative for the black bit over here what is you say can you please explain once you say is essentially the easy way of defining our variables inside of react okay so if you're ever using a variable inside of react you're most likely going to be initializing it with the use State hook right this is how react knows when to re-render accordingly okay so that's what we use it for the use State hook okay now that we have that in place we have the transition navbot function we're going to go ahead and create a user effect now use effect is a very handy react hook and it takes a function right so this is our function inside now it also takes a second argument and if we give it the empty dependency brackets right if you want to know more about this we do cover inside the course but for now what I'm just going to say is this will means that the code will only run when the component mounts okay okay so here what I'm going to say is window dot add event listener okay so I'm going to go down to add event list now and I'm going to type in scroll right now what this means is okay every time we scroll we're going to listen to that event right I'm actually going to trigger off the function that we just wrote called transition okay so as we scroll it's going to go ahead and add in the following so what I'm going to do here is I'm actually going to make this slightly bigger and this slightly smaller so here we go as we scroll it's going to go ahead and Trigger the transition navbar okay so this is what we're going to do and then also what we're going to say is we're going to have a cleanup function which says return so inside of a use effect you can clean up some stuff so in this case when the component mounts we want to go ahead and actually have the uh we want to attach this transition That by The Listener to when the user Scrolls on the page but we need to clean it up as well so here we say window dot remove event list now and then we say scroll and then we do comma and you just pass in the same function okay so it's going to remove that function being attached to this now right then we hit save and it works pretty good okay so that looks pretty okay at this point but we're not using the variable so we're going to go ahead and also import the appropriate things so we now you don't always need the cleanup but it's a good practice to do it especially when you're attaching listeners if you do want to see examples of that I actually go in uh quite in quite good detail inside the zero to full stack here of course okay so then what we're going to do is we're also going to go to the user fact and I'm going to go ahead and import the user Factor hook okay so again I don't know why my code everything's just going against me today right use effect there we go I'm going to go ahead and hit save perfect okay so you say it's not defined it is defined so we can go ahead and refresh right so we need to use this show variable okay show variable over here so we're going to go ahead and now what we're going to say is okay only add the nav black Styles which actually gave this sort of black background when we have that right so now we're going to need string interpolation so over here I'm going to go ahead and get back ticks instead okay so this is going to be back ticks like so and then what we're going to do is change this to go ahead and say um exclamation so we're going to have our little interpolation and here I'm going to say only render the nav black class if the show variable is true okay so this is saying only add the nav black class if the show variable is true so let me go ahead and hit save okay now check this out right look at this nice like look at that guys so as we scroll down it's then as we scroll up look at that it only comes down after a certain point now why is that going to look so good because imagine guys when we have the banner and everything up there it's going to look crisp right it's gonna look really crisp that when you scroll down it will go ahead and it will change to um not have the overall black bar in front of it okay so it's a really nice little trick that you can apply and the cleanup function means that it doesn't you know it doesn't get very uh annoying right now we're going to do is go back to the home screen and I'm going to go ahead and delete these little test markers right so we've already already finished our stuff so we can go ahead and get rid of that for now we're going to hit save okay perfect hit refresh and there we go right the reason why I had it before is because if I didn't have that sort of overflow with the text you wouldn't be able to test that out right so I want to be able to test it and see it the next thing we're going to do is build the banner okay so let's go ahead and have some fun with the banner right so we're going to go ahead and create the banner component so Banner like so and I need to go ahead and get rid of this command so let's go ahead and get rid of this save and I'm going to go ahead and create Banner dot JS banner.js right and I'm going to do rfce and then we're going to go ahead and save right so let's go ahead and save let's go ahead and go to create a banner.css file so banner.css and there we go nice all right and let's go ahead and import banner.css and then do that right save perfect now what we're going to do is go over to our home screen and make sure that the import is correct otherwise that messes up so let's go ahead and hit save and then refresh there we go perfect so you should get to this screen if everything is good right so remember just take your time break this down and everything is going to be okay right so for the banner what we're gonna do is we actually need a backdrop image right we need some kind of image to go ahead and show sort of like uh on the front screen right so for now what I'm going to do is go ahead and get a dummy image until we go ahead and hook up the back end so I'm going to say let's just type in Netflix uh let's just see Netflix Banner image let's go ahead and try and find something let's maybe use um let's go ahead and actually say just use this one for now right let's use this I guess all right so I'm going to do copy image address and this might be a little bit blurry but it's fine right so we're going to go ahead and pass this over here perfect okay now what we're going to do is jump into our Banner right we're going to go ahead inside of here and I'm going to go ahead and add an image okay but we're not going to just do a typical image right the first thing is I'm actually going to make use of the uh header uh sort of class so I'm going to make sure it's actually a header so I'm going to show you something new today with that right we're giving it a class name banner and what I'm actually going to do is I'm going to do an inline style okay and there's a reason why I'm doing an inline style and I'll show you afterwards but this takes an object okay this takes an object to go ahead and do that right and then what we're going to say is background right and then I say image right background image and this will take we need to do some concatenation and here I need to say URL right now I see a lot of people asking about the Snippets if you want those beautiful Snippets you need to go to the extensions and type in es7 react Redux says these Snippets over here if you want to do rfce and all of those neat little tricks okay so now what we're going to do is we're going to go ahead and add URL okay and then inside of here I'm going to go ahead and pop in the URL that we have over here and then I'm gonna and the reason why I've done interpolation is because I will be replacing that soon with the correct image okay now I'm going to pass in the background size cover over here perfect hit save and let's just see how this looks a little bit at the beginning right so if I go ahead and refresh nothing is actually coming up at this point now let's just double check the home screen we are rendering perfect okay so everything is kind of coming in and then we've got this over here so the URL it seems okay at this point let's make this actually sort of proper quotes instead and then I'm also going to go ahead and say that the background position should be Center Center okay let's go ahead and do that and hit refresh right now I'm going to go ahead and jump into our banner.css so what we're going to do is I'm going to go again ahead and give this a height right so I'm going to say Banner so Banner and here I'm going to say height of 448 pixels and there you can see guys we have the banner right now this isn't actually the easiest Banner to see but it's going to be the banner right and then what we're going to do is we're going to say this has a position of relative because we are going to have some nice little elements inside of this and then I'm going to say object fit contains so that way it doesn't stretch regardless of what we have inside and I'm also going to give the text inside a color of white okay so every time we do object fit contain it means that if we have a bigger image in here and it changes its size then we'll go ahead and it will keep the aspect ratio but you guys can see that look how nice that is right so it goes ahead and the center Center you can see over here is making sure that it stays Central right so this is how we get that nice little effect okay so that looks pretty good at this point in time right so we're going to keep it there for now all right and then what I'm gonna say is we're gonna go down and we're gonna go inside of the header right so inside of the header now what we're actually going to have is a div called Banner contents okay so we're gonna go ahead and add a tip is gonna have Banner Banner contents okay so I'm going to go ahead and say Banner contents now inside of here I'm gonna have a H1 and this is going to represent the banner title so I'm going to do Emma I'm going to say H1 Banner underscore title right and I'm going to go here and then oh my ma is being a bit weird there we go find a title and this is going to represent the movie name okay so this will be the movie name and if we go ahead and hit refresh we're not actually going to see this right now because it probably oh yeah okay it has yeah it's jumped on top of it at the top there you see that right so it's at the top over there because we have movie name at the top and we're going to go ahead and fix all the styling in just a sec all right then what we're going to do is we're going to have some of the buttons okay so for the buttons I'm gonna have the following I'm going to have a div and inside the div I'm going to have Banner underscore buttons right so it's two underscores because of them Banner buttons right so I'm going to add a button over here and one button is going to say play right and we're gonna have another button which is going to say add to my list twice it's just going to be my list because on Netflix that's how it looks okay we have like two buttons and they look pretty similar to that let's go ahead and refresh you can see play and my list at the top over there right so again this isn't looking that that great at the moment but this will be pretty pretty good okay so now what we're gonna do right I'm going to give both of these a class name I'm gonna get both of them a class name right I'm going to give the class name Banner button so it's singular not plural okay let's go ahead and Save and then we can go ahead and install this afterwards now we've got Banner buttons we've got this looking pretty good and the final thing that we would have is underneath the div here we're gonna have a H1 and it's going to be with the class name of banner description okay so it's going to be Banner description and here I'm going to say this is a test description and this will be with a film description goes okay so test description hit save so you can see this is what we look like right now with me it doesn't look the best right now right it doesn't look the best but we are going to get it there right so what we're going to do underneath this div we're going to have a little trick up Our Sleeve we're gonna have a div and then we're gonna say this div is going to have a banner right but it's actually going to have a modifier so in boom you do Dash Dash from modify we're going to say fade button all right so if you don't know what I'm talking about just go ahead and tune copy along right so you're going to make this a self-closing tag and this is going to give that uh that nice fade at the end of this right now we're going to make this start out right because right now it does not look the absolute best right now we do have this imaginary Gap at the top right here so in the beginning when we set everything up what we actually want to do is go into app.js app.css sorry and we want to delete everything inside of app.css right the second thing that we want to do is go into index.css and then we want to go to the top of index.cs add an Asterix and type in margin of zero okay and that gets rid of that top little Gap so um I can't actually seem to time out so there we go right uh so now we're going to go ahead and remove that yeah perfect nice so we're going to go ahead and install that section so the first thing we want to do is Banner contents right Banner content so the top thing that we're going to do is I'm going to pull Banner CSS under here because I think it's nice when you guys can see the CSS on the left and then the code on the right for the banner contents right so the first thing I'm going to do is I'm going to go down here and Target the banner contents right then I'm going to say let's give it a margin left margin left uh and then we're going to say 30 pixels okay save and then let's go ahead and save so now it's popped over to the left and I'm going to give it a padding top of 140 pixels okay so you can see it's popped into the middle now it's kind of hard to tell with this background so what I'm going to do is I'm actually going to get a let's just say a black um Banner let's just say Black Banner and we're just going to use this Banner for now and I'm going to go ahead and literally get a Black Banner so that you guys can see what's going on I'm going to copy the image make sure it's a PNG okay perfect so it's a PNG and what we're going to use here is I'm going to swap this image out with a black Banner for now okay so I'm gonna get rid of this and then if we go ahead and save there we go okay so that's a lot more easier for you guys to visually see as to what's going on okay so loads of on the Fly fixing here but we're we're gonna we're gonna make it work okay so the height here what I'm gonna do is go ahead and put in con random contents go ahead and paste the height right so let's go ahead and hit save on that and this is looking pretty good okay so far this is not looking bad right it's not looking bad right now what we're going to do is we're going to Target the banner title and we're going to do the following with the banner title we're going to go ahead and pass in a font size of three Ram font weight of 800 and a padding bottom of 0.3 Ram okay we're going to be deploying this app by the way with Firebase and then for the description I'm going to do a bunch of styling under there as well so right now the description over here is a bit too a bit too big to be honest right it's a bit too like Hefty so I'm going to go ahead and say Banner description with the 45 Ram line height of 1.3 because remember it's going to be like several lines in some cases padding top of one ram font size 0.8 Max width of 360 pixels and a height of 80 pixels okay so this will make it a lot smaller and then this looks a lot cleaner right so that's gonna that's what we're going to do here now for the button we're going to do a few things over here right so I'm going to go ahead and say firstly let's go ahead and fix this fade bottom right so what I did over here remember I added an empty div now this is a little CSS trick that you can incorporate into your projects right so whenever you have a div and you want to kind of add a little bit of a fade to the bottom of it you basically can put an empty div like so and you can Target the empty Dev right with the by getting it CSS selector like so and then what we do is we simply go ahead and give it firstly a height right so in this case I've given it the perfect height of 7.4 gram right I've calculated this before and that's the height of the imaginary uh div right and then we're going to give the background image a linear gradient okay so you guys can copy this out and it's simply a linear gradient right so so we're going to give it a background image this is a linear gradient gradient it's 180 degrees it's transfer it starts with a transparent background hence why it's going to be a fade right and at the top it's got like a 0.61 transparency so it's not fully there but it's going to be eventually that's the midpoint so it's going to be somewhat of a like a middle ground and then you've got black on the other side right so let's go ahead and save and you guys can see now it's very it's kind of subtle but you can see it added like a slight color there right I got a slight slight fade there and we're gonna use that in just a sec right it's going to be very important for what we decide to use next Okay so what we're going to do is we're going to go ahead and install those buttons because right now those buttons look a bit ugly right so we're going to go ahead and say Banner button right so under here we're going to say Banner button just go ahead and pop it in find a button and then we're gonna do the following so we're going to say firstly it's a cursor pointer color white outline none and we're going to give it a border of none now I want these buttons to be clean right so if we do that I mean right now we can't actually see the button right it looks kind of messy we haven't deployed the app just yet guys um just if you're wondering right next thing I'm going to do is give it a fun weight of 700 bottom radius of new 0.2 view width so it's going to use the viewer padding left padding white and a margin right okay so I'm going to go ahead and drop those in over here and save and you guys can see as we do that it starts to look a bit better right and then what I'm going to do is give a padding top a background color and a padding bottom right so there's a few different things that we're going to add here right and you can see immediately that final change with the background because I gave it this really nice netflix-like finish okay so again if you're new to development and you could you're not sure what where to go with this stuff all you need to do is follow along and everything will slowly get ingrained with pattern recognition right the final thing is that when I hover over this I want it to have a nice hover effect okay so what I'm going to do here is go ahead and Target Banner button and hover right so I'm going to do the hover selector which is a colon which means why not hover over the element I want to change the color of the text to Black on the background color to be a slight white and I want to transition that okay so the way I do that as I go ahead and I and I paste it and I say color background color and I've got a nice background color there and you guys can see that transition gives it that subtle color change right if I don't have the transition look what happens guys if I get rid of that can you see how immediate that is right it's a bit too like in your face Snappy it's not the nicest thing to look at right so what I'm going to do here is go ahead save and then go ahead and refresh and see look you guys can see now we get a nice subtle gradient right that's really really clean okay so if you guys think this is cool right now and you haven't already please I'll really appreciate you just smash that thumbs up button it will help the video got out to as many people um but yeah with that said now what we're going to do is I'm going to add in this nice truncate method okay so whenever we have for example the test description okay imagine the test description was so long all right imagine it was so so long so if I go in and paste this space spaces like it's super long right now right if I say that look what's gonna happen right it's just gonna look a bit weird right we're going to create a function which is going to truncate right truncate so this means that basically when the text is too long it will basically get rid of the remainder of the text and just put dot dot dot at the end of it okay so now what we're going to do here we're going to say function and I'm going to say truncate and then here it's going to be a function and again you can use Arrow functions or regular functions and and then we can go and do it somebody said why are you not using props you only use it when you need to use it guys don't use it just because it's there right this will take a string right the truncate we take a string and it'll take a n right and the N is going to represent the number of characters before you want to cut them off and you want to put the dot dot dot okay so here what do we want to do right this is actually a pretty quirky little function right and all we're going to do here is say this is the Ellipsis function so you can can use the Ellipsis function so this is basically a Ellipsis function I'm just showing you how you can do it we say return string right and the string might not be present so we go ahead and put an option on and we say length and the reason why it might not be there is because in very soon when we make an API call there might be a point when the string is undefined so we're going to protect ourselves before it gets to that point right so I'm going to go ahead and say string dot length and I'm going to say greater than the number right if it's gray and then for example if I pass in 150 here if it gets greater than 150 then I want to do this special function called substring right again you don't need to necessarily fully understand what this is happening but you guys can go ahead and check this out right let's say string dot substring right so substring string zero I'm going to say n minus one and I'll show you what this does in just a sec right and we basically say plus and then we do dot dot dot and basically what it will do is it will cut the string after it reaches that connect account and it'll just add dot dot dot otherwise if it's not greater than 150 so if this condition isn't satisfied then what we can do is just simply return the string okay so that will work really nice and what we can now say is we can go ahead and actually make this entire thing inside of our jsx and I can go ahead and say truncate right it's a truncate and I can pass this in as a string okay and then I can go ahead and close my parentheses and here what I can do is firstly let's go ahead and do backticks so that way it supports the uh line closing there we go and I'm going to go ahead and say 150 is my character limit NOW Watch What Happens guys if I go ahead and save check this out right so if we go ahead and refresh you guys can see after 150 characters it truncated right and you can increase that number over here and it will go ahead and allow for more text if the number is greater and allow for Less text if the number is less right so this is looking good um the next thing that we want to do now is we're actually going to go ahead and I think it's time to go ahead and fetch some of the movie data right so we're going to go ahead and fetch the movie there and we're going to first start off by pulling in the banner right we're going to pull it in the banner and everything's going to look pretty good right so the magic starts to happen at this point in time right so the first thing we're going to do is get tmdb so you guys want to go over to tmdb.com to get started right so literally type in tmdb inside of Google and you will see this the movie database you want to click on it so now what we're going to do is we're going to go ahead and go to the top right so you just need to make an account it's all free okay so you're going to go ahead create uh and where it says profile and settings right so I'm going to click it and I'm going to click on edit profile or actually I think it's in settings but let's go ahead and take settings for now all right so you just need to go ahead create an account and then you go down here to API now I'm not too fussed about hiding my API key today I was going to hide it but I think for this I'm not really not going to change it right so we're going to go ahead and click this API and then you've got a key over here right so this is the key that you want to go ahead and copy well I'm not super crazy about this so it's fine right so then what again is you want to make sure you copy that key and then they've got example requests right so you're going to copy this key and then what we're going to do is we're actually going to create a file called axios right so I'm going to go ahead and create a file called axios I'm going to close this out open up my code editor I'm going to go ahead and create a file called axios.js right and then inside of axios I'm going to say import axios from axios which means I now need to install axios right axios is essentially how it's a very good library for when you're making requests right you don't actually need it but it's really really nice it's a promise based library for when you're making requests to a server across the internet right so in this case we have our application so imagine over here this is from yesterday we have our application so this is our front end over here so imagine we had our front end and this is the Netflix app so imagine our Netflix app is over here right so this is Netflix and then we've got tmdb at the back end so imagine we've got the back end so back end sort of over here and this is going to be a server so imagine that this is a server right now love my drawings guys come on I'm a nice this is amazing right so we have the front end and then we have this over here now here I'm gonna have tmdb right and now how do we go and get some data from tmdb right we go ahead and we make a request right so this is basically the way we do this is tmdb provides something called an API right so we're going to have a make a request over here right now there are different types of requests there are get requests sell post requests and all sorts of things like that right but what the API essentially allows us to do it allows us to have some kind of communication what we're going to do is go ahead and basically say to tmdb give me some movies right give me the movies and tmdb is going to say yeah yeah sure here you go like here's here's what you need right so that looks pretty pretty good right and then I mean the drawing looks amazing come on give me some credit guys it looks pretty all right all right and then what we're gonna do is but remember in order to use this API right we actually need to use a secret key right so this is the key that we got inside of our account settings right so this will be like some kind of gibberish right so it's usually like some kind of gibberish right and we use that key to authenticate ourselves in those requests and that way it knows that okay that request actually came from Sunny uh it didn't come from let's say it didn't come from Ben or it didn't come from anyone else right we're going to go ahead and pull up the terminal we're going to open up a second terminal over here and then I'm gonna go and say yawn and then I'm going to say add and if you've got npm you just do npm install but I'm using yarn so it's a yarn add and I'm going to say axios right and if you are using npm you just say npm install axios this will go ahead and install axios into the uh into the project right so we're gonna we've installed it right here so that's perfect now what we're going to do is go ahead and actually initialize axios right so xcos has this really nice thing so what we can do is we can say const instance right and we can say axios dot create and what this does is whenever we make a request right we can actually already append the beginning URL so imagine rather than saying www.google.com every single time and then I have forward slash in the search term I can actually just add the google.com part into the instance of our axials request and then every time I basically make a request it always goes from Google right so that's going to really sort of be cool when we're doing this right so I'm going to go ahead and pop in in here and then I'm going to go ahead and say base URL okay so base URL and it's all capitals here so make sure you get that right now the base URL that we're going to use here is actually the TM and DB URL okay so it's going to be this one right here so you do need to copy this in the correct fashion so that's the API that we're going to basically be connecting to now once we go ahead and set that up and we're going to say export default instance okay so export default instance right this will allow us to use this outside we're going to export this and allow this outside so now what we're going to do is we're going to go over to our requests.js I'm going to create a file now called requests right and you're probably wondering oh my God so many files but this is going to allow us to fetch the information so simple right so now we're going to go ahead and create a request dot JS file okay I'm going to do a plural.js file okay and then what we're going to have over here is I'm going to have the API key so firstly I've got my API key right but typically what you would actually do is store this in a process the environment the API key so whatever we're going to go into these sort of hidden environment keys for now but what you're going to do is basically pop your API key that you get from tmdb so remember this key over here there's a copy app and pop it into a variable over here for now all right and again it's completely fine just for the sake of a demo to have it like this okay and then what we're going to do is we're going to go ahead and make a request a variable okay so there we go and then here basically we're going to add all the requests now I've already actually gone and created these requests and all you need to go ahead and do is basically copy this out as well right so these are all the different endpoints the TMD give us they give us back the different genres of uh of what we expect right so over here I'm going to make it a little bit bigger so you guys can see this uh and drop this out right so what we're going to do here is I'm going to have the following here so I'm going to say I'm going to copy this and I'm going to paste in here all right so as you guys can see let me go ahead and make this a little bit smaller so these are the different requests that will can be made and all it's doing is concatenating right it's concatenating the API key inside of the URL and remember because we already set up axios to start with this request essentially what it's doing is every time we make that request it'll basically go ahead and do something like this it will say this forward slash trending so we'll go ahead and then add this into it pop our API key into this and for this sake I'm just going to say ABC and then it will go ahead and add that in right so that will be our final request that goes over to tmdb so if I was to click this right now and open this in a browser you can see it says you have granted and validated oh yeah because I've given ABC if I gave it this one for example and then I go in ahead and click this link you guys will be able to see um that is that that's embedded but this is actually a correct case let me go ahead and pop this in here and it's most likely the request that how I've written it is most likely broken uh so let's go ahead and do this and save right so it's probably somewhere where I place it there but this is a definitely a correct key don't worry guys it works okay so all you're gonna have to do at that point is go ahead pop your API key and then you guys can paste this in so you can go ahead and use that inside in fact what I'm going to do is I'll go ahead and pass the course requests over here so I'm going to save it okay the next thing we're going to do is export this request we're going to export default requests so this will allow us to essentially go ahead and pull these requests in afterwards so we're going to hit save on that and it works pretty nice okay once you've got this up and running what we're going to now do is let's go to our Banner right let's go back to our banner and let's go ahead and pull some nice information into it okay so the first thing I'm going to do is prepare a piece of State in in our code and the reason being is because I want to basically fetch a movie from that tmdb database and I want to basically store it and then use it over here const movie so we're going to initialize a movie piece a movie variable here and we're gonna and it's gonna use the U State hook right we're going to initialize that value with an empty array to begin with okay so that looks pretty good so with that said now what we can do is we're going to use a use effect to go ahead and fetch to move the information right so I'm going to say use effect perfect and then I'm going to go ahead and this takes a function that we explained before and remember I only want to have an empty dependency array here so that way it only fires off this code when the banner component mounts right only fires it up once so use effect here and this is going to fetch the data so this is going to be an async function okay so we're going to make an async call here and then here we're going to say this is going to be a function called Fetch data right and this is going to go ahead and be responsible for fetching the movie that it's going to show on the banner image over here okay so we're going to do is we're going to say const request equals a weight and then I'm going to use axios right but be careful here guys because whenever you import axios now make sure you're not importing it from the global axios but instead our local axios file okay so make sure it's the local axios file and then here we're going to do is say await axios dot get and then you basically want to go ahead import the requests that we had previously written right over here so import the requests that were previously written over here you'll say request Dot and here I'm going to say you see how all of my requests came up right so I'm going to go ahead and get the Netflix originals let's go ahead and do that one to begin with right and then what I'm going to say is set the movie right so this will go ahead make the request and a request will come back here right so I'm going to set the movie to the following so here we've got set movie and then what I'm going to say is request.data dot results okay to request our data results and then what I'm going to do is I'm going to pick a random number okay so what I'm actually going to say here is I'm going to copy this line of code and what this line of code does is it basically says okay we want to basically generate a random number right which is going to be from zero all the way to the length of the results that come back okay so we're going to generate a random number all the way from so imagine there was like 100 videos that came back a number between 0 to 100 is going to get dropped right it's going to get put in there and then request updated the results it's going to go ahead and set the movie to that movie okay so we can go ahead and check this actually works the way we can do is we can say console.log movie right go ahead pull out the terminal and at this point what we can do is actually import our use effect and then what we're going to do is we're going to fetch the data after all right so we've made this internal function and here we're going to say fetch data like so okay and after because it's a request it's always a good practice even if you're not doing anything to say return the request right it's always a good way of doing it because it completely closes the promise chain and now if I go ahead and refresh you guys can see over here look at that it gave me the film right so if I were you can see this one is a monarch Monaco with a overview description if I go ahead and refresh you gave me a different film which was Jurassic world right so I'm a big fan of Jurassic Park so uh yeah it works Jurassic world right so what we're going to do now is uh we're going to go ahead and use this information inside of the backdrop okay so let's go down to the actual movie uh so where we're going to display the movie so where we've got the background image down here what we're going to go ahead and say is um where we have the URL I'm going to get rid of this for now right and what we actually have is tmdb actually use a like they have this default sort of starter for whenever we have whatever we want to get a picture off of their site okay so here I'm going to use this to begin with so this is essentially something that you can just literally type in which is which you need to type in right and it's going to be the beginning point for the request to get the correct image that we were after right so what we're going to do after that is I'm going to do some string interpolation and inside of here I'm going to say movie right so maybe this is going to be an optional because remember the movie in the beginning isn't going to be defined and then we're going to say it's actually going to be the backdrop path okay so it's backdrop python the reason being guys is it's actually going to relate to this one so you see the backdrop part is literally a string okay so if I make that a bit bigger it's literally just a string right it's a forward slash string so we have to append it to the end of this okay so if I go ahead and do backdrop Parts save and now what you'll see is nice look at that right so that's awesome look at that if we refresh boom we get a new image every time that's pretty cool all right let me know if you guys found that cool and smash the Thumbs Up Button if you did and uh let's keep going strong guys alright so that's absolutely incredible looking really really sweet all right so now what we're going to do is we're actually going to go ahead and use the remainder of this information to populate the rest of the screen right so for the title there are different possibilities because the movies come back in different sometimes they have fields which resemble the title and sometimes sometimes they have different fields um which which are kind of similar but they're not there yet right so for movie name what we're going to do here is actually get rid of the movie name I'm going to do my jsx and here I'm going to say it could even be the movie remember optional because it could be undefined movie title it could either be the movie name right or it could be the movie optional Again original name right so there's a few different variants that it could be but we're saying okay use any of these but in this precedent right so it's going to use title first if title doesn't exist name first and then if that doesn't exist um it's going to use original name right you guys can see if I save this point if I save this bit that we just added here if we save it now you should see the movie name as well so look stranger things there we go if we do that again Alice in Borderland again stranger things dark desire there we go Elite the mess you leave behind right it works perfectly right so now for this description right I don't want this long piece of text right I don't want that anymore now what I'm going to do is I'm going to say okay movie optional and it's going to be the overview that's why it comes back as and the movie overview now we should see that populate with the test description so now you guys can see look at that absolutely lovely look at that work perfect it changes as we go ahead and refresh right this is coming from the movie database and look looks really good looks really really good uh so what we're going to do now is build out the bottom bit and remember that nice little Trend that nice little effect at the bottom look at that guys look it's right there at the bottom right and that's how you get that really nice fade that we talked about earlier right so if I go ahead and comment out the fade you you guys will be able to notice that on refresh it now just looks completely clean right so look at that right it looks completely clean which is not actually that nice but we add in that fade trick that I showed you now when we refresh we get this nice little subtle gradient right which is awesome looks really really good okay so the next thing that I want to do is I actually want to be back right I want the back of the um the uh the the soil the screen to be a a nicer color right so what we're going to do is I'm going to go into my app.css okay so we're going to type in app right and then what I'm going to say is I'm simply going to set the background color to Black for the app okay so I'm going to go here change the background color to Black for this app I have to go ahead and refresh and then what I also need to do is I think I've done it inside of index.css no I haven't done it there I think where have I done this one I've done this inside of let's have a double check quickly guys home screen okay yeah so right now it actually is at the back but what we can say is if I was to do for example height of 100 View High I'll show you what happens right so you see the back is actually black right now right but right now we can leave it and I don't want to actually limit the height of this thing because I want to be able to scroll afterwards so I'm not going to do this for now but just to prove to you guys it does change the back then um that's how we do it okay so I'm gonna go ahead and refresh there we go okay so now I'm going to go ahead and build the little panels that we see at the bottom okay so let's go ahead and build the rows so let's go back to our homescreen.js okay so now let's go back to our home screen and here we're going to build the rows okay so the rows are the fun part right so I'm not sure what the limit on the API is at the moment guys okay but for the row imagine what we're going to have is we're just going to have several different rows that'll get rendered out on the screen right and now each row is going to take a few different props now props allow us to customize one component from another right that's that's what it allows us to do so here imagine a row is going to have a title so each row is going to have a title and this one is going to be Netflix originals right it's gonna have a fetch URL let's call it that fetch URL and this one is going to have we need to import our requests and I'll show you what we're going to do here it's actually a neat little trick we're going to import the requests and then here the one that this one is going to use is requests dot right and it says fetch Netflix originals right so fetch Netflix original so let me go ahead and actually just copy the the correct end point there we go so request.fetch Netflix originals right so that's really clean awesome and then what we're going to do is we're going to have a final prop which says if it's a large row or not right so you notice on Netflix you have loads of small rows and then you have massive row right so here what we're going to say this one is going to be is a large row all right but the other ones aren't going to have this right but the large row is going to be a slightly bigger one okay now I'm going to go ahead and duplicate this for all the different genres so I'm going to go ahead and pop this in and now so I've already got a snippet here and I'll go ahead and pause the screen there you go so you guys can go ahead and definitely pause at this point sort of copy this out if you need to but basically what we're doing is we're having different rows here and each one has a different corresponding title and it's going to go ahead and actually get the corresponding um let me go ahead and there we go requests and then we need to make sure we're in the correct folder and it says row is not defined we'll fix that in just a sec but now what we're going to do is make sure that everything is looking nice and sweet right so this is good so each one is going to be fetching the corresponding genre of films okay all right so we're going to go ahead and build the row component right so here I'm going to go ahead and create a row.js okay and then here we're going to say rfce so here we're going to say class name equals and then I'm going to say uh row okay and then we're going to say import and this is going to be row.tss perfect right and then we're going to go ahead and make a row.css file because we're going to make these look beautiful after all right nice perfect then we've got the row here okay so with the row looking fresh we're going to go ahead and refresh this and let's see for a sec it still says right that's fine because we need to go ahead and import let's go ahead and import at the top there we go save and then we've got this right so we have a row there right so now with the row what we're going to do is we're basically the row is probably going to be the sometimes it's pretty much the final piece of this puzzle guys okay and then we're gonna actually get a nice little animation called flip move into this build as well right so how do we get this working and how do we get this thing looking perfect and as we want it right so the way we do this is we just need to go ahead and first thing we're going to do is go down to our row and we're going to give it a title okay so we're going to give it a H2 and this one is going to have the title at the top so imagine here I would just say this is a title okay and then we're going to save and refresh let's see if it comes through so you see it says this is a title okay so there it is right um but what we're going to do is remember we passed in those props right we passed in these props tied to effect URL and it is large row so what we need to go ahead and do now is go ahead and say for the H2 we need to say instead we're going to pass in the title prop and the way we get the title prop is we go whether this is where the props come in and we're going to go ahead and destructure this right and then we're going to go ahead and say title okay perfect right so now you guys can see like it's black text behind it but that's is that pretty much where we have everything over here so you see this guys we've got Netflix original is trending now top red and all sorts right they come through as a prop right so now what we're going to do is we're going to go ahead and actually map through firstly we need to fetch the movies right we need to fetch the movies for each of these films and how do we do that right the first thing we're going to do you is go up to the top and we need to create a piece of state to keep track of the movies right so I'm going to actually destructure the props over here and I'm going to say fetch URL because that's the one that we had earlier and I'm also going to say is large row because we actually get that in now uh Samuel I think I can make you a moderator but for some reason right now I can't because I don't have uh YouTube open but tomorrow I will right it is large roll and then here I'll say false okay so by default it's false unless we get that passed into it okay so that's what I'm saying here right so um at this point we're going to create a variable which is going to carry the movies it's going to contain all the movies and here we say set movies right then we say equals use state and then here I'm going to pass in a empty error is I'm going to go ahead and say use effect right so use effect right perfect oh what was that all right use effect and then here I'm going to go ahead and have an inline function perfect and inside of here we're going to go ahead and make sure that this usually we only go ahead and have so the dependency here is called the fetch URL fetch URL okay and then over here and I'm going to basically make an async function right so async function called Fetch data right it's going to be a function and this is going to go ahead and do the following it's going to say it's going to do a conf request so we're familiar with this by now and then we're going to say await axios remember when we're using axios we don't use uh the global axios we use our local axios so the import axios from our local axios okay so we're going to do away axios.get right and then here remember we passed in the different URLs as a prop right so we're going to say get the fetch URL right and then what we're going to say simply put after this we're going to go ahead and do set the movies to request dot data dot results okay request.data dot results and then remember with any promise or any sort of uh async we should always return something okay so that's perfect and then we're going to go ahead and execute function okay save looks good right so uh we're going to go ahead and import the use effect there we go perfect everything's working and uh yeah let's go ahead and refresh and now what you can see is this will go ahead and give us the movies as a result right so if I go ahead and console log the movies at this point but we should be able to see if I go ahead and open the inspector you guys can see look we've got an array of 20 things okay so there's 20 different things here let me go ahead and make that a bit bigger and you guys can see inside here you've got those movies that we should saw before so same thing but it's gonna be different ones and you can see there's all sorts of ones for the different genres right so now we've got the movies that pop in so now we need to use that information from the movies to populate what how and we want the look and feel to be okay so what we're going to do now is we're going to go ahead and render the posters okay so we're going to render out each of the posters now here we have the H2 and then what I'm going to be doing is simply going ahead and saying movies dot map okay movies.map and I'm going to say for every single movie right so we're going to iterate through the movies and I'm just going to go ahead and return something right so I'm gonna I'm gonna go ahead and return an image right now the image is going to be the different films that you're going to see right and what we're going to have here let me go ahead and make this even again so you guys can see so let's go ahead and we're going to get rid of the console.s right so for the image source now what we're going to do for the image we're gonna go ahead pass in for the source we're going to interpolate right and now there is a base URL and there is actually a base URL for the image remember before we previously used one right so now we're going to go ahead and say const base underscore URL equals and I'm going to go ahead and drop in the URL so you guys again you would have recognized this from before where we used it inside of the banner but here we're going to be using it as such like this and so if we have the um all right so now what I'm going to do is I'm going to have the image source right now here we're going to go ahead and say base URL right so I'm going to pop in the base URL and then next to the base URL I'm simply going to go ahead and say if it was a large row right so there's two different things here now right so I'm going to go ahead and follow this very carefully we say if it's a large row then I'm going to use the movie dot poster path right and there's a reason being because there's two different images that come back in the request we're going to use the poster part if it's a big row and if it's a small one we're going to do movie oops sorry I'm gonna say movie this is quite a turn around we're out we're going to say movie oops oh my God movie dot backdrop path backdrop path uh yeah perfect nice and then we're gonna go ahead and hit save right and the alternative name here just to make it a little bit SEO friendly is the movie name okay and then we're gonna hit save right now let's go ahead and refresh and see what happens on our code so look at that guys you can see loads of films but I mean it's not ideal is it you have the pictures coming on but it doesn't look ideally if you want but the good news is look at the nav bar guys the number is looking Perfect all right look at that amazing stuff right that it looks really nice at the top right really nice but it kind of broke our app right everything looks wrong at this point so now what I'm going to do is where we have you can see it's got Netflix originals we're just going to style this up a bit right now so it doesn't mess up and break everything right I'm gonna get this a little bit neater and how it looks so the way we do this now is we're going to give this image a class name okay the way we do that is we say image class name and then here we're going to go ahead and do some interpolation which is why I've got this I'm going to say Row Poster right so the image is going to be a poster but I'm also going to give it an additional class if it was for a large row so I'm going to say is large row right is large row and then here we're going to say and and I'm going to say row underscore poster large right so I'm going to apply this class if we pass in that prop okay now there are a few good practices we should do every time we're rendering out a bunch of things we should always pass in a key in this case it's going to be the movie ID right so move the ID so it does come back with an ID and we're going to use it to make everything sort of clean at this point right so we're going to save at this point and we're going to start styling it because this is getting painful to look at all right so there we go nice and then I'm going to go ahead and pull out the row.css and I'm going to pull this underneath over here okay so now what we're going to do is I'm going to go over to our row.css and I'm going to start styling right let's go ahead and make this really nice first thing is that text is impossible to see so I'm going to go over to our row and I'm going to change the color to white okay there we go and then you see the text change to White so now we can see Netflix originals on the right has gone to White I'm going to change the margin left to be 20 pixels okay and you can see it pops over to the left a little bit right now the next thing that we're going to do is go over to our poster itself okay so the poster itself and what I'm going to do here is I'm actually going to change the width a little bit right so there's a few things I actually want to do before this I'm going to surround this entire thing inside of a div right so inside of a div and this div is going to have the row posters class okay all right so let's go ahead and pop this in all right so save and then now we're inside of row posters okay so over here I'm going to go ahead and Target row posters okay so row posters like so and then here I'll say display Flex right so display flex and I'm going to say uh and then there we go okay perfect and then I'm gonna go ahead and do I'm going to say overflow y should be hidden right so overflow y should be hidden and I'm going to say overflow X so when we scroll in the horizontal Direction I want that to be a scrollable right so it's going to be scroll okay all right nice all right so here we're going to go ahead and say the adding of 20 pixels and let's go ahead and just fix this uh poster because it's driving me crazy right now all right so for the poster I'm going to go ahead and Target the post dust we're going to say row post up because right now we can't actually see anything that's happening right Row Poster and then here what I'll say is let's set a Max height right a Max height of uh 100 pixels okay so 100 pixels and then look at that guys boom immediately dropped in there right so it jumped straight back in there and let me change this back to 100 and you guys can see look at that it's already starting to look pretty good right we've got look at one line of code right one line of code changed the entire game right right so here you can see look everything looks pretty damn nice when we see that right so a few things we want to do is I don't want that scroll bar so how do I hide the scroll bar well we have row posters over here and what I'm going to actually do is add an additional line of code underneath which is going to Target real posters but with a modifier so it's going to be targeting webkit scroll bar I'm just going to Simply do display none so I need to go ahead and pop in this magic line of code and it gets rid of the scroll bar right so that's how shibam we can remove the scroll bar because I just saw you asked it in the perfect time and I went ahead and answered it okay so now what you can see is that we have this scrollable functionality everything's really nice and we have the stuff over here which is looking really really good guys right this is actually looking really really clean okay so uh now we're going to go ahead and add object fit contain because I always want to keep the aspect ratio the same and then I'm also going to go ahead and then I'm going to say margin right so right now everything is touching each other right so I'm going to add a margin right of let's do 10 pixels okay so 10 pixel and you can see it bumps it to slightly to the side so we get that little spacing right so we can still scroll through it but it gives it that nice bit of spacing right so that's what we wanted uh so that looks really really clean at this point right so everything works everything's actually looking pretty good at this point right and then what we're going to do is we're going to go ahead and say a width of 100 and I'm going to do Transition transform and I'll show you why transition transform 450 milliseconds and I'll show you why we do that in just a second okay so we actually have a nice little trick up Our Sleeve for what we're about to do right so the next thing I want to do is for the post the larger the large posters right so now we're going to say Row Poster hover okay so I'm going to go here say Row Poster cover so when we hover over this I want to do a nice little trick right I'm going to say transform scale and I'm only going to apply an eight percent scale so I'm gonna do 1.08 right and I'm going to say the opacity is one right now I'll show you anyway I think we might actually get rid of that afterwards but that's fine let me pass it you have one right so for the poster now if we hover over you guys can see look look at that we get a nice little hover effect now right so when I hover over the images boom right looks really good all right so that's looking clean and it looks really nice now the next thing we want to do is actually add the styles for the roll poster large okay so I'm going to add the max height for that one to be 250. so now you can see look at that one it's a little bit bigger for the road large right so for that extra large one okay so there we go that's a bit nice to see for you guys so now you guys can see look at that right clean clean clean clean clean right now you guys can see that we actually want to apply a slightly different style for the larger one so what I'm going to do is I'm going to transform it and scale it to 1.09 so it's going to be a 9 scale okay so let's go ahead and I'll show you how to hide the scroll bar in just a sec dude so let's go ahead and do this save and now if we refresh check it out guys look at that we get a nice little bit of a bigger scale on this one so it's slightly bigger just by a percent right a slightly bigger scaling effect right so if you want to get the hide scroll bar you just simply go ahead and add this in guys you add the webkit scroll bar addition to your selector and you just say display none to the scroll button I'll go ahead and hide the scrub off of you okay so now if we go ahead and full screen this look at this guys I mean like how crazy is that right like we effortlessly just kind of kind of built this out right which is absolutely amazing right so look how nice and clean this looks at the moment right so this is looking really really good I think everything's pretty much in place at this point so you might get a dead link okay so we need to fix the deadlinks right so to fix any sort of dead link that might come up the way what we're going to do is we're actually going to add a conditional so they only renders that poster if there are certain things that are on that okay so before we render it what I'm actually going to add I'm adding a few little checks okay so I'm actually going to go ahead and pop in the following check the first check I want to say if it's a large movie and and if the poster path exists okay so they only render it if this exists okay or if it's not a large row and if the backdrop path is present okay so these are things I'm using to render the actual image okay but if none of those are present and that's what we're using to render the image and I don't want to render it if it's not present okay so this is how we add a conditional and then what I do is I grab the image and I simply push it inside of here okay so you guys can obviously take a second to look at that and see what's happening but what that will prevent is any form of deadlink coming in so now we should not see any deadlinks inside of our web page okay so you can see there's no dead link inside of the web page anymore right there's no more of those you know where it's a broken image tag right and the supply this was applied for both oh wow okay that's interesting what happened there okay so for the Netflix for the lodge we broke something let's have a look at why that happened um let's have a look so we've got this and I'm going to go ahead and just quickly change something we've got the base URL backdrop movie part and let's just double check what I changed there to make that happen right so we've got this and backdrop path and post that path is large row um okay so let me just go ahead and remove this for one second I just want to see if I if it was that little change that I just broke that okay yes it was that change I broke down so what we actually need to do is uh is wrap everything in parentheses before we do it okay so where we have this in place I'm just going to go ahead and pop in a bit of code um where I have this entire block so I'm going to go ahead and replace my image with the following we don't use the ref yet we don't actually handle the clip yet and we don't need anything else to save and let's just double check that we're all good perfect okay so you guys can go ahead and use that as reference to compare against right so you can make sure that you're at this point and that every everything is working as it should okay so at this point guys this is pulling from tmdb right so we're actually pulling from tmdb live movie information right so live movie information we've got this beautiful hovering effect all of our videos are here to stay and play and everything is looking really clean right and today what I think we should do on that note because we've already got a nice little challenge here right we've got the nice little nav bar at the top right we've got the NAB bar at the top and it disappears like look how clean that is right as it goes down it just nicely just gradually disappears in so let's go ahead and show you that again look at that it's nicely dropped in right so all of these things look really beautiful and really nice and play nice okay so let's go ahead and deploy this app right so because you guys are going to need to deploy it and then share your link so how the hell do we deploy this app sunny I don't know how to do it I'm going to show you how to do it don't worry guys so what we're going to do now is we're going to go ahead and go into our terminal so right now I'm going to do command J pull up my terminal and I'm gonna go ahead and do the following so I'm going to basically say uh over here so let's make this very big for you guys so you guys can see it all actually all right so I'm gonna make this a full screen for now so we're going to go ahead and do the deployment stage right now in case anyone's wondering okay so here I'm going to go ahead and do this I'm gonna say Firebase login that's the first step that you need to do Firebase login now I am already logged in if if it says to you that Firebase is not a recognized command then remember this step in the beginning where you had to install the Firebase CLI tools you're going to have to do that okay so you're gonna have to do that but now what you have to do is Firebase login and it will pop up a little pop-up if you're not logged in but for now all you need to do is do this and then what you're going to do is Firebase a net okay so Firebase and then once you do Firebase on it you'll get this beautiful little looking terminal UI I don't know how long it took somebody to build that but it's pretty cool and then you're going to go down to hosting Okay click on the hosting for this the spacebar on the hosting and then you want to go ahead and hit enter right then here you've got a few different options we're going to click on use an existing project okay we're going to enter on that and then I've got a few different ones where I've got Netflix clone Netflix go on YouTube and the one that I'm doing today was Netflix clone YouTube okay so I'm gonna go ahead and hit enter on the Netflix account YouTube then we've got what do you want to use as your public directory right so I want to go ahead and say the public directory here is build okay so very important that you write build here okay so make sure that you do not mess that one up right build in that section and then here configure it as a single page app yes it's a y for yes right we're going to go ahead and enter setup automatic builds and deploys with GitHub no we don't want to do that yet okay and then we go ahead and initialize the app now the next step is basically we need to go ahead take our app that we just built bundle it up and then deploy it on the web so we already did Firebase and net which basically goes ahead and sets up the connection to Firebase right so now Firebase knows about us and what we're about to do and basically what we need to do is we've got this beautiful react app that we just created right which is this Netflix app over here we need to bundle it up right now and then just literally send it to Firebase and say here put it inside and on the web right so what we need to do now is say mpm right run build okay npm run build right and this will go ahead and it will build our app and now when we do npm one build what it does is it creates an optimized production bill now what is an optimized production build it essentially goes ahead and strips out all the things that we don't need inside the final product right inside the final website so it makes it very quick very sort of quick and helpful okay now what you're going to do is you're going to go ahead and say once you've done this remember once you've actually gone ahead and done npm round build if you change any file or folder you have to do npm1 build again okay mpm room build again is crucial after otherwise it doesn't get the latest sort of update right so what this would have done is it would have actually gone ahead and created this build folder for you right so you can see there's a bunch of stuff in there right a bunch of cool stuff that goes into the profile you don't actually touch this folder by yourself okay you don't actually mess around with that right command B to hide the next step we're going to do is Firebase deploy all right now remember you have to do npm run build and make sure it goes into the build folder because the build for it is what we specified in the Firebase in it okay Firebase to play let's do this right let's go ahead and deploy it if you haven't already smash the Thumbs Up Button let's go for it and let's deploy this thing let's go ahead and take Firebase deploy I'm gonna go ahead and hit enter so I went ahead and deployed the app guys so let's go ahead and check if this app works right so I'm going to go ahead and click on the Netflix URLs the hosting URL click on open and let's see guys look at that we are now live right so it's going to go ahead and load it up for the first time so let's go ahead and refresh and let's see look at that it's loading the images everything's pulled in perfect it's working right so this is what I want your app to look like right so that way we're at the same point we have the app folder we have the store inside of the app folder we have the features we got rid of the counter folder we just have countlessize.js and then here is the rest of the files okay so everything is where it needs to be at this point in time now what we're going to do is we're going to go over to Firebase now remember we went ahead and ordered firebase.js and we copied our config file now if you don't know what your config file is I'll show you right now make sure you're signed into your correct Firebase account then you want to go to your console go into your build so Netflix clone YouTube in this in my case go to the little Cog icon at the top click on Project settings and hit that button and then down here click on config and here's your config okay if you don't see the screen you're gonna have to add the web app there'll be like a web app option and that's where it's going to be okay you want to grab your configuration file now once you've got that we need to install Firebase okay so here what we're going to do is go ahead and type in yarn add Firebase okay yarn add Firebase I'm going to make this a little bit bigger for you guys so that way you guys can see it a little easier okay and we're gonna go ahead and add Firebase to our project now if you are using npm it's fine you can do npm install and it will work for you okay guys smash that Thumbs Up Button if you're enjoying this so far I think it's it's absolutely been so much fun so what I'm going to do now is I'm actually going to cancel or close this running build over here okay so I'm going to close this one or we can keep this one open I'll run it on a different ports I'm going to say yarn start I'm going to spin up my app okay so this shit's been happening we'll say that I'm running something else and I'm going to say yes and it's going to run down three thousand and one okay now what I want to do is I need to do a slight refactor right so inside of our code inside of app over here we have a one screen but why eventually one is to basically have separate screens okay so if I click on get signed let's just say I sign in and I go to the profile screen this is a different screen right and then if I go to the Netflix screen it's just at the the homepage but then if I go back to the profile notice how the root is changing so it says forward slash profile at the top okay I can't really show it that much but it says profile at the top right so in order to have different pages on a website we need something called react router okay so I'm gonna go ahead and install react we're going to show you just how to do that okay so now we're going to go to react router like this okay so you want to go ahead and click view the docs here and I'll show you you want to click on web and the reason why I show you guys the actual sort of starting from the basis and I don't just kind of copy and paste the command is because I want to show you like if you ever forget it it's fine to come back and check it right I just want to get I want to clear that up right you don't need to remember that okay so we're going to go ahead and do and I'm not going to do you mpm install I'm going to do yarn add because I'm using yarn right now but if whatever one you're using is completely fine I'm gonna choose yawn okay so here I'm going to go ahead pop out a another terminal okay let me go ahead and make myself smaller and I'm going to go ahead and say hey so this is going to say m yarn add react router Dom okay so yawn add react to real Dom and I need to obviously add a space there we go perfect and this will add in react through a Dom into my application okay so perfect now what I'm going to do is we have an example of the routing so what I love to do is honestly just to make your life so easy I grabbed this snippet okay grab this nipple if you can grab it and then I'm gonna go here pay stem right and we don't need the link right we don't need that link at all we're not going to be using that right now and um so over here react with a Dom okay so this one right here so you guys can go ahead and look at the example code and you can see they give a pretty good outline right so what I like to do is I grab the entire block right and I'm actually going to go ahead and paste it right under my home screen okay so I'm going to grab all of this now I don't care about any of this nav section so I'm going to get rid of it right and then what I'm going to do is I'm going to get rid of this comment we don't need it right we're cleaning up slowly I don't actually care about this Dev either boom it's gone right disappeared we don't really care about it and then what I'm gonna do right here is you've got a router now think of it this way right a router is just gonna look at the page route that you're on and determine based on whatever's inside of this switch so imagine like a little switch is just determining where to send the comp where what components to render right so imagine we were at the root forward slash about it's going to render whatever's inside here so the about component which we don't have so I don't really care about this right now if we have the forward slash users it's going to render the users component we don't have that right now so I don't really care about that right but then here we have the root for the home screen right this is for the home page just a general forward slash okay and here what I want to do is I don't want to render this home component because we don't have that I'm going to go ahead and copy my home screen component and pop it in here right and save now let's just see if we didn't break anything okay let's go ahead and check if we didn't break anything so let's go too our app this one over here 3001 and let's refresh right so good everything looks pretty good okay so what I'm going to show you just to test this right if we go ahead and copy a roof all right let's go ahead and copy our root and here I'm going to say root like path I'm gonna say test okay and just to prove that it's a test and it's working I'm going to say H1 wow what's up #papa fam save okay and if we go back to our app and we go ahead and say forward slash test so it's black text right now so you can't see it but it says wow what's up Papa fam okay so everything is actually working pretty good at this point right so we can see that the rooting is set up correctly so you want to use that as a little test I like to use that as a test and I also want to make sure that the part is exactly this if I want to render the home screen so if it renders forward slash test it shouldn't render anything you see that it's only if it's exactly the home screen I want to render that right so you that's what we're going to make sure of right so what we're going to do right now is we're going to go ahead and but go back to our codes we've got the home screen here so let's go ahead and introduce a photo structure here so whenever we have a screen right so the profile screen the home screen whatever we decide to do I'm going to create a folder called screens okay so screens and what I'm going to do is I'm going to grab my home screens by both of them I'm going to drag it into my screens and I'm going to say yes move them and now I'm inside of screens right now that's going to obviously break my code somewhere okay so if we see it it says Whoa something just freaked out and broke okay so the reason why that has broken is because we're using the home screen inside of app.js I'm going to close a bunch of these so let's go to our app.js and then where we import from the home screen now we have to say import from screens forward slash home screen okay so perfect let's go ahead and do that and everything is nice now if we go ahead and refresh it it says it cannot resolve the banner right from inside the home screen this is because now inside of here we're embedded inside of a um inside of a folder so the banner is now outside the folder so I'm going to go ahead and do two dots to escape the folder guys smash that Thumbs Up Button get this video out to as many people as possible let's go ahead and hit save okay so I'm gonna go and see and it says the nav bar is also okay so all of our components here including the nav and the row so I'm going to add dots over here save okay perfect go ahead and then the final one is the requests as well perfect there we go okay so everything's looking great at this point and um this carriers we've got the components over here right so this is quite nice look we inside of our app we have a high level View and this is how you want your component to your apps look like right at this point what I want to do is let's think about this I want to build let's say the login screen okay so let's go ahead and do the login screen for now and what I'm going to do is at first I'm going to just say okay so I'm gonna imagine if we didn't have a user that was signed in I'm going to direct the person to a login screen okay so I'm going to show you quickly an example of that so imagine we had a user here so obviously we don't write variables like this in react but imagine if I had a user which was no okay this was just an example then if inside of my application I want to go ahead and say if I don't have a user right so if there's no user right I want to go ahead and render the login screen okay so I want to go ahead and run the login screen otherwise I want to render the rest of the app okay save and then it's going to freak out about the login so it says login is not defined which makes sense okay so at this point what we're going to do is we're going to go ahead and create a login screen okay so here I'm going to say login screen dot JS okay so there we go and we'll say rfce boom right we're going to do our typical bam naming convention stuff and let's get into our Flow State together guys login screen and here I'm going to go ahead and import some login screen CSS there we go perfect and now what we're going to do is I'm going to go ahead and create that login screen dot CSS file let's go all right so let's go ahead and do that and then get rid of this save boom once we have the login screen up and running we're going to go ahead and style this out now a few things that we're gonna have to do right the login screen that we're gonna the RN go is to get a login screen that looks something like this okay this is the login screen that we want to get to okay right now it looks something like this which is obviously wrong it's broken okay so app.js let's go ahead and import our login screen that we just created and you can see it pulls in at the top save wait a sec and then we can see okay it's got it's literally gonna say because there is no user right there is no user right now right but imagine we had a user and that user just had a name of Sunny I don't know this is like a dummy test right then it will render the application okay but if there is no user it will render the login screen so that is just to show you guys how we're going to control the flow inside of our app okay so the login screen you see this it's just empty right okay so what we're going to do at this point is I'm going to use this as a sort of as a as a pushing mechanism to push the login screen while we develop it okay so the login screen let's go ahead and build this out over here what we're going to say is we're firstly going to have a background to the login screen okay this is going to have the the Netflix sort of logo it's gonna have the button which allows us to sign in and all of that stuff so it's going to be the top at the top right so let's go ahead and check this out so I'm going to create a div which has a login screen background class name again screen background apparently guys I actually found out that on Spotify now you can listen to your music from epidemic sounds so let's check this out so inside of image source I've got a lovely little picture over here so I'm going to go ahead and use that right here and I'm going to drop that in the chat right now for you all so it makes your life a little bit easier there we go save and we should be able to see a huge Netflix login okay took a massive lampex login over here and I'm going to give this a class name of uh login screen logo okay we get login screen logo and I'm going to pull up my login screen.css next to it Okay so we've got our code up right here okay and what we're going to do now is I'm going to slowly start it out so actually what I love to do is pull this underneath so you guys can see and then let's go ahead and bring this window over here and you guys you know how we do it there you go okay so right now the Netflix logo is huge it doesn't look that great right and we want to go ahead and make this like sort of you know very pretty and things like that right so let's go ahead and fix it up so first thing first back in core to make this look nice is to go ahead and introduce the login screen styling so the overall container so I'm going to say login screen and then here we're going to say position relative because I'm going to have a few things inside of here which are going to sit absolute and then I'm going to say the height of this screen should be a hundred percent right the background right so we're actually we are going to have a background here um oops my auto complete kind of messed me up there but to be honest before you can see any of this let's go ahead and actually add in that uh the style out that logo because right now the logo is kind of getting in the way of everything right so I'm gonna go and Target the logo and I'm gonna go and say that the position is fixed and it's going to have a left fixed position so left of zero a width of 150 and then you can see it drops to the left hand side okay now here we're going to say object fit contain to make sure that if we do decide to change it in the future it's going to keep its aspect ratio and I'm going to pad it slightly from the left right because I don't want it to absolutely touch the left I mean you could do uh left of 20 pixels here as well but I do want to have some padding instead okay so there's loads of ways to do the same thing sometimes when you're coding okay so now what we're going to do is for this logo okay so for this logo we're going to go ahead and and set up the next thing so at the top of the screen we have the the logo and we're going to have a sign in button okay so here I'm going to say a button and here I'm going to say sign in and this button I'm building right now is actually going to be this button over here where they go there we go I'm gonna pull this one over here there we go so I'm going to create this sign up button sign in button over here right so how do we do that let's go ahead and go to sign in so we've got a little button and it's hidden at the moment because we've our standings kind of weird let's go ahead and add a class name and then here what I'm going to say is login screen underscore button okay another screen button and then we're gonna go ahead and start that in just a sec and then I'm going to give this a class name Oops why did that mess up nice right and then we're going to go ahead and say on click right and I'm going to give it a non-click in just a second but for now we'll leave it you can see there's my button okay looks pretty beautiful right now okay no it doesn't really looks horrible all right we're gonna make it look beautiful in just a sec so over here I'm going to start this button right now okay so I'm going to Target the button and then for that button styling we're going to Simply go ahead and add the following I'm going to say position fixed right of 20 pixels and top of 20 pixels so save it you can see it goes over to the right hand side of the corner right so that looks pretty clean I'm going to give it a padding to make that button a bit bigger so it's going to be 10 20 shorthand which means that it's going to get 20 on the sides 10 on the top and bottom okay so our font size is going to be one Rim right so let's go ahead and do one ram and I'm gonna do the color of the button to be uh the text of the button to be white now I've got the the Netflix color over here so you guys can just copy the hash for that right so boom we get that and now there's a few things to make it look Flawless right we're going to give a font weight a border none and a cursor a pointer because right now if I do this you see that it doesn't really have a nice like sort of that that little finger that pops up on the screen okay so I'm gonna go ahead and pop that up look at that look how simple it is right when you when you make those subtle changes on front end it makes every bit a little bit different okay so let's go ahead and do this right so now so what we're going to do now is we're gonna go and um implement the next section which is actually going to be a gradient okay so we're gonna go actually Implement a gradient which I'll show you in just a sec but for now at the login screen at the top right so at the top of this on the uh on the login screen here so we have a div called login screen background uh we'll actually organize that in a sec but for this one sorry the top login screen here we're going to go ahead and take a background right and I'm going to give this a URL right and inside there I've got a string right so here I'm going to go ahead and say there you go boom and I need to make sure obviously it's not double quotes there we go and then what we're going to do is after that text has been dropped right so outside the brackets all you want to do is type in Center right so Center and then you say no repeat okay Center no repeat and then what we're going to do is say background size is cover okay so we're going to do this background size is cover right let's go ahead and hit refresh right we're almost I mean we'll get there we'll get there right now there is nothing inside the body hence why this is happening so we're gonna go ahead and fix that in just a sec all right perfect okay so now what we're going to do is for the body okay so for the actual body which is underneath the gradient okay so we're gonna go ahead I'm going to show you guys a little trick as well actually it's bear with me one sec right so for the gradient right I'm actually going to show you a little trick how as to how we can have a gradient over the entire background and how it will actually start to appear on the screen right so over here inside the login background container what I'm going to do is I'm also going to make this a bit smaller because it's actually kind of hard to see right so underneath that button that we had what I'm going to do is I'm going to pop in a div which has a logging screen gradient class okay and this has a purpose it has a purpose okay so I'm going to go here and start Target it so login screen gradient and then what we're going to do is pull this up a little bit then what we're going to do is actually say okay this has a width of 100 it has a height of 100 view height go ahead and save and you can see we automatically get something in there right so this is because obviously before there was nothing actually in the body hence why the image wasn't showing okay so that's going to help you guys out but then what we want to do is actually say that the background okay so the background is going to be a black but it's going to be a black with a 0.4 this means it'll be 40 percent opaque okay so it'll be 40 and you can see it gives it like that kind of overlay now right gives it a nice little overlay but then what we're gonna do is add another linear gradient right from the top so it's going to go from the top and then hit this is the code that you need to go ahead and pop in to get it working okay so it basically starts from 0.8 and then it goes to 60 and then it goes back to 100 and if I do that you guys can see look what I did it gave it such a nice little effect all right so if I go ahead and just comment this out for a sec look at that right so there you go see that little effect and you can see immediately now look how the sort of buttons kind of come out us right it's like a 3d effect right so underneath this div what we're gonna do is we've got the div for the gradient and we've got this Dev and then what we're going to do is go ahead and create another dip so we're going to say login screen underscore underscore body perfect and then inside of this one we're gonna actually gonna have a lot more of the body content so that's going to be essentially this stuff right here okay so we're gonna go ahead and build this stuff right here so how do we do that right I'm gonna go ahead and firstly put a fragment because I'm gonna have a few things inside of it I'm gonna have a few sort of like children components next to each other inside of this and I'm going to start with a H1 and the H1 is going to have that you know that trendy little Netflix title which is unlimited films and all that crap all right so there we go perfect let's go ahead and save it and you're probably wondering like Sunny where the heck is it I don't see it oh no look where it is it's like right down here right so obviously that's not ideal okay that's not ideal but as we sort of add them in I'm gonna start styling them out okay so first thing I'm gonna do is actually Target that okay so the first thing I'm gonna say is for the login body let's go ahead and do something for that here I'm gonna say Target the login screen body and then I want to go ahead and say Z index of one right because I want it to kind of be at the top and I'm going to say a color of white right and then a padding of 20 pixels so that's the first little trick I'm gonna do okay so you see now it's kind of got a bit bigger at the bottom but obviously it's still not perfect right it's still not perfect um but we want to go ahead and Target the next thing so I'm going to say okay Target the body and Target the H1 which is inside the body okay so let's go ahead and do that and then go and say font size 3.125 RAM and a margin bottom of 20 pixels okay so you guys can see right now we're starting to get a little bit a little bit nicer but everything isn't just where we need it right now right so things are still looking a bit strange and we're still on our way to getting this right okay so what we want to do is we've got the login body over here and for the login body we had a few things in place but to get this on top of our image you guys probably might have guessed it but we're gonna have to do a position right so it's a position absolute right and the minute I do that you're gonna see that thing sort of go in some weird place there we go it's just kind of this bird right it's probably just spread down to the bottom and then what we're going to do is we're going to say top is going to be 30 so it's always going to be sort of relative to the top so 30 see that so now it kind of appears absolute positioned at the top okay we have this um this H1 at the top right so to get this centered I'm gonna do margin left a margin left and right Auto and then I'm going to go ahead and say left zero text them and watch you know here I'm just gonna do a text line there we go let's go ahead and do a text line and this will fix it up for us there we go nice okay and now because we added that padding in you see it goes ahead and changes with the 20 pixels that's why it's never touching the sides okay we've got a nice little 20 pixel bit of leeway there look at that it looks really clean all right so that looks pretty good at the moment and then what we're going to do underneath the H1 tag is we're going to go ahead and drop into let's go and see we're going to drop into a H2 right the H2 is going to say watch anywhere cancel at any time so there we go pop that in and you can see it's nowhere to be seen right oh no it's there sorry just took a while watch anywhere I can't see it at any time and I'm going to Target that one style it make it look clean right so I'm going to Target the H2 inside so let's go ahead and put it next to the H1 so I'm going to Target inside the body with the H2 say font size is 2 RAM font weight of 400 and margin bottom of 30 pixels there we go you guys can see we're slowly getting there I was slowly slowly getting there okay then what we're going to do is have a H3 which has the bit underneath it so it says that in that initial sort of ready to watch enter your email address or restart to your membership right so we're gonna pop that in here ready to watch enter your email create or restart your membership and I'm going to do the same thing I'm going to Target the H3 element right boom Target the H3 element right let's go ahead and see now it's starting to look pretty good it's starting to look pretty good right and again nice responsive Behavior looks really really clean okay the next step is to have that nice little input right over here the email address get started all of that good stuff so what we're going to have is underneath the H3 I'm going to have a div with the login screen input right so login screen input and like that right so for the login screen input what we're going to do over here we're gonna go ahead and have a form and I'm not gonna have an action inside the form I'm gonna have an input field oops I'm gonna have an input phone and this input field is going to be a self-closing tag there we go and then what we're going to say is type of email right so type of email and we're gonna say a placeholder equals email address and let's go ahead and pop this on the screen so we should be able to see this in just a sec where they go there we go so you see it there's a little email address okay now underneath that what we're going to do um let's go ahead and we're going to say we're actually going to map this to a piece of state but right now this one is more presentational okay more presentation or you can as a part of the challenge actually go ahead and extend this but underneath the input I'm going to go ahead and have a button okay so I'm gonna have a button and this is going to have a class name so let's go ahead and say firstly it's going to say get started so the button that we're creating right now is this one over here okay so the button over there is going to say get started and we should see it snap in just a sec and then I'm gonna give this a class name oh not screaming that what class name the papa fam will get to a million in one day we'll look back to this and be like holy crap guys do you remember when we when we launched zero to full style here we just did that we did everything guys together from the beginning you guys are the ones you're gonna stick it through see it to the end that's how we do it at the papa farm so let's go ahead and install the login screen input form okay so for the login screen input form what I'm going to do is I'm going to grab this okay perfect let's go down to the bottom to make it a little bit fresh in our CSS file and then here I'm going to go ahead and say login screen input now inside here I'm going to say okay give it a padding of 10 pixels boom all right so it's already kind of got a little bit more padding actually but I'm not going to Target the input I'm going to Target the form and then the input inside of it now what does that mean it means we go to the login screen and put to the form to the child input right so that's what it's doing there we're going to say a padding of 10 pixels I'm gonna do outline width of zero and what this does is right now before I save if you see this it gives it like a little blue outline I don't want the blue outline I don't like the blue outline nobody likes the blue outline so if we click it and save it there we go we get rid of the blue outline and it's all happy days right so now what we're gonna do is we're gonna go ahead and add in a height the height is going to be 30 pixels 30 pixels and then we're going to have a width of let's say 30 I want this to be reactive okay so pun intended but see if I go ahead and make it smaller you see how it's reactive right I did it again on purpose all right so now we go ahead and say border none so I don't like that little imaginary border it has I and then we're going to say Max width and yes it did actually do something there I'm not just saying that right I'm saying Max width and then here I say 600 pixels boom there we go now what will happen is the reason why I'm putting a Max width is I don't want that thing to become like so big if we have like a 4K screen right there we go let's carry on guys so we've got the form input there we go and now what we're gonna do is we're going to Target the stuff inside okay so the first thing you want to Target is that get started button okay so that get started button has its own class name so I'm going to go ahead and get it and then here I'm gonna say it's padding of 16 pixels by 20 pixels okay and I'm going to give it a font size of one REM we add that in you can see immediately it pretty much is near but you can see it has like a slight boulder around it right the way we get rid of that is we go ahead and we drop a color of white and a background color a Netflix color let's go ahead and do that and you guys can see there we go all right now the reason why why it seems a little bit out right now is because it actually has a border right can you see that it has like a little gray border right the minute I apply this right so if I go ahead and say border none save look at that perfect fit [Music] oh that's clean right it's perfect perfect fit right all right so here I'm going to say font weight of 600 there we go so let's go ahead and say cursor pointer like this boom and then there you go so now look I get the nice little cursor for the button and it looks really nice okay now obviously this is kind of too close this is kind of too close to the top right now okay so how do I give it that kind of space right what I'm going to do is I'm going to Target the login input login screen input which is the overall container surrounding everything okay so this div is the one that is actually surrounding you see it's surrounding everything so I'm going to go ahead and Target it and say margin of 20 pixels boom it gets a little bit further out right so this is really nice okay so now what I'm gonna do is I'm gonna have it so when we click sign in or get started it basically flips a piece of state right it flips a piece of state so and then what that will do is it will basically instead of rendering this it will render like a sign up kind of little view okay so the way we're going to do this is at the top of the file so I'm going to close my CSS for a sec at the top of the file I'm gonna have the following here we're gonna have a sign in piece of state right and we're going to say set sign in and then we're going to say equals use state and then here I'm going to import it at the same time and then the initial State here is actually going to be let's just start off with false okay so it's gonna be fast that's to begin with perfect so what we're going to do now is when I click the login screen button so this one up here right all right so here we've got the button and I'm going to say on click and then here I'm going to say okay when we click it I'm going to set sign in and then I'm going to say true here we have the login button at the top and I'll go ahead and flip the state to true now I also want to have it when I click the get started button okay so down here when I have get started let's go ahead and say let's go ahead and say on click all right so when we do this we're going to say set sign in as true as well now what I'm going to do is I'm actually going to conditionally render this block over here based on if it's true right so in the beginning I don't want it I want to show it but when it's false and then when I click any of those two buttons I want it to basically go ahead and hide this and show the sign up panel so let's go ahead and look at this if I click get started it will show the sign up panel okay so initially when set when sign in let's go ahead and do this right so we want to do it so that when we click it the sign up pops up right so I'm going to show you a really nice way of doing this okay so over here I'm going to say sign in right so if the sign in button has been clicked right then we're going to render a sign in screen component right but we're going to render it in place so we'll sign in screen component otherwise I'm gonna go ahead and render this stuff so I'm going to go ahead and grab that pop it in here all right now it's gonna freak out it's gonna say no no no no no there's no sign in screen all right so obviously at that point we go ahead go to our screens and we create a sign in screen okay I'm going to call it the sign up screen right it's a sign up screen sign up screen dot Js rfce handy little Snippets and then here we're going to go ahead and say last name code app by the way I love your content each project you create as a piece of gold thank you so much dude sign up screen and then here I'm going to go ahead and import the appropriate CSS because we will be signing this sign up screen dot CSS save Dev Patel says will there be a payment system encryption and payments it's going to be processing every bit of payment through stripe and that's happening in tomorrow's build so stay tuned tomorrow and we're going to be building that so you have the appropriate CSS file you get rid of that now sign up screen all right so for the sign up screen we're gonna go ahead and check this now okay right so over here inside of the login screen we have the sign up screen okay sign up screen that's rendered if the sign in button is picked so the state was true let's go ahead and Pop That in so now what we should see is if I click this you see it goes ahead and hides it because the conditional went true so this initially is false at the top right and then when we click those two buttons it sets to sign into true and same with that button down here and then you can see so we'll go ahead and render this instead but right now we have nothing here okay so now we're going to go ahead and build the sign up screen and you can see what I'm doing here I just kind of did a hot swap right I did a hot swap based on that so what we're going to do now is for the sign up screen right a few things I want to do over here we've got the sign up screen outside and here we have uh sign in cool so now what we're going to do is where we have the input and then we have input over here and then I'm gonna have the placeholder a password there we go perfect all right so now we've got the two folds right we've got our twofolds prepped we're gonna have a button underneath that to submit yes every clicks get started the reason why I've done type submit is because it's inside a form which means that when I do this and I type in here and I hit enter on the keyboard it will go ahead and Trigger whatever is on the on click over here okay so that's why we do that now underneath this I'm gonna have a H4 right and inside this H4 I'm actually gonna do the following so I'm gonna say we'll do this one in a sec the H4 let's start signing up the sign up screen so I'm going to pull up my signupscreen.css pull it underneath all right all right let's go check this out Sam honestly it's fine and this is fine dude I've got three streams out I mean I'm streaming to multiple platforms at once so it's all good if you want to watch it on Twitch it's all good all right so let's go ahead and open up sign up screen uh oh up in there okay open up sound screen there you go now inside the sign up screen I'm gonna do the following so sign up screen and then I'm gonna say Max width right so max width ooh one sec Max with there we go and um there we go nice yeah Max width and I'm gonna go ahead and pop in a 300 pixel Max width okay now I kind of want this thing to be Central okay right now it's not Central it's in the middle it's kind of where over there right so now we've got the max width set and now I'm gonna go ahead and check the padding of 70 pixels there we go and then you can see it kind of pads it up I'm going to give margin left imagine right above that's a little trick in CSS if you understand the things you can use display Flex as well but I'm going to use mine enough modern right and then here I'm going to say background of a transparent background okay so let's go ahead and pop this in this is a 85 background okay a very subtle background go ahead and click this and you guys can see the angle is to get looking like this okay nice so what we're going to do now is for the form I'm going to go ahead and say the sign up screen the form inside of it is actually gonna in B4 let's go ahead and say sign up scream Target the form inside and say display grid Flex Direction column okay so that way we'll use up all of the space that you can let me go ahead and check what's going on here as well so right now you guys can see this isn't actually centering it's not centering right now why is that happening let's have a look we have let's have a look at this we've got the button the input form and so forth we have the width set we have everything looking pretty good at this point so oh I know why okay so inside the login screen you guys can see the login screen body okay so we need to go ahead and Target the login screen body so over here let's go back to our login screen body and that's because everything is inside of it right so I need to go ahead and find it and what I'm actually going to do for the login body is right now I've got it only here I've got the following in place right I need to actually make sure and say it says left and right of zero so let me go ahead and do that so left zero and one second let me just try something right zero there we go if I go ahead and give it an absolute left and right of zero it will go ahead and then stretch across there we go and that's what I was missing out okay so we can go ahead and do that now there's a few ways you can do it again if you've got other suggestions feel free to implement them I if you notice guys I build things in all sorts of shapes sizes ways all the time so feel free to to go ahead and give this a try all right so now we're going to go ahead and open up sign up screen and Carry On from the sign up screen okay so now inside of here for the form right so sign up screen form now we're going to Target the form input okay so I'm gonna go ahead here and say this yep you can do that little trick that it kind of said perfect so now what I'm going to say is padding of 10 pixels panning of 10 pixels there we go and then I'm going to go ahead and say outline width of zero height of 30 pixels and a width of 30 let's go ahead and pop that in save all right all right perfect that looks good I'm gonna say border none and a Max width of 600 pixels pop that in and then save okay and then what I'm going to do oh no sorry I'm on the wrong screen oh my God I was thinking I was like wait a sec I can't see any changes happening this is wrong this is wrong get rid of that go with that what we're actually going to be doing is I got that wrongly at that time I was thinking I was like why am I not seeing any changes yeah we've targeted the wrong thing so here for the sign up screen outline width of zero height of 40 pixels and a margin bottom uh 14. go ahead and do this and then go ahead and pop it in there we go okay that looks starting to look a little bit better and you can see the styles are getting applied okay so what I'm going to do here is say border radius 5 pixels border none and a padding of 5 and 15. let's go ahead and apply and you guys can see we get a nice rounded corner there we get a nice little rounded corner all right so I'm going to Target the button inside the form and then you can see once we have that I'm going to do a padding of 16 20 pixels there we go and then you guys can see we've pads it out font size of one REM color of white for the text border radius 5 pixels and then the Netflix for the background color let's go ahead pop that and hit save and you see it looks good now remember we do have that annoying border problem so I'm going to go ahead and apply a font weight of 600 to modify the text border of none cursor pointer and a slightly higher margin top so it pushes from the Top If we go ahead and do that and I go ahead and Save you'll see oops you'll go ahead and Save oh what have I done there we go save and then you can see get that nice little finish right so it looks pretty clean after that you see very subtle changes right very very subtle changes so I'm gonna Target next the H1 the H1 I don't like it where it is right now so I'm gonna go ahead Target inside of the form and I'm going to say go ahead grab the H1 as I said you're doing a great job I have learned a lot thank you so much and so how thank you so much he says looking good I think that's what I meant by good right so um let's go ahead and check right now for the H4 right so I said before that we have a H4 underneath here so inside that form um outside the button I'm actually gonna have a H4 okay now this is where we're gonna have new to Netflix sign up now okay so let's go ahead and do it so here we're going to have a span right so you see we've got some two different styles being applied here right and then we even have a link which is actually some text right so what we're going to do at this point is we're going to go ahead and do the following so I'm going to say span I'm saying new to Netflix firstly so I'll show you guys I'll say new to Netflix question mark and then we'll say sign up now right and what I'm going to do is break this up with Spam tags but someone break it was fantastic so that way I can apply different bits of styling as I do it okay so you can see here there you go it kind of looks okay at that point let's go ahead and style the H4 and then we'll go ahead and update this right so style the H4 text align left margin top of 30 pixel so it's already in place but you can see I want to get the colors looking like this right so what we're going to do now is span inside of the H4 and this is what you typically use Spam for okay so you're going to span a class name so I'm going to basically span a class name around the new to Netflix okay so let's go ahead and spine a class name and this one I'm going to say is the class name for sign up screen and I'm going to say gray okay so it's going to be the sign up screen gray I'm gonna go save and I'm going to Target that piece of text now and I'm going to say okay the color should be gray so color of gray and that's how you do that right that's how you like span a style around just a one piece of text okay so I'm going to actually add a space there and you guys can see all the space apart nice this is looking good guys so we have the sign up screen why is this looking good it's looking good all right let me go ahead and pop that there right so what I'm gonna do now is actually have it so that we have the sign up now okay so for the sign up now I'm going to span a link piece of text right and there's a reason why I'm going to do this so I'm going to go ahead and say span and then I'm gonna go ahead and pop this inside of there and then what I'm going to do is give this a class name and you could have used Emmett there to make it a little bit quicker you can you then go ahead and say sign up screen link okay the authentication with Firebase is so simple the dev96 you're about to get your mind blown dude honestly when you see how simple it is it is in Crazy powerful okay so the reason why I added this bit of style here is because what we can actually do is I'm gonna go and pop in the following okay so I'm going to go underneath down here and then I'm going to go ahead and say the following so I'm going to do this right so I'm going to do sign up screen link and the next thing I'm going to do is I'm going to actually make it only apply the style on Hover okay so it's a little modifier here it says only a planet I'm gonna say Okay firstly I want to do a cursor of a pointer and I actually want to decorate the text of our underline that's what that then it will look like it's a link okay so I'm going to do that so now if we go ahead and check it out look at that so it immediately looks like a clickable link now okay so now what we're going to do is actually going to go ahead and create a two functions I'm going to create one which is going to be for the registration right so now we're going to get into the authentication portion okay so it's gonna be a lot of fun right now so I'm going to go ahead and say um sorry yeah register all right const registering in the arrow function and what I want to do here is I don't want to do the typical refresh so anytime a button is inside of a form it will typically refresh and to prevent that we say e dot prevent the default Behavior okay so that's how we go ahead and do that and then what I'm going to do is I'm gonna actually need to do some stuff with Firebase in just a sec so I'm going to make a function for my sign in so I'm going to say const sign in and this will also take e as an argument and this will go ahead and the reason why it takes e is an argument is because if it gets triggered off of a click or something like that it comes with this event so we're going to say prevent the default Behavior which is going to be a refresh so if you see if I click the button it usually refreshes right but now once I apply it to here so for example on the button type submit here I'm going to say on click sign in and if you guys notice now when I click this it won't do a refresh look at that no refresh but if I click this one it won't do a refresh as well yeah because that's a that's still sort of a fake link right so I'm going to make that piece of text trigger the register function so the sign in button will trigger the sign in function and this text down here would trigger the register function okay so just very simple like that okay so what we're going to do now is we're going to go ahead and set up the rest of our Firebase configuration okay so we're going to go over to firebase.js because we need the authentication portion of this build to get up and running first thing we're going to do is run to the top and say import Firebase from Firebase now if you'd missed the beginning I actually went ahead and implemented I already went ahead and um installed Firebase into the project by doing yarn add Firebase okay so I actually did that in the beginning of this project if you haven't done it simply run yarn add Firebase to go ahead and get up to speed okay once we've done that right we're going to go over to our Firebase so let's go over to our Firebase and then what we're going to do is go ahead and say authentication on the right hand side click it right so let me go ahead and show you the full screen of like this okay so you'll be in either that view or that view and click authentication and then click sign in method go to your email or password make sure it's enabled so at this point we pulled it in we've got our credentials everything is good okay so what I'm going to do here is actually go ahead and set things up so I'm going to go ahead and firstly initialize the app with these credentials so imagine this is like a key to logging into our Firebase stuff okay so here I'm going to say const Firebase app equals Firebase dot initialize app okay this takes a config so it takes the configuration as an object and then that will go ahead and initialize the application okay now what we're going to do is we're going to go and say cons DB equals Firebase app so the app that we just initialized so this one right here and I'm going to say dot firestore so firestore is actually the database that we're going to be using it's a real-time database if you've never used firestore it's going to allow us to keep track of what the user's subscription is okay so that's it that's tomorrow we're going to be using the database but for today what we're going to be using is the authentication okay so for the indicator for the authentication well tongue twister we're going to say firebase.auth okay so Firebase doesn't actually need the Firebase app you can just do firebase.auth for this one okay now over here I want to go ahead and Export everything I'm going to use so I'm going to go ahead and Export the authentication um over here right and then what I'm actually going to do is I'm going to export the database as a default export because the DB I'm just showing you that you can mix and match explicit exports and default exports right and remember default you can only have one default export but you can have many uh explicit exports okay so go ahead and Save Right perfect right right so now we've got the authentication itself so now what we're going to do is go over to our sign up screen now over here you're about to get your mind blown dude I'm going to show you how simple it is to set up an account with this up and running okay so the first thing that we want to do is capture the information from here right I'm going to capture that information so how do I do it so I've actually shown this inside the course but I'm going to show you guys how to do it so typically what we do is we have a piece of state that tracks what is inside the email and password let me update it as the user types but now what you can do and it's actually a little bit more performance you can have a reference to that field so here I'm going to have an email reference which uses the use ref hook and this will allow us to basically imagine a big finger is pointing at a HTML element so that's what we're going to do right here okay this big finger is going to point a HTML element and I'm going to need to import this from react so let's go ahead and pop it from react and then it's going to be initialized with a value of node to begin with I'm going to copy and paste that and I'm going to change the email or F2 password okay go ahead and save nice now what I'm going to do is I'm going to go ahead and um there we go I'll send you asking again okay so now what we're going to do is we're going to go over to our register function okay now inside the register function whenever we click the register button right what I actually want to do is create an account with the user's email and password right so what I can do is I can say auth and I'm going to pull the authentication from our Firebase local Firebase file the one that we just set up inside of Firebase so this one hence the brackets because it's an explicit export okay so perfect so we've got the authentication object right so now what I'm going to do right so we're going to say auth.create user with email and password okay so over here what we're going to do now is pass in an email and password so you can see over here if we move quite out of the way all right there we go okay it's annoying but yeah it's fine so you can see it takes an email and password okay so you guys can see it's just this is blocking it right now but what we can do is the email and password over here right so pronoun I'm not going to explain you State versus ref today it's actually inside the react Basics inside the course but here for the username I'm going to go ahead and attach first you'll need to attach these references to the input Fields so for the email one I'm going to say the reference to the email one is going to be the email reference and the reference to the password field is going to be the password reference okay perfect so here what we're going to do is we're going to say for the username so for the email I'm going to say go to the email reference remember because it's like a big finger that is pointing at that email field so it's pointing at this one right here okay so I'm going to do email ref and then it's Point whatever it's pointing at so the current thing is pointing at right it has a property equal current and then we're going to say get the value so whatever the user is typed into that field so that's going to be the the email so the user and you can see here it says password it's the second argument okay so here I'm going to say the password ref dot current dot value okay perfect save and you can see that will actually go ahead and create the user with the email and password so then once it's created okay what I'm actually going to do is I can handle things so it will actually give me back the user's information but at this point I'm not going to use the user's information so actually log them in and then give me some credentials for that user which is incredible but if there's any point there's an error so I'm going to catch the error okay I'm going to catch that error and I'm going to go ahead and basically alert that on the screen so I'm going to say error.message alert it on the screen okay and there that's how we do it right so what I'm actually going to do here is I'm going to say auth user so imagine just to prove to you I'm going to get the user once they're logged in and say console log the auth user okay perfect now what I'm going to do is F12 pop this open and let's go ahead and see what gets rendered on the screen so if I go ahead and say get started and I type in let's just say Sunny gmail.com and password abcabc and I click on the what have we done we don't register so if I click on sign up now so basically went ahead and signed me signed up and you can see we get a user's object back and inside of it you get a user and guys look it's got a email it's got some information about me it's called the like tokens and all this other cool stuff a user ID uid and all that good stuff and just to prove that this actually logged Us in check this out what's up alexandros good to see you here if we click on users it just created an account so now we are authenticated and it has a password a user ID and everything okay and it tells us the provider that we've used is over here the email provider okay so really really nice if you were coming from like a a Google login or something like that it would let us know so at this point what I'm going to do is I'm going to go ahead back to the application and we've got the user's information here right so if I go ahead and refresh our app right you see obviously it's not going to show us because this was our function so how do I know if the user's inside right so how do I know if the user's actually signed in okay how do I not have to use it signed in let's go over to app .js okay and the first thing I want to show you is actually let's let's implement the sign in as well so I can check if I actually can sign into that account or not right so now what I'm going to do is say auth dot and this one's even nicer right it says sign in with email and password let's go ahead and pop that in and again this takes a you know the user's email and passwords we're going to use the same values that we used before pop that in here and then all I'm going to do here is actually catch the error right so again just to prove to you that it logs I'm going to say afterwards so with it then we're going to go ahead and console log the user and I'm going to say catch any errors that may arise an alert the user with the error message okay so that's the typical standard of getting that message back okay so now if I go back and I go ahead and click get started and I go ahead and say let's just go ahead and say sunny at gmail.com ABC ABC sign in you see it didn't throw any errors and over here it actually gave me the user back perfect so I actually did sign in right now let me try and do some random user and click sign in let's see look oh nice there is no user corresponding to this identifier the user may have been deleted okay and then something else that's pretty cool if I go ahead and actually get rid of this and I click sign up now the email address is badly formatted so you see we have that is this is where the catching is actually going ahead and catching the errors so it doesn't actually register or sign up a user if there's any error because it catches and it goes ahead and does it okay perfect nice so now what we're gonna do is we're gonna go ahead and continue on so how do I know if the user is logged in so we want something called persistence right persistence is basically if I sign in I don't want to keep on signing in right so over here on the actual main build if I go ahead and sign in if I go ahead and refresh notice how I know that I'm signed in right notice I'm turned in if I go ahead and sign out if I refresh it doesn't know that I'm signed in right so it's in like I'm not signed in so it doesn't do anything so over here what I can actually do is set something up on inside of app.js what we're going to do is some clever Wizardry okay so in app.js what we're actually going to do is have something called a use effect right and this use effect is going to basically go ahead and listen to the users logged in the state so the user effect is going to basically have a function inside of it and by including these brackets over here it runs on the mount okay so it runs on the component map I need to import use effect so there we go we import it from react so looking good right so far I'm going to need my authentication object from Firebase perfect we have the authentication object ready and what I'm going to do is I'm going to say auth dot now on auth state changed now this is going to say it's basically something called a listener right and the reason being is because it listens to any authenticated State change right so and what is really clever about Firebase is whenever you go ahead and even if you're logged in and you refresh it will store it to your local memory so in your browser so it'll basically go ahead and pop it in a cookie and it knows that you're logged in from before so on auth state change this gives us something called a user auth callback okay and what we can do here is we can say if the user exists then they're probably going to be then they are sorry logged in all right else they're going to be logged out okay and at this point what I can do is I can basically react accordingly right so here what I do is I can say console log and I can say user auth okay then if I go ahead and save you guys can see so let's go ahead and refresh let me go ahead and pop this up let me go ahead and do this right now and refresh right so you guys can see over here look it knows I'm logged in so we have the user's object so this is really good right now okay so it knows that we're logged in and if I go ahead and and I already have a logged in state so I know Sunny gmail.com and if I was to create a new account say ABC gmail.com and do ABC ABC and sign up it would Now log in with that different user okay so if I'll go ahead and you see it says ABC at gmail so if I refresh it will find the user and it found that ABC is now logged in not the previous account okay so we can also handle sign outs as simple as that as well but now you can see we've already gone ahead and included the sign in functionality but something you want to do whenever you're using a use effect you should have a cleanup function okay so the good thing about honor State changed is it actually allows us to have this powerful functionality called the unsubscribe okay it gives us back something which is unsubscribe remember what we're doing here by setting this listener up is we're setting up a listener which takes up a little bit of memory on our browser it takes up some compute viewing power okay and what we want to say is if the component was ever to unmount we don't want to duplicate another list now we just want to detach the old one and attach a new one okay so here what I can say is return unsubscribe and basically what this is the equivalent of saying is when it basically cleans up run the Subscribe function so this is the equivalent thing of doing this okay so what I'm going to do is instead just say return unsubscribe save and that means that our performance is going to not going to be affected okay right so that is Google level security by the way so in case you're wondering if is it secure is it everything so Firebase is a Google a set of tools and yeah if you don't trust Google security I mean like there I mean we can't really do it better than Google right now can we right I mean you can try definitely try no I'm not gonna but you know like don't just I'll tell you it's pretty fat so you can trust Google so what I want to do at this point is we're going to talk about Redux okay so Redux is essentially a global store right when we have an application and we have components inside of it right rather than prop Drilling and passing values down from one component to another component to another one we get into a problem we're getting it's called prop drilling right we don't want to do that instead in wherever we are inside of our app we might want to get access to a variable for example the user right and then wherever else we are in the app we want to basically get that user right so then we call this a global sort of store right and that is where Redux comes in it's the global store of our application okay so when we set this app up we use the template Redux when we use create react apps so we're going to dive into that and get everything up and running with that so first thing you want to do is go over to our app right on the right hand side and you see store.js I'm going to do a quick refactor here I'm not going to say the counter reducer I'm going to change this to be the user reducer and you can see we just changed a file name called user slice so inside of features I'm going to change counter size to file to user slice save okay now follow this bit very carefully okay so follow this paper pretty carefully so here I'm going to change counter size to user I'm going to change the name of the piece of State user right now we're probably wondering what is user slice right so remember I talked about that Global store okay rather than having like this huge Global store where we just don't know where anything sits we can have these like slices of the store so imagine that onion and every single slice contains different parts of different like different sections of information so imagine we had a user section over here right and all the users information goes over here and then imagine we had like a basket section over here and all the basket information goes over there now we've got two very easy to understand and sort of like look at pieces of State as opposed to just chucking everything in this one Global store okay so hopping back over we're going to initialize the user piece of uh piece of that user section of the store and the initial state for for that is going to initially be so we can actually set this up to be whatever we want we're going to have the user here okay so I'm going to go ahead and say user like this and the user is going to be no okay using window and over here in the reduces I want to basically go ahead and we can get rid of all of these items inside the producer the first one I want is a login the login takes the state it takes an action and it does the following okay so it takes the state and it modifies the user and it says okay set the user to wherever we pass as a payload now if you're not sure about what I'm saying here just follow along and I promise you this will all make sense over time with pattern recognition Okay I do break it down in a lot of a lot of videos but in today's one I'm going to basically just go ahead and explain to you at a very higher level what we're doing here so here we've got the state and then we've got State DOT user equals no okay like so and the final one actually we're going to leave this we're going to start with login logout okay so these are going to be two these are called actions okay so what we can do is we can actually go ahead and we can go ahead and basically dispatch an action and then it will do the appropriate behavior and manipulate so the way we interact with that Global store is we have to dispatch actions into it okay and the two actions that we created now are log in and log out right and they both have a way of affecting the user section of the store okay so that's why they're inside the user reduce or the user slice okay so here for the login we're going to go ahead and change these so we need to export this from you see you see it's called counter slice actions but we're going to change counter size to be user slice and over here I'm going to get rid of this and say login and log out this way it gives us access to these two actions outside of the class okay so I'm going to go ahead and get rid of this one we're gonna need to know about this for now and then what we have is selectors now selectors are essentially how do we access so remember I explained before if you push things into that Global store for example that user store right we're pushing information into it by using actions right but how do I get a value out of it and then use it inside of my component okay so if I want to get a piece of information out of that user store then all I need to do is basically create something called a selector and that selector will then go ahead and give me back the value I'm after Okay so we're gonna go ahead and check that out right now so you can see here where we have select count right we're going to change this to be select the user and this goes into the state it goes into the user slice of the state because remember we're inside of the user size and then we're going to go ahead and get the user okay so I'm going to show you guys some pretty cool Redux Dev Tools in just a sec and the final part of the refactor is we go here to counter and we change it to user slice and then we go ahead and save okay but let's go ahead and carry on so we've got the login logout and we've got access to it now so we've got our selectors everything in place so let's go ahead and save boom everything is looking very good at this point inside the user slice we've got everything up and running inside of app.js this is where the power comes in right when I have that listener that basically checks if there is a user logged in or not using Firebase authentication so remember the one I'm talking about is the user auth listener that we have over here so the on Earth State change the one that we set up just a second ago when it detects that someone's logged in remember that user piece of state right I'm going to basically go ahead and fire that user object into the state so now I can access that user from anywhere inside of my app okay so let's go ahead and do that right so here we have the user Awards so when we're logged in all I'm going to do and the re the way we go ahead and manipulate the state is we dispatch something into it we dispatch a login action or a log out action okay the way we dispatch is we use this very handy hook to go ahead and get a dispatch object firstly so the way we get the dispatcher is we say use this match and I need to import that from a react Redux okay go ahead and hit save so now what we're going to do is we're going to go down here and I'm going to say for when we're logged out right I'm going to go ahead and say display oh sorry dispatch and then this is going to be dispatch and then we're going to say log out and I need to import the logout action so remember the logout action what it's actually doing here is it's resetting the user back to no okay so if we go back here if we're logged out it's going to reset the user back to no okay and when we're logged in it's going to go ahead and do similar pretty much the opposite right it's going to go ahead and push the user into the store so that user auth object had a bunch of things inside of it had a user ID an email and a display name I want to capture those things and use them right in fact we don't actually need the display name for today we just need the user ID and email so what I'm going to do is dispatch a login event okay and what we can do with a login event is we need to import it firstly we can pass in something called a payload okay now the payload is basically what we're going to set the user to so I'm going to pass an object here right so app.js let's go ahead and we're going to dispatch an object into the store okay so into the Redux store and here we're going to pass in a uid and what we're going to do is we're going to go into the user auth and we're going to say okay get the user wealth what the the user World ID the user ID off of the user author okay then we're going to say get the email and that is inside of the object though that remember that squiggly weird object that we got back that's inside the email it's that's what it's called design and then I'm going to get rid of the Contour log okay perfect so now what we can do is we can check if this actually works or is suddenly just lying right is he not is he not telling the truth so what I can do is I can go ahead pull out my my website refresh just to make sure we're on the latest thing go ahead right click and click inspect and then what I'm going to do is go ahead pull this over a little bit and go to the top and I've got the Redux Dev tool so I really highly recommend you install them now this is incredibly powerful okay so if you click state it shows you the state of the application so remember we set up a user slice so this is the user slice of the application and then over here we have the user inside of the user size okay then remember we have the user ID and the email of the person who's logged in right they're probably wondering how the hell did that happen right because remember look what on the left hand side we have the list of actions that were dispatched so if I go ahead and click the action and click on the action here we can see this action inside the user slice the login action so remember the user slice so where is it going let's go ahead and show you this one so inside of the user slice over here the login action inside the user sites was fired off which is why we saw it where do you go yeah which is why we saw it over here so the user login action and that had a payload of user ID and email and that and if we go to diff this is the cool bit the diff shows you how it modified the store so he says okay the user changed with this following object so the uid and something else changed okay and then here you can see for yourself and what's really cool about this is you can go back and forth on this if you can rewind the state look how cool that is right you can rewind the state but there you go that's how it works okay so that's just to prove to you that it has been dispatched into the store right so now that it's dispatched into the store how do I get the value out of the store the way we get the value out of the store remember I talked about selectors and I talked about this one in particular over here the select user which goes into the state of the store so basically that Global store goes into the user slice and then gets the user from this from the store okay so what I'm going to do then is go ahead and say inside of Abdul JS and rather than doing this like hard-coded value I'm going to go ahead and change this to say use selector remember I told you it was a selector that we built and I'm going to go ahead and say select user so remember this was the selector that I wrote inside of the user site so select user was the name of the selector and inside of our app we're saying use selector select user this will give me the user back right so if I go ahead and save now look what happens guys so initially it's no but because we're logged in look at this initially it's no and then Firebase kicks in and it says hang on you are logged in so let me dispatch a login and then it updates the redox state which is why it pops in so you see in the beginning it's no and then it finds it and it says oh no no you're logged in there we go perfect works really nice right that works perfectly nice so the next thing I'm going to do is create the login sort of the profile screen now the profile screen is I want to have it so when I click on this it will go ahead and take me to a different screen now how do we do that okay let's go ahead go to our app so firstly that was actually a crazy breakdown of Redux so if you guys enjoyed that smash the thumbs up let me know in the comments right so we're gonna add a new route okay so I'm gonna add a root over here and this route is going to basically have a path of forward slash profile right and if you're confused or wondering what I'm building right now let's go ahead and log into the main app sign in and I'll show you so this screen right here okay so what I want is I want this functionality so when I click on this button at the top it will take me to the edit profile screen this is what we're trying to go to okay so here you go we're going to build this screen so inside of the profile section here I'm going to go ahead and create a profile screen all right so obviously what we're going to do is we're going to have to be responsible for creating this okay let's go ahead and open up the screens and let's go ahead and create the new screen so we're going to say profile screen.js boom we have the screen rfce to pop out uh screen stuff that we want right and then we're going to do our bam naming convention so class name is profile screen and I'm going to go ahead and do on typical setup with rcss so import and then I'm going to say profile screen.css done and I'm going to go ahead and create profile screen so profile screen dot CSS boom nice perfect this is looking pretty good right so to prove that it's the profile screen I'm gonna say this is the this is the profile save okay and what I want to do is inside of my application now I'm going to go ahead and say go to forward slash profile and we can see over here if we where is it going all right so I mean it's it's in the screen right so you can see this is actually just a blank screen right now oh yeah because we haven't actually rendered the correct screen so we go to app.js and I need to go ahead and import the screen at the top of the file so profile screen save and now we should see as you can see this is the profile for slash profile okay so okay so now let's go ahead and refresh perfect okay so it's working pretty good at this point so the route is set up and configured as we wanted it right so what I'm going to do now is actually have it so that when we click on this Avatar at the top it takes us to that screen now how do we do that let's go into the home screen let's go into the nav component okay so the nav component has an avatar at the top this one over here to be precise right when we click it I want to navigate to that screen now how do we programmatically navigate with the react router I'm going to show you exactly how to do it okay so what we're going to do over here is we're going to have something called history now with react Brewer the every time you sort of change page you're essentially pushing a new page in the history which is why when you click the back button it goes back a page right so what we're going to do here is we're going to get the history and we've got a nice little handy hook here called use history which gives us the history we can import that from react through a Dom and I'm going to go ahead and use the history and what we can do is we can programmatically push the next page into the history stack so here I can say when we click the avatar so on click I'm going to go ahead and do an arrow function and I'm going to say history dot push and I'm going to do forward slash profile there we go save now check this out guys if I go ahead and click this takes me to the profile nice that's cool right and if I go back because it pushed onto the history stack it knew where to go back to when we popped off when we went back as I pushes the page if we go back it goes back to the page whatever go forward it knew where we were we'll go back in those everywhere so let's carry on so we've got the profile screen so now we're going to deck out the profile screen so we can have a way of getting here right now so let's make this look pretty okay so the first thing we're going to do is open up the profile screen I'm going to make this sort of a bit smaller so we can go ahead and configure it and then instead of this is the profile we're going to make this a bit more meaningful Okay so so what I'm going to do here is actually render a nav component so I'm going to reuse the navigation bar okay so this is a perfect example of component-based design I'm going to go ahead and reuse the navigation bar and you guys can see now look on the profile screen I'm just reusing the navigation bar right so perfect and what I actually want to do is when I click the Netflix button I want to go over to the home screen so how do we do that I go over to my nav bar when I do this I say on click on click oops let me go ahead and copy this one so on click history.push the original page so let's go back here and now I'll check this out I can navigate so if you click this button look at that we can navigate between Pages now nice right so what I'm going to do now is create this lovely page so we've got the profile screen and over here I'm going to say profile screen body okay so let's go ahead and drop this in profile screen body and then the first thing I'm going to do is have a H1 which says my profile okay so it's just going to say edit profile that's the kind of profile screen that's what it says so here we're going to go ahead and create so we've got edit profile and it's white right now which is why we can't see anything so if I save it we should be able to see something let's see there you go CCS at the top right there we go right so now what I'm gonna do is go ahead and open a profile screen so we've got a body here and then I'm going to go ahead and have a profile screen info there we go so profile screen there we go drop it in there and I'm gonna have an image tag and that image tag is going to have an image and that image I actually have is the Avatar right so it's the Avatar of that little little face the Netflix face so I'm gonna go ahead and pop that in and I'll go ahead and refresh and you guys can see in the end goal guys is that we get to this screen so this is the goal this is where we're at I think we're pretty close okay so now inside of the info screen so we have the info we have the image and what I'm going to have is the details now the details is going to be this portion over here this is all is what is what I'm going to refer to as the details this entire block okay so here I'm gonna say outside of the div right so we have the image and then next to the image sorry I'm going to say div and I'm going to say profile screen and I'm going to say details okay so both of our screen details and then inside of this I'm going to have the H2 which is going to be the user's email now how do I get the email well I remember we actually pushed the user's information into redox right so we can go ahead and fetch it so I'm going to say const user equals use selector go ahead and import that there we go and I'm going to say select user okay so I'm going to go ahead and grab the user from the store boom we have the user and what I'm going to do right now is actually go ahead and just simply say user.email remember we push that into the store in the beginning so if the user is logged in we will have their email so now you guys can see ABC gmail.com is logged in perfect it's working really nice so the next thing we're going to have is the profile screen plans okay so the profile screen planned is essentially going to be all of this stuff okay it's going to be all this stuff and what I'm actually going to do here is just now I'm going to pop in a profile screen plans diff okay so I'm gonna pop in the profile screen plans but we'll keep you empty for now okay keep empty for now and what we're gonna do is I'm actually going to have a sign out button underneath that okay so inside of the plans right at the bottom of it see inside the plan section at the bottom I have this sign out button okay so I'm going to go ahead and create a button and I'm going to say sign out okay so for the sign up I'm going to give it a class so I'm going to give it a class name there we go let's go ahead and give it a class name and let's just say profile screen sign out right both of us here and sign out there we go and then what this is going to do is it's basically going to represent the sign up button so I'm going to first I'm going to show you how to log out so remember we use Firebase authentication to log in but to log out it's just as simple right how do we do that I'll show you right now so what we're going to do is we're going to say on click right and I'm going to do and this is how simple is you're gonna whoever hasn't used Firebase authentication is about to be absolutely blown away right so we're going to use an arrow function I'm going to pull my authentication object in for my local Firebase file I'm going to say auth DOT sign out boom that's literally it I swear to God that's it sign out call the function save it and look at what's going to happen now as soon as I click that button it's going to go ahead sign out right which is then going to trigger off our listener that we have over here triggers off to listen because the authentication State changed now there is no user auth which means it goes ahead and logs out which dispatches the logout action which means that if there was a user in the Redux store there no longer is which means user is now no if the users know it's going to throw us back to the login screen as opposed to showing us the application right so that's just insane check this out let's go ahead and sign out if I click sign out right now okay it's not no issue right let's go ahead and refresh let's see what happens they did sign me out but it didn't redirect me okay so it didn't actually redirect me why did it not redirect me we'll figure that one out so if we click sign in let's go into ABC gmail.com and I know why I think I know why let me go ahead and check in my app.js there we go I know why all right so here we say ABC ABC sign in and you can see it signed me in so I'm back on the page and then what actually happened was the use effect is dependent on the dispatch method so it needs to run this and double check this code every time we have a dispatch event that's fired off okay so what I'm going to do is actually go ahead and say oh and actually it's here that's why log out all right there you go to smash the login action so now if I click sign out boom there we go kicked it basically went ahead and reset the uh the user inside the redox State plus you should actually include the dispatcher as a dependency because it is dependent on this function over here okay all right so now we're going to go ahead log in gmail.com so guys look at that we have a full authentication flow right now all right so I'm going to go ahead log in perfect all right so let's go ahead and carry on with this so heading back over to the profile screen so what we're going to do now is style this out this does not look at all anywhere where I want to get to it doesn't look like that right I want to get it looking like that so I'm going to open up my profile screen CSS and if you're wondering how I do that come on P command p is to pull up a quick sort of you know jump to a file so I'm gonna go ahead and start this out so how do we do that how do we make it look really pretty okay so let's go ahead and start off by targeting the profile screen which is the outer container so I'm going to pop this under here profile screen over here so let's go ahead and say profile screen there we go and here I'm going to say a height of 100 view height because we would want to use up the entire height of the screen I'm going to say the text color should be white so that way we can see it on the black background immediately it looks a little bit better okay we're getting there it looks a little bit better and it's not as bad right um let me go ahead and pop the profile screen on the right there we go so next thing we do is Target the body over here all right so I'm gonna go ahead and say boom product Pro Plus screen body and then here I'll say display Flex Flex on this I'm going to say Flex Direction column boom save it okay and then I'm gonna go ahead and just double check this is all mapped out correctly there we go save let's go ahead and refresh okay so the next step is to go ahead and say with the 50 margin left or margin right or Okay so let's go ahead and do that and you see it pops into the middle I'm going to give a padding top of eight percent and a Max width of 800 pixels now there was a reason why I went with this decision I'll show you in just a sec now you guys can see the reason why we're with eight pixels is because you see as I sort of make the screen bigger it kind of nicely fits a phone higher and it goes ahead and sent as the screen like this right now obviously this doesn't look too great at the moment so we're going to fix that so what I'm going to do now is for profile info so profile screen info which has an image and the details right so the image and the details so this entire container here is the info okay so we're gonna go in the profile info and this is just going to be displayflex that way everything goes into a row by default if I do that you can see it went ahead and pushed it into a robe obviously it's not fitting right at this point okay so I'm gonna go ahead and Target the image okay so the way I'm going to Target the images say inside the profile info div Target the image and say a height of 100 pixels there you go starting to look a lot more better and cleaner okay now what I'm going to do is Target the sound of this target the H1 inside a profile screen body and what I'm going to do here is say profile screen body I Target the H1 and inside of here I'm going to give a font size 60 pixels font weight 400 a slight border bottom to give this little nice effect and a margin bottom as well okay and there you go you see that gives it that nice little Sleek Netflix effect and you can see we're slowly slowly getting there okay now for the profile screen info we're going to make this look a little bit nicer so I'm gonna go ahead and dive into the the image we've already done we're going to Target the profile details right so the profile details is the stuff can holding this text and things like that here so boom color white margin f25 pixels so it's not touching this and a flex of one so it uses up all the available space okay this looks really really good the next section that I'm gonna do is Target the H2 inside of the um profile screen details okay so I'm going to Target the H2 and I'm going to give a background color of gray so I actually want to do here is this right here I want to kind of have it in an editable sort of looking looking field okay so I'm going to go ahead pop it there I'm going to say back profile screen details Target the H2 background color gray padding 15 font size 15 and I'm padding left of 20 pixels duet boom we get that very nice right and again this is all responsive you guys can see as it grows looks nice look at that looks really nice boom I really like that right that's looking really really good okay so the next thing I'm going to do guys is actually have the inside of the profile plan screen so I'll Target this button in a sec actually just do the bottom right now let's do that button right now so I've given it a sign out button let's go ahead and Target the sign out button and then here I will go ahead and say a padding of 10 20 pixels font size one ram so let's go ahead and apply that right now save you can see we already got the size of it better okay I'm going to say width should be 100 of its container and I'm also going to give a margin top so it doesn't touch the top component I'm going to change the color of the text to White and a background color of Netflix I'm going to give the Netflix color branding boom we get the Netflix color and then obviously we're going to change the font color weight border none and a cursor pointer right now if I go ahead and like kind of hover over it it gives me no feedback to say it's a button so if I do cursor pointer and I bought it none through that horrible nasty border there you go look at that looks really good okay looks really really good right so now we've got that up in play so what we're going to do next is actually have where we have the profile screen plans I'm gonna have a H3 tag right and the H3 tag is going to be the users um now we've already got to use this email sorry um we're gonna have a H3 tag with the plans okay so over here you can see it says plans and then it has the following information right it has all of this stuff now these plans we're going to implement because there's going to be the final part of the build to implement all of this stuff in stripe okay and just to show you guys once again what we're going to be doing if we go ahead and click one of these right now and we'll actually go ahead load up stripe make a request and send us over to a payment page right so here you can see it actually sends us over to a proper functioning payment page and you can pretty much fill out the details and it all works it just works and I'm going to show you some crazy powerful stuff this is a new Firebase stripe extension that's literally just got announced a couple of months back and it's brand new and it's so cool honestly like we it's really crazy this is actually a page that comes from stripe it's completely going to be mobile friendly so you can see it's got Google play all of this functionality included so if you want to look at that guys the test mode is there just to prove that it's got a test key and we're going to build all of that we're going to finish off with implementing the final bit of UI and just prove that we can do that right we can do that and we're almost there so we're gonna have a H3 tag right the H3 tag is going to say plans okay and then we're going to go ahead and install the H3 tag so we're going to say profile screen plans on the uh CSS and we're going to Target the H3 I'm going to say border bottom one pixel solid that nice little hexadecimal everyone was asking for and then we're going to go padding bottom 10 pixels okay so you can see we've already got that nice little bit there but obviously I don't want it touching so close to the top right so that container is called profile screen plans I'm going to give it a margin top of 20 pixels and you can see now we're starting to look very close very very close to where we're at right so this is looking very very good so the first thing we do is actually head over to our Firebase now we already enabled authentication which is why it was able to go ahead and work in the first place right the second thing we're going to do is actually set up our database we need the database because we're going to be storing the user and their subscription inside the database so we're gonna go to Cloud firestore right now okay now what we're gonna do is now Cloud firestore you guys can see here right I want you to click on create database now here you want to go ahead and click Start in test mode right once you've done that click next now over here it doesn't doesn't really matter what your location is the servers are extremely quick you want to click enable right so once you click enable everything is going to go ahead and set itself up right so we're going to give this just a sec and then it should go ahead and work right it's just setting up the security rules and we will also be actually manipulating some of those rules but yeah here we go we have the cloud firestore in place right the next thing that we need to do is go ahead and go over to the extensions tab okay now you're probably wondering like I've never used the extension so today we're going to be using this together okay so I'm going to pretend as if it's a first time run through show you exactly how I would do it my thought process behind it exactly step by step because in this build today it's actually going to be quite a tricky one to get every step right right so I want you to follow give it your best effort okay so we're gonna go down here run subscription payments with stripe we're going to click on install okay now you can see it says controls access to paid content by syncing your subscriptions with Firebase authentication okay so I'm going to go ahead and close this one out and then basically what it does guys is it creates a bunch of different Cloud functions for you which is actually extremely powerful okay if you've ever used car functions before you'll know that in today's build it will go ahead and actually do this for us right so we're going to go ahead and click next and then here we need to set up billing okay so you guys see that we do need the blaze plan in in order to use extensions now this does not charge you okay I think it charges you like one penny right or one cent on your account maybe like possibly okay but I would recommend that even like if you feel uncomfortable with that honestly you just get over and put the card on the account it's not going to charge you but the thing I will say is just try it okay try it before you knock it and kind of be like Oh I'm not going to do it because I have to put a card on the account right do that give it a try and if you don't if you absolutely can't then I'd recommend that you just watch and you enjoy okay but remember like I said put a card on the account set up your billing and then this will work so here I'm going to click upgrade project to continue okay so you'll say blaze plan pay as you go and here we're going to click purchase right now you might not have this you might have to set up your billing it won't take long okay it won't take long to go ahead and do this but remember go ahead and do that right so you're going to click on the purchase and then here you see you've successfully upgraded your project perfect okay and if you really want to you can set a budget alert right so if you're really kind of scared then go ahead set up a budget alert and then it will let you know if you went over five pound or something okay which obviously you won't but you know it's gonna just be to give you that peace of mind if it's making you a bit kind of nervous so now what we're going to do is review access Grant into this extension so we're going to click it and you see it gives certain permissions to the extension okay so extensions are like think of it as like power-ups for Firebase okay so Firebase set of tools provided by Google we've got the database we've got authentication all this other stuff Cloud functions the extensions are this kind of relatively new feature where you can basically like just upgrade your app literally you just install it by doing what we're doing and it just levels up your app and gives it really powerful stuff okay so this is really really cool stuff so let's go ahead and carry on I'm going to click next perfect now here we're going to go ahead and say configure the extension so we're going to leave this to be default and now here what we're going to see is pull up products and pricing plan collection so here we can go ahead and leave it as products if we want here customers this will be the where the customers get stored so it's you notice how it says collection it's going to make this collection in the database so it's obviously a nosql style database okay now here sync new users to stripe customers and Cloud firestore here I'm going to click sync okay so every time somebody registers it will go ahead and sync them to our database I want that okay now stripe API key with restricted access right so we need to get a stripe API key so what you need to do is head over to stripe so I'm going to go ahead and type in stripe in Google and then you guys will see stripe this one right here you want to click it okay now once you're inside the stripe you want to create an account right so you need to create an account with stripe now if you're wondering what the heck is stripe let's go ahead and have a look at what stripe is okay um I just want to double check that my account currently isn't logged in so I'm going to open up stripe and then you guys can see I'll show you an example of what stripe is so you can see payment infrastructure for the internet so loads of companies use stripe delivery a bunch of others but it's extremely powerful it allows you to charge cards it allows you to have apple play on your website it allows you to have a bunch of other things on your website okay so this is really really powerful so you can see it's pretty much it's a backbone for many internet businesses because it Powers the payments which is very tricky if you do it manually okay so this is what we're going to go ahead and set this up with right now okay so we're going to go ahead and create an account so you want to click on dashboard or sign in or register at the top create your account and then we'll move over to the next step so once you've done that at the top hand corner you're gonna see like my business or something you'll click here and the pop-up will come up saying again to enter a company name so in this case I've gone ahead and just done Papa YouTube demo and I had this before for practice but we're going to do Papa YouTube demo or whatever you want to call it it's completely fine once we've done that we can now get started okay so in this case because it's a test app I really don't mind showing the key but obviously keep your keys secret in the future okay so here you can click on get your API key and then it shows you a bunch of things okay so you can see it says secret key and publishable key right so at this point what we want to do is go ahead and if we go and check out uh the extension steps it said we need the live key okay we need the live key now whenever you're using a payment processing platform you're probably wondering okay sonny but I don't want to get charged right how am I how I want to test the app but I don't want to actually test the raw card right the way you do that is you have two sets of keys right whenever you give like whenever you set up your app you have a test key and then you have a live key right so we're only going to be using the test key today and the test key allows you to process a fake card and there's a special number we put into the card field and basically you'll type in 4242 for that the card number and basically it will just pretend to charge a card like okay and it will test the payment but that's how we essentially prevent that from happening okay so here what we're going to do is we're going to go ahead and say reveal test key okay so you guys obviously want to keep this a bit more of a secret okay so now what I'm going to do is just to make this a little easier I'm going to go ahead and pop this on another desktop like so so I'm going to go ahead and do this so that way we don't keep having to keep swap so we need the live key okay so I need the secret key okay so this is stripe API key with restricted access so I'm going to go ahead and use I'm sure it's this key let me just double check API keys and then I'm going to go ahead and reveal my my actual key perfect yeah so is it going to be the secret key okay or it might be the restricted key let me just double check no it's not the restricted okay it's gonna be our secret game so I'm going to copy that and then I'm gonna go here and I'm gonna paste it in okay you can actually go ahead and create a restricted access key but in this case I'm going to just use our test key I'm sure it's the test key I'm really really sure it's a teskey okay so now what we're going to do is you see here it says fill in from post install so you actually leave this one you leave that blank okay you don't actually touch that one for now um but I'm going to double check with the key for a sec let's go ahead and check it says go ahead and create keys restricted API Keys publish key okay so that's fine for now we can use this key at the moment okay public key test key let's just go ahead and double check okay yeah we're going to use this one it's fine if it's the wrong key we can go ahead and change it anyway okay but this one you see it says filling from post and Source we leave that as it is okay so I'm going to go ahead and click on install extension all right perfect now you can see it says it should take three to five minutes okay so while that's loading we're gonna go ahead and just I'm going to explain a few things that we have to do so let's go ahead and click view details on how to use this extension in the meantime and you guys can see a bunch of stuff comes up now you see we have to set a few things in place okay so typically this is where you have to pay attention and you don't just run ahead and guess and things like that because it won't work and then you're going to send me a question saying I don't understand why it didn't work and I'll be like guys you have to have to follow these things because it allows this stuff to work there's a lot happening under the hood right the first thing we need to do is set the cloud firestore security rules okay so here what this is doing this is actually allowing only the authorized users to access their checkout sessions and subscriptions okay so like you guys can have a look into this a bit more but what it's going to do is inside of Firebase right now it's not about firestore collection that extension is going to actually go ahead and automatically populate customers their subscriptions pricing plans inside the file store all by itself that's pretty cool right all by itself right so what we're going to do here is go ahead and copy this go to the um go over here and while this is loading I'm going to go ahead and just I'm going to open up a new tab for the cloud firestore okay so why that's obviously I don't want to move this away I want to kind of let that do its thing and then here I'm going to click on rules nice so here what we're going to do is I'm going to go ahead and grab this grab all of this and paste the new rules okay and I'm going to click publish okay so something didn't copy over correctly let me just double check um I've not done it correctly let's go here I actually need this over here so let me go ahead and copy it again and let's go ahead and paste oops Yeah paste there we go and publish right so we've got a few errors here it says params customers collection um let me just double check guys I'm going to go ahead and double check on my other build that I did and I'm going to get my previous rules what we're going to do here is you guys can pretty much pause the video and copy this out if you would like so you want to go to the rules go ahead and copy this in right so this is the overall thing that we need inside of our rules okay what you can do at this point is pause it and then you can go ahead and uh and pretty much just copy this out okay so what this is going to do is only going to allow the authenticated users access to the specific parts of the um of the of the database okay so what we're going to do now is publish okay so we're publishing this and let's go ahead and check up on our stripe payment so it's still setting itself up okay so while that's doing itself what we can do is go ahead and we'll close this tab for now let me go ahead and do the following so let me go to the uh this one right here okay so it says configure stripe web hooks okay so this is a step that's like absolutely necessary okay so you can see we need to go to the stripe dashboard so I've got the stripe dashboard over on where's my travel natural one I've got my stripe dashboard over here so we can close that one I've got the striped dashboard over here I'm going to click on the web hook section over here click it right and what I'm going to say now and web hooks are essentially whenever something happens on stripe for example a product is created updated deleted and all these things we need to go ahead and actually sort of like send an event to our Firebase application okay so we need to go ahead and set this up so what we're going to do is we're going to go ahead and say use your url of your extension function as your endpoint URL so I need to actually go ahead I'm going to go ahead and try and find the actual post install stuff so where is my let's go ahead and once this is set up it will give us instructions which have our code available on it okay but you guys can see it says install complete so now I'm going to click on get started so I would recommend you just wait for that because these instructions are a hell of a lot better than what I was looking at so these ones will work if you copy that okay so you'll copy the rules so remember you guys rather than copying what I was doing and sort of um like writing it out manually you guys can copy the rules over here go to your firestore and then just paste them like so and that will be perfect there you go then you ecss configure stripe web hooks now here you get a unique URL so here's my web hook event okay I'm going to copy this I'm going to go over to the stripe dashboard okay so where's my stripe dashboard right now okay it's over here web Hooks and I'm going to click on ADD endpoint okay now the endpoint URL I'm going to go ahead and pop in my endpoint URL so you see that long that long string that you gave us over there right and now I need to activate it for these events so I'm going to do to make this a little bit easier is I'm going to go ahead and pop this on the same screen and show you guys right so this is what I have over in stripe right now so I'm going to add the endpoint and I'm going to basically go ahead and paste that long piece of text in and then what we're going to do here is we don't need a description you can if you want I guess explain that but here you want to go ahead and say product dot created and you need to actually go ahead and actually manually add these okay so the next one is going to be product deleted and and updated so that we know there we go let's add those three in so they see the three are here right so that's the top three and we also need price dot created we need to press dot updated when you press dot delete it okay so now we have six perfect and then we have checkout session completed and what's going to happen is every time these events happen in stripe it will tell our application right so this is how the communication happens and here we'll say completed so every time a checkout session is completed it'll work and then here we can go ahead and say customer subscription created customer subscription deleted right so you guys can see if I go to the top is adding them and then customer subscription updated so customer subscription updated okay so now I've got those three and the last one are tax rate and and they're optional but we will add them for now just in case you want to do stuff like that so we're going to say tax underscore rate created and I want updated okay so guys remember go ahead and follow this and you guys can go ahead and check this out right so right so here we've got a bunch of stuff that's been ticked off and now we should have if you count it it will match 12 events okay perfect now what we're going to do is we're going to go ahead and do this we're going to click on ADD endpoint okay perfect so we've added this in and then it says use the Firebase console or Firebase CLI reconfigure your extension with the web hook signing secret so you can see over here it says signing secret so it says click to reverse I'm going to click to reveal it and it gives me the special secret key okay so what we're going to do here is we're going to go ahead and click on the we can click on the reconfigure link so this will should take us to the Firebase console actually no don't click on that one you want to go to your Firebase link so let's go to another Firebase tab go over to extensions and then you can see where we've got the Run subscription payments click manage and then click on extend a reconfigure extension okay and if we go down here you see where it said fill in from post install okay so what we do here is we simply paste this secret key from stripe so we paste it in there okay so so go ahead and paste that key in all right so once you've done that you can see it will go ahead and update on the screen then you want to make sure you click on Save right so again it says it's going to take up to three to five minutes because it has to propagate that change throughout okay so that's going to be as we expected and it's going to look pretty good now we're going to do is go back to our instructions so let's go ahead and make this full screen so this was the instructions the configuring step and then you guys can see here so it says now you need to create your product and pricing information now this is the cool bit okay this is the really really cool bit now we just need to go ahead and create products inside of stripe so inside of stripe what you can do stripe has a very nice UI if you've never used stripe before okay you go over to products on the left hand side you click on ADD product okay so here what you've got is different products okay so let's go ahead and have three types of plans on Netflix they have the basic plan they have the standard plan and then they have the Premium plan okay now the basic plan I think it does only like 720p the uh the standard plan does 1080P and then the premium does 4K and HDR content okay so we're going to go ahead and do that right now so here I'm going to start with the basic plan I'm going to say basic plan okay and then here in the description what I'll say is I'll say okay let's just say 720P right and then you can upload images and all that good stuff but right now we're going to leave it now here for the pricing we're going to do standard pricing and I'm going to say let's just say the the basic was like I think it was a 7.99 or something right but you can determine the pricing here if you want right whatever you decide so let's just say it's 5.99 for basic 8.99 for um standard and then 13.99 for premium I'm sure that was roughly up so we're going to leave it in we can do it in pounds because I'm in I'm in the UK so I'm gonna say six pounds a recurring subscription monthly okay so perfect we have a recurring plan and then I'm gonna go ahead and click save and add more right so I'm going to click save and add more that will go ahead and add the product to our list of products right so the next one is going to be standard right so basic plan and this one did I say plan or did I say did I say I think I just did a standard plan right I did say plan right it wasn't just basic I think I did basic plan I can't remember let me know and then here in the description we'll say 1080 P okay and then what I'm gonna do okay so now what we're going to do is go down to the pricing and then here we'll say okay so we did 5.99 so I'm gonna say 8.99 GBP for the standard which is 1080P and then perfect monthly and it's recurring you see and we go ahead and hit save and add more perfect okay and then what we're going to do is add the premium plants we'll say Premium plan okay the Premium plan is going to have 4K plus HDR okay now here I'm going to go ahead and say standard pricing no the app standard go ahead and do GBP and this one's gonna be I think it was 13 and 99 a month okay that gives you 4K and HDR and then perfect I'm going to hit save product on this one rather than save and add more save product and this should take me to the product screen right so if I go ahead and click on products now I can see look three payment plans right so this is really nice right because what we're actually going to go ahead and see is is like everything in a very nice UI right here we have the product set okay this is really nice so now what we can do is go ahead and look down and you've got the everything sort of set up right we've done this bit the next thing that we can do is you can actually add custom rows to products okay you can actually add custom rows to products and what this will do is it will allow you to basically have so let's go down here what's really cool about this one is it will actually go ahead and upgrade sort of like for example if we this is our rules right our Firebase function rules and I don't usually go over rules a lot you can see here right this is really cool because basically look what's happening it says allow the reading of the content which is in basic like the basic sort of section of our database and then the premium section of our database is here but allow the access of basic if the person has basic subscription or they have premium subscription okay you can actually do that which is really cool and you can also add rules to like the premium section if they're only and you see here it only allows the premium Subs not the basic Subs so you can actually add the database level restrict who has access to what now that's really powerful right that's actually really powerful because that literally will go ahead and stop you know unwanted access requests and things like that we also do that to protect against unauthorized users from accessing other people's information okay so this is going to really help you out quite a lot we're not going to do that top bit at the moment configure the customer portal okay so what you can do is hit you can actually go ahead and you need to actually enable all of these things right so again this is to allow the extension to work so I'm going to pop this over to one side right now and we're going to go over to our settings okay now inside of settings we should have a branding section so down here we have branding right now for Branding what you can do is you can actually add icons logos all that good stuff and this will go ahead and set up how that screen looks so do you remember that screen that we went ahead and processed the payment with okay so I think it's over here right so let me go ahead and show you guys so if I go ahead and click subscribe and then it's async so it does take a second you you guys as a sort of extension once we're done you can add a loader if you want now but you can see this element this sort of look and feel if it had a product image by the way so if we gave the Netflix standard plan here a product image it will come up at this point right but we can add logos and stuff like that inside The Branding section so here I'm going to change the brand color to maybe just a sort of red just to resemble a bit of Netflix nice and then the accent color let's go ahead and say just a black okay so it's that kind of Netflix kind of colors okay and you can see here look it shows you the mobile view the sort of desktop view this is how it will appear on the phone you've got the customer portal and all this sort of beautiful stuff over here right so this looks really really clean we're gonna click on the save changes but before we finish that off I'm just going to go ahead and see see configure the customer portal settings okay so I'm going to go ahead and make this full screen save the changes here right but then what I'm going to do is go ahead and check out let's see customer portal all right and then I'm going to go to settings we've done The Branding where is the customer before customer Port is over here at billing yes we're going to click customer portal now here you see there's a few options that we have to enable Okay so the options that we want to enable here are actually going to be these ones so it's going to be toggle on allow customers to update their payment method right allow customers to update their payment method we're going to toggle that perfect allow customers to update their subscriptions and cancel subscriptions we're gonna we're gonna toggle the council subscriptions and here what's really cool is you can cancel at the end of the billing period so imagine like you pay for a month of Netflix and come to your subscription they give you access for the month so that's how you decide if you want to do that here and then you've also got the update description bit all right so this one was important we want to allow customers to update subscription quantities right so yeah let's go ahead and do allow customers to switch to a different pricing plan that's the one that we wanted right and then here you can say issue an invoice at the end of the billing period or issue the invoice immediately all right so in this case you would usually issue an invoice immediately if they switched to plan okay so that's exactly what they want to kind of do all right so at this point we've enabled all the right things so your screen should look a bit like this right now okay and then we're going to go ahead and let me just remove the cookies God's sake and then we're going to go down here and click on um let me just make it full screen so you guys can see we're gonna click on Save okay okay so when updating a description oh so we need to actually select the product sorry so here we go ahead and add all the products it applies for so we're going to go ahead and add the basic premium and standard okay so you have to go ahead and do that and then you see terms of service okay so here right now if your website had a terms of service I'm going to use literally just going to use a blank example.com terms right so because obviously I don't really uh we're not doing the terms and service right now but here if you had a privacy in terms you would put it in here okay then you want to click save and guys this is actually sort of you know this is gonna allow you to build those apps that are actually e-commerce apps with full payment systems integration everything now if that's not powerful I I like this is powerful stuff okay so now what we're going to do go ahead and click save now there we go my changes to the following sense only applied to test mode so if you do switch the mode you need to go ahead and update that as well a second time okay so now here it says using the extension okay so here are the other products set up the required business information and links the final thing that you would have had to do is if the top over here if it said like a business name or something you have to click it and give it a business name now trust me you can't skip that step because it will bite you later on okay you need to make sure you go ahead and do that so using the extension right so it shows you a bunch of stuff you have a demo application over here but then you guys can see look let's go ahead and check this out so you guys can go ahead and read the docs at this point but I'm going to show you how to implement it okay so here you can see look list available products and prices DB collection it shows you a bunch of stuff and you can see start a subscription with Chinese stripe checkout so we've got a bunch of instructions here okay so we're going to go ahead and Implement all of this stuff and you can see it go you can do so much stuff here you can apply a discount coupon phone codes add multiple prices all sorts of stuff but we're going to kind of keep it relatively somewhat simple so at this point if I go over to cloud firestore look at this guys all right so if I go ahead and refresh give it just a second and we should have Netflix on YouTube Perfect yes if we give it a second our products should start coming through over on this side all right now I am going to quickly check a quick setting on the extensions right now to see if I've given it the correct key nice so what we should see eventually is a some products over here okay and those products will go ahead and push in our products from our stripe database okay so what we're going to do now is actually go ahead and pull those products from the database so this should actually have the product here right now let's go ahead and and sort of see why that's not happening so let's go ahead and click extensions go ahead and run subscription payments there we go and remember it said it will take three to five minutes okay so I might need to go ahead and synchronize it but to test this that it works what I'm going to do is actually go ahead and register a user okay so here is our application Netflix button is on low cost 3001. I'm gonna go ahead and open this up and let's go ahead and create a user so I'm going to go ahead and create a new user let's go sign out sign in let's go ahead and say uh stripe gmail.com and I'm going to say ABC ABC Sign up now okay so I signed up as this user okay if I go ahead and go back to the Netflix clone right now and hit refresh this the cloud function should have fired off at this point there we go you see we create a customer and I actually went ahead and added them into the into the database so you see how I did that right which is incredible right it went ahead and just did that automatically all right so at this point we should be seeing some customers come in uh some products also at this point so what am I actually gonna do just to double check that we've done this correctly is I'm gonna just see our functions right so over in the functions field what we can do is here you can see all the different functions that have been created let's check the logs out all right so we can see a bunch of stuff happened here okay okay so at this point it says create a new customer so that is where the customer was created okay nice so this is looking pretty good at this point so far go back to Cloud firestore what we may need to do is re-add the products right because I mean I think it has a synchronization period but I kind of want to force the synchronization so what we should see at this point if I go into my previous build you should see the customers that we've added and then if we go into the products you'll get the three products for example Netflix standard Netflix basic and Netflix premium and you see it will have the description it will have active and then it will also have the appropriate prices alongside it inside of another section over here okay so we'll have all of those things inside of it okay so I'm going to go ahead and switch back to the actual build so I'm going to go over to the actual stripe now where is our stripe what do we put stripe let me find it yep there we go let's go over to stripe and then let's go ahead and check out the products okay so let's open our product right here and what I'm going to do is I'm going to add a test product right now okay so I'm going to say this is a test product and then it's got a description of testing one two three and then here I'm going to go and say this is a 123 product recurring monthly go ahead and click save product so at this point I just added a product right so now I'm going to go ahead and check to see if it's synchronized okay so you can see I added in that new product right which means that I actually sort of should have waited until I I added those products after so what I'm going to do at this point is I'm going to go ahead and recreate the products just to just to force a push in because it will do it after some time but I don't want to wait while we're live okay so at this point I'm going to go back to my stripe and I'm going to quickly recreate those plans okay so what we do here is I can go ahead and right now it's very simple to delete plans okay so this is right now it's just can't delete it because it's being used in a transaction okay so what we're going to do is I'm actually going to create three additional plans because these ones aren't synced up right now um okay yeah so you see it's being used right now okay so let's go ahead and firstly I just want to see if this does sync up finally if it does it'll make life easier if not we can just create new plans it's fine okay so right now I'm gonna go ahead and create new plans so I'd recommend adding the products afterwards and then it would work okay so what we're going to do is Click add product and here I'll say premium so right now it will actually show all of these plans which is fine I guess it'll be fine I'm going to add product so here I say premium and then I'm going to go ahead and say 4K plus HDR okay and I'm going to go ahead and say the standards of you know 13.99 and we're going to change it to GBP okay and then what I'm going to do is type in save and add an add more and then here I'll go ahead and say basic okay and then what I'm going to do is type in 720p okay and then here I'm going to do standard pricing and I'll go ahead and do I'll say 100 and um give me one sec guys I'm gonna go ahead and do another 100. so the the basic plan was the cheapest it was 5.99 GBP okay and then I'm gonna go ahead and say save and add more okay so I'm going to add the final one which is the premium no we've done the premium it's gonna be the standard plan stand the plan and this one was going to be 1080p okay and this one was actually going to be 8.99 GBP okay nice and then we're gonna go ahead and click save product right so now let's go back to our products and have a check so you see how I've got duplicates here so ignore everything underneath here we're focused on these ones standard basic and premium okay and what I would recommend is after you set it up then go ahead and double check so it syncs so synchronizes so now you can see on our Firebase it's successfully synchronized the products okay so I don't want this product the one that has testing one two three in it so I'm going to go ahead and remove that okay so I don't want that one but we've got the perfect three things in here so I've got the premium I have the basic and I have the standard should be the final one and each one's got an appropriate description and inside of it it's got a prices collection which has all the pricing information so firstly guys that is pretty cool right I don't know about you guys but that's actually pretty cool all right so now we've got the customers over here and then we've got the products over here so you guys can see it's actually automatically doing all this stuff right so let's go ahead and actually you know hook this up in our Firebase right so I'm gonna go over to our code this is back to the fun stuff now and we're going to go back to our application so this one right here okay so this was the sort of you know the stripe that we had sort of this is the actual finished one but I'm gonna go ahead and this is our angle right now I'm gonna go ahead and do this is we've got our product set up again it's not nice that we have these typically you shouldn't have these you should just have your main but you know you can get you can delete these later it's fine okay so now what we're gonna do is we've got fire our stuff stored in firestore so we can actually just go ahead and actually pull that information inside of our app using the typical approach okay so I'm gonna go ahead and go to our code right here perfect and then I'm gonna go ahead and remove this so the first area I want to tackle is actually I guess the plans page right so we're going to go over to the plan screen and inside the plan screen I want to have a so let's go over to the plans where oh my haircut's Frozen okay plan screen we don't actually have the plant screen right now we have the where am I we're at the profile screen okay so I didn't add the plans yet okay so here we have the profile screen which is responsible for this part I keep moving things around because I wanted to be clear for you guys okay so here we have the profile screen which is responsible for this area right here so at the profile screen okay what I'm gonna do is here we have the plans right now the sign out button lies here so underneath plans I'm going to actually go ahead and just sort of render a planned screen right and the reason being is let's go ahead and say plans screen okay now the reason being is because it's it's going to be a lot of right now this where is it let me go ahead and pop this where's my app okay so this is the final finished app okay this one right now this entire section I want it to be its own sort of clever component okay I want to be the it's on Clever component so here we've got the plan screen so I'm going to go ahead and create that component right now so I'm gonna go and actually go ahead and say plan the screen so plans screen dot Js there we go and here I'll say rfce boom so here are the plans screen dot CSS let's go ahead and change our pan screen the CSS so this point I'm going to say import plans screen dot CSS there we go and then here I'll say class name equals uh play on the screen nice and what are we gonna have inside the plan screen right now okay inside the plan screen it's going to be a few different things really so at the top we're gonna have an info section okay so at the top I'm gonna have like an info section which will be the product so each one of these things I'm gonna basically let's think about this how are we gonna do this right so we actually need to firstly get the products okay so firstly we're going to pull the products from the database again so here I say const products and then here we'll say use state so we're going to use a state hook you stay up there we go all right then we're going to make it an empty array by default and then we're going to import use State there we go save right and then what we're going to do is go ahead and do this what we're going to do is we're actually going to have a use effect okay so we're going to use effect and we want to fetch the plans from the database okay so remember that extension actually went ahead and pushed the sort of products from stripe into our database right so what we're going to do is go ahead grab those products and went into the stripe database and then load them up on the screen so let's do it so here what I do is I go ahead and say use effect like this and I go and this has an arrow function inside I only want this to run once on the component Mount so here I'm going to go ahead and pull the DB so I can say DB and then we're going to say DB Dot and I'll say collection and then I'm going to say collection of products okay now why am I doing a collection of products because if we remember inside of Firebase collection of products so I'm going to go ahead and fetch these three products so yeah I'll say products and then I'll go ahead and say where [Music] active is true and the reason why I want to filter it is because you see here it says you can have different products which are either active or false right so here I only want to get the active product okay so here I'll say we're active is equal to oops and you have to put a comma there my activity is comma true okay so save and then what I'll do is I'll say dot get so we usually use on Snapshot but I don't really care for the real time listener because it's not likely the plan is going to change so why do I need to then real time listen to it so instead I'm going to use something called get right and what get will do is it will give us something called a query snapshot because we queried by active Okay so here I'll say this is the query snapshot okay and what do I do with this query snapshot well firstly I'm gonna go ahead and say let's go ahead and create an empty products object okay so I'm going to create an empty project products object okay then I'm going to save it so now we've got the products here right so we're going to go ahead and say query snapshot and this will return a bunch of docs because it's an array so I'll say for each for each of the docs I want to go ahead and save and this bit's actually very important all right so I'm going to say async right because I'm going to have some Acer like async await stuff here this will give me the product dock okay so every time I go through or give me the product dock okay so here what we do as we'll say products all right so I'm going to go ahead and populate my object with the information so I'll say okay go inside this object and go to where we have the product doc.id okay so product doc dot ID and I'm going to go ahead and set that to the product doc.data now what is product.data right if I go ahead and do this this is going to be the data inside so this stuff right here okay this is the one that goes into it sets up so I'll go ahead and do column there we go and then I'll send you color and I'll say const and this is where I basically need to go ahead and basically remember guys each product inside of the collection has its own variables and then it has its own inner collection of prices even though it's one price and this has the pricing information so how do we get that right how do we go ahead and get that okay so okay so now it's a cons and now here is a price snap okay so price snap and then here what I'm going to do is I'm going to say await because we're making like an async request okay so I'm going to say product ref and this is pretty cool right because what we're going to do here is I'm going to say product doc sorry so I'm going to get the product Doc and I'll say dot ref Okay so product.f and I'll say collection support dot collection and then here I say go into the prices of that document and I'll say get okay so this will go ahead and get me the price right so go ahead and give me the prices dots then what you need to do because there could be the possibility of having more than one price price snap dot docs so if this is kind of overwhelming just break it down with me as you watch it okay and then I say pricenap.docs dot for each and then I'm going to say for every single dock so all the prices essentially so I'm going to go ahead and do this and I'll say yep and then here I'll say products product.id because I'm going into that product.id that we're basically creating our own little kind of object here and I'll say go and set the prices of our own little object and I'll say set that object inside of that to be Pro to have two things I'm going to say a price ID and this is going to be that the price doc dot ID so here what I can actually say is I'll rename this to price to make it a little bit easier I'll say rename it to the price ID and then here I say price data yeah um and then this will be uh dark also the price sorry dot data okay and this again will go ahead and go inside the prices Dock and then get this information which is the data inside of our price okay so that's what we're essentially doing here right so it might have seen a bit kind of Hefty what we're doing there right so at this point what we're going to do is we're going to go underneath here and we're going to say set products okay so set products I'm going to set that to our product object outside okay so set products now what's going what I'm going to do is to test that this thing is actually working and it's operating as I want it to it's outside the user effects on all the renders I'm just going to render the product I'm going to see if it's pulling in the information and passing it okay and I recommend you do this as well because there are many areas where you could have gone wrong there okay so make sure you do this step to see if you're still doing right I'm gonna do this and then I'm going to make sure I'm rendering the plan screen correctly so in profile screens I'm going to go ahead and import the plan screen so at the top here import refresh and I'll pull out my inspector and then let's go ahead and make this full screen for a sec and it says the use effect is not defined so let's go to our plan screen we need to go ahead and import the user fact save and then let's go ahead and check it out so refresh and we can see this right so what I'm going to do here is I'm actually going to go ahead and pull this underneath there we go so you guys can see a little bit easier when we click console and then what I'm going to do is you see here right so it's actually giving me an object okay so it started and it's giving me an object now here what I'm seeing is three different product products now if you see what I've done here is I've created an object based on these products right and then what I've done is I've got the information right I've got this information and I basically gone ahead and then got the prices information and added this to that one product okay so now in this one sort of product object we have the product itself with the description the name and the price of that product including the type if it's recurring if it's one off and all that sort of stuff so at this point is pulling that information from sort of remember the extension communicates with stripe populates our firestore database and then this will go ahead and pull from our firestore database okay and all of the interactions between Firebase go ahead and uh and it's all mapped out now um okay so now what we're gonna do is we're gonna go ahead and uh continue on so I want to actually going to map that on the screen so how do I map that on the screen because it's an object you can't literally map through it like you would an array okay so the way you map through an object is you basically go ahead and say object dot entries all right so object dot entries and what this will do is it will go ahead and give me basically a array back and it'll give me like the key and value pairs as an array okay so here what I do is I pass in products and then this is a kind of an ESX function and I'll say map through okay and what we do here is basically we put the parentheses okay we put a parenthesis and then what we do is we go ahead and we destructure right the array that comes back because it will come what will be inside of it is the first thing will be the product ID and the second thing will be the product data and why is it like that because look the first thing will be the key so this is the product ID and the second thing will be the product data inside of it so the first part product ID and then the second part product data that's why we go ahead and open it like that I'm going to go ahead and say an arrow and then we're going to go ahead and have our code Here and Now what I'm going to do is I'm going to go ahead and actually have a um so here at this point I'm gonna eventually add some code here so I'm going to add some add some logic to check if the user's subscription the user subscription is active right so we'll add some stuff over here afterwards oops so that's a to-do right so we call this to-do's remote coding right you can go ahead and do something like this and I've got an extension which highlights the to-do's so that looks pretty good at this point but but what I'm going to do after is I'll say return and then what I'm going to return is going to be the following right so this is going to be the rest of the sort of plan section so our goal here is to build this out now from the data that came back from the DB okay so I'm gonna go ahead and refresh and just see nice so at this point is crashing because there is nothing that's being returned because we need to fix that so and also the return should not be an object it should be parentheses there we go so here I'm going to have a div okay and this is going to have the plans screen plan because this is going to represent each because what we're doing is We're looping through the objects and we're we're going to basically push out this then we'll Loop through and push out this then we'll Loop through and it'll push out this all right so that's why it's happening Okay so at this point what I'm going to say is say plan the screen inside of airplane screen underscore underscore info okay and inside of here this will represent the left hand side okay so the left hand side over here what we're going to have is we have the product data dot name and this will give us the product data the plan that we're on right so inside of here this will actually be a so I'm going to cut this for a second I'm going to have that inside of a H5 tag and then I'm going to have a H6 tag and this one will be product data dot description okay so probably in the description and then underneath that I'll have a button okay so underneath that I'll have a button so you can ignore this sort of error for now we'll fix that in a sec but then what we're going to do is have a button which basically will say this like a subscribe option okay so say some kind of subscribe inside of it okay so let's go ahead and see why this isn't coming oh nice look at that yeah there we go so now I'm going to close this up and you guys can see look at that it pulled in that data and we've rendered it out on the screen so this is coming from fire firestore the database right and remember firestore is getting populated based on Stripes information because we have the extension so look think of it this way we have firestore over here we have stripe over here and then we have the extension which basically Bridges the two things together right and every time we add a product in stripe it goes ahead and updates Firebase right the firestore database and then we can basically interact with each and it basically stays in sync because of that extension right so that's how it goes and does it so what we can do at this point is we can basically go ahead and say so we've got the Subscribe button over here so I need to know right I need to basically know what plan the person is on I need to know what exact kind of plan they're on right so I need to go ahead and access that I need to go into where the user is and their customer ID is what we've logged in as and then what I should have inside of here is I should have the um let me go ahead and double check something one sec subscriptions oh yeah so once they go ahead and subscribe to it there will be a another collection in here for the active subscriptions okay so what I'm gonna do is go ahead and basically have it so that The Next Step here is actually going to go ahead and Implement Implement firstly when I click the Subscribe button it's going to go ahead and load the checkout right so that's the first step that we do okay so on the click of that button so on this button click someone say on click what I want to do is I'm going to and I'm gonna make this a bit smaller because it's hard to see at the moment so I'll go ahead and say load checkout okay load checkout and what I'm going to pass to this is the current because remember we're rendering rows here right I'm gonna pass this the product data Dot prices oops Got prices oops the price is dot price ID okay perfect and then and guys just focus on the positive stuff don't worry about all the the negativity that's fine honestly we got we're stronger than that right so we're gonna hit save and there you go right now I'm going to create the load checkout function so I'm gonna say const load checkout and there we go all right so we've got the load checkout function now the load checkout we passed it a parameter this is going to be an asynchronous function okay so what I'm actually going to do is I'm gonna say async and it takes a price ID we pass the price ID in here because think about it right what we're doing here is we're actually rendering the list style right that list and then oops it says cannot repropriate price idea of undefined that is because what we need to do is um at some point it can be undefined so we need to go ahead and protect ourselves let me go and check that out oh yeah oops sorry what am I doing that's wrong here we should do on click this should be an arrow my bad there we go otherwise it's just going to invoke the function straight away okay here we go so on click when we do it it will go ahead and Trigger off the load checkout function okay so at this point this is where we have um this is where we go ahead and have the checkout function so it should when I click the Subscribe button redirect but firstly let's just style that because it's kind of throwing us off by looking at right it's kind of like being a bit confusing by looking at that so I'm going to go ahead and open up my plan screen underneath okay so I'm going to open up plan screen underneath and then here we have the plan screen info and a bunch of stuff okay so what I'm actually going to do here is open up my plan screen TSS so I can have a look right so I'm going to go ahead and pull this a little bit higher and here I'll say plan screen and screen oops main screen on this underscore plan and then here I'll say display Flex so we want to flex on that right so save and then it should go into a row so by default Flex goes into a row perfect and then what we're going to say is justify the content to be spaced between so that way it should use up its available space so you now you see now the two children so this and the Subscribe button are pushing apart from each other right so that's exactly that looks very good right now and then I'm going to say give it a padding of 20 pixels because I don't want this to kind of be too I want it to be kind of like that that looks a bit cleaner and then what I'll do is I'm firstly also going to make this a little bit nicer to see there we go so you guys can see a bit easier and then I'm going to have underneath that a opacity of 0.8 and there's a reason why right because I want to have this nice hover effect when I hover over it so to get the hover effect I'm going to Target the plan screen plan when I hover opacity of one and this is a nice little trick so when you hover you see how it goes ahead and changes the opacity when I hover over the appropriate div okay so this looks really really good okay there we go so at this point I'm going to Target the button inside of the plan screen info I'm going to go inside the plan right I'm going to Target the button okay so over here what I'm going to do is I'm going to say the button should have a padding of 10 pixels by 20 pixels save it and you can start to see it gets a little bigger right I'm going to give it a font size of one Rim a color of white and a background color of the Netflix color all right so you can see it starts to look already a lot nicer all right so the next thing we'll do is font weight 600 board and none to give it that flat clean look and a cursor pointer because obviously when I hover over this I want it to have that that clickable UI so obviously when I hover it goes into a click element right that looks better so we have the styling down so this will make it a little bit easier for you guys to sort of visually see what's gonna happen right so I'll sort of space it out like this there we go right so now what I'm going to do is go ahead and implement the load checkout functionality okay so the load checkout functionality the first thing I want to do is get the users I'm gonna make something called so when we're using Stripe Right when a user checks out or when a user basically has like stuff in their basket or like they want to kind of buy something you start something called a stripe checkout session and then that allows strike to basically go ahead and say okay I you want to buy something I'm going to set everything up for you and then you can use the link to go ahead and redirect the user to our payment form okay so I'm gonna go ahead and set that up right now so I'm going to go ahead and say const doc ref right so document reference I'm going to say await because this is going to be a async and I'm going to say DB Dot and then we'll say collection of customers nice we broke 400. that's what I'm talking about guys I love that 400 likes broken incredible man XXX is bro I'm 399 that's what I'm talking about dude all right DB dot collection and then I'll say customers right and then what we'll say is dot doc right and then I'm gonna go ahead and Target the user's uid now remember we use Redux yesterday where we basically after the authentication step push the user into the Redux uh sort of store right so in the user slice of the Redux so we created a selector to be able to pull that from Redux so what I'm going to do now is go ahead and pull the user from the Redux store the way I do that is I say const user equals use selector select user right so that's the selector we created right so you selected there we go and then we've got the user here okay so now what we can do is I can go down to here and I can say Doc is going to be because what I'm trying to do here is I'm trying to go into the customer and the this ID right here this is going to be the user that's logged in so here I'll say user user.uid right and then what I'll say is dot collection now this is the new collection I want to basically go ahead and create okay so this collection has to be specially named and this one I'm going to say simply going to be check out sessions okay so it's gonna simply going to be checkout sessions and then what I hear I'm going to say I'm going to add a checkout session remember the extension has a lot of clever stuff behind this right we're gonna add the checkout session and here I'm going to say the price of the checkout session is going to be the price ID I passed in right as a uh Pro as a sort of prop to the function so this one when I click it so this one is going to have the ID of this row this one's going to ID this row is one of the empty price ID of this row and then I'm also going to go ahead and pass in two things called the success URL and the cancel URL now when we redirect the user to that payment page we need two routes right we need the success URL of cancel URL if the user was to cancel anytime where do where the stripes in the Mac do right and then also if the user is successful in their payment you want to send them to a confirmation screen do you want to send them back to the screen they came from you can pass in those variables okay so what we're going to do here is we're actually going to use the current screen the users on right so when whether or not they succeed or fail they'll come back to this screen the way we do that very easily is we go ahead and pass and we use something called window.location.origin right which kind of is kind of self-explanatory so I'm going to say the success URL and the cancel URL is the window location origin that means that we basically go ahead and um and and we basically go ahead and have come back to the screen that we're on which is basically whatever URL it was on okay so with that said that's all looking pretty good at this point and then what we're going to say is this document reference okay we're going to basically add something called an on Snapshot because what's going to happen here is that Firebase stripe extension will see that you added in a new checkout session okay it's going to give us that checkout session right so it's going to generate and do some funky stuff in the background and then it will go ahead and we want it to basically redirect the user and throw them towards the uh the checkout page okay so here what I'm gonna say is document reference I'm going to say on Snapshot okay and this is going to be an asynchronous function and here I'm going to say get the snap right so the snap or whatever you want to call it Snapchat is fine and here I'm going to say okay so from that snapshot I'm going to de-structure so it's something in es6 right where we basically break apart the object to go ahead and do this right so we're going to say break apart and here it's going to be error and session ID all right so this is going to destructure the snap.data object and it's going to get the error and session ID now here what we're going to do is we're going to say if error right so if error so if there's any error at all right I want to basically alert the user okay so what we can do is they've actually given us this sort of filler code and this is pretty much what I would recommend as well okay so I would go ahead and pop this in so show an error to your customer and inspect your Cloud function logs in the Firebase console to see what went wrong okay so obviously you should handle things a bit nicer so maybe you can go ahead and refactor the alert to be a nice kind of pop-up which is whoa whoa something went wrong on our end right um and then you can go and do that so now what we're going to do is yeah we're going to have this and then we're going to say okay if there was an error that's fine right so I'm going to say if the session ID right if there's a session whoa nice Michael Barrett is the striped checkout team is tuning in amazing work so far thanks for using check out happy to answer questions and feedback dude that's got me so excited man yeah I'm using the I saw your conference on um you done these stripe like the global conference event and I was watching that and I saw the integration you guys done with Firebase and stripe that was incredible that's huge that you guys are watching this that's so cool to know that you guys are seeing this right now because I've been using stripe in all of the sort of uh react builds and uh and and also I've been using like Firebase like like anything so the fact you guys are watching this incredible stuff so now we're gonna say if session ID and then here we'll say okay so this is the actual sort of comments that come back right we have a session that's redirect to check out so what we need to do is initialize stripe so at this point we need to load up stripe okay so we're going to load stripe into a variable I'm gonna go ahead and load Stripe Right so stripe typically we don't want to load it in the beginning when we don't need to so we only load it when we basically want to go in and have the checkout sort of initialized now load stripe is a function that we need to import okay so we need to import this from striped yeah so we need to actually set this up as well so let's try it from stripe stripe just so we need to go ahead and install that so I'm going to go ahead and pop open my my terminal open up this and then wait a sec and then here what it says yarn add stripe stripe JS okay so now what we're going to do is we're going to go over to load stripe okay so here it takes a key right so this will go ahead and take a key so I've imported it at the top and then we need to pass the key now obviously this is a secret key you shouldn't be showing this right so I obviously I'm doing it for the demo purposes right I'm going to show you guys my key but you shouldn't show this key to anyone so what you want to do is go over to your developer settings over here and then when you go into your API Keys you should have two keys you have the publishable key that you don't really care about everyone can see that and then you have the secret key oh I've already showed you the secret key why we've already used that when we set things up right now what we're going to use is something called the publishable key and this one is something it's called like a public key you don't mind if people see this because it takes both keys for that like sort of encryption to work right so so it's fine to share your public key but in this case I'm sharing I'm going to click this one and then I'm going to go here and paste okay so I've pasted in my test key there we go and then you guys can tell it's the test key because it says test if you have lives there you have remember also by the way if you use your test key you have to use a test secret key if you use the live key you have to use the live secret key they have to be in tandem you can't use like one test key one live key has to be the same key okay so let's carry on so now we've loaded up stripe what we're going to do is we're going to say stripe dot redirect to checkout okay and then what we do is we pass in the session ID because remember the session ID came back from the snapshot okay so here I say redirect to session the with the session ID and then we go ahead and click save okay and then remember because we passed in the success URL it will come back to this screen if everything went accordingly right if everyone everything went to plan so let's go ahead and see if all of this amazing magic worked right and I again I really do love this extension because the power behind it so we've got these plans right so if I want to go ahead and click the Premium plan so I'm going to open up the and I will just see if it works right so I'm gonna click subscribe it's asynchronous so right now I clicked it it's loading up stripe and then it should redirect me in just a second if everything was set up correctly right boom nice look at that guys it just went ahead and created a checkout session right during that time it created a checkout session the Firebase extension with stripe went ahead saw that I added the checkout session and then basically populated it with some more information like a session ID and all that sort of stuff and then it came back to us and then we used that information to redirect and throw the user to this page like how how cool was that right that's really really cool what's really cool about this guys is this completely mobile responsive so and if you've ever had to code any kind of payment stuff yourself it's just easier to use what they're using right now I'm not going to click the card information because I think my cards might pop up so in this case what you want to do is where it says card information the way I'll show you of how to do this is let me go ahead and say do this right now so inside this one what you want to type in is the following okay so on the card information bit you want to type in 4242 and this is the test card that you want to use okay so it's literally going to be 40 42 right oh no wait one second let me do this and let me keep it on the screen oh no damn it okay so over here what you want to do is for the card number this is your card number that you use when you're testing okay and there are different ones and the good thing about stripe is you can basically pass in different card numbers to mimic different behaviors right so if you want to sort of do like a a like a payment failed test they give you a card number for that and then everything else you just put four two four two four two in right so just get used to this 44242 whenever you're testing this stuff out so what I'm going to do at this point is go ahead and populate this out and I'm going to hide my screen because I'm sure yeah it see my cards came up so I'm gonna do 40 40 424242 in the month and year I'm going to say four two four two and then in CBC four two four two and then the name on card at this point could be anything so I could just say ABC and then for the billing address I'm just going to say like ABC or something like that right and then ABC it doesn't matter when you're testing right London ABC right so what I'm going to do now is show you the screen so you should see this right now okay so you see the card there is four two four two and you've got everything on the screen okay so this is a live payment that's about to go through on stripe and I'll show you and I'll prove to you that it goes through any processes and it's even gonna the crazy part is that so much stuff is gonna happen here right it's gonna actually go ahead process a payment in stripe and remember but stripe is here the firestore is here we have the extension connecting these two things so once it processes that payment in stripe the extension kicks and says whoa whoa whoa remember the web hook fired off and it will go ahead and populate and update the sort of firestore database which is incredible right we don't have to do anything else besides that this extension will do all of that for us which is amazing okay so let's go ahead and do subscribe and let's see what happens and if it's all successful it will redirect me to the success URL which was the profile page okay so it's processing ticked nice and the music dropped this minute that happened and look at that it redirected us to the app right so that's so sick and then we go back here that's so cool right so now what we're gonna do is let's go actually and test are you so you guys might be thinking but maybe it didn't actually process a payment right maybe he's lying right and go ahead and smash the thumbs up if you thought that was cool basically if this works hit the thumbs up okay that's all I ask you all right so I'm gonna go to stripe I'm gonna go payments boom 13.99 click it subscription update stripe gmail.com was me that was me that I typed remember I said ABC ABC this was the sort of details of the address and then you guys can see a subscription a premium subscription has been created and then uh yeah look at that and it also goes ahead and shows you sort of the exchange rate the fee because uh payment processes do typically charge a little fee which I always get a question of why do they charge a fee on code that myself believe me payment processors do a lot of stuff for you I use stripe PayPal in all my sort of apps and and yeah like it's fine they take a feed they handle a lot of stuff for you they also manage fraud and a bunch of other things that you guys might not account into so it gives you a bunch of information over here which is awesome okay so this looks really really good at right now and it seems to have worked let's check if our firestore went ahead and updated as well so I'm going to go ahead and click refresh and let's see what happened so we've got the customer this is me logged in you've got the checkout session which was created right so this one is the one that we created now remember when we created it all we did is passed it a cancel URL a success URL and a price and then what that extension did is actually went ahead and gave a session ID and it created tags all right and then we redirect to session ID and we did all our magic then what happened is we basically paid for a product on that screen so what it did is it went to the customer that was logged in went to the subscription and boom we now have that customer's subscription data inside of firestore so this is literally look their status is active the current period ended and star and we also have the exact sort of um we have the actual uh product itself so look at that it has everything that we need inside of it right this is incredible it worked everything looks really really good at this point right so now what I'm gonna do is I'm gonna check I'm just wondering I'm just checking something we've got create app period create that quantity wall no okay stripe link right so what I actually do what I was looking for here is let me show you guys an example if I go to my the Netflix film that I built before and I go ahead and check a let's go ahead and see whether I one of these customers would have a subscription there we go subscriptions let me click this one you guys can see it has a row here right row of Premium the reason why it has a role is because on the rules what I actually did was I modified the rules slightly I think it was where the way did I do that I basically no it wasn't rules why did I where did I change the rule to add in the row I wonder why I did that let me just go ahead and check let me go back to the other build Netflix cone YouTube and we have here the subscription and let's click the subscription and then where it wrote so right now the row is null I'm just wondering um oh yes that's right that's right okay so I'm going to show you guys little tricks see right now you see the row is no right so right now we have the product ID but what you might not want to do is then we have to go and fetch the product ID and do all that sort of magic Wizardry and all that stuff so at this point what I'm gonna do is I'm going to run another example by you so let's go back to stripe and what you can do is you can give a piece of metadata to each of the products okay so what I'm going to do is I'm going to quickly check what I added to the the last set of products you basically add a piece of um let me go ahead and say Netflix so let me go ahead and where is it yeah here we go so you can add a piece of metadata to your product all right so you see here if you add metadata Firebase row this will basically help you because it adds that into Firebase and that's very powerful because now we don't have to do a second query to fetch what what plan we're on or anything like that so what I'm actually going to do here is I'm going to add metadata with Firebase row to all of our ones I'm going to go back to our the shop that we were working on let's go ahead and edit the products okay so here I'm going to see where is a Firebase Papa YouTube demo okay then we're gonna go into our products and then you can see the method there oh okay no products okay why is it kicking me out let me go into product YouTube there we go then I've got the product so there's a standard product let's go here and let's go ahead and click edit okay and then I want to go to additional options and then is it additional options no it's not additional options it's here metadata edit metadata and then key is Firebase raw now you have to use Firebase row because that's how the extension works and then here I'll say standard okay so standard I'll click save right so standard I wonder if that will update the Firebase record let's check if that does it otherwise I'll go ahead and repeat the test but here we go basic let's go ahead and do um here metadata here is Firebase row and here I'll say basic save and then here I'll go into premium and I'll do the metadata Firebase row and I'll do premium and basically this is actually very powerful right because what you don't what you might want to do is you saved yourself a request by doing this because now when the subscription is created it will add an additional section there so let me go ahead and refresh and see if it did that if it didn't I'll just create another account and show you um so just to make this little demo quicker so there we go we've got the subscription boom and then you can see okay so the row isn't there right so at this point what I'm going to do is I'm going to run this test again to show you how it works okay so let me go ahead and go here and let's go ahead and sign out and let's go ahead and say I made a new account called Sunny gmail.com sorry ABC ABC I'll go ahead and sign up okay oh I'm already making an account so let's just do Sony S sign up Okay so we've got an account here I've got all of these different plans okay so you see I actually pulled in all the all of the plans now because it's synced right synchronized up so remember before we added those other plans so it does sync up okay so here we're actually coming to uh we won't be too long now until we're finished all right so we click on subscribe so let's go ahead and say subscribe to Premium and then it will go ahead and load it and then I'm going to go ahead and quickly fill out my card details so four two four two four two four two four two four two four two four two four two four two let me go ahead and do that four two four two name on card let's just say s ABC ABC ABC London ABC right and then here I'm gonna click subscribe nice there we go subscribe and now what it's gonna it's gonna do is it's gonna push this into it's gonna basically create the subscription and then we'll go ahead and update it nice so we're gonna go to this and now we should see okay so ignore the extra plans here the additional duplicates because that just shows you that okay it does synchronize by itself it's fine um and now what we're going to do is we're going to go over here to the actual um checkout session so which customer was I think it might have been this one so yeah so you can see the row is now premium okay so this is really handy so you have to manipulate the metadata of the product in order for the row to come up here okay so that's that's exactly how we do that and I wonder now if we go to our products if it will go ahead and delete it all right so let me go here all right so if I go here and I say delete product let me go ahead and try and delete okay so you can't delete those ones that's fine for now um so we're just gonna have to ignore them for now and as part of the demo but we're all premium okay so what's really handy about this so now we go here and then uh we're gonna have to do the following so now what I want to do is I want to show which one is subscribed okay so I need to go into this point inside that user who's logged in and get their subscription okay I'm gonna get their subscription so now what I want to do is I basically want to say const subscription yep so I want to go back to my code sorry I started typing in the wrong thing here I'm going to say const subscription and then I'll say set subscription and then I'll say equals use State because we want to make it local state and then here I'll say let's just say the subscription in the beginning is no okay so then what we're going to do is we're going to go ahead and create a use effect okay all right so I'm going to create use effects that runs right so we're going to say use effect there we go use effect and inside this use effect we'll start with an empty dependency array okay now inside of here what we'll do is we'll go and say db.collection of customers okay so the collection of customers and we got the user who's logged in right because it's stored in the Redux database so here I'll say user.uid because that's the user now what we do is we found the user themselves okay so we now have the customer and the user ID the next thing we'll do is go into the subscriptions so we're going to say collection of subscriptions subscriptions nice and then what we're going to do is say get and then I'm going to go ahead and say then and then what inside we'll do here is we'll say the query snapshot so query snapshot boom and then we'll go ahead and pop this up and then what we'll do is we'll say query snapshot dot for each okay now for each it's going to be async it's going to be the subscription for every single subscription that's inside of there we'll go ahead and do this all right so inside of this bit okay so now what we're gonna do is we're gonna go ahead and say async subscription so I'm going to say console log subscription data so you can go ahead and constantly log it out if you want to debug at this point I'm going to actually just go ahead and say set the subscription so set the subscription and then here I'll say set the subscription to an object and I want to do row dot subscription dot data no sorry row is subscription.data subscription.data and then I'll go ahead and do this dot row okay because basically what we're doing at this point is we're going inside the subscription We're looping through for each and then what I'll do is I'll say dot row right so here we've got the row remember that comes in because we modified the metadata okay so what we do now is we get the row like that and then we've got two other things I'm curious about right the current period star and the current period end okay now why is that kind of Handy right because I want to know when the period ends when that person sort of signed up when they're in because then that way you can show it on the UI right because remember the UI that we want is this one where it says renewal date okay so over here I want to say subscription.data and you can destructure at this point at the higher Point here if you do want to do it right but then what I'll do is I'll say data Dot and then I'll say dot current period end so dot current period end there we go dot seconds right so what this does is it gives us like a timestamp back so here I would say dot seconds okay 30 seconds okay perfect and then I'll say comma and then here I'll go ahead and do the same thing for the current Period start okay so I'll go ahead and pop that in there we go save so now what we're going to do is this use effect is dependent on a few things so it's user ID is depending on that and it's also whenever we're using a dispatch we should go ahead and pop it in there right so that way it's gonna oh no we're not using dispatch here because I'm not pushing it to Redux sorry so it's going to be the user ID there we go save all right so at this point subscription should be valid right so we should be able to get the user subscription so if I console log and I say show me the subscription so let's go ahead and do F12 and then if I go ahead and refresh okay so it says no so ignore this at the moment we should be rendering lists with keys but I'll show you that afterwards but plan screen 51 so now you can see look here we go we've got the current period and current Period start and the current plan which is premium at this point which is amazing right so it's working it works really nice and it works really well so how do I update the UI to show if it's gonna basically be if they've already got it okay all right so now what we're gonna do is I'm gonna basically have a little helper function inside of before the returns remember here I said the to do right all right so now what we're going to say is before we have the return I'm going to say I'm gonna get rid of this to do but we'll keep that while I'm currently I'm gonna say const and I'm gonna say is it the current package all right so I'm going to create a variable is current package and then what I'm going to say is product data dot name okay then I'm gonna say okay so if the product data dot name um which is which could be undefined right so I'm gonna say firstly put it to lowercase right so I'm going to make it a lowercase that way it's easier to check and we'll say if it includes because I want to cross basically check if it matches the subscription row okay so basically here what we'll do is every single list item in this list I'm checking if this the name of the product so in this case premium if it matches the rows remember the metadata actually has to match the name of the product so here I can say if it includes the subscription dot roll and again I'm just protecting myself against optional um against obviously this is called optional training it basically says if this is undefined then it won't just die so this will we can use this now we can say okay if it's the current package right so this one should be true for premium so it should be true for the premium on this one and the reason why I done to lowercase is that way because it will actually match now even if it's the so here now instead of subscribed what I'll say is okay let's go ahead and Save if you if it's if the current package is if this is not your current package then what I'll say is um sorry if it is your current package then I'll say everyone complicated it like I say then show that this is the current package as the text otherwise show a subscribe okay show us subscribe perfect and then what I'm going to say is only trigger the load checkout if it's not the current package because obviously you don't want to keep subscribing right so let's go and say if it's not the current package then go ahead and load the checkout okay so let's go ahead and save and wait for it guys wait for it all right current package right and obviously I found the remember we have the duplicates right so I actually found the Premium plan all right and the way it's done is it's found premium inside of here so it's remember we have duplicates in this demo right because of what we have but this is basically what you should see when you do it right you should see this where it says current package now obviously The Styling on R1 isn't there yet okay so R1 right now there's a duplicate so we ignore that for now but the styling we want to basically go ahead and fix that okay so how do we go ahead and do that right so now what I'm going to do is I'm going to go ahead and say for the class name for the so firstly over on the div so remember that key that we should be using so here I'm going to say the key for the div that we're going to render in the list is going to be the product ID because that's going to be unique every time so that's a good one to use and for the class name I'm going to use some string interpolation so I'm going to go ahead and put some jsx here I'm going to change it to back text boom boom and then what I'll do is I'll go ahead and do the following so here what I'll say is I'll say if it's the current package or if it's current pack like it's current package then I want to basically go ahead and show so firstly this should be outside of this there we go if it's the current package I want to basically go ahead and add on a disabled class name okay so I'm going to say plan disabled right so bam we're doing bam naming convention it we should go ahead and then um have the disabled class name okay so that's how we do that okay so at this point so what we're going to do now is I'm gonna go ahead and change the style so let me go ahead and pop in the plans screen.css perfect nice now what I'm going to do is say I'm going to add the following style and over here right so plan disabled button okay perfect there we go right nice now you can see where that's the current package that we're on right so now obviously we've got to the same point as this all right so this looks really good at this point right so you've got the current prime premium renewal date and so forth now what we can do at this point is I'm going to add in the renewal date okay so let's go ahead and add in this renewal date section so what we're going to do at this point is say um okay so I'm going to go ahead and say on the plan screen let me go ahead and find that so only so the renewal date let's go ahead and do this so on top of the Palm screen right here so before we start rendering out the items here I'll pop in every new order and what I'll do is let's go ahead and do something like a P tag oops let's do something like a P tag and let's go into renewal Dave and then here what I'll say is but I only want to render the Renault there if the subscription is if we fetched it yeah okay so if it's not knows I'll say subscription and then render out the renewal date there we go whereas I only render it out if the subscriptions s now if we refresh you should see a P tag at the top renew a date right only comes when the subscription is fetched so now what we can do is we can actually go ahead and do some jsx here and I can say okay new date right open parentheses and now I'm going to say is subscription subscription current period end okay and you times it by 100 because this is a time stamp uh you times it by a thousand sorry it's a timestamp in seconds so we've got seconds here so I'm going to times it by a thousand and then we're going to convert it to a date which is why we do that okay the next thing I'm going to do is after the parentheses I'm going to go ahead and add a DOT and I'm gonna say two Locale date string okay and then we save it now let's go ahead and check it okay and if you guys can see it look renew a day boom there we go all right and just for very Simplicity sort of styling here what you can do is you can go ahead and like start it as you want I'm just gonna quickly at a break here just to test the style let's go and see look at that guys we've got the renewal date perfect nice oops where we go where are we going uh there we go yeah nice look at that awesome all right we just created a checkout completely hooked up the payments charges everything so so powerful right so if you found that was fun just simply smash the thumbs up it'll go a long way to getting this video out to as many people as possible but guys like look what we just built right we literally have so we have the current subscriptions over here on our build and obviously we have the duplicates from earlier's mistake um which is fine it's completely fine it happens right and you can go ahead and clean that up afterwards but you guys now know that it will go ahead and add in and the reason and the reason why I did this because I changed the plan so I went ahead and re-synced okay so I'm gonna go ahead pull up my terminal and what do we do we do npm run build to go ahead and compile our application so this will bundle react into a productionized build let's go ahead and check this out nice let's go ahead and wait for this one to build so there we go it's built out and then what we can do let's go ahead and deploy those stop right so I'm gonna say Firebase we've already done the build I'm gonna go ahead and say Firebase deploy and uh yeah guys you know how we do it you guys can feel free to play with this app in just a sec when it deploys and mess around with it use it as your um you know as your sort of reference I'm going to click the link go ahead and click open and I can see the app right right here up in live right now and there you go guys we've got the app there you go loaded up the plans that we built today and everything works wow we just finished out the Netflix 2.0 build I hope you enjoyed that build there's lots to learn in this video those Payment Processing there's how we can integrate it with the Firebase database using Firebase extensions on top of all of this you're learning production grade Tech such as Redux to handle the State Management inside of your application so I hope you've learned a ton inside of this as well as building a beautiful UI ux experience to add to your portfolio and as always guys drop a comment down below to let me know what your favorite part of the build was if you want to see more content like this then make sure you hit the Bell notification icon And subscribe for more content as always guys if your boy Sunny Sangha and I will see you in the next video peace [Music]

Channel: Sonny Sangha

Views: 213,301

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, dev, clone, backend, fullstack, motivation, reactnative, react-native, redux, typescript

Id: HW5roUF2RLg

Length: 261min 34sec (15694 seconds)

Published: Fri Sep 30 2022