🔴 NETFLIX REACT.JS Challenge | Day 2 (Complete Frontend & API)

[Music] what's going on guys welcome back to day two of the netflix challenge god damn guys goddamn we are going insane with the engagement with the support that everyone has inside the community are you guys ready to build netflix drop a comment let us know right now we're gonna go ahead and pull up the chat right now [Music] let's see what everyone's saying guys i don't know if my chat's freezing or if it's literally just like there's just so many so much going on right now i don't think my chat can keep up with it on the screen that's why it's not showing wow oh here we go there we go everyone's coming in check it out guys there we go look at that look at the hype guys smash the thumbs up button if you're excited for today we have literally got 200 people watching right now and i'm sure we're gonna have a hell of a lot more people joining yesterday we had 750 people and it is just going insane guys insane today we are gonna go ahead and build netflix guys so i'm gonna show you what we're gonna build today let's go have a look check it out guys we today are gonna have the netflix build [Music] everything is gonna be working flawlessly i don't know why the netflix logo's not popping up but we'll fix it you know how we do thank you jessica gross for the five dollar donation amazing stuff we're gonna be building this amazing build right here guys no idea why that didn't come up but we'll fix it it's all good but you guys can see over here we have the beautiful ui all right we have the little nice floating dashboard at the top right we have the nice little header in our bar everything is gonna be built flawlessly and guys we just hit 300 viewers that's what i'm talking about let's go guys look at the chat it's insane wow guys you have been incredible the engagement the support that everyone's giving each other inside the chat i cannot get over and express how amazing you all have been and the papa fam this is what we're about this is what the whole challenge is about it's about bearing yourself and becoming the best developer you can possibly become and that means being a good person and helping the community out all right guys let's go ahead and dive in are you guys ready to get started for today's event let's start day two officially guys drop it in the chat if you're excited and i'm gonna go ahead and kickstart the event off right let's go ahead and do this guys i'm damn excited to start this event honestly right let's get started guys first off welcome to day two of the challenge all right welcome to day two guys let's go ahead and remember guys i want your full attention right on your full attention if you guys haven't noticed by the way the lighting is a lot more better today we've upgraded the lighting a little bit right nearly 400 people watching right now that's what i'm talking about guys if you haven't already smash the thumbs up button that's what we're talking about right let's go ahead and jump in so it's time to focus guys i want everyone's game face on no messing around it's focus time okay guys welcome to day two of the netflix react.js challenge where we built the front end we have a bunch of phone with some apis the tmdb api to be precise and we're going to be doing it with redux as well right so loads of cool stuff to happen today so like i said we have what's up gabriel just dropping the 5 donation thank you so much dude appreciate you man so guys we are literally going to be doing this today i hope you're excited the agenda right let's break it down we're going to start off by checking out some of the best resume submissions for day one right then we're gonna go ahead and build the entire front end for the netflix cone right so everything i showed you remember not the login not the payment stuff we're gonna build the actual netflix app okay and we're gonna be incorporating the tmdb movie api into the netflix build pulling that movie information into the project and we're gonna get started with it okay so everything is gonna be insane all right guys remember if you have not already right you need to go ahead and register to the event right if you want to win the 7 000 pounds worth of prizes you need to have registered to this event at proper react dot com forward slash netflix challenge if you have you're all sweet don't worry about it if you haven't then honestly what are you waiting for go ahead and make sure you're signed up so that way you have the best chance at winning that prize okay you have to go and make sure you do that now guys just to let you know if you're looking for these links and you want to find them the link to the registration page is linked number one in the description right so there's numbers by the links and in the sort of the middle of the description it's number one right now let's go ahead and carry on we have the five day challenge facebook group okay again to be a part of this challenge you have to join the facebook group now i'm constantly going ahead and updating and accepting invites and now we have over i think it's 750 members inside that group which is insane and we have thousands of edges up to this event right so there's some of you who aren't signing up to the facebook group make sure you are because then you get entered for that prize point i want you guys to go ahead and win a prize okay so that's what we want to do guys just want to say start off with a bit of positivity thank you so much for the love and support we've had so many amazing messages from all of you guys and literally like i i read these i just want to show you guys i read it i appreciate everything that you have if you can see your name here then go ahead and shout out all right some of these are from before but i just wanted to go ahead and just show you guys that you know i do read your comments i'm always listening and this is all about thank you so much daniel for the five pound donation appreciate dude thank you thank you so so much 400 viewers live right now that's what we're talking about guys that's exactly what we want that is what we're talking about right prizes let's quickly go over them right first place you can win a diamond membership that's uh that's a damn good win guys and second place three platinum memberships third place 10 sets of 50 off coupons okay and guys if you haven't if you don't even win this i have another big surprise for day five right there's a huge surprise for day five i'm gonna cover that in just a sec okay so like i said on facebook if you go to the events tab go ahead and you'll see a breakdown of all of the events thank you kalyan sabchev for the donation i think that's bulgarian i think that's bgn booger i don't know i think what i'm not sure what that is um but guys yeah you have the schedule inside of the events section on facebook okay so you're gonna have day one to five and the links inside of each one right you're also gonna get nice little notifications every time i go live so it's a lot easier to go ahead and get involved inside that group all right guys remember to be a part of this challenge and to win that prize it doesn't even matter if you don't win you need if you want to get the bonus which is going to be for everyone by the way so everyone in this challenge is a winner all you need to do is sign up to the last day surprise reveal so if day five is not gonna be on youtube it's gonna be elsewhere and you need to sign up for that event to get access to it right so that is link number two in the description okay link number two in the description simply go ahead and sign up to it and you guys can be a part of that fun so you just need to go to the website click save my spot and that's it very simple very easy most of you actually did do it yesterday so i'm impressed and press right quick overview of the point system guys you guys are going crazy at the amount of point me and jay have been trying to rattle our brains trying to get the points scored up and everything it's so tough to get this this working thank you again sarcap for the donation appreciate you dude so contest right let's talk about the contestants and how you can score a point inside this tournament right number one if you earn one point you send a message to a facebook group community youtube instagram anything as long as you engage you get a point right two points sharing any sort of social media platform right so tag me inside the social media platform you guys might have seen my instagram i'm sharing loads of stuff over on that side okay so we have all that goodness over there we have 450 people live right now let's keep growing guys three points if you helped with someone else's homework and guys i just want to say the support you're giving to everyone incredible inside that facebook community right so many people i saw mpm in store npm install guys npm as well and i was thought it was amazing because you guys are helping each other out and you're overcoming the problems guys we're just about to break 300 likes as uh thank you guys right four points refer someone five points every piece of homework so a lot of you guys got that five points all right so remember share on the socials to go ahead and get the bonus points if you haven't already go ahead and shoot a story tag me in there thank you and it helps spread the love right oh we just got a lovely another donation i can't pronounce the name i think it's mandarin but thank you so much dude appreciate that right this is my instagram handle go ahead share it and tag us on your stories okay if you haven't already joined the discord channel it's actually 2 500 people right now so crazy stuff is growing so damn fast okay so damn fast now here's the challenge here's the fun stuff this is what you're here for right the main event the challenge now what are we doing today in particular right what is actually going to be happening today we're going to be building the app right the actual app right so you can see i've highlighted the bit that we're building so the entire app is this we're going to build all of this by the end of the five days and here we're going to be building the actual netflix app with redux okay so we're going to have redux powering the entire thing and it's gonna be a hell of a lot of fun okay and you are gonna have to submit this as your homework so guys think of this as a five-day hackathon okay this is your first hackathon if you've not been in one let's do this together as the papa fam right right so we're gonna be building this beautiful app today right now let's go over yesterday's homework because you guys absolutely killed it right i love the submissions that came in yesterday absolute crazy stuff from all of you and uh yeah i just want to go through the homework yesterday was to go ahead and follow the following steps and you had to go ahead and remember you had to post it to facebook as well and upload it using the homework submission and most of you did it i couldn't believe it we have over 400 submissions me and jay were watching what the hell happened right everyone came in done their homework and it looks so damn good right remember if you haven't submitted your homework it's never too late guys this is not a win or lose situation right remember this is all to better yourself as a developer there are no losers here everyone just by turning up today you're already a winner come on guys you've got this keep positive we're going to keep we're going to kill this together right so they actually changed this yesterday it's no longer in the units it's called guides right now if you want to submit your homework go into guides inside the facebook group or it's the simply the first link in the description of day one video if you want the homework for today the link is in the description but you know stay to the end and i'll explain the homework okay so you all killed it on day one with the challenge homework we received over 450 submissions okay so you guys can see right here this is actually a this is literally a list of how we collect everything and it's insane like you might recognize some of your names i blurred out the actual name email so that way nobody gets spammed but yeah absolutely crazy crazy stuff guys so let's go ahead and have some of the highlights if you see yourself give yourself a shout out guys this is all for you shake killed it look at the background clean as anything adrian he had a custom portfolio i loved that one i remember i saw that ajmar this one was clean look at that laptop guys nice little color scheme going on par tap right this one was actually i think it was a video behind it looked really really sweet right we had varan what's up based in india look at that colorful rainbow love the little glass morphic effect that he has going on behind that right our pit thank you so much guys thank you and look we got more samuel look at the nice little background right he's got a bit of pop of color in there we got scissor right check out his graduation guys look at that look fresh he's just he's flexing man killing it kelvin i love this one kelvin this is clean look how nice and aesthetically pleasing that picture is guys on kelvin's right it looks so goddamn clean then we've got luke coming in i actually really really like this one there's something about the blue that just popped it looks so good guys it looked really really good then we had lee i don't know what it was about lee mcfarland but dude it's like a canvas it's just so as a front-end dev this is just cool he goes like lee mcfarland i like to make pretty things i love sometimes simplicity is so powerful okay it's absolutely insane all right we've got a few more sam you killed it man i loved it slime had like a 3d background in there we had nico had very minimalistic design look really good robert i love this one because look how nice the colors pop here right he's got a little slight overlay on that background it looks super super clean right the basis this was clean as well again i like the the use of overlays so that way the text is easier to read really really clean stuff and we have david coming in clutch with the coding background i was waiting for someone to drop a coding background i love it david amazing amazing stuff right so some of you are insane you have some notable mentions that i do want to mention right you guys have absolutely killed it we have 500 viewers today yes that's what i'm talking about this number just keeps on growing let's get higher let's keep on getting it higher smash the thumbs up button if you're excited but i'm going to go ahead and drop some bonus points for some of you today so let's get excited for that guys notable mentions right let's go through number one we had neat manga right now this guy actually messaged me on instagram and we're gonna open up his portfolio right now and have a look at it check this portfolio out guys how sick is this right it's literally a video game you click start game you select your player you click it and look you're inside the level select screen right let's go ahead and click about damn look how sick that looks i think this guy has absolutely he gets he gets the number one spot honestly in terms of portfolio you go to your projects and look at this you click it down how clean is that imagine how much you're showing without saying it here you don't have to say i'm good at css look at this thing it looks it looks so cool it's got a retro feel to it it's even got nice little animations look at the cursor actually changes so amazing stuff neat you actually get six bonus points on top of the five for submitting the homework amazing stuff sam you made it dude you made it i loved your one because of the animations in the background this was dope man look at this beautiful animation in the background i love this effect that some of you guys have added and you guys can see very slick he's filled everything out for me it was this lovely animation in the background this was so cool a few people actually added this in but looks really really clean so we had sam we had komala kind of pan an absolutely amazing profile check this one out guys look nice little bit of uh you got that same effect i just think it's so clean i think it looks so clean all right kamala absolutely smashed it she's doing amazing and guys it's lovely to see both guys and girls killing it in this challenge right really really nice to see that and again sometimes look she's added the effect just in the bottom right hand corner looks so so clean all right let's go ahead and check it out lee mcfarland you made it dude and this is the one i was talking about guys it's just got that minimalistic feel all right i'm not sure this is actually loading loading we're gonna give it a second and okay maybe this one hasn't deployed properly but i did load this up on it not long ago but lee mcfarlane killed it miranda absolutely smashed it let's open it up and have a look while that's loading oh maybe some of them take a little bit longer to to go ahead and load giovanni let's load up giovanni in the meantime look at this this one smashed it guys look at this 3d effect wow how clean is that the only advice i would have here is to go ahead and add in your projects i was so keen to see your projects after i saw this i was like wow like she's killed it like uh he she i'm not sure who it is but giovanni absolutely smashed it guys absolutely smashed it okay so so clean all right so you guys all get six bonus points towards that final challenge and uh yeah well done guys i just want to say well and also guys everyone who submitted we had 450 plus submissions every single one of you honestly i clicked through all of them with jay like we sat here on the zoom core went through everything honestly i'm proud of every single one who submitted this thing right and they're still coming in today like i'm still getting submissions and we will promise you we'll keep on checking these submissions okay let's keep going guys right so remember to get those final points right you need to go ahead sign up to that final day webinar right final day webinar otherwise it's not going to count nothing what is all the work for all right if you're gonna get that challenge you guys deserve it okay so go ahead sign up to our challenge and you guys can do it and we have a huge surprise on day five and this is just a little hint okay huge huge surprise i'm dropping for all of you on day five it's gonna be big it's gonna be so damn big so be there do not miss that event now that is number two inside the description that's link number two inside the description please go and sign up without further ado i think we should go ahead and build this up right we have 500 people who are watching right now i think it's time we go ahead and kill it we're gonna build the netflix app are you guys ready for this let's do it right so first thing we want to do is go ahead and open out the terminal okay but before we get started i just want i do want to just mention guys i am so damn proud of everyone inside the papa farm today because you guys have actually exceeded my expectations you guys came in i set homework and you just delivered guys so i want to see keep that energy keep that level of hype and let's build the netflix app let's do this guys okay right so we're gonna go ahead and i'm actually gonna put on one of my one of my more favorite songs all right let's go ahead and check on some some some upbeat stuff right so we're gonna open this up all right let's check out so let's do this guys get your get your coffee get your water i've got three bottles of water over here you know like dial in get ready for this right 500 people right now we're gonna we're gonna pair program as a big team 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 up okay so create react app this is a 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 because i'm doing it for the youtube right so create react app 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 all 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 i want you 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 all 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 netflix build or clone okay we're back my mic seems to have cut we're good we're good we're good we're back you type in netflix clone youtube okay netflix cone youtube now what we want to do is we're going to go over to continue okay perfect we'll go over continue and then for the analytics we're gonna hit no okay so in this case i mean it's up to you guys i'm not really too fussed with the uh with the analytics first one but if you want them go ahead and do that okay so you wanna go ahead and create it 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 is still setting up the template okay so this sum 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 gonna 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 going to 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 of vs code you go ahead and set up a code extension i'll show you how to do it but what you can do is then you can go ahead and say code dot yours is just going to be code dot minus code insiders dot so we're going to open this up right now if you don't have that code insiders 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 gonna do is go ahead and check out the file structure so i'm gonna make this a little bit bigger for you guys so you guys can see what's going on okay i'm gonna close this out this should be pretty good for you guys to see right now okay so what we're gonna do now is we're gonna 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 netflix i'm going to type in netflix clone youtube set up 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 afterwards you're gonna click on continue to console and go ahead and click can config perfect right still have 500 viewers it's incredible guys let's keep going right almost at 400 likes right so now what we're gonna do is copy this config copy it go back to our code i'm gonna go next to app.js and i'm gonna click the little plus icon and i'm gonna type in firebase.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 there for the firebase stuff we're going to come back here and there's a few things we want to do we're going to delete app.test.js delete logo.svg and we want to delete setuptest.js so 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 going to freeze up here but in the meantime what we're going to 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 going to 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 i'm going to 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 setting and then click on enable right and then save so now we've enabled email and password um authentication inside of our project right so this again i'm stuck on the loading screen of death inside guys if you go has anyone got any questions while we reach this point right while my computer loads up let's go ahead and see if anyone have any questions right and remember guys i just want to shout out and say if if you get stuck at any point do not lose hope join the facebook group and guys help each other out that's what we're here for that's what the papa fam is about all you need to do is help each other out okay and it will make things a hell of a lot easier right so we're just gonna wait a sec and have a look okay so again this version but i mean we'll give it a second and it will work so pizzo poser i've just finished my homework nice dude that's amazing stuff well done man right what to do if i ran out of firebase projects i would recommend the easiest thing to do is you can request additional projects but i would say go ahead and just use a different email for now i mean it while you're watching live is probably the quicker way to do it okay so we're still waiting on this i mean i will get a pop-up in just a sec and then it will let me get through but we have to wait for this otherwise we just can't continue right it's so frustrating i don't know why does anyone else's mac do that right it's super super frustrating right 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 or 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 ben says okay we're back i don't know why that happens okay so a little bit of techies used today but we'll get through it okay so i'm gonna wait until this loads out i'm gonna wait until this has loads out come on guys why is this not freezing okay give it a sec give it a sec all right so what i might have to force that to restart itself to be fair right so i'm gonna go ahead and force that to restart my vs code is just freaking out today i guess it can't handle it so i'm gonna go ahead and force quit vs code and then all right we are back right we are back is the stream still alive right the stream is still alive everything is still good right i think we're good i think we're good can you guys hear me now yes okay we're good right so with that said that was a little bit of a fire but we're good with a little bit of a fire but we're going to put it out and we're going to carry on strong 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 and we don't let this stuff bother us you know like we've come into so many things which are worse than this we're going to overcome it we completely crush it okay so we're going to open up this folder and then this time you know what i'm just going to leave the app.test.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 delete them because i'm not going to delete them 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 say let's build netflix right so let's go ahead and build netflix so i'm gonna go ahead and start with this bit of music first and then we'll make our way to the dangerous stuff because the everything is starting to slowly you know be a bit weird so let's go ahead and build a netflix okay so at this point i'm going to change this to a lowercase a because we are going to be using the bem 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 going to delete this photo right but again i'm kind of worried that this is 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 slice and drag it to features that way it goes outside of that photo okay and then i'm gonna close okay we're back we're back i will i will fix this we'll get past this past this we'll get past this i'm not sure what's happening but we'll worry okay now we're back cool we're back all right so i'm going to go ahead and close that one there you go nice all right so let's do this so let's build netflix okay so if it crashes don't we'll get past it and we'll go forward so i'm going to 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 going to for a second and then this will come up and it should say let's build x if we did everything right okay so i'm going to 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 so right now it says cannot repeat um okay we're back all right i'm gonna go ahead and close epidemic sounds because i don't know if it's that or i might go ahead and actually keep it on twitch tomorrow i don't know as in not this stream but the actual music i'm not sure what's going on there but something is causing it to freak out maybe it's the it's a chat i'm not sure but we'll figure it out okay so um let's go ahead and carry on guys right so we're going to go ahead and get rid of that and then it says compiled successfully okay we don't let this stuff stop us okay so now we go over to our local host okay guys we are going to pull out all right guys we're going to go ahead and use the headphone we're going to use the airpods today okay so we're gonna fix this out we're gonna get past this and we're gonna rap out with the old airpods so give me one second and uh we're gonna get this up and running so we got back we've always got a backup guys give me one sec and we'll be up and running okay can you guys hear me in just a second okay now i'm not sure if you can hear my airpods or it says the road caster mic is actually live can you okay is this clear is this clear right now okay all right so i i can see some kind of stack is there static noise there all right there is a little bit of stack okay that's because my airpods aren't actually being used as my right i'll fix that let's go to my audio one second guys all right so we've got the airpods up we've got the noise cancelling mode on and there we go okay now i'm not sure if you can hear anything else can you okay now you can't hear any external stuff right i think it should be clean or not okay you guys can hear me now all right good i think i think the static is gone right clear right another mic now it's great right perfect there we go now we're using airpods okay let's go guys holy crap all right so i'm gonna actually go ahead and we fixed it we overcame it and we're going to go ahead and collect guys so okay but it's all clear all right it's crackling perfect the sound is weird yeah it's not going to be as clear as where it was before i guess but we're still going to crush it and it's going to be pretty good okay so you guys can hear me if you can hit me a bit that's all we need to do okay all right so let's go guys we're going to go over to the uh over to our code right here and we're going to keep getting up and running okay so we've got the local host 3000 tomorrow we'll go ahead and figure it out and we'll work this out guys it does not matter we can absolutely crush this without now as for the music we're just going to code we're going to code today we're going to get this out and then we're going to go ahead and uh crush it tomorrow with the music okay because i don't want the stream to crash right that's the main thing i just don't want this thing to crash so let's go ahead and build out netflix so over here what we're gonna do everything is working perfectly so i'm gonna go ahead and open up my code because everything kind of messed up on me before so let's go ahead and open up my code um so i can go ahead and have something to look at while i'm coding with you guys but in the meantime guys what was your favorite part about the homework let me know in the chat right now was your favorite part about the homework like are you going to use that as your portfolio how is it going to happen right let me go ahead and open this up in the meantime netflix there we go perfect there we go i'm going to open up this code and i have everything up and running again we are back we are back in full fashion and nothing is going to stop us right assad said he added dragon drop yeah i said actually i did dragon drop which was insane i saw that looked really really nice guys um okay so now what we're gonna do is we're gonna first start off at app.js okay so over at app.js over here we're gonna 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 okay so the home screen component we still have 500 people watching just want to say thank you to everyone i know those tech issues are annoying but we don't let it stop us and we're gonna crush it regardless okay so we're gonna absolutely question just let me know if it does get a bit weird uh and you guys can't understand what i'm saying so right now we have the home screen over here so the first thing that we're gonna do is create this component okay so i'm gonna 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 gonna go ahead and get rid of the let's build netflix because we don't want that anymore we don't really care about that um and then what we're going to go ahead and do is these tech issues are a proper mascot exactly guys um it's hard to understand what you're saying all right let's go ahead and let's try i mean i don't know if it's gonna work right let's try the headset one more time all right let's should we try it one more time if it kicks out then it kicks out we go back to the airpods and let's try it one more time i think we can do this i think it might not give up on us i think it just may just maybe it will work all right so we're going to go ahead and try this let's do this i'm not a car oh yeah andrew said it's all good um but let's go ahead and give this one more try guys so i'm going to go to the road caster there we go we've got a lovely beautiful mic and then we go and click on the macbook pro um where's it going oops now let's be seen okay i mean i think it's good honestly i think it's good let's leave it i'm going to break something in a sec and we're live and it's easier to go this way so tutorial gods are with us always my friends it's just another wednesday exactly nothing's going to stop us guys so we go ahead and create the home screen component so here you want to 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 we're just going to get into our flow state now enough with the distractions guys 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 part so we're going to say import and here we'll go ahead and say dot forward 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 now let's think about netflix okay let's think about this so over at the top right it's so sabella oh hey what's up um so now let's go ahead and go to the top and uh 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 that get rendered on the screen okay so this is how it essentially is going to work right now even i want the music right now okay even i want the music um abney says it's getting better but i think we can be good to go ahead and carry on like this for now and then we we kind of i may be in about half an hour we we go ahead and try again okay so the nub bar is at the top of the thing so we're going to go ahead and first build out let's build out hmm 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 dot js okay this is going to represent in that bar at the top of the screen okay 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 nav 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 import and then i'm going to say nav dot css nav dot css perfect all right so now we have our nav css styling and everything's perfect okay now guys i am going to try it one more time i know it's annoying i don't know one more time i really do want my mic to be back i love this mic and it did well for me on day one and we're not gonna give up on it uh let me just try this out and then we can go ahead and give this a check okay so i'm gonna go ahead and hit the road caster there we go we have the mic back up perfect all right so let me get rid of this get rid of this freezing right okay i think no it's freezing god damn it it keeps cutting right but it's so much better than like so i'm gonna go ahead and give this a try with no other sound okay so we're not gonna say any other sound it's working now i can see it it's working right but the airpods here and then we're going to go ahead and try out right right so i've got the airpods here as backup okay they're back up okay let's carry on on that bar we're going to go ahead and do this so now but thank you mohammed i love dallasy really does help me out when you when you go ahead and do that so some people are saying it's cutting i it looks like it's all clear on my side it looks like it's all clear on my side um all right let me go ahead and check from the team everyone says he's good hi sunny i live in nice perfect okay difference is clear just with the little glitches it's breaking now uh okay so it's clear now that's cool right so nav.js 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 right now again i see we could we don't give up on the tech because it does make a big difference okay it makes a huge difference and uh that's gonna help you guys understand me a little bit more uh we'll we'll get back to the music in a bit right we're gonna we're gonna keep moving at a normal pace okay so now at the home screen we're gonna go ahead and first i 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 all right and uh nice we just got another donation oh yeah that's the donation that came through nice thank you so much right so we should have a blank screen right now which is perfect because we have only a navbar inside um but we need okay so nav like so now we're gonna go ahead and import the nav perfect and we still have 450 people watching so thank you so much okay thank you thank you so much guys uh for sticking me with sticking with me through that headache and i promise you i'm gonna deliver on this right hey let's just say this is the nav okay so this is the nav and then that's what we're gonna that's where 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 okay so at this point um we're gonna sometimes it's cutting sometimes it's not um okay so i think that might just be my i might just be my wire i think dude um okay so i think keeps cutting sometimes hard to listen that's fine okay i mean guys i'm trying trying here don't worry again all right the hot import extension if you want to go ahead and go to the end of a component you can then go ahead and press ctrl spacebar and it will when you're at the end here applause okay let's go ahead and stick with the trusty airpods okay we are almost uh almost there guys all right give me one sec it's connecting it's just connecting and uh it's gonna be important that we get this right don't worry guys we can we can carry on in two seconds i'm just gonna go ahead and reset these okay i'll show you guys what's happening right now look i'm just literally waiting for my airpod to come through on the laptop and then we should be able to be awkward to go okay caroline says those are the eyes of a broken mind get some sleep i'm all good dude i'm all good we're strong and we'll get through this okay so just give me one second guys and we'll get this up and running so the airpods on aren't working with me right now let me go ahead and try this okay almost there come on come on let me go ahead and try one more time i mean the real ones are gonna stick with me for this all right now you guys hear what i hear with the pc fans okay let's try one more time let's reset these and i don't want to try that mic i don't want to try that mic yeah so samuel says do you need to delete the counter folder yes delete the counter folder and uh that will be good yeah you have to delete deactivate the bluetooth on your phone i did deactivate the bluetooth on the phone uh but for some reason we're still getting a bit of a headache uh let's go ahead and try one more time hey there we go right so they're connected i'm gonna go ahead and set this up and then we're using this headset right i'm not changing it now we're gonna use this one and we're gonna trust that they do the job right okay nice we're good thank you thank you for sticking that one out honestly i'm sorry guys sorry about that headache but let's go ahead and carry on okay right we made it proper thumb gets through this every time don't worry all right we have the nav bar over here right so we're gonna have to go ahead and do this without the music which we're just fine you know that way we've got this we've got each other to keep each other cool okay so we got the navbar at the top over here and the first thing that we're going to do is go ahead and set this up so i want to do a few things here i want to go ahead and firstly have a picture in the nut bar so we're going to have an image tag right and then we're also going to have the avatar itself okay so i'm going to 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 got the image over here so i'm just gonna 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's there so let's go ahead and refresh if this is the netflix image okay so it's not actually there so we need a netflix image okay so we're gonna go to netflix and we're gonna type logo and we're just gonna 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 gonna 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 right so everything is good right um so we have netflix up and running um so now what we're gonna do is have a second image and this is gonna represent the avatar okay so at the top of the screen we're gonna get i've got a picture of an avatar over here and then we've got this one over here 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 um or you can feel free to go ahead and i'll go ahead and send this into uh uh for jay to send him to the chat right now so i'll get him to send it into the chat if you guys want it you can feel free to do it okay so with that said now we're going to go ahead we're just going to get into our flow now okay that threw me up a little bit i'm not going to lie but here we're going to give a class name of nav underscore logo okay and then a second class name over here of nav underscore avatar right avatar like so save it and perfect everything looks 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 the 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 bem naming convention okay so i'm going to go ahead grab the image tags like so pop it into nav contents and save okay so thank you so much guys i just want to say thank you so much for all of the positivity through all of these tech issues you guys have been incredible and this is why we stand out from any other community that there is out there that's why the proper fan prevails okay thank you so much 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 intervals you go ahead and you have this working as you need it right so we're going to go ahead and open up nav dot css and 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 the 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 another 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 no way they're perfect but we're going to get it there right we're going to go ahead and get there all right so at this point what we're going to do is we're going to go ahead and we're gonna get the logo right the logo is way too big right now so i'm gonna style the logo and for the logo i'm actually gonna do a little trick here i'm gonna say the position is actually gonna be fixed okay so the position is gonna 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 check 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 right 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 should 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 going to go ahead and say cursor thank you so much guys you guys it really is honestly bringing me back with the uh with the positive comments that's amazing right so we've got a position fixed and then we've got right and i don't want it to touch a side so if i do zero it's gonna 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 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 we need to make sure we're back in a 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 it's just too big okay so for here this one we're going to 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 ricardo where's the hype music the reason being the reason why we haven't got music in the background today is because we had a few mic issues and i don't want to risk the mic blowing everything up again so we're gonna go ahead and just talk this one out as we build this right sometimes it's nice to get into a coding state when we're doing this 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 fit 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 cursor pointer as i go over it which indicates that it's something that's 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 a pointer as well okay so at the top i'm going to say cursor 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 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 what for a reason i'll show you so i'm going to actually grab a different next netflix logo and it's going to be a transparent one and the reason why i'll show you in just a second 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 and i'm going to change to j if you don't mind just sharing this in the chat there you go so this is the new netflix logo 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 network so i'll go perfect okay so this is going to be really good so george says on your netflix challenge are you implementing login books right yes on day two it's gonna have full logging functionality so do not worry my friend it will be working perfectly okay so now what we're gonna 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 style 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 start with 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 nav okay it's going to be fixed at the top so we're going to say fixed at the top and we're 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 afterwards 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 what's up guys we still have 400 people watching so if you go ahead and um 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 now we still want 20 pixels but you can see there's an animation to that right now it's actually looks 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 what i actually won 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 nice sandy just said we broke 500 likes i can't actually see right now um what is happening but yeah we'll go ahead and do it go ahead and check out this you guys have to be my eyes for the the sort of the numbers right so we're going to say position top of zero and i'll show you what happens here so if we do top of zero we can go down maybe 20 pixels let's have a look no 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 that looks really really nice mehdi says we are revising html css i'm learning at the same time thank you so much guys 510 likes aisha amazing stuff let's keep going guys keep going strong all right 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 and i'm just going to spam this out right and save it now check this out right 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 and the reason why i've done this is because i want it so that now if i go past a certain point in the page it's going to go ahead and have it's going to go ahead and disappear 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 logo needs to be a bigger way to adjust guys again you guys can you know you can go ahead and mess around with the styles a bit i just want to go ahead and run through this a little bit but what we're going to do now at the top is where we have the nav black right so where we have nav black over here at the top of our nav.js clicker so where we have nav.js 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 use 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 nut 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 i'm going to say handle show okay so handle show like so and i'm going to say equals use state all right now here it's going to be a default value of false okay thank you so much brett you've got shout out to the proper still going strong you're a legend thank you so much dude and honestly guys you can use whatever positions uh sort of stuff you want at this point there's a reason why i'm doing it this way okay so then we're gonna go ahead and create a function called transition navbar okay it's gonna be a transition for the navbar right and now here what we're gonna say is we're gonna say if the window right if 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 scrolled more than a hundred on your screen then we're going to go ahead and say handle show and we're gonna say true okay so we're gonna say then you should show the nav bar right you're gonna show the black bit of the navbar 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 now we've got a question here saying what is you say can you please explain once you state 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 usa hook okay so now that we have that in place we have the transition lab function we're going to go ahead and create a use 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 it 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 so here what i'm going to say is window dot add event listener because 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 navbar 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 nav bar 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 clean up function which says return so inside of the 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 was a listener to when the user scrolls on the page we need to clean it up as well so here we say window dot remove event listener 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 the listener 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 use effect and i'm going to go ahead and import the use effect hook okay so again i don't know why my code everything's just going against me today all right use effect there we go i'm going to go ahead and hit save perfect okay so use state is not defined it is defined so we can go ahead and refresh and then thank you so much caroline fanning you've been great help to me self-learning trying to get good enough for my first job good to see you posting so long i hope always well with you in the family love from ireland dude thank you so much i actually meant a huge amount man that uh that was absolutely a lovely lovely message to read thank you so much dude appreciate that right um so let's go ahead and have a look so we've got okay so now we've got this right so we need to use this show variable okay show variable over here thank you so much carolyn um so we're gonna go here and now what we're gonna say is okay only add the nav black styles which actually gave this sort of black background when we have that oh can you guys can you guys see that we just got a we've got a nice little uh entry there nice right so merman's in the house well we've had a huge amount of tech issues today but we're getting past we're getting past it okay everything's been against us today but we won't let it be us all right so now we're going to need string interpolation so over here i'm going to go ahead and give 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 there as we scroll up look at that it only comes down after a certain point now why is that gonna look so good because imagine guys when we have the banner and everything up there it's gonna 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 clean up function means that it doesn't you know it doesn't get very annoying right so nice we've got those people saying this is super clean exactly that's awesome right so 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 that stuff so we can go ahead and get rid of that 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 guys uh let me know what what do you think we're going to be doing here right what do you think we're going to be doing is actually a pretty cool little build here 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 comment so let's go ahead and get rid of this save and i'm going to go ahead and create banner dot js spanner.js right and i'm going to do rfce and then we're going to go ahead and save right so um 536 likes nice guys let's keep on going this is amazing even despite all the tech issues we are absolutely killing it right so for anyone who is new here don't feel afraid that you're gonna get left behind just take your time watch the video and everything is gonna be okay right and despite the tech issues we'll get pasta okay so let's go ahead and save all right uh nice nikhil says pulling in video titles posters and even youtube videos on those exactly right so that's exactly what we're gonna do so 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 save somebody said it's 3 am here and i have classes at 9. damn that's amazing guys let's go ahead and import banner.css and then do that right save perfect now 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 going to 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 gonna do is go ahead and get a dummy image until we go ahead and hook up the backend so i'm gonna 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 let's just use this one for now right let's use this i guess all right so i'm going to do a copy image address and this might be a little bit blurry but it's fine all 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 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 all right i've given 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 so it's these snippets over here if you want to do rfce and all of those neat little tricks okay still have 400 people watching thank you guys you guys are being incredible let's keep going strong come on we got this guys all right 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 the interpolation is because i will be replacing that soon with the correct image okay now i'm gonna 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 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 all right we have so many lovely comments today guys thank you so much for the positivity honestly means the world especially when we hit into sort of tricky issues that we have faced like today okay like it's really nice to go ahead and have you guys have my back with this stuff okay 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 contain 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 going to say is we're going to go down and we're going to 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 banner contents now for this link if you do want this i'll go ahead and get jade to pop this in the chat right now right i mean again you don't necessarily need that banner image this is just a testing one until we go ahead and get this sort of added out right so nice guys i can see loads of new people here actually that's really cool all right so what we're going to do now and exactly gwen's correct guys keep it very simple in the game don't over complicate your builds honestly it's going to get too messy you don't want to do that at the beginning okay so we're going to go ahead and add a div right and this div is going to have banner contents okay so i'm going to go ahead and say banner contents now inside of here i'm going to have a h1 and this is going to represent the banner title so i'm going to do emmet i'm going to say h1 banner underscore title right and i'm going to go here and then oh my emma is being a bit weird there we go by the 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 yes it's jumped on top of it at the top there you see that right so it's at the top over there as we have movie name at the top and we're going to go ahead and fix all the styling in just a sec 390 people watching we actually have 412 across platforms and 564 likes amazing stuff right so uh let's keep going strong and the guys anyone who has joined reason why we're using the airpods today is because we had a slight audio issue which will get fixed for tomorrow and it will be fine okay um but yeah day two of the netflix challenge is going strong right then what we're gonna do is we're gonna have some of the buttons okay so for the buttons i'm gonna have the following i'm gonna have a div and inside the div i'm gonna have banner underscore buttons right so there's two underscores because of them banner buttons right gopro singh says love to work buddy learned a lot from me thank you so much i'm going to go ahead and bring on the uh the chat and stuff right here so that's perfect thank you so much guys i'm going to add a button over here and one button is going to say play right i'm going to have another button which is going to say add to my list price 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 all right so again this isn't looking that like great at the moment but this will be pretty pretty good okay so now what we're going to do is i'm not going to try the music today guys i'm gonna go ahead and just keep going with this and then we can go ahead and tomorrow we can go ahead and add on the music okay so don't worry just keep focused today and that's the main thing that we're gonna do right i'm gonna give both of these a class name i'm gonna give both of them a class name right i'm going to give the cast name banner button so it's singular not plural okay let's go ahead and save and then we can go ahead and style 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 going to 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 where the film description goes okay so test description hit save shari hamza the reason why we aren't using the music today is because we're actually going to go ahead and we had a bit of audio issues earlier so i'm not going to go ahead and carry on with the music until we can get this working perfectly okay so you can see this is what we look like right now i mean it doesn't look the best right now right it doesn't look the best but we are gonna get it there right so what we're gonna do underneath this div we're gonna have a little trick up our sleeve we're going to have a div and then we're going to say this div is going to have a banner right but it's actually going to have a modifier so in between you do dash dash for a modifier we're going to say fade button all right so if you don't know what i'm talking about just go ahead and the team copy along right so you're going to make this a self-closing tag and this is going to give that us that nice fade at the end of this right guys if you do want this code uh it's actually part of the um it's going to be inside of the proper github repo i will be adding it in there so that's going to be uh inside of that if you are interested in that right so let's go ahead and carry on so now we're going to make this styled 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 asterisk and type in margin of zero okay and that gets rid of that top little gap okay so um anyone who's gonna go ahead and spam you're simply gonna get blocked please don't do that um so one of our moderators please come in block that chat thank you um because it literally goes ahead and spams it otherwise and that's not how we do things here okay 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 perfect nice so we're going to go ahead and style that section so the first thing i want to do is banner contents right final content so the top thing that we're going to do is i'm going to pull banner css on here because i think it's nice when you guys can see the css on the left and then the code on the right i said you don't have to code together no you can follow along and then kind of do this afterwards that's completely fine um to do it that way as well okay so 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 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 so 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 png okay perfect so it's a png and i'm going to go ahead and drop that to j so you can drop that in the chat 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 going to 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 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 padding con manner contents go ahead and paste the height right moussa says what i like about you is you can explain things by the simple way thank you so much honestly i really make it my mission to make the complicated things simple okay that's my main mission and that's what we do here at the fan 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 3 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 so i see that question being asked quite a lot in the chat right now and yes we're going to be deploying it 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 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 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 div 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 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 thank you ismael because it's so easy with you thank you so much dude so we're going to give it a background image this is a linear gradient gradient it's 180 degrees it's transparent 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 transparent 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 all 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 slight color there right i got a slight slight fade there and we're gonna use that in just a sec right it's gonna be very important for what we decide to use next okay so what we're gonna do is we're gonna 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 that button and then we're going to do the following so we're going to say firstly it's a cursive pointer color white outlined none and we're going to give it a border of none right i want these buttons to be clean all right so if we do that i mean right now we can 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 the next thing i'm going to do is give you a font weight of 700 border radius of new 0.2 view width so it's going to use the view width 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 all right thank you so much superman he says can we all just appreciate the hard work thank you so much dude really really appreciate that all right and you can see immediately that final change with the background color gave it this really nice netflix-like finish okay so again if you're new to development and 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 we still have 400 people watching i just want to say thank you honestly i just want to say thank you so much guys all 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 when i hover over that element i want to change the color of the text to black i want the background color to be a slight white and i want to transition that okay so the way i do that is i go ahead and i 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 and 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 really appreciate you just smash that thumbs up button it will help the video go out to as many people help overcome the sort of delay and i'm not sure how many likes we're at so somebody let me know and we can go ahead and see how that is right 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 basis basis like it's super long right now right if i say there look what's going to happen right it's just going to look a bit weird right it's gonna look a bit strange some 588 likes almost gonna break 600 guys come on let's push to break 600 right and remember the rope ones the real people who are going to make it different in this world are the ones who are going to stay to the end so keep going guys i promise you it'll be worth it 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 reindeer remainder of the texture just put dot dot dot at the end of it okay so now what we're going to do is go ahead nice 600 likes there we go guys amazing stuff i think we can keep going i think we just keep going we get seven eight we do it every time papa fam is too strong right here we're going to say function and i'm going to say truncate thank you so much guys bro 600. i made my day 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 in there 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 trunk it will take a string and it will 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 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 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 optional and we say length and the reason why it might not be there is because 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.length and i'm going to say greater than the number right if it's greater than for example if i pass in 150 here if it gets greater than 150 then i want to do this special function called substring and again you don't need to necessarily fully understand what this is happening but you guys can go ahead and check this out right i say string dot substring right so substring and then uh bigger blb says water break the reason why i'm not going to have a water bearing this year is because i can fill my bladder today actually playing with me everything is against me today i'm telling you all right so i'm going to go ahead and say zero oh wow thank you so much somebody said they're watching through multiple devices just to support a channel amazing thank you substring zero i'm gonna 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 character count and it will 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 so 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 all 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 still 400 people watching amazing stuff guys all right let's keep on going right so we have that up and running which is really really great 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 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 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 thank you so much guys aaron sanchez it's time for war bro you're right because i start to get deager in there we go what's up papa fam love the comments and energy guys 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 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 click 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 but i'm not super crazy about this so it's fine all right so then we're going 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 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 an artist 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 and now you can go ahead and once i finish this i want to have a bear with sunny sangha so we're going to have a make a request over here right now there are different types of requests there are get requests there are 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 the tmdb give me some movies right give me the movies and then tmdb is going to say yeah yeah sure here you go like 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 uh 628 likes already let's go guys let's keep on going this is amazing wow i love the fact that not even a tech issue can break the paper farm right we're going to go ahead and pull up the terminal i'm going to open up a second terminal over here and then i'm going to go and say yarn and then i'm going to say add and if you've got npm you just do npm install but i'm using yarn there's a yarn ad and i'm gonna 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 rookie says subset is it going to be recorded yes dude it's all going to be recorded so you can feel free to remember there is homework for tomorrow and the homework is going to be essentially building everything that we build today and deploying the site with the deployment link right so we're going to that's gonna be your homework for tomorrow right so it's a hackathon i'm telling you guys this is a hackable right this is gonna keep on going i'm telling you all right so let's carry on so we're gonna we've installed it right here so that's perfect now what we're gonna do is go ahead and actually initialize axios right so excel says 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 on the search term i can actually just add the google.com part into the instance of our excel 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 it 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 i'm going to go ahead and pop that into the into j and j is going to go ahead and share that against with you guys okay so that's the api that we're going to basically be connecting to now once we go ahead and set that up we're going to say export default instance okay so export default uh instance right this will allow us to use this outside of the uh something that oh shoot i gotta do homework the stream is one point yeah guys remember hackathon right no messing around all right we're gonna export this and allow this uh outside so thank you so much judy shared it in the chat nice so now what we're gonna do is we're gonna go over to our requests.js i'm gonna 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 vikram says it seems similar to the other build uh this part is probably pretty similar if you've done the netflix build before but what we are going to be adding to it is definitely worth the wait so just be patient dude all right so now we're going to go ahead and create a requests.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 all right but typically what you would actually do is store this in a process the environment the api key so 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 you're going to copy it 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 gonna do is we're gonna go ahead and make a request variable okay so somebody says can we use your api key please i mean i wouldn't really be kind of annoying if i have to get a new one but uh no get your own api key okay so there we go and then here basically we're gonna 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 that tmd give us they give us back the different genres of uh of what way 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 gonna do here is i'm gonna have uh the following here so i'm gonna say i'm gonna copy this and i'm gonna paste in here 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 can be made and all it's doing is concatenating where is it concatenating the api key inside of the url right 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'll 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 the browser you can see it says that you have granted an invalid api oh yeah because i've given abc if i gave it this one for example and then i go ahead and click this link you guys will be able to see um that is that that's invalid but this is actually a correct key so let me go ahead and pop this in here and it's most likely to request that however in it that's most likely broken uh so let's go ahead and do this save right so it's probably somewhere where i pasted it but this is a definitely a correct key don't worry guys it works okay so all you're going to have to do at that point is go ahead pop your api key and then you guys can paste this in so i'm going to go ahead and pop this into the chat right now for you all to go ahead and use all right so i'll pop that into j and then you can go ahead and do that right um so you can go ahead and use that inside the child in fact what i'll do is i'll go ahead and pass the cons requests over here right thank you halam he says you explain everything precise and to the point thank you so much dude appreciate that but if you want you can just pause the video here and write this out so i'm going to save it okay the next thing we're going to do is export this request so we're going to export default requests and 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 so a few people asking for this let me go ahead and actually uh drop it to jay and hopefully he can do that so let me go ahead and say uh jay it's just going to be the second message i've sent you there we go perfect all right uh thank you thanks to our switch from angular to react oh amazing stuff dude um there we go so once you've got this up and running what we're gonna 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 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 to basically go ahead and have the oh they seem to be set one by one oh i see okay there is a limitation right that's fine that's completely fine um you guys can go ahead and do that afterwards that's fine all right so what we're going to do here is i'm going to go ahead and say const movie so we're going to initialize a movie piece a movie variable here and we're going to and it's going to use the usda hook right we're going to initialize that value with an empty array to begin with okay um so that looks pretty good right if anyone's experiencing any bit of blur or anything like that feel free to go over on twitch twitch is always a consistently perfect stream so you guys can do that okay so with that said now what we can do is we're going to use a use effect to go ahead and fetch the movie 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 right here so that way it only fires off this code when the banner component mounts right only fires it up once thank you so much jeremy says great work sunny sandeep says how long will the session go on for it's uh it's essentially going to be about i think in total maybe two to three hours but we're going to keep on going strong okay 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 is 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 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.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 guys uh whoever is sort of wondering about the um requests if you do need them you guys can feel free to pause the video here but remember guys don't you know like don't focus on the sort of like copy and pasting of that maybe watch the video follow it through and then do it afterwards yourself right it's going to be easier to do it that way rather than sort of you know rushing it and not really catching all the important stuff so um yeah you can get rid of different file names do whatever you want to do guys that's completely fine then you can 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 right um so martin actually went ahead and sent the list of requests in the chat thank you so much dude so you guys can feel free to use that thank you so much that's amazing all right so here we've got set movie and then what i'm going to say is dot request.data.com okay it's a request updated 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 up there that results is 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 all right go ahead pull out the terminal and at this point what we can do is actually import our use effect and guys please don't use the api key while we're live right now um because i don't use my api key anyway because it's going to probably go ahead and it might freeze things up and we just don't want to do that while we're live because we're already facing some headache with that stuff okay and then what we're going to do is we're going to fetch the data afterwards 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 all 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 all right so if i were you can see this one is a monarch monaka with a overview description if i go ahead and refresh she gave me a different film which was jurassic world right so i'm a big fan of jurassic park so uh yeah it works right 10 more likes to 700 likes go on guys support the channel keep pushing this challenge sir we are nearly there come on guys absolutely incredible right 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 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 whenever 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 movie and 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 path and the reason being guys is it's actually going to relate to this one so you see the backdrop path 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 part 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 right let me know if you guys found that cool and smash the thumbs up button if you did somebody let me know when we break 700 and uh let's keep going strong guys right 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 their title and sometimes sometimes they have different fields 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 movie name i'm going to do my jsx and here i'm going to say it could either 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 they 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 so lyrics now says is the banner changing by itself the reason being dude is because it now is making a request every time and generating a random number between one and the number of different films that came back from the request okay so now if i go ahead and do this 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 you go elite the mess you leave behind right it works perfectly right there we go uh aisha says we counted wrong four more it will be at 700 knights incredible guys let's go that's that's so cool man 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 what 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 all right this is coming from the movie database and look looks really good looks really really good right luke says looks amazing thanks for your hard work and dedication this is an amazing tutorial thank you so much luke and i just want to say guys i'm really sorry about the the mic issues today but we'll fix it tomorrow and i might have to have just a twitch chat tomorrow on the screen because i think that could be relating to it but uh yeah hopefully you guys can hear me properly today and uh and we keep on going strong okay so let's carry on strong guys 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 actually want the back right i want the back of the um the uh the the sort of 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 um sandeep it's good to have music yes but for this build right now because of the mic issues we are not gonna have music we're gonna type in app right and then what i'm gonna say is i'm simply gonna set the background color to black for the app okay so i'm gonna go here change the background color to black for this app all right let me go ahead and refresh and then what i'm 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 i've 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 like 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 that it does change the back then that's how we do it okay so let's go around so so he'll uh we'll cover that stuff afterwards don't worry dude so i'm gonna go ahead and refresh there we go okay so now i'm gonna 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 home screen.js okay so now let's go back to our home screen and here we're going to build the rows okay so rows is the fun part right so again please stop spamming the chat sir we will go ahead and build that stuff and we'll check this stuff out afterwards 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 gonna have is we're just gonna have several different rows that 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 going to 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 right but the other ones aren't going to have this right but the larger 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 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 and uh if you guys are still got your energy high let me know in the chat right now let me know if you're concentrated and have a quick two second war break amazing right let's go ahead and pop in on i'm not sure if my chat is coming through here oh facebook nice i can see loads of stuff coming out oh nice i can actually see all the chat now i can see facebook i can see aaron i can see sam says i am jessica says uh five dollar donation thank you so much jessica amazing appreciate that all right so sammy says it's really fast still here nice awesome stuff right so now what we're gonna do is oh man now i can see all the chats from everywhere that's really cool 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 all right show eve says please give us a git repo link guys if you want the code there's a papa github repo pack that you can definitely get or you can join zero to four stack hero as platinum or above um but yeah like that's what you're trying to get the code for you to do otherwise you need to work for it okay so here we're gonna 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.css 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 still says rose 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 now if i go ahead oh nice you got another one kellyanne raju thank you so much guys uh whoever is a moderator in the chat please go ahead and time him out thank you thank you jonathan appreciate it dude all right so we have a roll 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 it's pretty much the final piece of this puzzle guys okay and then we're going to 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'll just say this is a title okay and then we're going to save and refresh and 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 gonna do is remember we passed in those props right we passed in these props tied to fetch url and his 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 nice right and yeah this is it that's it guys keep it positive in the chat right otherwise you're just going to get blocked that's pretty much it right um so go ahead and uh and guys anyone who's a moderator david go ahead and keep it clean thank you dude all right so now you guys can see like it's black text behind it but that's exactly pretty much where we have everything over here so you see this guys we've got netflix originals trending now to operate 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 uh actually map through first thing we need to fetch the movies right we need to fetch the movies for each of these films and how do we do that all right the first thing we're going to do 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 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 here's 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 user state and then here i'm going to pass in a empty 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 i mean the sound's good right the sound's back now i can see it back now i think all right i can see it goes back all right um i think we're good now right uh everyone's saying sound okay it's back here cool let's carry on so the dependency here is called the fetch url fetch url okay and then over here we're gonna yeah the airpods wants to disconnect for just a sec uh but now what i'm gonna do is go to the fetch so use effect is at the top 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 be a const request so we're familiar with this by now and then we're going to say a weight axios now remember when we're using axios we don't use our the global axis we use our local axios so we import axios from our local axios okay um and then it was the other mic i think no no no it wasn't the other mic it jumped over to the uh laptop that's why right so we're gonna do away axios.get right and then here remember we passed in the different urls as a prop right so we're gonna say get the fetch url right and then what we're gonna say simply put after this we're gonna go ahead and do set the movies to request dot data dot results okay request of 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 gonna go ahead and execute our function okay save looks good right so we're going to go ahead and import the use effect there we go perfect everything's working and uh yeah we have literally had a few issues today but we're getting through it okay we're getting through it guys i'm not sure how many likes are right now but i'm pretty sure it's gonna be strong all right uh the goal is gonna be to hit one thousand mevons in the house what's up uh why return the request it's always just to make sure that if you are running a function it's going to cut that out and it's going to handle things right we're at 686 right now is going to be here when we hit uh 700. amazing right so 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 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 saw before so same thing but it's going to be different ones and you can see there's all sorts of ones for the different genres right so go ahead and keep sharing this video guys we're going to hit 1000 soon okay just keep on going all 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.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 gonna be the different films that you're gonna see right and what we're gonna have here let me go ahead and make this even again so you guys can see thank you so much for the uh for the 20 rupee donation kellyanne says there's any reason to have dependency for this use effect yes because we're dependent on a prop right so anytime you're dependent on a variable outside of the user effect you want to make sure that you use you put that inside the dependency area because now the use effect is going to be dependent on that variable okay so quick water break guys thank you so much for staying strong today this will keep on going and just in case you need to sign out at any point your homework for today is going to be to get the to the point that we finish on today right that's going to be homework tomorrow this is a hackathon right this is literally going to be a hackathon all right so let's go ahead and we're going to get rid of the console.log right now 694 likes let's go guys almost 700. right so for the image source now what we're going to do is futurecoasters i'm building a simultaneously converted style compost nice that's incredible thank you elizabeth that's really really cool right so now what we're going to say for the image we're going to go ahead pass in for the source we're going to interpolate right and now there is a base url right so everyone hasn't actually liked the video yet she says that's great all right so now we're going to go to the top 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 um where we used it inside of the banner but here we're going to be using it as such like this okay 699 likes did we break it hey there we go guys thank you this is why i need my music this is where usually i drop some beat and it goes crazy uh but guys you see this is the power of the proper fan man honestly insane stuff we broke 700 say thank you and firstly guys if you're watching as well remember share this on your instagram stories for those extra points inside this tournament and let's keep on going strong okay we're not going to let the tech issues break us today thank you so much guys all right so we have the base url over here and uh inventors you can sing to us i will dude if we hit 2 000 likes in this video set the goal high you know all right so if we have the um 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 bro and if it's a small one we're going to do movie oops sorry i'm going to say movie this is called a turnaround prayer 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 an 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 all right there one just donated eight pounds thank you sir nice look at that guys you don't need any problems you can buy the hashtag fancy dinner very soon nice oh sunny anyway for the other day oh yeah that's silly all right so now you have the pictures coming up but it doesn't look ideally as 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 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 we're going to 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 here's large row and then here we're going to say and 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 movie id so it does come back with an id and we're going to use it to make everything so 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 right so me thank you so much because five dollars for the starbucks thank you dude because i actually ordered a starbucks this morning and everyone got very angry about it all right so there we go nice and then i'm gonna go ahead and pull out the row.css and i'm gonna pull this underneath over here okay so good stuff guys just keep on going and i think we will break that 800 soon all right let's go nice thank you so much sami i appreciate that dude all right 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 changed to whites 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 thank you so much for the kind words guys really really appreciate it i'm gonna go ahead and pop your comments on the screen this is really really nice thank you so much honestly this is amazing stuff all right so let's go ahead and pop this in and guys remember don't entice the negativity we're still going so damn strong let's keep going guys 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 and then there we go okay perfect and then i'm going to go ahead and do when i 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 caroline says sonny i have to go for the liverpool match but i promise i'll finish him with the videos hopefully dude i want to see you there for the next uh for tomorrow right so make sure you submit that homework and i will enjoy the match all right nice all right so here we're going to go ahead and say thank you so much david appreciate david always comes in with a nice up thanks sonny for education encouragement so many in this community and beyond so many need this wealth of knowledge right now thanks for your heart keep it going bro thank you so much guys and to me getting involved in that football thank you david honestly appreciate that man all right so here is a padding 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 poster so we're going to say row poster 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 jumps straight back in there and let me change this back to 100 and you guys can see look at that it's already started to look pretty good right we've got look out one line of code right one minor code changed the entire game right geo still thank you so much for the kind words man 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 row 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 shubham we can remove the scroll bar because i just saw you asked it in the perfect time and i went ahead and mounted 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 with that said now what we're going to do is submit this hats off for the dedication determination of people in asia watching this video these efforts are what and it'll take you a long while speaking from my personal experience exactly keep going guys honestly keep on going this will change your life really well and that's why we don't mess around with it we really do want to start changing lives um and we have been people have got jobs from this guys it's insane including sami right so 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 say oh jd thank you so much guys hey appreciate that dude nice 100 rupee donation right so now what i'm gonna do is we've got object fit contain and then i'm gonna say margin right so right now everything is touching each other right so i'm gonna add a margin right of let's do 10 pixels okay so 10 pixels and then 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 gonna do is we're gonna 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 all right so the next thing i want to do is for the poster larger the large posters right we actually want to make it so that we have oh sumit says i actually use the netflix code in my interview that's incredible dude see it's real guys this is real stuff that's actually going to help people land jobs obviously it's crazy stuff all right so now um stock says anybody know what to say but leaving a like as always and telling you what you're doing is awesome bro father figure for many future dads thank you so much dude appreciate it kind of thank you man all right so now we're going to say road poster hover okay so i'm going to go here and say row poster hover 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 8 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 why uh i think we might actually get rid of that after this burst fine and opacity of 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 i said i got an internship because the netflix one amazing dude amazing all right five says your accent is adorable thank you so much slick nice looking really really good guys 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 the 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 right now you guys can see that we actually want to apply 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 second 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 slightly bigger just by a percent right 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 edition to your selector and you just say display none to the scroll bar i'll go ahead and hide the scroll bar for 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 all right so this is looking really really good i think everything's pretty much in place at this point right so um this place needs music when i'm building tomorrow i play music yeah i definitely will try and fix those issues for you guys in tomorrow's world but you can see look you might get a dead link okay so we need to fix the dead links right so the difference to fix any sort of dead link that might come up the way what we're going to do is actually going to add a conditional so it 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 going to add in 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 part exists okay so did 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 dead link coming in so now we should not see any dead links 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 you supply this was applied for both oh wow okay that's interesting what happened there okay so for the netflix for the large 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 path 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 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 click yet and uh we don't need anything else 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 uh 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 it's a 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 nav bar at the top and it disappears look how clean that is right as it goes down it just nicely just gradually disappears in 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 pretty nice okay so what we want to do now is make sure that you guys can reach this point so that is going to be your homework right for tomorrow and we want you guys to essentially go ahead and reach this point in the build right this is essentially the front end portion of the build right and this is basically going to be what you need to do tomorrow right so you need to get all of this done tomorrow bye bye tomorrow and submit it now i'm going to show you guys how um sonny can we put the name of the movie below the poster sure guys make feel free at this point to make additions to this app right make additions add things to it change it up a bit and i'm gonna highlight the people who do that because it would be so cool to see who actually goes ahead and takes that a little bit step further add zero little jazz to that right so guys what i want you to do let's go ahead and reiterate right your homework for tomorrow is to get to this point right you need to get the app up and running you need to build the following components right so i'm going to go ahead and show you guys just very briefly inside of home screen you need to build your home screen component so that it looks like this right so your home screen component should be very clean it should have a nav a banner and the following rows right so it should be very very clean now this is going to be very important for tomorrow okay because everything is going to start getting a bit more complicated in the sense of not complicated we're going to break it down you know what i mean guys i'm always going to keep it simple for you we're going to go ahead and break it down and then we're going to add in login functionality we're going to create a payment plan screen and then we're also going to be adding in the checkout process where you can actually process a membership payment with stripe okay so if you guys to go ahead and just right now drop the comments in the this comment drop a comment in the description and go ahead and let me know how the build went for you right now there is a a feature in the old build where you can click it and and it will open up a trailer but for this build what we're actually going to do is we're not actually going to implement the trailer functionality reason being is because it doesn't actually always load right so what i would recommend is if you i'm gonna leave that as a challenge feature for you and i will put bonus points out there right if you implement a trailer functionality where if you click the build if you click the poster and it opens up a little pop-up with a trailer that's gonna be your challenge for tomorrow okay that's going to be our challenge go ahead 720 likes thank you guys that's incredible right 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 right so many people are saying thank you so much guys incredible honestly your energy and i just want to say thank you for sticking out even past the tech issues i'm going to work tonight to make sure that they don't happen again but we're going to keep going strong okay so right now i'm going to do command j pull up my terminal and i'm going to 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 gonna go ahead and do the deployment stage right now in case anyone's wondering okay so here i'm gonna 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 it says to you that firebase is not a recognized command then remember the step in the beginning where you had to install the firebase cli tools you're gonna have to do that okay so you're gonna have to do that but now what you have to do is firebase login and they will pop up a little pop-up if you're not logged in but for now all you need to do is kind of do this and then what you're gonna do is firebase init okay so firebase and then once you do firebase in 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 gonna go down to hosting okay click on the hosting folder so 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 hit enter on that and then i've got a few different ones right i've got netflix clone netflix on youtube and the one that i'm doing today was netflix clone youtube okay so i'm going to go ahead and hit enter on the netflix on youtube then we've got what do you want to use as your public directory okay so here what we're going to say is then again guys i'm reading your comments thank you so much this is really incredible thank you so much guys 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 set up 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 init 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 on the web right so what we need to do now is say mpm right run build okay npm run build all right and this will go ahead and it will build our app and now when we do mpm run build what it does is it creates an optimized production build 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 um this is going to be uploaded on youtube so yes you guys can use this as reference for tomorrow's homework 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 run build if you change any file or folder you have to do npm one build again okay npm on 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 as you can see there's a bunch of stuff in here right a bunch of cool stuff that goes into the buffer 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 photo is what we specified in the firebase init okay firebase to play you guys ready to deploy let's do this right let's go ahead and deploy it if you haven't already smash the thumbs up button because we have gone through tech issues we have done so many things we conquered the mic that kept breaking and we are still here and we're about to deploy this app okay let's go forward and let's deploy this thing let's go ahead and say firebase deploy look at the lovely bit of energy that everyone's dropping in i'm gonna go ahead and hit enter let's do this guys all right guys oh man go ahead and uh uh and time out that guy dude all right so we got jessica gross we got that's it nice 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 all 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 what we can do at this point is you guys can feel free to go ahead and check out that url i'm not going to drop it in the chat because it's going to mess everything up right but you guys can go ahead and deploy it now what do you have to do for tomorrow right so there's a seven thousand pound prize for right and remember guys we've covered so much in today's build and we've done it really actually pretty quick right so we actually went ahead and built this beautiful nav bar at the top we have this amazing banner with this really subtle gradient that transitions into the bottom and we have these nice poster effects and all of this stuff right your homework for tomorrow guys is simple get to this point right get to this point deploy the app and then you'll get that magic little url check that you can actually visit the website and then the first link in the description will take you to day to homework okay so i'm gonna pull up day two homework now right what you need to do is go ahead and get to the day to your homework screen this will take you to the following screen okay so once you get to day two homework screen you need to go ahead and see this all right so uh so something i think the number was about right so now you're gonna get to this screen right so once you're over here make sure you have followed all five steps so i can't stress enough if you don't follow these steps i can't tell your points i can't tell you where you're at in the challenge so remember you have to register to the challenge you need to go ahead and register for the final surprise last day guys honestly i can't stress enough that this is a big final day honestly it's going to be really really important and the link is here to go ahead and register so i'm going to go ahead and show you guys right now check this out right so all you need to do is go over to this event and simply register and click the save my spot button okay so that goes live in three days where i announce the winners and i announce all of the sort of special goodies and bonuses that i'm gonna be dropping that everyone will get if you're part of that event okay so if you're part of that event you're gonna get some amazing stuff okay all right so now let's go ahead and see you and join the facebook group make sure you definitely are part of the facebook group join the official papa fam on discord and i will help you out with any sort of issues that you're having you can have a chat with people and then yeah you need to go ahead and enter your full name your email and the deployed site link okay so the deployed site link is simply the netflix url that you have at the top of the screen once you've deployed to firebase guys it's that simple right make sure you register for the event on day five because that's where we announce all the winners and as always just like yesterday submit the homework guys it's been an amazing amazing build today i know we face some tech issues but guys the proper farm just doesn't give up i think i'm not sure where we at with the likes guys i'm not sure where we're at with the likes today but uh we have so many people watching and guys show up tomorrow at 6 p.m gmt and it's going to be absolutely huge for what we're about to do right so today we built the netflix front end build and what we're going to be doing in days uh three yeah days three and four day day three tomorrow we're actually going to be adding to this build and we're going to be adding the login functionality and the my profile screen all right so we're going to be adding full user authentication with the redux right so we set this up with redux and uh yeah we have 300 subs up from yesterday that's incredible guys like you're part of the movement are you part of the movement right now and it's incredible right honestly absolutely crazy to see this right so it's going to be crazy crazy stuff and i'll try and play the outro music i'm not sure if it'll work but like i'm gonna see how that happens um but yeah guys absolutely incredible stuff and um i think we're gonna get to 3k very very soon and i just want to say guys yeah if you get stuck on anything you ever reach any points of trouble the facebook group is there to help you out we're helping each other out but remember once you submit that homework screenshot proof post it in the facebook chat that's what you need to do to get the points submitted to the homework channel well so the homework um link and then you want to go ahead and screenshot just like you did for the day one homework we had 450 submissions for the day one homework how many of you guys are going to make it to this point because this is what's going to push you to go to that next level and succeed as a developer guys it's been an amazing session i just want to say this is your boy proper react and tomorrow we are back to add in that login functionality my profile page and then the day after all the payment juicy stuff is coming right so absolutely and crazy stuff and yeah if you if you've helped people out so i'm just answering a few questions now if you've helped anyone out in the challenge again literally go ahead and just i'm watching that right so that those points are actually quite manual so we go ahead and we go and check everything so trust me me and jay are working non-stop we're making sure it happens and uh yeah we're gonna absolutely crush you guys the papa fam is here to stay and we are done for today okay so you guys can take a breather and when you're ready you can go ahead do the homework at your own pace and guys use the facebook community to go ahead and help you out right so just to i'm going to wrap up one second right now for the homework on the facebook we need to go ahead and i will update that link right now and we can go ahead and make sure that you can submit the homework on facebook um but we're gonna go ahead and update update those links but right now in the description on youtube you should see the link to the day to homework right if it's not there we'll go ahead and update it and we'll make sure everything's perfect but guys until tomorrow i will see you then have a short break and then get to it right hackathon time guys five day challenge i'll see you in tomorrow's world this is your boy papa react and i'll see you in the next video peace guys so usually i have no music and everything's good but instead i'm just going to read the comments and have some water right and we keep the spirit alive inside of us see you tomorrow guys amazing session let's go you

Channel: Sonny Sangha

Views: 164,193

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

Id: 1TCw9wO1neA

Length: 155min 31sec (9331 seconds)

Published: Wed Feb 03 2021