π΄ Let’s Build a Hulu Clone with REACT JS for Beginners!
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704601728_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: π΄ Let’s Build a Hulu Clone with REACT JS for Beginners!
and today i’m here with your boy sunny how’s it going guys super pumped for today’s episode how’s it going everybody so right now and today you know we decided to pretty much dissect the biggest tech companies out there for you guys and we’re showing you guys how to build the actual the front end and even some functionalities too so today we are tackling hulu and due to popular demand you know we’re gonna go dive deep into this we already did netflix we did google we did spotify we did amazon now it’s time for hulu so sunny came up with this build this guy is a genius so guys you know really follow the code if you can also put it on your portfolio we’ve seen so many results from this so show us a little bit about you know the whole build study let’s do it so today as frankie said guys we’re building another big tech company so you can see right here we’ve got hulu so hulu is a uh frankie so who is an american company so jonah explain quickly what hulu is correct so hulu is the direct competitor of netflix some people you know say they prefer hulu some prefer netflix you know they do have their own perks i feel like even hulu has a bit of channels and things like that but ultimately you know a lot of them have the same movies being shared but hulu has some exclusive shows as well so that’s what makes it cool you know it’s you can either choose apples or oranges you know netflix is part of culture pretty much netflix and chill but hulu is is great in its own way as well awesome nice so like you said like you heard it guys we’ve got an amazing music video streaming platform hulu and what we did is we went ahead and built it so you can see we’ve got a bunch of tech involved here guys we’ve got the navbar so you see we’ve got a lovely little nap bar over here with some hover over functionality we’ve got this nice little animation when you hover over this uh sort of sub nav bars call it and even when you’re going over the video feed so you can see everything has this nice dynamic ui to it right a really nice look and feel and the cool thing is this is not stack information guys so one this is live so if you want to go check it out here is the link to go check it out and two if you want to actually go ahead and click one of these so you can click on action for example and you can see this is actually pulling live movie information guys so this is very responsive yeah super responsive as well so good point frankie so let’s go ahead and resize this right now and we’ll see if we go ahead and chuck it into responsive mode so let’s go ahead and do this and now you guys can actually go ahead and see it will only use up the space that it can use so you see this and even the top bar whenever we go to this point for example it becomes scrollable this is super nice super clean and we’re using flexbox to go ahead and get this working so if you guys are excited let us know in the chat we can see a few people dropping some positivity now that’s awesome love that you guys for being here so kazi was originally meant to be in this call but something happened with his little puppy you know she broke her little nail and she was bleeding a lot so they actually had to go to the emergency room and you know that’s why i’m here filling up with this so i’m kind of a very beginner in code so you guys are going to get you know the whole build through some beginner eyes and he’s going to lead it all the way just like he does with his magic he’s great at teaching so stay tuned thank you guys also i saw somebody said that’s not the current huli board yeah so good point we actually are using the uh we’re using like a a rebuild design so i found a link where they basically were planning a rebuild of hulu and we’re using the new concept design so it’s actually a very modern design um so yeah so super interesting stuff let’s go ahead and have a look so secluded grace because you guys are awesome i’m pumped and ready that’s the kind of energy we want guys we can see everyone getting super excited in this chat this is awesome and guys let’s drop frankie a massive massive um they’re just dropping a massive praise because frankie jumped in last minute clutch and he just handles it doesn’t panic he just came in and he’s doing these things this is awesome oh look beast rwa just joined pwj course a few hours ago nice dude that’s awesome bro hit us up we’ll give you a shout out right now and then also we’ll send you a message we’ll get into and and we’ll link up with you so everybody that joins pwp pwj you know drop it in the comments below also we do have a one hour full training of how to become a javascript developer and we show you exactly how to do that so click the link in the description below the first link and it’ll take you to that training nice cause he’s in the chat guys there we go see oh yeah he’s he’s in the car waiting in er because his poor little dog broke the nail and he has to get him to the little the vet so damn it but guys yeah as frankie mentioned we have a free training webinar so make sure you go ahead and check it in the description and it’s going to teach you the top three mistakes to avoid when becoming a javascript developer it’s completely free go and check it out all right frankie awesome yep it’s beautiful guys if you guys want to take a lot of value look at that webinar look at that training and i’m sure you’ll get something out of it yes go frank already let’s go there he goes let’s go sonny and frank love the hilly build hey this is amazing guys this is awesome i just love to have him on the chat thank you frank for being part of the community man you bring tons of value hey let’s hop into it or what sonny let’s do it so firstly guys you know how we do it we like to sort of draft things out so we know the tech that we’re going to cover today right so first thing what we’re going to do is just hop over into vs code and right now we’re just going to draft up some of the tech that we’re covering today so in order to get the functionality we’re basically going to talk about so here we’re obviously the app is built in react so the entire app is built in react and let me know if you guys can see that but with higher apps react we are actually going to be using material ui right so material ui and that’s how we get these beautiful icons over here so all of these icons that you see are material ui and we’ve it’s not a stranger to our builds we use them in pretty much most of the builds and you guys are going to get another use case here today with material ui so let’s go ahead and do that we also got we’ve got a bunch of flexbox so you can see earlier on we showed you guys how it’s completely responsive so as it gets smaller the bill is going to get a lot smaller that’s going to be super exciting to learn we also have tmdb guys so tmdb is essentially we’re going to show you how to make api calls to a movie service let’s just call it like a movie service and it’s basically like a netflix style movie service so you can pull movie data from it and yeah so that’s going to be super exciting to go ahead and do that um and then we’ve also got a few more things let’s go ahead and break it down we’ve got um so you guys notice how when i click this you see there’s like an animation right there right so there’s a really nice animation that animation we call that um we actually call that react flip move so i’m going to be showing you guys how we can implement something called react flip move for animations so you get those really nice sort of slick animations because that’s just like the icing on the cake once you add that in everything looks super clean and it starts to look like an actual dynamic app right so really really powerful stuff and once we’ve done all of that we are going to be deploying on firebase right so we’re going to be deploying on firebase hosting right frankie do you want to just uh answer a few questions while i quickly just i need to deactivate the sound because i keep getting a little ping right now give me one second yep sounds good by the way man firebase has shown a lot of love to us during these builds drop in the comments below if you guys have implemented firebase in your own builds because it’s made these builds so much more easier for us and also it’s great to show you guys other ways to host your databases other than you know actual sql databases so it’s awesome and like you were mentioning tmdb i i’ve seen so many people whether they they’re doing you know movie lists or builds like the one that we did on on netflix and all of that they always use tmdb and it actually reminds me a lot of the library in imdb so it’s pretty much tmdb is the movie database imdb is international movie database so that’s where we’re pulling all the data and also like sunny said we’re going to be using material ui we’re going to be using flexbox and i love material ui i believe it’s a library right sonny yeah so it’s a library library exactly and it just gives you like a bunch of components an icon library which is really powerful we use that in most of the builds uh and yeah so we’re going to be using that today awesome yeah i love those icons by the way so that’s that’s great things about libraries you know sometimes they have great tools for designers slash developers and material ui is one of them yes let’s look at what’s going on in the chat right now so we’re receiving a lot of love yeah we’ve got we’ve got some positivity today it’s crazy dude yeah man people are loving us more and more yeah oh dude we just we’re about to hit 500 people live right now holy crap let’s go nice thank you so much cp pam we love you guys it’s about yep 500 people right now 300 likes so make sure to like that like that thumbs up button yeah make sure it turns blue exactly yeah man if you guys are enjoying the content drop some love in the comments so i see right here yogesh sharma says hello brother you are doing great work i love to watch your video if possible then make website using learn that’s actually one of the plans that we have moving forward i know sunny has talked a lot a lot about it and he wants to build a bunch of abs using the burns stack just because i know you guys are you know wanting it and you guys are demanding it so you know we’re here for you guys and you know that’s that’s why even today you know i decided to jump in here so things happen in life man you never know what’s going to happen but you know you got to be ready to just you know dive in and actually take control of life exactly at least as much as you can exactly so without further ado let’s go ahead and jump straight in guys and let us know whoa we just got another donation hey check it out joshua oh wait oh no it’s got tagged to the wrong thing there we go joshua thomas thank you so much for that 5. donation that’s awesome dude that’s a wicked way to start this uh status build thank you very much you so much brother nice so guys first thing we’re going to do is we are going to go ahead open up our terminal and we’re going to type in make sure you’re in the right place so yep we’re in a good place here so we’re going to do mpx and you if you don’t if mpx doesn’t work at this point guys you want to do you want to go ahead and go over to node and install mpx uh and install node and then you’ll get access to mpx right so mpx create react app and then we’re going to basically call it in this case let’s just call it hulu youtube clone because i’ve already got an app called actually in this case let’s do just there we go and that will go ahead and it will basically use to create react to app tool built by facebook to go ahead and basically prepare a starter app for us so while we’re doing that frankly let’s actually go ahead and set up our firebase so gonna talk a little bit about what firebase does frankie awesome yes so firebase is google’s solution for making a nosql database right and it makes it super simple for beginners actually to host databases because a lot of times there’s so many tools like i myself don’t have much experience with databases the only experience i’ve had is with sql and honestly it’s uh it’s pretty complicated and it’s it does involve you know whole ecosystems but the cool thing about this is that you know you can pretty much use google’s tools you are familiar with their ui with how they manage everything and it’s a pretty fast solution it’s also very intuitive that’s that’s actually why i love it myself oh [ __ ] cause he just dropped dropped the super chat he goes guys start going let’s go love you both let’s keep that pace up also what’s up cp fam let’s go that’s nice that’s awesome awesome much love brother let’s do it so guys carrying on what we’re going to do is you want all you need to get started with firebase is a google account so you want to click on go to console and then you all you need to do once you’re inside the console is go ahead and click add a project right so click add a project and once you’re inside here you want to do hulu hulu clone i’ve actually already done one because i’m going to call it hulu youtube clone but you can call it hulu clone this bit really doesn’t matter guys you want to click continue uh you can enable google analytics or not i’m going to choose to just get rid of it for this one so this is why we need to do this for one reason because we’re going to be deploying the app just like this you see like it’s going to have its own url in the end and we’re going to have everything sort of working in that way so we need we need to set up firebase so that we can do that later on okay so with that said what we also need to do is go ahead over to tmdb right so tmdb and this is the movie database and what we need to do is we need to actually go ahead and get a key from this movie database so i you need to create an account so i’ve gone ahead and created an account and click login and let’s go ahead and oh god i can’t remember where the hell this key is but is this free by the way this is yeah this is free this is free so you need to go to settings and then i’m just going to quickly hide this for a second because i just want to double check something but okay so yeah so let’s go ahead and do this so one second guys give me so somebody somebody asks how much storage does firebase provide aditya uh how much storage is five bits but so they actually provide quite uh they provide a very generous and that quota of free storage guys so pretty much for what you’re going to be using it for you have more than enough um storage on there and it’s only when you’re sort of scaling to to sort of serious numbers that you’re going to have to have to worry about that stuff but guys once you’re inside of the tm db uh let’s go ahead and go over once you’re inside tmdb what you want to do is you’re going to click on this over here in the top and you’re going to click on the settings and then it will take you to this page right on the bottom left over here you’ve got api right so you want to go over to api and then if you scroll down you should be able to see api key version 3 auth okay so this key right here and this over here the reason why i mean i don’t really know i don’t really think it’s going to be a huge bummer if ever any if everyone gets access to this key um but the point is that i don’t want it to come down in the middle of a live so i’m just going to go and hide it for now but this is what you need to go ahead and do right so you need to go ahead and get this key copy it somewhere safe and we’re going to be using that later on right so with that said i’m just going to quickly get out the screen so you need that key so we’ve got our key we’ve got firebase setup and we’re ready to move so now let’s go back to our react app so let’s go who’s pump people that’s it guys look at the comments below if you’re pumped that’s it we just hit over 500 viewers as well guys so this is awesome let’s keep the energy high so now we’re gonna do is go into the hulu clone so make sure you’re inside the right directory and then what you want to do is go inside of here and you can see you’ve got a bunch of things here right so what we want to do is we need to get rid of a few things we want to get rid of the app.test.js the uh the logo and the setup test so these three files we’re gonna get rid of we just got a super chat thank you so much and that was by docker awesome stuff dude thank you rupees thank you so much docker we appreciate you man thanks for being part of the family amazing go ahead right into this exactly thank you so much dude uh so what i’m gonna do is go ahead and delete these so to actually get the app started you’re gonna do npm start that’ll spin up the app you should be able to see a sort of spinning react icon if everything went well so we should be able to see that over here now and what will happen is that will pop up in localhost 3000 so that’s where any react app goes ahead and starts off right so let’s see we should see it spin up now there we go so once you get to this point guys you’re in a very good place you’ve pretty much started your first react app so let’s go ahead and do a cleanup process so like i said we’re going to delete this one hey we just got another one donation harder pre-damn thank you so much 100 indian rupees we appreciate you guys so so much thank you for all the love massive this gets us pumped guys so this is awesome we’ll delete the logo we’re going to delete setup tests now you can see the terminal is going to start freaking out because what we’re doing is so i’m going to go ahead and hide the terminal right now we want to actually go ahead and get rid of the logo over here because we no longer have that logo file get rid of all of this stuff and just type in here saying uh let’s oops let’s just say let’s build a hulu clone clever programmers nice save it and then what we will be able to see is you get this right so let’s build a hulu clone cover programmers and what i’m going to do guys for you guys is i’m going to go ahead and actually make this a bit easier for you guys to see so i’m going to go ahead and hide this let’s go ahead and drop this let me close that before it lags up a little bit uh and what i’m going to do is i’m going to pull this over onto the other screen so you guys can actually see as we code as it was another super chat donation from fun with sanchi that’s nice thank you so much he says hey sunny happy to see you here we worked in test code together and now we’re learning from you here as well from nimish oh my god that’s insane dude holy crap i have to take a minute there oh amazing man for all you guys that don’t know tesco is pretty much the uk version of walmart and that’s where sunny was working before hearing clever programmers so that’s amazing man dude that’s crazy oh my god wow i also got another super chat from uh thank you so much man 100 indian rupees we appreciate you guys so much we’re barely about to start this build and we’re already at 33 donations thank you oh that’s it let’s go guys that’s awesome oh god the guy that’s just blown my mind wow like somebody i used to work with just reached out that’s insane i love you guys this is so cool right so now what we’re going to do is let’s go ahead and go to app.css and what you want to do here is i might make this a tad smaller so let’s go ahead and do this and boom there we go and then what we’re going to do is uh frankie is that still pretty clear yeah i can see that very well very good it looks way better yeah nice so what we’re going to do now is we’re going to go ahead and delete everything inside app.css and if we save it you see it got rid of some default styles now there’s always this default little extra piece of space over here you see that we don’t want that so to get rid of that we need to go to index.css and i like to add it here because it just makes a lot of sense adding that rule over here and what we do is margin zero save it and you notice it pops up right so it’ll pop up a little bit you wanna make sure you do that um because that will actually give you pretty much a clean slate that any rule that you then go ahead and write or build it’s going to go ahead and only apply the styles that you want now with that said guys what we want to do is we want to basically sort of draft out the app right so this app is going to consist of a bunch of components at the top we’re going to have a header so we’re going to have some kind of header at the top right so it’s going to be some kind of header over here and then we’re going to go ahead and have a sort of a that sub navigation bar so something over here so it’s going to be some kind of navigation bar and then we pretty much have a bunch of results underneath it right so i’ll go ahead and i’ll show you guys this visually in the actual build so we have the header at the top the navigation bar and then some kind of results so if we look at the actual build oh nice we just got another one clever programmer that’s causing sunny can you keep showing final build now and then as well on the right side all good if not some people might not have seen the app yet don’t show you guys yeah we’ll do that guys um so you can see right here we have this is the actual hulu app that we’re building so a lot of people might have joined after when we originally started whoa we just got another five pound chat damn dude insane thank you so much man he says just a request could you please make a react firebase project with admin account with full authentication i’m struggling with that definitely man we’ll touch on that you got it dude that’s awesome we will definitely do that and make that for you um and we’ve also got another donation thank you so much thank you damn dude this is insane holy crap so much love yeah thank you so much thank you we really appreciate you man thank you guys so you can see we have the the header at the top so this is the header component that we’re going to be building then we have a navigation component so the navigation is going to be this one and it’s going to be purely responsible for navigating between the different genres or sections of the app and then we have the results right so we have the results that render out here and then as you can see this results is completely responsive as we showed you before it’s a completely responsive set of results and that navigation just to show you in practice guys when you click it those results get updated in a really nice efficient way and it pulls that information from tmdb okay so this is yeah it’s really really nice and clean thank you a tool duby for another donation love you guys this is insane thank you guys so much yeah this is so cool so joshua said can you make a robin hood clone yes we have robin hood coming so stay tuned guys what i’m going to do as well frankie i’m going to go ahead and toggle word wrap so that way you guys will never get it off the screen right now so let’s go ahead and what i like to do if you haven’t seen my builds before well i like to sort of mask things out and frankie and kazia said this is very helpful for a lot of you guys so if you do find it helpful all the houses smash the thumbs up button so here we go that’s it just flash this on somewhere so what we’re going to do is we have the header component that we spoke about so the thing at the top right we had the navigation component which was that uh sort of sub navigation bar and then we had the results right so i like to do this because it gives you a very clean layout and you can just start building in a very sort of structured way okay so the first thing we’re going to do is build this header component over here so let’s go ahead and do this and you can see obviously if i do this it’s going to say failed to compile because we don’t have a header right so let’s go ahead and create that file so we’re going to do header dot js boom and now i’m going to show you a lovely little trick we just got another donation another donation thank you so much 16 rupees appreciate you thank you so much dude amazing we can’t actually see the uh the some of the the gifs and gifts that you guys are posting um notice how i said both because we don’t start a war on that gift yeah so here guys if you do rfce and i hit enter you get this lovely little snippet and if you’re wondering how we do that then what you need to do is go over here and just download this lovely extension called es7 just type in es7 snippets and you’ll get this right so just install that and that’s how you go ahead and get this functionality if you do rfce enter boom you get that right now we’re going to be using something called bem for our naming convention so this is how we name our classes uh if you don’t know what bim is check out the builds previously or go ahead and check out bem online but here basically it starts off with just the component name okay so that’s bem and then every time we build a component what we’re going to do is to speed this up we’re basically going to go ahead and create a css file so in this case header.css like this boom save it and we need to create that header.css file so we can actually go ahead and write some css inside of it so there we go our header css file nice now if we go over this closed as far because we don’t need it now in here still complaining so you can either import it at the top manually or if you go to the end of the header and you press ctrl spacebar auto import and you get a nice little trick and if you save it now there you go guys so you see it does it stops that sort of freaking out and just to prove that that is the header component rendering if i do h1 and say i am a header and save there you can see i am a header so just quick reiteration of what we just did just go ahead remove this we basically just built the header component right so that’s pretty much finished guys i’m joking we’re not done yet we’ve got the header component here and that’s going to basically we’re going to turn this like sort of nasty thing which says i’m a header to this beautiful header over here right we’re going to use flexbox and material ui to make it look like that all right now it’s a beautiful placeholder makes it very easy for you to know understand that that’s the header that you’re going to be working in exactly so it’s going to be super useful for you guys and once you actually go ahead and create that let’s go ahead and uh delete that uh delete says react god how are you yeah thank you dude i’m doing good i’m doing better now because i got frankie here yeah yeah i love doing lives with frankie this is awesome right so now guys what we’re going to do for the header let’s go ahead and jump in so we’ve got the header component and the first thing we need is we need a bunch of icons right so what we’re going to do at this point is we’re going to go ahead and down go to material ui.com and let’s go ahead and go to here so you see it says npm install material ui core so what we’re going to do is to get this working press command j to pull up the terminal now i like to keep a terminal open and just hit the add button so that way you see it’s still got my terminal running but i’ve got a second terminal over here so that way you don’t have to keep stopping everything and then i’m going to paste that so it’s npm install material ui core and while that’s doing that guys so you can see it’s installing what we’re going to now do is go over here type in icons like this and then you can see we also need to install this one so you’re going to need to install material ui core and the icon set so let’s go ahead and do that so let’s go back over here as you see once that’s done we’re going to do install material ui icons like that awesome and then just i love it i love it because it’s like you guys are getting to see how sunny starts ads i mean abs just from scratch and really it’s a whole journey sometimes you know people skip steps on tutorials so it’s great that you guys can are actually able to see this yeah and i think like uh even when sort of we see new people come to the channel like i think that’s where they see the most value because they can pretty much start from the beginning and go all the way to the end with us so yeah if you guys are enjoying it then let us know in the comments so awesome so we added the icon set right now something i want to show you guys here you can see you’ve got a button which says you can search the full list of these icons so let’s go ahead and click that and you can see you get to this really nice sort of icon picker now this is where we find our icons guys so if i go ahead and type in search if i click this you can see it gives me the code for the icon and you can pretty much go ahead and just get all of the icons that we need so all of these icons that you guys see over here whether it be the account whether it would be the home this little lightning every little thing for example even the lightning one all i did was i went here and i typed in lightning and i got this one flash on and that’s the import to use it and then you just use it as a regular component so throughout the app you’re going to see me using a lot of icons this is how we get them okay so now that we cleared that up hey let’s go delete thank you dude he just dropped a 50 uh rupee super chat thank you so much thank you so much man that’s awesome dude thank you appreciate that we’re at 650 viewers at the moment this is awesome guys oh hopefully we can reach 1 000. yeah let’s get that number up guys let’s go and you can get a pre-launch maybe yeah okay another free it’s so funny that free lunch that got sent to me the vouchers don’t work in the uk oh wow so so one day we’re gonna use that for you yeah you can use that awesome nice so now let’s go to header.js and what we’re gonna do here guys is we’re basically gonna go ahead and do two things so uh whenever we do these kind of layouts what i like to say is so imagine over here right what we essentially have is we have like two containers we have one container here and we have essentially another container over here right now if we basically have two containers and oh no it wasn’t not freezing one sec if we have two containers like this one over here and this one over here and we do display flex now they’re going to be in rows and if we do space between that’s how i pretty much push this one all the way over there and i push this one all the way over there right so we need two containers right uh and then inside the left container we’re gonna have all the icons inside the right container we’ll just pretty much have the image okay so to show you guys how to do that over here what we’re going to do is we’re going to say div and this is going to have a class name of header icons right so we’re going to have a div and it’s going to have a class name of header icons over here and what we’re going to do now is this is where all the icons are going to go so all icons here like that we can get rid of this i am a header and for the next one we could have a div and an image inside of it but if you think about it on the right all we have is the image so we don’t actually need a div we could just use an image right awesome we just got another donation from sizeandyp he says your live streams help me to become good at css thank you guys and keep going nice dude appreciate it so much beautiful man so then the the image on the right is going to be the hulu logo right and then you’re going to push it back to the right side of it so that you know it has a little bit of padding and looks good with the whole the other left side of the header right exactly what frankie just said so exactly so pretty much we’ve got an image tag here and this is a logo just from google so i’ve just gone to google i’ve typed in hulu logo and i typed in hulu logo white and i found this one right so let me go ahead and toggle the word wrap let’s go ahead and do this so you can see now we pretty much have and you know what let me go ahead and make try and actually change this uh permanently because it’s going to do it on different pages it’s got enable word wrap on there we go boom nice so now we’ve got this so you can see we’ve got the source and it’s a white image so you won’t actually see this right now but if we go ahead and inspect this and go ahead and make this full screen there’s an image here so you guys can see that there is actually an image right here but because it’s white you can’t actually see it so you see if i go ahead and do that you can see it says hulu right so there is an image there and just don’t be fooled because it’s white so nice so we have the header icons and then we have the image next to each other so these are two containers and then just to show you guys let’s go ahead and pop some icons in there so the first i’m going to go ahead and import a bunch of icons at the top so let me go ahead and pull these in right now so these are a bunch of imports by the way can you zoom a little bit into the code just so we can have a little bit of a bigger view of it yep so let’s go ahead and do that now there we go like that awesome yeah nice that’s better awesome dude so now what we’re going to do is we’re going to paste and you can see these are the uh like i said before these are the icons that we spoke about earlier right uh now some people are saying when do all redux come we’re not using redux in this build i’m showing you guys how we can actually go ahead and use a sort of a very simple level of sort of using state and props to actually achieve everything we need so my advice to you guys if you’re new to development is don’t get caught up with always thinking that you need redux or always thinking that you need the context api you can do some crazy builds like this one for example the one that we built here or without the react context api or redox so i’m going to go ahead and show you how you do that today there’s a time and place for those things but you don’t always need to over complicate a build right so here we have the home icon and to use it let’s go ahead and do this let’s do home icon save and we should see on the right now we’ll get a home icon which should pop in so there we go lovely little home icon if i zoom in a little bit you guys should be able to see that so the home icon we have the flash icon so let’s go ahead and grab this one flash icon here and then we’ve got the live icon so this one over here like that save library icon yeah nice those look awesome man you see like these ones and look how easy that is guys like we’ve just imported them using material ui it saves us all the headache of going and finding them and it just imports as a component really really nice stuff also i see a lot of people asking about the github repos um this is kind of like a topic that i was going to talk about with a lot of people because oh and we also got another donation thank you so much travel more donations and sumit anglicar thank you so much guys we appreciate you yeah that’s awesome guys i’m pumped man yeah this is insane i love that i’m kind of skeptical to give the the github repos because i feel like following along is going to give you a lot more value it doesn’t take long for us to go ahead and put this on github but then i just find that people copy rather than actually learn so maybe we’ll see how it goes uh if we do put them up on github you guys will see in the description but um yeah in my advice is if you’re following this right now just follow it along with us guys like this is completely we’re doing this for you guys to learn from it just follow it along and you’ll get the most value from it nice at the end of the day it’s gonna be practice that’s gonna you know ingrain that skill set into you so really do follow along and then up your skills put it on your portfolio guys start seeing the results that’s awesome like sonny said check out the description below we’ll if we do add the github repository we’ll put it there so yeah exactly oh awesome joseph murray just dropped a he says here red bull uh thank you dude and some readable right now i know right awesome so let’s go ahead and continue on so we have these icons right now if you notice each one of these icons actually has some text under it so it says verified trending home collection search account right really close so once you hover over them huh you see the actual text yeah and then we have we have one active one here and then we have these ones where it’s got like this sort of look and feel to it right so firstly before we actually go ahead and do that let’s go actually and clean up this image because i would like to kind of see that image and right now we can’t really see it and it’s kind of a headache so let’s go ahead and go to our header.css file so this one right here and what we’re going to do is i’m just going to go ahead and pop my code up so i can see everything nice so inside of header.css i’m going to target the header container so this outer container over here and i’m going to basically go ahead and do color white so i’m going to set all of these to white and that will actually change the color here but before we do that let’s go ahead and change this to like let’s just change it to red to exaggerate something right so we can see it um and then what i’m going to say display flex right display flex and now you can see all the header sort of elements right so everything uh all these header elements are kind of gone into a column and the reason why is you’re thinking hang on but shouldn’t it be a row right because no remember like i said this is actually there’s an image here so to exaggerate this point i’m going to do background color and let’s just make this black for a second all right so back on color of black and if we make that image smaller so just to show you guys because right now there is an image there but it’s so big that you can’t see it so what i’m going to go ahead and do is go ahead and make that a lot smaller so let’s do object fit contain to keep the aspect ratio and let’s do a height of 80 pixels so you can see there is a hulu logo there right so let’s go ahead and make this half and half like this awesome so you can see now we’ve got everything um in in this sort of format so it looks very very nice it says sunny’s voice is too high uh frankie is my voice too high from my end i feel like it’s okay maybe drop down the gain a little bit or the actual just just adjust it a tiny bit there we go right nice so now what we’re gonna do is we are going to go to um now we’re going to go to we’re going to add a padding of 20 pixels so we’re not sort of we don’t have everything around the outside so if i do that there we go a nice little padding of 20 pixels and then i’m going to do a line items center so everything’s aligned centrally on the vertical axis so there you go pulls it down nice and then what we’re going to do is justify content space between right this is the magic that actually separates everything so i don’t know what happened there so oops we’ve just got rid of something so let’s see what we did there we’ve got background color black let’s go ahead and boom this one right here we’ve got justify content header overflow x let’s do a scroll so if it goes too big where did that go okay so it’s kind of gone way over there right now so we need to fix out why that’s happening um what i would do to fix this guys is firstly you see like the app right now has some weird width going on right so let’s go to app.js let’s go to inside of our app.css and remember i change this to a lowercase a so go inside app.css and actually set the width of app to a hundred view it right and this will actually go ahead and fix oh i know why it’s because i was zoomed in dude i think was i uh well i don’t know i’ll figure this out but basically what we’re going to do here is the background color right got another super chat by ankit vastava nice can you tell me how to pass data from child comp to parent nice yeah so we we will be doing that definitely today so if you stay tuned on this video and i’ll be showing you actually a very powerful way uh that we do that because the actual whole app functions off of that uh parent-to-chart prop passing so that’s going to be a really handy thing so stay tuned and you’ll be able to find out uh awesome so 100 view width right so let’s go ahead and refresh and i don’t know why i mean you know what oh it was me i was zoomed in on my on the mac track pad that was like yeah okay that okay guys that was my bad so this is how it actually looks okay that’s awesome all right now we’re back in you know i was thinking i was like what the hell is going on like yeah now it’s starting to look like the build now i can see the header yeah how it’s going to form out exactly so now you can see that there’s a little bit more of a sort of structure to it right so now and also i saw somebody ask what does this mean this means the in the image tag inside of the header container so the direct child of the header container so that’s why we do that so now you can see look that justified content i spoke about it pushes the two containers apart from each other so you get this very nice sort of finishing touch right now what we want is you can see like when we made it a bit smaller so study one question when you add the justify content one does that make it like more responsive in case like you do end up you know making the i see okay yeah you’re smaller yeah exactly so if i go ahead and uh also just want to say dot net sean just dropped us 10 euros dude he says thanks for your awesome streams appreciate you did thank you so much brother yeah thank you yeah that’s awesome right so let’s go ahead and check this so now you see guys justify content space between if we actually go ahead and see like if i go and resize this now it’s not very responsive right like i mean that’s not very nice to look at but if i go ahead and add justified content space between boom look at that the hulu logo is beautiful yeah with one line of code guys wow that is insane also we just crossed the 700 watching now mark so 700 people in this live stream thank you guys so much we appreciate that thank you so much to tasha as well he just dropped another donation appreciate that dude and guys if you’re enjoying the video all we ask is that what do they have to do frankie man if you guys are enjoying this content you’re enjoying this video please smash that like button because it’s going to help us share it with so many other people just like you that want to learn this skill set how to build these apps and right now hulu so drop drop something in the comments below drop some of that love and also smash that like button and even the subscribe button exactly and guys if you are enjoying this pull out your phones shoot an instagram story and hit me in uh and tag me and um frank frankie’s instagram handle’s over here so i’m just pointing at them now uh yeah so make sure you go ahead and do that and then we can have a chat and we can see you guys and see who’s watching awesome so let’s get back to it so let’s change the color of those uh icons to white so it starts to look a bit more nicer we’re not going to keep this as a black background but it’s just purely for the visibility so we can actually go ahead and see what’s going on um nice so now what we’re going to do is let’s go ahead and style those icons right so let’s go ahead and start those icons so what i’m going to do now is i’m going to go ahead to those icons and i’m going to so remember those icons are inside of a container div here right so we’re going to do is we’re going to go ahead and do header icons i’m doing display flex i’m saying align the item centrally and text align center this is important for later right so this is going to be important for later and it’ll make a lot of sense as to why we do that but for now what i want to do is i actually want to basically go ahead and remember in this in the actual build we had the text underneath right so in order to get that working what we need to do is we need to actually go ahead and go over to the the header and what we need to do is actually wrap all of these icons inside of so for example this is the stat this is how we’ve done it at the moment but what we want to do is actually go ahead and wrap each icon in a div we’re going to call this one header underscore icon like that and then i’m going to pop the icon inside of there save it so you can see now we’ve got the icon inside right and then we’re going to add a p tag right so a p tag and this is going to say home for example and if i save this now you can see that it says home right so you see it says home now we’re going to do that to all of them right so i’m going to go ahead and rather than sort of doing that same step i’ve got a snippet here that i’m going to go ahead and pop in so i’m basically going to replace all of these with like we said guys wrap it in a div with a class name a header icon a p tag with some context behind it so you can see we’ve got trending verified collection search and account all right so wrapping each individual one in dips make it makes it so that it becomes more flexible right so you can do more things with the actual image itself if you want to give it space or you know if you’re adding more components to that header right so the reason why i actually put them in divs is because we wanted it so that they uh sort of you see like right now all of these essentially if we look at this uh you’ve basically got a container here so this that’s the header icon that’s a header icon that’s a header icon right and you see each child in there so we’ve got the text we’ve got the trending the home the verified and then you’ve got the icon right because it’s in its own container they’re something that we call display inline so right now it’s doing something called display inline in that small container right so this small container this one right here is doing display inline so this right here yeah and what we can do is we can change this from display inline to display flex and then we could do things like justify content center and that will keep everything center centered which is why even when we change the sizing over here you see that even when things are spread out that box everything stays central essential within its sort of container you see that right beautiful i see so what we’re going to do now is we have the header icon and in order to basically go ahead and space them out a little bit more right what we’re going to do is we’re going to target those header icons so let’s go back here and let’s just do the following so we’re going to say header icon and here we do if i do display flex on the header icon you see everything goes into a row right amazing so so that’s handy but it’s not exactly what we want to do flex direction column like this and then you can see it all goes underneath right and then if i do width of 100 pixels then you see everything sort of gets somewhat spaced out and then if i do margin right of 30 pixels everything gets a little bit more split but you know actually for this one let’s go ahead and actually not do that let’s go ahead and actually fix the reason as to why these aren’t centered at the top of everything right so you see everything’s not centered correctly at the top and also guys when i hover over it look i still get this annoying like pointer right i actually want to see a sort of hovering effect so if we do this cursor pointer now you can see when i hover over it i get like a nice sort of uh my cursor changes to that pointer that adds a lot to the build actually you know sometimes people do ignore that and it just gives it a whole other experience once your your cursor changes once you’re on top of or hovering on top of those buttons it makes it it gives kind of like subconscious directions to the people to click on them exactly exactly it’s all about those sort of things guys massive thank you to almond jane he says thanks sunny frankie nars and qazi your videos are my favorite past time now cheers guys much appreciated and please don’t put codes on get let people watch you and get the value i personally feel the same way dude so it’s still in it we’re still making that decision but um we’ll keep you guys tuned with what we decide thank you so much man i’m on i appreciate you man much love thank you dude so now what we’re gonna do is to target the icons right so to target these icons that we see inside of here right now rather than giving them more class name material ui gives it a class name by default right so what we can do is we can actually go ahead and say we say header icon and then we can say the direct child which is this material ui svg icon root so the where am i getting that from if i go to inspect if i go over here and i basically grab this you can see over here on the right let me go ahead and pull this over here you see it says material ui icon so i’ll actually make that very big you actually see the class name like material ui gives it is material ui svg icon root so we’re saying inside of our header icon container just go and grab that right so that’s how we get that um and then what i’m going to say is i’m going to say so there’s a trick if you do margin left margin right auto what you’ll see now is it will actually go ahead and center everything because it basically gives it a max width as in as much sort of uh margin on the right and there’s much margin on the left and that actually naturally centers something so that’s how with the icons you can see they’re getting centered right now right so that’s awesome we’re going to make it a little bit of a different size we’re going to say font size 30 pixels and it just adds a little bit more beefiness to it we’re also going to go ahead and do the following so now by default i don’t want this text to show right i don’t want the trending the verified the collection search account i don’t actually want that to show so how do we hide that by default right so what we’re going to do is we’re going to target the p so i’m going to say inside the header icon target the p the p tag so we do that with this we say header icon target the p tag and what you can do is firstly i want that to be uppercase so let’s actually make it look a bit nicer first so i want to be uppercase like this so to do that we do text transform text transform uppercase oops text transform uppercase like this save it boom everything goes uppercase right letter spacing so that’s how you see right now our letters are very closely spaced but these ones are a bit more apart to get that you do let us spacing three pixels and you can see everything looks a bit more sort of beefed out don’t worry that they’re all overlapping we’ll fix that in a sec as well so now i’m gonna do is i’m gonna say font size small margin left margin right of auto so let’s go ahead and do this and that actually goes ahead and centers everything and it makes the font size smaller it’s fine that they’re overlapping for now i’ll show you why because what we’re going to do is we’re going to say display none right so display none which actually hides everything and you’re probably wondering well what’s the point of making it look nice if we’re hiding it um and the reason why we do that guys is because we actually add this magic line over here so we say when we hover over the header icon to that container so when we hover over that target the p tag inside and then we’re going to say change the display rule for that one that you’re hovering over let’s do inline so let’s go ahead and do that now you can see look at that beautiful man whoa so when you say display inline that’s showing what specifically so the the p tag of the the icons themselves or what yeah so the the display inline is saying basically by default whenever you uh have a container so if you have a div right so if you have like any sort of div uh so let’s say this is a div by default if i put like an element inside of it so if i put one element here another element in by default it basically goes in it’s called display block or i think it’s display inline so basically they just stack up so you basically just stack things up on top of each other which is why you see that by default you get the text come up here and then you’ve got the icon over here right so what we’re saying is make the p tag always hide itself right so always hide itself which is why we don’t see any of the p tags right but when we hover over it show the p tag but in the form of display inline which means it will drop that p tag here right and then you see the p tag and which is why when i hover over it now you can see that yeah very amazing so yeah very nice and bounces a little bit yeah you get a very nice sort of like slick effect there right so that’s really cool really clean and you can see it’s the same that we got over here so now you can see on the left on our actual build we’ve got this right here which is it’s always got home active which is because it’s like home is selected right now okay so how do we give something a selected sort of state right and what i will show you is bem actually have a very good way of doing this uh and what we’ll do is i’ll show you how we will write this so let’s go ahead and make this smaller for now so you can see here if we do so in bem convention what you usually say is we say for the selected ones you can do header icon and then usually have something called a modifier so it’s dash dash and then in this case we’re going to say active right so this one would be considered the active one and then what we can do is if we go on to over here and i’d basically do this i say target the header icon which is active and what we can end up saying is always basically show that one as display inline so always show that one is display inline now what this will do is you see by default it will actually go ahead and it will snap in there so if we go ahead and save this header icon active oh oops it’s because it has to be after this row so oh sorry no we have to do display inline but i’m going to make it dash import oops while we’re done let’s play inline but i’m going to make this one dash important because we want this one to be basically saying this does not get overwritten by any any other rule that’s why it’s always showing yeah and you can see it kind of jumped underneath there which is strange right it doesn’t look great um so i actually changed this because we should be using this inline flex for this one right so inline flex for the active one and even here this actually keep to a better convention use inline flex and what that will do is it actually sticks to some of the rules that we’ve added in before so now you can see if i go ahead and save it um just double check something header icon active let’s go ahead and check header icon header connective there we go home icon p tag inline flex there we go p tag inline flex header oh okay um it’s because i need to do this sorry i’m not targeting this one i’m saying target the p tag inside of that yeah there we go that’s why i wasn’t showing up there we go so now you guys can see we have a lovely looking responsive bar at the top right so now it’s permanently showing what i like about it too is like now that you see that home is showing then intuitively if you hover over you can kind of tell that the other titles will appear yeah it’s giving you direction for that in my opinion exactly so this is all about like being a good front-end developer guys it’s all those little sort of uh traits which is telling you that this is clickable this is like some this is where i’m gonna go if i click this and so forth and this is active right now right so that’s all sort of the subtle things which make you sort of a better front end developer now notice that there’s a scroll bar here right there’s a scroll so if i make this super small you can scroll so that’s pretty good but we don’t want to actually show the scroll bar right so in some cases i mean look here we don’t actually show the scroll bar because we want that clean ui so even here if i make it smaller everything’s scrollable but we don’t actually show the scroll bar to hide that it’s very simple what we do is we add the following trick right we go ahead and go to look so juicy when once you take it out it looks so juicy yeah it’s clean right so like what we can do is we add this snippet right so i actually get this from w3schools i use it all the time the same snippet basically you say header colon colon webkit scroll bar display none and that gets rid of it for chrome safari and oprah and if you do header and you add these two so ms overflow style and scroll with scroll bar with none that will go ahead and fix it for internet explorer edge and firefox right so these are this is how you remove a scroll bar but keep the functionality right and how you make it very compatible with all the major browsers as well that’s awesome dude i didn’t know that exactly because remember you need to like try and account for everyone when you’re doing this stuff so it’s going to be really important to go ahead and do that so now what we’re going to do is go back to the header.js and we actually can we’re at we’re at 69 chat revenue donations let’s go down thank you guys that’s insane holy crap love that and we just got another donation by sonu kumar thank you so much man hello brothers i love all streaming videos thank you man much love to you oh did we uh mike i can’t actually see my um i think my my chats frozen in let me quickly reload my chat one second guys so comment maybe it hasn’t refreshed yeah i feel like because sometimes it does that if you do so connie g asks when is the airbnb live stream coming up so that one is going to come tomorrow and that one cause he’s going to be here with you guys so you can get all you guys pumped i know you missed them you guys been dropping it on the chat and whoa another another five euro donation damn that’s crazy thank you so much man it says great streams also why are you guys choosing to use firefox with css instead of using grid systems in material ui uh wait say that again sorry what was that why are we using he says yeah why are you using flexbox with css instead of using the grid system in material ui good question dude so actually we are using the uh we are using flexbox because it’s just flexboxes i mean like guys why the way i would say is use flexbot learn flexbox because you can i built some seriously complicated layouts with just flexbox alone and then what you can do is move over to uh something more sort of sophisticated like css grid if you need it but remember like i said guys don’t over complicate your builds keep them simple like there’s no sort of you’re not gonna get a reward by over complicating the the build instead you’re actually going to get sort of looked at badly because the developer who can build something extremely simply and go ahead and um and make it work and sort of which is very easy to maintain that’s going to be the developer that is more likely to get the job as opposed to someone who just over engineers over complicates the build right um awesome so now i’ve actually pulled up the actual youtube comments because for some reason i can’t pin them anymore on the screen um nice okay so let’s carry on guys so with that said we were now looking at so we’ve got this bit at the top done right now for the background color it’s ugly as black so i don’t want to go ahead and do that so i’m going to basically comment this out in a second so it’s going to go back to white if i comment it out you guys can see you won’t be able to see anything which is why i haven’t but inside of app what i’m going to do is i’m going to make the entire background of the app what they have on hulu and that is this right here so if you do a background image and you do a linear gradient gradient sorry and what we’re saying here is we’re saying go from basically left to right and we’ve got like a very dark sort of black color here and we’ve got like a very sort of subtle green right so if i save this now you can see if i save this and then what i need to do is i also need to go back to header and get rid of that background color and you can see now we get that nice little wow right gradient type of thing yeah yeah and you can see like you see that we get it there and we get it there very very clean all right so now the app is just pretty much that’s the background color yeah and this is awesome because look you can see the app start starting to come together right so with that said we just actually went ahead and finished the header section so i think that deserves a little let’s go there we go nice guys so we just done the header section right there and next part is the nab bar right so the nav bar section of the build so let’s go ahead and continue here so we can go ahead and do nav oops enough like this and let’s go ahead and create that file so command b is a shortcut to pull that up in case you didn’t know that and what you can do is create a nav dot js over there boom and what we do is rfce create that let’s go ahead and create a class name and give it nav because we’re going to stick to our bim naming convention i’m going to go ahead and import nav.css like that and remember because we’re importing a nav.css we need to go ahead and create that file so nav.css like this and now you can see we’ve got what we need right so it’s still complaining because remember we pulled it in here but we need to go ahead and import it there like so so now we import it to prove that it’s working here we can say h1 and i can say i am the navbar like this right so there you can see i am the nut pops in all right so this is awesome um so somebody says do you recommend using z index don’t only use the zen zed index when you need to guys like again don’t over complicate your build unless you actually need to do that um so we have i am in that bar so i’m going to do now is we need to actually go ahead and for the nav bar guys we’re going to keep it very simple to begin with right we’re going to keep it super simple we’re just going to have a bunch of h2 elements right so and they’re basically going to say the different options so one’s going to say trending another one’s going to say top rated right another one’s going to say let’s go ahead and do this oh now they’re coming back again man i don’t know what ecam does sometimes yeah we love ecam yeah vinoth vino says today sunny is very handsome thank you dude like always let’s go thank you there we go we change this to action there we go nice and here i’m going to change this to comedy like so comedy and for example and then you’ll see that we’ve got those things basically popping up here right so comedy and then i’m just going to chuck a few more in so i’m actually going to fill these out right now so we can we don’t actually have to repeat this step later so we’ve got comedy comedy comedy so we’ve got a few more sections here we’ve got horror we’ve got romance we’ve got horror we’ve got romance so sunny i know that right now we’re adding the daft bar functionality and and everything so the one that we just finished is the header like you were saying yeah but then what is the difference between you know the the menu on top and then the actual navbar would that be considered like maybe another napkin the first one yeah so good very very good question actually so i think a lot of people might have got confused with that so the top right here guys is actually sort of the navbar right so that’s actually what you would typically consider in that bar but in this case when we didn’t make this this top now bar functional which is why i didn’t call it in that bar for for the demo purposes right so i’m referring to this one as the navbar because i’m basically referring to functionally make this do some stuff right so as i click this it actually does some stuff here um but this this how you can actually navigate through the whole app yeah so that’s why i decided to call it in that bar in this case right um but this one right here we’re calling it sort of the uh that yeah this one right here is nav and then that one’s just header because it’s more of a a sort of um presentational component as opposed to a functional it does something component yeah right so with that said we’ve got us our sort of stuff right here so let’s go ahead and style this so it looks a bit nice so let’s go ahead and go to nav.css so let me open up my nav.css and remember we are inside of the uh nav container so this nav container right here so now we’re going to say it’s going to say inside nav like this we’re going to say display flex i’m also going to change the color to white so i can start seeing everything so display flex automatically pushed everything into a row the color white made it so that it the the text was obviously white and then if i do overflow x scroll this is basically going to add a scroll bar to the things which are going off the screen so you see now i’ve got some scroll functionality which is really nice somebody said which editor editor are you using this is called vs vs code guys i’m using the insider’s edition i’d recommend you use the normal edition and that will be more than sufficient for what you need to do visual studio code by microsoft for you guys yeah exactly nice so awesome uh what we’re going to do now is we’re also going to add a padding so i’m going to say padding of 10 pixels so here padding all around of 10 pixels like that and you can see that adds a little bit of padding around it and then i’m going to say padding left because i don’t want it to touch the left side i’ll say padding left to 40 pixels and that will actually push it away a little bit more from the left side right now remember we talked about that trick before how you hide the nav bars so to hide it you can see you do dotnav.nav and then here this is again the same trick that we used before so for chrome safari and oprah you do this one and for uh internet explorer edge and firefox you just do this so you guys can go ahead and copy that and that will actually go ahead and hide the number so you see it keeps the functionality better hides in that bar awesome so next is we’re going to target those h2s right so you see here in nav.js we’ve got these h2 elements inside here what we’re going to do is we’re going to go ahead and say dot nav target the child h2 elements and let’s change firstly let’s change them to a cursor pointer so now when i hover over it we get that nice little pointer which is much nicer right because as frankie said like those little elements guys are what basically makes makes it makes a website usable right it’s like it makes a website actually usable it adds experience to it right it adds depth to it i is this when maybe from ui you start becoming a little bit more of a ux developer kind of giving the user an experience as well as you know when they’re using your actual app exactly honestly and it’s very true like especially if you’re doing front-end development guys you are pretty much going to be um very very heavily involved with like design elements and things like that i think uh cause he said frankie where are we at in super chat so we’re in 76 in super chat as of now guys wow we’re almost about to cross the 100 mark so that’s gonna be amazing thank you guys so much i’m so surprised man each live stream we’re just you know hitting it off the park it’s insane that’s awesome guys and if you guys didn’t know already tomorrow we are gonna go ahead and actually build airbnb clones so like if you guys are excited about that we are going to be dropping that tomorrow so drop a thumbs up if you’re excited for that and let us know in the comments what you guys want to see next in terms of a build right we’ve got facebook coming on thursday as well so full week of content for you guys so fun stuff coming so now massive companies that we’re building here guys yeah massive companies guys imagine you add all of these to your portfolio that’s a crisp portfolio dude that’s a nice one yeah nice so now what we’re going to do is we’re going to add a margin left and a margin right of 30 pixels so let’s go ahead and drop that in and i’m going to change the font weight to 500. so we do that you can see now it spaces things out a little bit more and let’s also go and do something here so right now you see it’s got it looks like this which is nice right it looks kind of cool but if we look over here you can see two things happened right now if you go over it the text actually it kind of becomes a bit lighter right so it becomes a little bit lighter and it also grows but it doesn’t snap it animates it grows like in a very nice subtle way so to get that functionality working what we do is first we change the default opacity so we change the default opacity to 0.7 like this and that will actually make it like you see a little bit darker by default and then what we do is we go and say target in that bar target the h2 element but when we hover over the h2 element change the opacity to one so let’s go ahead and look at that does so now if i go over it so when i hover the opacity goes back to one so you see that little color difference every time i hover over it right beautiful font so that’s that yeah that’s awesome and then we’re also going to say transform and we’re going to say scale of 1.2 so this will actually mean that as soon as i go over it it’s going to scale a little bit you see that it scales a tiny bit yeah yep but that doesn’t look as nice as this look at this is like buttery smooth right so like this one when we do it like you see like everything’s buttery smooth now to get that what you do is you say to the parent container so or the actual h2 element itself you say transition and then you say the transform so we’re doing a transformer so make sure that the transform takes 50 milliseconds and we’re going to use something called ease out so i’m not going to go through what the different ones are easing these out but ease out is quite a cool one and if we do that now you see look at that we get like a very nice animated look wow that’s beautiful you see so it’s very nice how you get these little subtle changes and it gives you that sort of finishing touch right um that’s it super crisp so with that said that’s actually the ui portion of that nav bar complete so if we go ahead and just make this a little bit bigger so you guys can go ahead and see that there you go like we’ve got that nice looking ui element right there right so that’s very very clean and looks pretty nice so the next section is let’s go ahead and go to app right so we’ve got the results right the results section and we’re at 798 likes on this video guys let’s go we’re going to reach that 1000 by the end of this video help us out guys smash that like button yeah let’s see if we can get to a thousand guys i think we can i think we got a thousand we’ve got that nice hey joshua thomas is still with us awesome dude he says beautiful simply beautiful nice thanks for sticking out man thank you and what guys we notice when you guys are watching we notice who sticks around who watches like we start to get to know you guys it’s really cool and then eventually he’s like we see a lot of people inside the the course which is which is amazing um awesome so now guys the next section is we’re gonna go ahead and tackle the results okay so the results section so here what we need to do is let’s go ahead and drop it here so let’s go ahead and do this results like that all right so we need to go ahead and make this file so i’m going to go ahead and say results.js there we go i’m going to say rfce there we go and then remember stick to our bim convention so class name equals results save it there we go and we need to import the css file so import like this we say results.css like that and remember we need to create the results.css file there we go nice so with that said that’s really nice and clean we have the results up and running uh awesome so right there the results is you’re gonna start filtering out the movies by the specific thing that you’re clicking like trending maybe top rated or action all of those yeah exactly so you see this section right here is the result so we’ve already built the the header we just built the the navigation and the final piece of the puzzle is building this results and when we say this results this is like a scrollable container so it’s going to be something which we can scroll down so it’s going to be a longer container and yeah it’s going to be pretty much fully responsible for all of the movies that you see and also if you guys didn’t notice earlier when i was demoing it when we hover over it you see it actually shows you the date that it was added or the date the film was made and the number of likes right so for each one you see that so it actually gives you that’s beautiful yeah all that information as well so that’s really cool um nice so let’s go ahead and check now um dude since we said that we just got over like 70 likes 60 likes i think it was all good oh wow that’s insane now we’re gonna now we’re definitely gonna hit it yeah that’s good so much that’s amazing thank you guys yeah man people are showing so much love in the chat we love you guys thank you so much he says club programmer sourab says do you guys make only fun and clone like don’t you do an end to end one with back end like no databases and stuff so actually i want to address that quickly so guys we do end-to-end builds like it’s just because we do i’m using firebase firebase is a back-end solution right so i think it’s a it’s a misconception if we’re not using express or node.js or something it’s not like a full build uh firebase is a complete build guys like firebase is of end to end we’ve got the front end in react the backend we use firestore in a lot of our builds and then we deploy it using firebase hosting very very powerful stuff here and uh yes you if you do need to have like some back-end functionality you can use cloud functions um but yeah honestly i would say you pretty much we can uh we have been doing end-to-end bills but to answer your question exactly we will be using the man stack and we’re going we’ve got a ton of builds so yes if you’re super excited check out the check out the zoom clone that was made using node.js as well so that’s a little bit different but at the same time you know i know huge companies are using firebase as their backend so exactly and also we just got a donation by fun with sanchi thank you so much he says sunny i am enjoying your way of teaching a lot it’s impressive i i think this is uh i think it’s nimeshi who was working with me i think i recognized the picture i think it’s the same person yeah that’s insane dude i appreciate that thank you so much nice all right let’s carry on guys so this is awesome so uh somehow wow chris kevin says logged into the second account to get the likes up that’s what i’m talking about that’s what i’m talking about thank you cp pam and another donation by deepak thank you so much man we really appreciate you for the indian rupees thank you amazing thank you dude awesome so now what we’re gonna do is this one’s actually very like it looks very simple how we do this right so what we’re actually gonna have is we’re gonna have a video card component inside of results right so imagine we had a video card and we also got another one from unkit uh and kid thank you so much css skills are got level curious to see more thank you dude thank you amazing stay tuned you’ll see more definitely exactly it gets more and more from here so we’ve got the video card component right now imagine a video card component when i say that i’m referring to this thing over here so this is basically one video card component right and then what we can do is we can pass different props to it and that will essentially just render it out in a different way but we’re just reusing the component which is what react is all about it’s about reusing that component david jonathan i see your question he says uh please he’s actually a student inside of pwj he says please what’s the major difference between firebase and firestore and why is firebase your preference firestore is a database within firebase just to quickly answer that uh but we can jump into that in the coaching call i would definitely be uh i’ll explain that a little bit more afterwards awesome so now guys like we said we’re going to build a video card so let’s go ahead and create a video called component so videocard.js like this and again we can do rfce and look guys with it without these little snippets and stuff like this would take you a little bit longer than than what we’re doing right here so learn these little tricks and it will save you a lot of time like it will save you it stacks up it really does stack up yeah it saves you ton of time especially when we’re doing these builds daily take it from us that like without these tricks it wouldn’t be possible to pump out the content like this so you have to be very sort of like mindful and just get learn these little tricks again at the end of the day it’s a lot to do with you know the energy that you’re putting to waste or you know actually putting to use so be aware of them learn them that’s why sunny is taking the time to teaching to teach you guys and actually point them out so apply them exactly exactly so now we have um so omiya says i really want to have a one-on-one with you guys just check out the link in the description and pretty much in pwg you can definitely have one-on-ones with us so yeah feel free to check that out just so i don’t slack really nice so inside a video card guys we have a few things going on we essentially are going to pass in like a movie prop right so imagine we passed in so the props come in here so props are simply like customizable properties that we can pass into a component and what we can do is we can destructure it and say get me the movie object that we pass in right so imagine whenever we render this we just say there is a movie and that movie is some kind of movie and basically inside a video card i use that to render it out in the way that we want so what we can do here is inside the video card it’s going to consist of a few things consist of a bit like an image so let’s go ahead and actually grab an image and i’m going to quickly drop it on our faces so that google images doesn’t screw me over live let’s go ahead and do something it’s great because we’re seeing you get all the resources as well you know from the browser and everything so that’s that’s amazing yeah exactly so let’s go ahead and check on but let’s go ahead and use this as a picture so copy image address boom let’s go back and let’s go here so image source if i go ahead and pop this in so this is a image online and what we can do is if i render this image yeah so let’s go ahead and pull the video card component in sometimes that shortcut doesn’t work and you’re gonna have to do it manually so you say import video card your card from video card like this save it and what you should be able to see now is that image should be shown here actually let’s just double check if we do h1 let’s just say hello let’s see if we see it so all right so right now we’re not actually seeing let’s just double check so let’s refresh okay so we don’t actually see our component so let’s check why we don’t see it so we’ve got the video card here the results are we rendering the results going to app to save the file okay so that was why so we save it auto import and then it says movie is not defined okay so this one so for now let’s just ignore the movie and there we go so you can see we’ve got a we’ve got a picture right there right so we’re going to use this as a temporary picture so we’ve got an image and then we would have some kind of text right so we’d have like an h2 which would be like so i think somebody’s saying you’re not sharing your screen so oh yeah damn it oh yeah oops good call guys good call guys thank you thank you thank you that was a that happens at times right so so this is what we did so we pretty much um all i did was add a image tag that’s literally all i did um and we added this movie so the component takes a prop chord uh movie right i love the the sort of passion that i see from everyone like you’re not sharing your damn screen dude it’s like what do you think you are yeah yeah like give the people what they want yeah okay guys yeah always point out things guys because sometimes you know we’re oblivious to a few things so many things are going on so it always helps to know that somebody has their back and i know that you guys do so thank you guys so much yeah like us like us just dropped a good game oh man so then we’ve got that and then what we’re going to do now is like imagine we had a movie so this would be like the movie title let’s say here and then we would have a p tag so something like underneath and this would pretty much say something like this would essentially be what we have here so it’ll be like this thumbs up stuff right so we could just say like number of likes number of likes blah blah blah something like that right and then uh yeah so we’re gonna have the movie title and at the top we would also have a movie overview so like some kind of p tag over here which would say like this is a film about coding right something like that right this is a film about coding so you see like here says this would be this is a film about coding this would say some movie title and this would be the number of likes so you see we’re drafting out roughly right i’ll keep this super clean i’ll just do this yeah this film recording nice so you can see it’s all white it’s not it’s all black sorry which is why it’s a little bit hard to see okay um now what we’re gonna do is we are gonna go ahead and basically make this a little bit more visible style it so it looks a little bit nicer yeah so let’s go into videocard.css over here and let’s actually start styling this so video card remember is the parent container so everything is built around that so let’s go ahead and start styling the video card so first thing we’re going to do is we’re going to give this actually let’s go ahead and fix that image because right now the image is huge so i’m going to say target the image make sure it has a height of 300 pixels and a width of 500 pixels right which will give us this aspect ratio so this one right here this is the one you see in hulu or in the redesigned hulu and then we’re going to say object fit contain which keeps the uh if i get rid of object fit contain see it’s stretched right so if we add that it keeps the aspect ratio this is super important guys it’s really really important because if you don’t do that one line of code you start seeing stretched images everywhere and it just ruins the entire experience so we don’t want that and what we’re going to do is we’re going to go here and first thing we’re going to do is because i hate it i’m going to say color white and now there we go we can see the text right so that’s a lot nicer we’re going to make the width of this be a set 500 pixels we’re going to make the height of this be a set with a height of 500 or 400 pixels and i’m going to give it a padding oops and give it a padding of 20 pixels okay and you see now it’s no longer touching the side so it’s got a little bit of spacing around it awesome so what we’re going to do now is i want it so that when we hover over this we get this effect right so when we hover over it we get this kind of nice smooth effect right um oh this is a really nice comment there he goes i can use your mind oh this is awesome dude someone says i’m continuously open my eyes i’m an angular guy i loved react when i saw your clones that’s why i love you 3000. nice we have a little bit of a i think i had the film down here it was um where’s there oh damn it yeah captain oh it’s not captain america damn it i was gonna say avengers that’s where i love v3000 came from nice so wow i didn’t know that that’s funny yeah so now we’ve got the um we want it so it scales up a little bit right so the way we do that is we target the video economy say on hover transform scale of like this is basically saying nine percent yeah makes it okay nine percent bigger once you hover over i see yeah you see that but again we hate that snappy behavior so how do we get smooth and silky we say transition transition and we say transform so so make the transform 100 milliseconds and if i don’t pass in like an ease in ease out or something by default i think it does ease in right so if i go ahead and do that hey look at that beautiful really clean right yeah so like now you see you got the same behavior so you put the ease in animation instead of the 100 milliseconds so yeah this you’d put that in here so oh you said it was default i see yeah so i think by default it does ease in i think um but i’m not 100 sure but either way it like these are all this is actually something i learned in my last job they’re very very subtle um very subtle changes but they do make a difference so if we use ease in for example it actually for this example guys leave it out because it’s actually the perfect one that’s that’s the actual natural behavior that you want so we’re just saying take 100 milliseconds when you do that scale nice so with that said we’re going to add some padding to the h2 so where it says movie title so let’s go ahead and do that we say video card direct chart h2 yeah added that tiny bit of padding right over here so you see that padding right in this gap here uh and then what we’re going to do is we’re going to say for the uh okay yeah so the next step i guess is actually so now what i want to show you guys is is if we actually render a few of these right how do we get that responsiveness going on like so how do we get it so that we see it as we see it here so whenever we make it smaller you see it actually works perfectly responsive and look how perfect that is like on a phone and you you’ll be amazed at how easy it is to get that right um so so the way we do that is let’s go ahead and go to results.js so let’s go to our results.js and you see here guys we have a container called results right so we’re going to go to our results.css target the results and basically before we do that i’m going to go back into results and just to stress test it i’m gonna basically render out like a bunch of video cards right so so now this is how like we would see a bunch and right now if i make this bigger you see it doesn’t do anything fancy with it that was so fast by the way wow crazy right yeah so like you see it doesn’t do anything fancy with this right now right but it just kind of looks a bit like you know could look a little better so we go back to results.css and over here let’s see if we now three lines of code guys three lines of code and we will get this right here what you see here we’re gonna get this to look like this like it’s in pretty much nearly like this right three lines of code we’re at 958 likes guy oh my god faster than i thought i think if you guys are impressed with this next part so if we do three lines of code and we get this right i think let’s push that number straight to a thousand right let’s go let’s do it so here what we do is we say display flex number one so that’s the first line of code now it’s inside of a row right you see everything’s kind of messed up it’s like whoa we’ve got this white space saying everything’s broken and then what we do is we say flex wrap right flex wrap and then there you can see the likes coming up we’re at 978 978 that’s two lines of code and we say wrap and if we do that okay okay now if we make this a bit bigger you can see look okay it actually wraps but it’s not oh wow but it’s not centered right so it’s not centered and then what we do is we say justify content center boom dude that’s it whoa let’s go i love it because you only have to do it once and now you can see it in all of the other images so all the other images have the hover on functionality it has the zooming in or the what is it called the 100 millisecond um and the nine percent yeah uh you know higher or bigger picture this once you hover on top of it yep exactly exactly yep and guys like that was so slick like like three lines of code and now look at this is completely wristband so even if you’re on a tablet and you’re looking at this like okay perfect user experience if i go into a phone like it’s in a smaller device okay thing works perfectly if i go into a desktop it’s going to maximize the potential use and even if it gets bigger than this so i’ve got a huge ultra wide in front of me it will just use up as much room as it can it’ll just wrap around and it’ll stay centered and with that said we just hit a thousand like let’s go hey that’s what i’m talking about so much man with those three lines of code you guys helped us reach the 1k likes on this video thank you guys so much let’s get to 1.5 k now that’s the new benchmark that’s it 1.5 game 1.5 k new go guys new go nice so we have the video card over here right which is awesome uh and now what we’re going to do is okay this is nice right we pretty much have everything out but we read too that’s amazing yeah we have like everything on the visual side of things kind of done here right but we want to basically get to a point now where we can uh pull this data in right so from um from tmtb so let’s get involved in that stuff now so the first thing we’re going to do is we’re going to create a file called uh requests.js right so request.js and this is going to be primarily for any request that we make to let me just quickly change this let me go to here so this is going to be for any request that we make to the tmdb api so you see it’s a movie api i remember earlier on we showed you if you go into your profile settings and then you go over here oh oops not this one you oops you go over here to api all you want to do is click on that and you’ll be able to generate a key somewhere down here and you’ll basically be able to use that and everything will work in the and you’ll get your key right so you want to get ahold of your key oops that’s it there we go you get audio keys so with that said what we’re going to do to get ourselves prepared so that everything works correctly we need to go to results results sorry dot uh not results request dot requests maybe dot js right and it’s not capital r because this is not a component right so this is not a component that we’re using here now what you want to do is you want to have const api key right and basically guys i want you to paste your key here okay so i want you guys to paste your keys so this is going to be your key that you guys were able to get over here so inside of api and tmdb completely free you just need to paste your key okay so go ahead and paste your key and then what we’re going to do next is we’re actually going to go ahead and make this a little bit bigger now because this is very important part so i look at that it nicely and it’s just behaved itself nice that’s awesome so here what we’re going to say we’re going to say export default because we’re going to export a list like basically an object right so we’re going to say we’re going to have a bunch of exports here that are going to basically reach out to certain endpoints on that tmdb server right so tmdb provides something called an api right and then api if we want to make it very quick and simple we say tmdb api like this and basically what it is is it’s basically just like a server that they have running and what we can do is we can make we can send requests saying hey give me all the films that are inside that are like the action films give me all the films of the comedy films give me all the films of the sci-fi films and with that you can pretty much go ahead and get everything that you kind of need working right so what we’re going to do is we’re going to show an example of the first one so this is an example of the first api call so the endpoint pretty much is forward slash trending forward slash all then it’s four slash week and then it’s go you start putting in the parameters so here it will say api key equals and you’ll notice we’re using back quotes so these are not normal questions are there so normal quotes are this we’re using backticks so these backticks and that allows you to do javascript string interpolation so we can actually use our api key value inside here so oh wow all right so that will actually be super handy so at this point it will replace here and it’ll just say your key but we want you’d want to put your key here so imagine you had a key which was like some gibberish like this or something that’s going to be your key and then that’ll go ahead in here right so you want to do that and this is going to be the first one and what this allows us to do now is it allows me to basically rather than using this ugly string i can do something like this in the future because you say request dot fetch trending and that will actually work that will represent this nasty string with my api key inside of it okay beautiful so i’m going to basically pop in a bunch of the other ones that we have here right so i’m going to go ahead and do the following so i’m going to say we’ve got these ones over here now so we’ve got i’m going to go through all of that now you’re going to fetch top rated actions comedy all of these right exactly so you’ve got top rated and i’ll go through this list so that way at any point you guys what i’ll say is just pause it here and you can pretty much write these out and i’ll explain them quickly so we’ve got fetch top rated again this is this is the endpoint top right and it’s got an api key and saying the english the us english ones which that’s the language we selected they’re saying the action films you can see with these ones like action comedy horror there’s genres that they have for some reason that this is how they’ve set up so the action movie genre is code 28 the comedy movies is 35 horror movies 27 now you don’t really need to know too much about how they got these numbers or whatever you just need to know that that’s the one for those ones so you can go ahead and just copy that and that will work perfectly david muwangi says can i use an n file yes you can use an m file yeah i would actually recommend if you know how to use m files go ahead and use an m-file uh and that will work what i’m going to do is i’m just going to go i’m going to keep it as this for now and what i’ll do is i’ll pop in my key when we actually come to use this so nice so with that said we’ve done the first part right so we’ve set up our requests in a way that’s that’s good the next part is let’s go ahead and create a file called axios dot js right axios.js now some of you might know what axios is it’s essentially a library that we use to make requests to any sort of server or api endpoint right now somebody says perfect timing tech cut just said why didn’t you use axios instead of fetch we are using axios today here so we’ve used fetch in previous videos today i thought let’s mix it up and let’s use axios axios is pretty much let me go ahead and show you guys very quickly what axios is it’s essentially just a very popular promise based http client for um for javascript uh and basically it’s very very well known and you can basically make a request to like for example here that you can make a request to an endpoint and it will come back with the response and it also give you an error if anything went wrong so it’s very very beautiful very very powerful so so axial is handling the requests from that we’re trying to get from the api the im the tmdb api right yeah exactly amazing yes it’s exactly that’s exactly what it’s doing so in order to install it it’s very simple we just say import say import uh no sorry not import npm i or install the shorthand is npmi and you can say axios like that we can go ahead and we can pretty much do that and you see it’s super quick to install that there you go and we can drop the terminal down with command j and then we can say import axios from axios now some of you guys might have used axios before and you might be wondering oh i know this bit i know this stuff like but stay tuned because this one right here actually i didn’t even know this trick so this is a very little handy trick i’m about to show you so what you can do is you can make an instance of axios so that way whenever you make a get request or something you don’t have to include the beginning of the the the sort of url so sometimes it’s kind of annoying to have the beginning the way we do it is we say this we say const instance equals axios and you say create and then basically just set the base url to whatever it is so in this case this is the api url so what this means is when we make those requests that we sent earlier we’ll basically be appending the base url to the beginning of this so it would be like this you see it turned into a link right so it’s http api and then for this one it’ll basically be this and then for this one it’ll basically be this you see so that’s what we’re doing but we’re trying to make it i see now that’s insane man i love it it’s clean right and then you don’t have to always do it instead you just say axios.get and because you said we’re facing that url yeah inside of or in the front of those requests right exactly man that’s amazing it’s mind-blowing really powerful stuff and here you say export default instance like this s4d for instance save it and we’ve got axios set up to the point that we need it okay so now what we can do is let’s go over to our video uh let’s go over to our results results let’s go to results this one here now what we’re gonna do here is we’re going to have essentially rather than mapping out like this we’re going to have some we only want to show one thing right we want to show like one um like we basically want to have something like this we’re going to say movies dot map and then we basically say go through every single movie inside of like this movies array and just render out all the video cards so something like this you know beautiful we just got a donation by supra thank you so much man nice that’s much appreciated of you guys i love react.js a lot more videos down down lane he says hope to have a convo with you soon amazingly ben thank you so much dude massively appreciate that mike might closely you guys are absolute legends we love you guys honestly they’re pretty the support today has been insane guys so like really really massive i love that right it’s what keeps us going guys thank you so much always drop the love in the comments below and then let’s keep on moving thank you guys definitely definitely uh nice so now let’s go ahead and yeah so we want something like this you see it says movies.map but now it’s saying hang on movies isn’t defined right so what we’re going to do is we’re going to use something called state okay so here where the way we do is we say const and then we’re going to say movies and this is basically state is basically uh how you write a variable inside of react so you say set movies and this is how you’re going to modify the movies and you say use state so this is a hook this is something what we call hook and what i just did there is i’ve done an auto import so i’ve imported at the top here and the initial value of this is going to be an empty array because movies we want to be an empty array in the beginning okay so the cool part now is you can see if i do results you see like it doesn’t render out a video card because there’s nothing to loop through right but if i added like two elements in this array let’s just say one and two it will map through it twice and then it’ll just render out two video cards so if i do that so it maps out two video cards if i had a third it maps out a third of the video card yeah but look at it but this doesn’t actually provide any data it’s just showing you proof that it’s actually mapping through the the array that we just set up right so initially we want it to be blank now this is where the magic happens this is where we connect the api to our react front end and we pull in all of that that beautiful stuff wow yeah let’s go so then it’s going to pull up the exact number of you know the items inside of the array that the list provides as if for example if you click top rated then the array is going to populate with let’s say there was top 10 top rated movies yeah so that’s going to be the size of that array yeah exactly that’ll be the size of that area i also see david johnson’s how did you do that auto import so let’s go ahead and show you quickly so imagine if you didn’t import it you could either do control space at the end and you go to you see the first one is the snippet the second one is auto import boom you get it there that also happens when you’re typing sometimes so it will pop up with you so a nice little tip so now what we’re going to do is we’re going to use the use effect hook right so use effect so use effect i can use a snippet there but i want to show you guys how to write it so use effect you basically someone said google should hire you i mean you’re missing out yeah google should sponsor us i think that’ll be awesome i know right yeah after that google build oh yeah exactly so now a user effect takes a function right and it basically it takes something called dependencies now inside of here if we leave this blank what this is saying is it’s saying run this code run this code once when the results component or whatever component you’re inside of loads right or mounts yeah so once it loads or mounts run this code once yeah so it doesn’t do it after that right so it only does it then if i do this it means every time it re-renders every time the the results component loads a month so that every time it re-renders that’s when this happens but if i do this it says only run it once right so when it loads now if i pass the dependency in here so say if i pass something like name it will run it once when the component loads and it will also run it every time the name changes we just got another donation from manav aurora he says you’re doing really good amazing really creative man thank you dude guys we’re at 81 on chat donations super chat donations thank you guys so much let’s reach that 100 mark thank you guys appreciate you exactly thank you so much guys amazing stuff right so if we get rid of this and then we’ve got here a video card nice so now what we’re going to do is we are going to go to we’re going to actually put do a very clever piece of code inside of it so we’re going to do something called an async function right so in order to run anything asynchronous and when i say asynchronous what i mean here guys is anything that involves um anything that involves um like sending some information out to a server and pulling it in after as in like pulling in so you whenever we sort of go to a server and grab some information it’s going to have a delay there’s going to be some kind of delay right so here what we do is we say async if you ever want to run an async inside of a inside of a function do this you say async oh oops what do you think why can’t i spell today yeah async function and say fetch data like this another donation by william cruz chf five oh thank you so much man i appreciate you we’ve actually seen you in other live streams man so thank you so much for you know being uh regular here and yeah man stay tuned we’re gonna continue doing these almost daily yeah much daily at this point yeah also i think i think ch5 is more than five dollars right yeah i think it was uh wasn’t it frank’s swiss francs i think so yeah so that’s amazing nice we just got another donation so much william thank you dude thank you so much man appreciate it also guys yeah i see this a lot i said if you love clever progress go vote for us at hakone top programming guru award that would be insane guys so if you do uh love the channel you love the live streams you appreciate the content we push out all we ask is that you smash the thumbs up button and go ahead and click that link and vote for us in those awards because it’ll be awesome you know like it’s more motivation to do this nice yeah hopefully we can win man we’ve been putting out a lot of energy a lot of work for you guys uh hopefully you guys can get a lot of value from this and if you are enjoying this value go into that link that leif war warp nine paint nine is dropping in the description in the actual chat so go into that link right now and vote for us if you guys are finding value for this thank you exactly thank you so much guys nice so we’ve got the fetch data function right here and then what we would eventually do is we’d just say to use it you just say fetch data so here you just say fetch data like this right now obviously it’s not doing anything at this point but this is where we do the magic so here we say const request request equals and we say await because we’re we’re saying wait for the response to come back david jonathan just forwarded thank you so much dude uh so we set a weight and then basically here’s where we use axios but typically when you use axios you do this you say import axios from axios like this but because we just set it up in our local directory we’re going to go ahead and pull it from our local so this one here axios right now what we do now is we say await axios dot get and this is the clever part right so remember earlier we set up like if we do axios dot get remember it automatically uses that base url that we just set up so it’s really really going to be powerful to do right uh oh nice i can see loads of people voting this is awesome thank you guys amazing thank you guys so much for voting that’s awesome yeah nice so we’ve got await.get and then what we can do is we basically need to do so let’s just test it out so let’s just say requests let’s go into our requests and it automatically imported oh no it didn’t report the request let’s go ahead and import that so import request from requests like this and request dot and then you’ll see as soon as i do that it gives me all the action movies animation so let’s go ahead and use action movies as an example right then what i’m going to do is just to prove to you guys that this is working or doing something i’m going to say console.log request right so this is what i recommend you guys could do as well to see that it’s working and it says use effect is not defined so we can go here and do import and it imports it at the top over here save it go back and now you can see if we open up the inspector go to the console and it says server responded with a 401 that’s because i didn’t put my key in right so what i’m going to do is i’m just going to quickly go into my axe oh we got a 10 donation by chris connor thank you so much whoa we’re at 98 super chat thank you guys oh guys that’s insane thank you so much dude that’s insane thank you so so much damn dude the energy today is it’s on fire i love this everybody’s showing some love yeah this is this is amazing guys right um oh look at this kyle johnson just said uh i just jumped on this stream after finishing the instagram clone video every time sonny says now this is the clever part my mind gets flooded let’s go i actually thought about that too nice thank you so much girl all right so now we’ve got this uh so we’ve got a 401 right so if i go to my request.js and you see here the key so what i’m going to do is i’m just going to switch the screen out and i’m going to replace the key in with my key so you would be doing this with the key that you guys got from tmdb so boom i pop in my key and we go back to um let’s close that one let’s go back to the results so we are back there we go so now if i save it and i refresh oh you can actually see it works so if i refresh it says the results so here we actually console logged the request so you see this one we will console the response um i should actually call it response because this is what we’re here we’re getting and you can see here we’ve got the data right so now this is the interesting part so inside of data so this is what i would do guys whenever you make any api call or do anything like that i actually like to log out the stuff i like to log out the um i like to log out the response because i don’t actually always trust the api docs so i’d like to see why they’re actually giving back uh and i recommend you guys do it too because i’ve run into situations where the api docs are out of date and you’re like whoa i didn’t think developers did this but they do a lot um so you want to do data.results and then you can see now in the results we get all of the videos right so this is like little project power and this is actually this one right here so you see project power so you can see that’s the first one and then you’ve got you’ve got the second one which is tenet so this is tenet right here you’ve got the third one which is um another one whoa we just got another donation from deepak it says please start react native clone series guys we have everything coming we have we have a man stack videos we have we will be starting a react native series don’t worry we’ve got we’ll keep you coming yeah this is we got you guys we got you stay tuned yeah give us a little bit of time you know exactly that’s it um well it’s got another donation from akshay kotish appreciate that dude thank you so much wow we just crossed the 100 mark guys nice that’s awesome dude thank you so much guys alright so now let’s continue on so we we get the response back right so what i want to do is with that response uh i want to basically capture those requests uh the the results so i’m going to set the movies to the request request oops request dot data dot results because that’s that’s this list that we see right here right so inside the results now what i’m going to do after that is i’m going to say return request and that will basically jump out of that async function and it does what we need to do okay so this one is always going to get the action movies right so we’re going to make a change here afterwards but it’s always for now it’s always going to get the action movies so i’m going to save that and i’m going to close this and there you go so now it’s loading out as many action movies as they’re actually returning but it doesn’t look like that it’s what we see is profitable javascript right so link is in the description if you want to check it out thank you guys so much if you guys are enjoying this content really you’re gonna get a lot of value from profit with javascript it’s the second link in the description below if you don’t want to check out the sales page we do got the one hour free training for you guys that can actually help you become a profitable javascript developer so check that out guys exactly this is in the description guys make sure you check out free training so like even like these videos everything that’s free is awesome so really really nice so so now we’ve got we’ve got the movies being updated right but we need to basically pass that movie into the the actual component so right here we’re not actually passing it in so to get that working i’m just going to say movie equals movie and basically what we’re doing here just to explain so remember we pulled in those movies from that response then now this is an array of those results right um what we’re going to say is we’re mapping through and each of the movie items so every time we iterate through it it’s going to give us a new movie item we’re saying go to the video card component and basically just pass in that movie as a prop so jump inside the video because we need to save that jump beside a video card and we get the movie here now what we can do here is we can actually do some clever stuff now we can go in here we can say for the movie title rather than just saying movie title we can actually go ahead and do the following so firstly let’s actually change the images right because the images are going to be the most apparent thing to change so we’re going to go ahead grab this change this to our jsx and then we’re going to say for the images by the way they give us a like the end of a url right so they give us the end of a url but the end of the url isn’t everything so obviously any link has some kind of base url for the images this is the base url that you’re going to need to use they don’t tell you this in the api very easily so you have to dig deep so just save the time and use this one that i show you so this is going to be the base url and then here what you say is let’s just use backticks and let’s just say base url so uh base on this url so base url and then we’re going to say um oops sorry basically i’m going to say movie dot in this called backdrop path right so some films have a backdrop path so if i save this boom look at that we start getting some of the films in oh wow amazing so you can see it’s actually working right like it’s actually pulling in the films and it’s actually like showing that on the on the screen which is awesome um the images yeah pulling in the the images which is nice so that’s working but some films guys don’t actually provide a backdrop part so what we can do instead is say if they don’t have that so if there isn’t a backdrop part oops go ahead and try and find the movie oh damn it let’s go ahead and try and find the movie dot poster path so i i saved you a bunch of time and i went ahead and i looked for that um so some of the movies which didn’t have a backdrop off had something called poster path so this is how you say this is saying either use this if you can find it or fall back to this and you can actually keep on chaining so you can say after that if they don’t have that use this or you can put a placeholder there if they didn’t which would be kind of a clean solution um and there’s another one actually so there’s poster path uh yeah so it’s just postpartum nice and then here we can just say movie uh movie let’s just say movie poster alternative something like that right so this is awesome so look at that we get everything pulling in starting to look really clean if we make this a bit full screen you see oh look at that it’s starting to look starting to get there right so now what we can do is for the p tag i’m going to change it to basically this p tag we’re going to make this p tag kind of like kind of like powerful in what you can do right so the first thing we’re going to do is i’m going to do some jsx i’m going to say show the movie release date or the first air date right so show like the movie release date of the first because this is what they do in that one so i’m going to say show that or show that right so if we save it you’ll see it shows the oh sorry this is not the right one i need to do it on this is actually the wrong one this one should be the film this is the overview for the overview we have movie overview so here so this one is actually movie overview so if i save that you’ll now see that you get a nice long overview of the films okay and then you can see if we go to um but notice guys that this is something i want to show you so these mo movie overviews look at that it’s just they’re just way too long right like no you never see this on the website it’s always like truncated so you get this dot dot dot all right now i’m going to show you how you truncate right so truncate is the process of basically when something’s too long or if something goes over one line then you can basically truncate so you just add that dot dot dot right which gives a much nicer experience than this because like this is just ugly right now yeah it’s too much going on so we are going to install something over here and we’re going to install something called react text truncate so you need to go into your um terminal so let’s go into our terminal let’s go here and let’s do mpm i and it’s react text truncate so we’re going to install that and while that’s installing what we’re going to do is we’re going to go to the top i’m going to go import text truncate from react text junkie and we’re basically going to pop this in instead of our p tag so i’m going to replace the p tag i’m going to have both so i can show you the example and what this is saying is it takes some props it takes it says if it goes over one line basically choose an element which is a p tag this is the text that i want to sort of render and once it goes over one line truncate it with this three dots oh yeah so you can choose anything pretty much if you want yeah exactly you could be like one two three or anything you want exactly and i’ll show you that actually so now if we get rid of that and we do this now you’ll see look at that after it goes past one and if we change this to two lines it truncates after two lines beautiful so really really powerful stuff here and like if you do that and like frankie said if you want to change this to like one two three you see it says one two three at the end of it wow yeah so this is like the power of using like code so that’s that’s why even some some apps actually show parentheses learn more right and you can actually you know click on it if you do want to see more so you can you can handle it different ways so that’s a great way that’s a really good thing frankie just said i think that actually made me want to show the actual demo so react text truncate when you actually use it gives you um two and another functionality which is actually what exactly what frankie just said and what you can do is you can say text truncate child right like this and like just go ahead and do this and this will actually be like an anchor tag which is like read on so if i say wow that’s a little link nice hey look at that and it actually goes wow that’s cool right and you could probably get that link from the api and that would actually give you the read-on functionality so i like that see frankie’s already in the right head space with that so like they they thought of that as well and then they uh yeah i think that’s really handy thing because actually truncating something like this is a little bit harder in css you can do it but there is a bit of a sort of annoying side to it that i’ve experienced personally use something called ellipsis but it’s kind of annoying to do that uh okay so now what we’re doing is guys i see somebody says i don’t know actually what’s going on so we’re actually we’re plugging in the movie title and the number of likes from the api so we’ve done the pictures and the description uh the movie title is very simple we’re actually going to say either get the movie title or the original name so here the movie title or the original name let’s go ahead and save that now you can see project power tenet sleepover teenage mutant ninja turtles rogue nice right so everything’s working and for the p tag what i’m going to do is i’m going to go ahead and do the following so the first thing is i want to do a movie vote count so here i’m going to say this is the vote count so this is the number of votes so you can see 727 34 4.49 and so forth so that’s really cool and what we can do is i’m going to use a logo from material ui so an icon from material ui and this one’s called the thumbs up sharp icon so let’s go ahead and import that thumbs up sharp and down here what we can do is we can actually go ahead and do this we can say thumbs up sharp like this inside of our p tag and now we should see um it’s probably probably compiling but we should see in a second that there’ll be a thumbs up and then it’ll say 34 which signifies that it’s likes that we’re talking about right so it should be very clear and it should be up in a second and then what we’re going to do is we want it so that when we have the the we can have the movie type so in some cases the movie type isn’t available so here what i’m going to say is i’m going to say only show the movie type and then the little black dot if it’s available so here only show if you have the media type available only then show the media type and then render a little black dot next to it the black dots a sort of separator that we’re using okay so let me see what’s going on here so let’s go ahead and go to node it says compiling so i’m going to cancel it do npm start sometimes it can get hung so you can get a little bit hung up duh nice so we got it says nano says there’s a vue.js truncate library also oh nice yeah full library for that yeah there’s a lot of libraries like in react and angular view is even just pure javascript libraries like node.js libraries that you can use uh a lot of this stuff has been built previously so what i’ll say is rather than sort of rewriting everything just go ahead and use something if you can sometimes um sometimes i don’t always do that um nice so i mean while this is starting up i don’t know why that’s taking extra long for some reason but it should come in soon so we’re gonna say if there’s media there have that as well and then i’m also gonna say oh so there we go should pop in though hey there we go we got the likes right beautiful so it’s really clean and now what we’re going to say is next to the likes show either the release date or the first air date right and then actually render that little black dot after that so we’re always going to show this one so i’m going to render that little black dot and now you actually see like a little sort of black dot pop up and then we’re going to actually style this so it looks very nice just for simplicity purposes as we have two p tags we have one up here and one over here i’m going to give this one a class name so when we style it i can access it very easily so i’m going to go here and go ahead and give this a class name this one’s going to be video card stats so let’s go ahead and do this video card stats save it and with that said i’m going to now make this look i mean it’s already looking pretty good to be fair i mean it’s amazing yeah i think it’s just we just have to target the video card stats so a video card go over here and let’s go ahead and go to your video card stats nice and what i’m going to say is oh that’s it yeah so for this one we actually want to make it so that so right now it’s actually kind of squished together whereas in the final in this build it’s not fully squished together it’s a little bit bigger right so in order to get it looking like that we’re going to basically go ahead and say um we didn’t actually change the font size okay strange but basically what i want to do is i don’t want to show it all the time right i don’t want to show that all the time we want it to be essentially just showing when you hover over it so how do we do that we say by default hide the video stats right so hide the video card stats so by default hide the video card stats if i save that you’ll see it’s disappeared now right it’s disappeared it’s not there and then what we’re going to say is okay when you hover over the video card so when we i love that what’s that i love that functionality yeah i love that function like the hover functionality it’s so clean yeah it’s nice right yeah we’re saying now when we hover over it target the video cover stats and basically change it to display inline so what this does is simple as that boom and you get that functionality you just get that functionality just like that all right which is awesome like it’s really clean it’s really nice uh and i think what we’ll do here is i just want to add a space manually or like here let’s add some spaces oh it’s all it’s pretty fine and that’s why that’s fine okay so adding that that little bullet point is adding space adding spaces no no so i added a manual space here uh but this is nice it’s just like a little breaker you see like in the actual thing it’s like a little sort of just a separator so that’s the only reason why i added that little thing that’s because i used it in the actual build as well but this is nice now guys because look you’re not spammed with those extra details except when you hover over it so okay you see this one’s got 34 likes okay this must be a decent film but let’s go to like teenage mutant ninja turtles is 5 000 likes this must be a better film right and then avengers infinity award just takes it somewhere to a different level yeah like so you see like you’ve got like a very nice ui now and we’re actually getting i mean we’re almost there right but when we click these nothing’s happening right nothing’s happening but what we want is we want it to be like this so when i click like comedy it goes ahead renders comedy if i click this if i click this you get this nice sort of functionality right so this is where we need to sort of step out a bit and adjust our code tab just a little bit right so let’s go back to our results right so our results suggest now inside of results.js what we did previously is we said always get the action movies right but what we’re going to do is we want to customize the results so that it takes a prop called selected option right selected options that gets it from the actual navbar yeah exactly so this is going to be part we’re basically going to pass something from the nav bar and we’re going to like basically this will be that value right so we’re just going to say selected option goes here right oops next option like this right now if we save this now you’ll see that it has nothing because it it doesn’t have a selected option which means that the request basically gets nothing back right but this is good for what we want right this is good for now this is good for now so what we can do is we go back to app.js and you can see here this is where we have the three main components we spoke about earlier now at that at the app level this is where i was saying don’t over complicate it guys like don’t over complicate by introducing react context api and stuff like that just for this build i’m going to show you how you can just use state to get the desired effect we want so that exact same selected option i’m going to go ahead and create a piece of state here and i’m going to say const selected option selected option and we’ll say here set selected option like this and now here i’m going to say use state right so we’re using a piece of state here and by default i’m going to give this an empty string right empty string here now it says use state is not defined so i’m going to go ahead and do a little import trick boom i’ve imported it at the top and we should be able to now see still blank all right it’s still blank so why is this happening so firstly we need to pass the selected option as the prop down to results it’s still blank why is it still blank because remember we it doesn’t have anything to fetch from right so what we need to do is we need to say the the first value should be for example like rest results dot fetch trending for example right so this is going to say the first value should be uh result request.fetchtrain so now when it loads the first thing it does is it has that request.fetch trending which is actually the that one right here so you see where it’s like force trending with the api key and stuff right so that’s the initial value which means that when you come onto the app it’s going to get you the trending one first which is actually makes sense because it’s the first value here right yep that’s beautiful and you got to make it easy for your users too you know so it would be better for your website to show the trending movies so that they can get an idea of you know what else is there what’s popular right now and then from there they can choose you know going into comedy going into action and you know it gives you a good insight exactly exactly so now what we can do to sort of make this nicer is we can go to the nub bar and we can actually pass in this modifier so many people don’t know you can actually pass a modifier as a prop so here the navbar is going to get a mod a prop called set selected uh option so here we pass in this and this will allow us to change the state of that selected option all right now what we can do is inside of the nav what we can actually say is on the click so for example here i can say on click oops on click fire off a function and then this function is going to be set to select that’s mind-blowing man that’s awesome it’s powerful right and then here we’re going to say you’re wrapping up or putting that set select option inside of the h2 tags yeah exactly so we’re using we’re passing it through and then now what’s happening is if i just make this sort of bigger so we can see on one line you can see now so when we click this one it’s going to set the selected option to the fetch trending right and because this is the modifier for that piece of state up in app.js this selected option now changes which means that this one gets fed a different url right so it’s a very very sort of mind-blowing man that’s amazing yes it’s super clean exactly super super clean and what we’re going to do here is i’m going to do another one which has set it to top rated fetch top braid so set to fetch top rated save it and now just to prove that this works guys before i do the rest of them so you see here it says hang on in results.js react hook use effect is missing a dependency select option very important line here right super important line remember when we changed the selected option over here right because this is a parameter outside of the use effect right we have to say it’s a dependency because this use effect depends on this variable which comes from outside so it’s basically saying that like if this variable changes you now need to update this code because you can’t keep running the old one react you have to tell it what it’s dependent on so this one is dependent on select option selected options now if i save this you’ll see the warning would disappear yeah and with that said what we can do is we can actually go ahead and test this we can go ahead and go here and now if i click on top braided hey so now let’s go look at that trending top rated all right now now you can see it’s a little bit glitchy though right it’s a little bit kind of like i mean it looks a little bit weird how it’s swapping it just a little bit to refresh huh yeah like it’s a little bit weird how it swaps them out and obviously i’ll do these ones afterwards but this initial thing is a bit like why is it a little bit kind of glitchy and the reason why it’s glitchy is because when we actually map them out we should be passing something called a key right now each movie has an id so the the key should be this is a reacting and this is basically telling react uh when this big list of things re-renders is everything unique or is it like can we how can i identify if you don’t pass a key react kind of goes like oh my god okay i’m just going to re-render the entire list because i don’t know what’s going on but if you pass a key in it knows that okay this is the same component i don’t need to change that one this one okay this one’s changed i need to change that one so you see like it changes a little bit so here i’m going to say the movie id is the key so if we save that now and do this now you should be able to notice that it will be a little bit slicker so you see like actually it doesn’t have that jarry glitchiness to it it paces itself it just swaps the entire thing out right and you see and what it does there is it actually does some very clever caching under the hood right so under the hood now you see like now when it loads it doesn’t have to reload the images because it is in like it actually caches them in a local memory and it loads it super nicely as you see that once it loads it once it just snaps in right so what we can do now is we can finish off the implementation of the additional endpoints so we can go to um we can go to number and by the way guys we just reached 1.1k likes thank you guys so much man we just keep growing it’s insane thank you fam we love you honestly the support today has been unreal so like really really crazy stuff nice so now what i’m going to do is let’s really feed them yeah i’m gonna go ahead and copy an entire snippet that i have right here and i will pause it on the screen so you guys can see it all i’m doing is i’m adding on clicks to everything here so just showing you guys so you can see you’ve got the trending and you can just pause the video and see as you do it and here you can see we’ve got the second option and we’re just fetching different endpoints you see like because we set everything up in the beginning this is why our code is maintainable it’s very easy to understand what’s going on here right it’s very easy to understand that like okay this is doing this you see inside of requests like you can see all the the exports right so it’s really really powerful way of doing things and it uses our api key which is awesome right so if we save this now go back over here and we make this one full screen now if i do for example romance horror mystery you see this everything works like we’ve got a full app that’s just working super nice super responsive now everything’s a bit snappy right now right whereas in this app you see everything kind of had it has that little animation yeah yeah when that animation kind of is like a finishing touch it kind of it makes it like well okay this is an app not just a website that’s beautiful yeah yeah what is it look what is it called or what so this is called react flip kit right i’m sure it’s freak flip kit so uh we call this react uh flipkart and the way we basically do this is i will show you guys so we basically i think it’s called react flip kit yep and this is a extremely rat flip tool kit i think it is yeah maybe yes this one right called toolkit and this is basically a very powerful way of re-rendering lists okay now uh no it’s not this one sorry wow is it no it’s not that one is it looks similar yeah i think it’s similar to that one yeah but this one is actually react flip move react move yeah so the one that we’re looking for is this one react flip move now over here this is effortless animation and it is effortless animation you just need to learn how to do it once and you do it very well so what we’re going to do is we’re going to install it so to install it we need to do npm i react flip move and you don’t need to do dash save anymore so dash s we can actually just go ahead and do this so here we can do command j to bring it up go to our second terminal go up here we say npm oops mpmi react flip move that will install react move into our project and then the first step is we need to basically we have a functional component right we have a functional component over uh inside of our video our video card is the thing that we want to animate right so the video card we’re referring to is this so this thing is what we want to animate right so what we need to do is we need to use something called a forward ref right now in react it’s not as complicated as it sounds all you need to do is follow my steps of what i’m doing right here right so you just need to why is keynote opening up on my laptop what’s going on okay so now here i just need to go change this to your es6 uh arrow function so i say const video card equals like this and arrow and you can see like everything works the exact same nothing broke nothing changed and then we need to do something called uh we need to add a forward ref now all the forward ref is doing to make it very simple but simply put is in plain html we basically we can refer to elements in by using something called references we can say this is this imagine it’s like a big pointer right it’s what tells like the browser that this is this this item this is this item so in this case we need to add something called a forward ref we imported from react at the top and basically all you need to do is add a open opening bracket here so opening bracket over here scroll down go to your ending curly brace and add an opening bracket around that and then at the top next to your uh props destructuring you basically get this new property called a ref right now this is basically like a big fat pointer all it does is it points at stuff on your page right so imagine it’s just something which is pointing at your page now with just basically all we need to do is attach this to the outer div for the video card and that’s all there is to basically getting the reference to that that video card so now react has a way of saying this is this video card this is this video card this is this video card now why is that important because the way that these guys implemented this to actually finish and to get everything working now all we need to do is go to results.js so let’s go over to our results.js uh we need to import flip move from react flip move because we just installed it from npm so here we go import flip move from react flip move and then this is how crazy it is guys like to get that animation right so this is before without the animation so just to give you a quick demonstration you can see it’s very snappy it just it looks like a website right it doesn’t look like an app it looks like a website now you’re right yeah but all we need to do now is add this we add flip move like this and i basically put this entire mapping inside a flip move that’s it because we have that forward ref and react knows how to point at which elements now now if you see okay so this is so you see it actually works right it works really well but something’s clearly wrong right yeah i mean the animations there the animation is really clean right it works really well but it’s put it into a list and the reason why this has happened guys is because if we look at our code all right we have results right we have results here in css and we’ve done display flex on results now we’re wondering why isn’t this in a row because when we added the react flip move library what it did is it actually added so this is results it added another div which means that it is actually doing it but now instead of targeting results what we need to do is go ahead and target the following we need to go ahead and say results go inside that div that they added and then do that and now if we save it yeah we get this and if we do comedy it says click on comedy or we’re already uncomfortable it’s too horror hey look at that um let’s go that’s awesome damn that’s beautiful and now that looks like it so we just took it with that one additional step from looking like a website to an actual app right so it’s an actual sort of functional app whereas before it looked like an actual website it just looked like a normal website but now it’s like this is the kind of thing you would see on like amazon prime you know when you you got those yeah when you got those when you’re on your tv and you’ve got that little pointer that you sort of click on things and you know that this would look amazing on tv man i love it yeah this would be awesome we are at we are in 1193 likes we’re about to break 1.2 k likes so hit that smash button if you guys really enjoy sunny’s styling abilities this is insane guys i love how this looks thank you guys so much yeah this has been awesome like uh we actually got a comment from knowledge itself saying it’s amazing thank you so much just a bit of fun yeah nice so i think we actually got two like two people joined uh when we watch if you joined when we while you’re watching this let us know in the comments guys uh oh yeah so i see ben whitney thank you so much for joining man we really really appreciate you and then we see devon das yeah thank you so much three minutes ago and then 26 minutes ago i don’t know if you guys can see that’s insane love that thank you guys oh nice david john okay so david jonathan is actually on the pwj course right uh and he says hey guys i want to say that if you’re still thinking about signing up for the pwg course i haven’t decided that and you’re missing it’s the in best investment you can make on yourself in 2020 so like guys you heard it yourself david johnson is an amazing student uh i was actually chatting to him last week um you know coaching i’ll be speaking to him right after this because we have a coaching call right after this session so amazing stuff david no breaks give it up for sunny guys thank you so much and guess what we just broke the 1.2k legs hey let’s go guys for being so active and always you know following everything that we’re doing we’re putting out for you guys really really really appreciate it nice that’s awesome dude exactly that we really really appreciate you guys uh his majesty said joined about 30 minutes ago is that is that is that ben i’m wondering is that bad yeah i think that might be ben whitney then yeah and then i see just just now at this moment rashmita khatri just joined wow thank you so much rashmita we appreciate you nice that’s amazing dude this is awesome part of the family now yeah exactly frank says this build is so clean better than netflix because of axios awesome dude glad you found that frank’s another amazing inside of the course um he’s not actually even a student guys frank is somebody who’s been in the industry for like 10 years and he’s now part a part of the pwg community and he’s like upgrading his knowledge on react and his knowledge in javascript so by joining pwj you’re literally being surrounded by this community of like awesome developers so this is this is great like and and what’s insane too was that frank shared in a few live streams back he said that he landed a six-figure contract with sonos as a consultant to build their radio station app wow we were just mind blown guys frank is an amazing student amazing asset to our community and you know people like him are people that are consuming this type of content and actually putting it in their portfolios he got it he actually he said that he got that job from building the spotify app which is amazing guys thank you guys so much keep at it put in the work yeah honestly when frank dropped that news we literally i think like qazi was up on his chair jumping with that frankie i was over at this side i was going crazy i was like oh my god yeah like this guy dr frank made a six-figure contract happen like with with just you by showing them the spotify clown so guys like this these projects have a lot of value you can see that a lot of people sort of benefit from so if you do all we ask is that you just smash the thumbs up button that is it that’s all we ask guys smash the thumbs up button and if you haven’t already there is some kind of voting going on right now i think it’s hackernoon maybe um yep yeah but that would be awesome if you guys can vote for the channel because that is yeah that’s crazy nice so hills from i’ll drop in i’ll drop the link in the chat so you guys can go vote it’s this link right now in this moment yeah so go in now go vote and then come back to the stream yeah that’s it guys literally if you can literally just go to that link right now in the description uh drop a like a vote for us that’ll be amazing and it’ll be awesome that like all of us can win that award together that’ll be awesome so hell is somebody from the uh pwg team uh team as well he said hey sonny i’m sorry from pwj i want to tell you that you’re awesome bro thank you dude and i’ll see you in the uh coaching call straight after this that’s awesome nice oh dude this has been amazing right i think with that said we are now at the point where we can deploy this thing right we can deploy this app all right my favorite part so guys like if you guys are pumped for this like let us know in the comments like now what we’re going to do is the fun part we’re going to deploy this i’m going to show you how easy it is to deploy this with firebase so previously we set everything up on firebase we we went over here we created an account and guys beyond that we don’t actually need to do anything more with the firebase panel so like we literally just need to do that one step what you do have to do though is run this command so here what you’re gonna have to do is you’re gonna say sudo npm install dash g saying globally firebase tools right and this one this will allow you to use the firebase cli so you need to do this and put in a password and basically once that works it will go ahead and it will install the firebase tools into your computer for you right now once you’ve done that you need to go ahead and do uh um firebase login right and what that will do is i didn’t actually need to do this step i already did this earlier but it’s fine i just want to show you guys from like start to finish you guys can see how we do it um there you go so you see it says updated package so i guess we did so you can say firebase login and then it will actually go ahead and i’ve already logged in so it says already logged in and i’m going to clear that quickly because i don’t want to have my email up too long damn it please don’t spam me guys yeah so now with that said what we’re going to do is we’re going to say firebase um init right and this initializes the firebase like sort of app for a project then you get this really nice cli right and if you make it big enough you actually get this massive firebase thing over here which is cool but now what we’re going to do is we’re going to say we’re going to use the arrow keys go down to hosting click enter and then we’re going to say use an existing project right and then we’re going to scroll through and we basically need to go through and find the one today which is the hulu youtube clone right so i’m going to click on hulu youtube clone do that and then here’s very important guys yeah so you want to make sure you type in build okay so build is extremely important as you see we’ve got build over here right so it says build and make sure that you do not mess this bit up because this is very important for what you need to do next so enter configure it as a single page app so we’re going to type in why because every react app is a single page app so we’re going to do this and then there you go it’s done right so once we’ve done that now what we need to do is say npm run build right now what this is gonna do is oops what’s happening here so it says npm this is no problem oh damn it oh damn it what i ended up doing oh i did a mistake that we did in earlier builds as well damn it what i did is actually make sure you’re pushed make sure you’re cd inside the right directory guys so you make sure you’re inside of the hulu clone so to fix this if this ever happens to you to fix this i remember in the beginning actually somebody said that it was a comment right in the beginning really and i i actually ignored it yep somebody called it out in the beginning yeah it’s a really like honestly it’s a good point like that they made because uh what you have to do to fix this then you get rid of this you get rid of firebase rc get rid of the package lock um yeah get rid of that and then package json in this case what we’re going to have to do now is we’re going to have to go in here and we have to say npm right so we have a few dependencies that we installed you see they’re not actually in our project now because we didn’t we weren’t in the right directory so we need to do a quick fix and i’m just going to install everything i’m saying material ui icons material ui core axios a few things that we need install and you’ll see it will pop up in the dependencies over here right so let’s go ahead and do that that’s a silly mistake that we made and we’ve done that before as well like basically it should be completely fine while we’re actually sort of fixing that uh we can actually go ahead and answer some questions um so let’s go ahead and see so asan yasin says i’ll watch every single stream you guys have made i joined today and i shocked and i shocked sunny is explaining in detail i loved it nice man that’s wonderful so many people joining in today thank you guys let us know guys if you do end up joining profit with javascript we are pumped to have you we always want to grow this community it’s insane and thank you so much 100 guys is huge when you join uh let me try to mpmi axios uh what else do we install flip mpi flip move and you know guys we’re we’re doing we’re having these mistakes ourselves so that you don’t have to go through them so you know the best way to learn is really learning from your mistakes and even a better way to learn is learning from other people’s mistakes you know exactly you’re going to want to do that yeah and guys this is just proof that like even if you’ve been developing for ages small mistakes like big mistakes happen small mistakes happen it’s completely natural and i actually like it when like a mistake happens on a live because i think it gives people the sort of like it crushes that misconception of like everything’s perfect when they’re coding like trust me guys yeah it’s it always this stuff happens like it does happen it’s a messy road yeah exactly let’s see if we’ve got any more dependencies so we’ve got requests we’re done oh god damn it okay that’s fine we’ve got this one uh here we’ve got flip move axios we did asks please tell us again how to get an api key from tmdb we show that multiple times in the beginning of the video and then in the middle of the video as well yeah there’s going to be under settings there’s an api menu so check that out it’s really simple just right here guys so this setting right here inside of your tmdb dashboard just make sure you go into your settings go here and click it and you’ll be able to generate a key and that’s it nice so with that said i think now i think now we’re good i think we’re good now so now what we can do is we can go back and we can basically pretend none of this happened we can say npm uh we can do firebase init one more time so firebase in it there we go and make sure you’re in the right uh photos we’re gonna go back to hosting and we say use an existing project we go down to hulu youtube clone we say build here we say yes for a single page app boom it’s done now we say npm run build and we do this and then it says okay like now it’s creating an optimized production bus so mpm run build is essentially what it’s going to do is it’s going to strip out all the not like all the non-developer tools right so like all the developer stuff gets thrown out like because we want to make a very streamlined build because when your website’s up on on on the internet you don’t want it to be super heavy you don’t want it to be super clunky so all these extra things like when i save the file when it hot reloads we don’t need that in the actual live build we just need to be lightweight so what it does it strips everything out and it pushes everything into this build folder which is why when we did firebase in it we specified it goes into the build folder right so this shouldn’t take too long in the meantime let’s go have a look and see somebody asks is it possible to use firebase and wordpress uh i’m not sure i honestly i don’t know because i don’t i haven’t used too much of wordpress but firebase is a very flexible platform so uh definitely go and check and the docs are so good the docs are really good so if you have that question go ahead and check it out and i’m sure it would be that’s a great question yeah if you guys find that out drop it in the comments below so that we can all know yep so here what we’re going to do is once it’s done all we need to do guys to deploy this thing is a firebase deploy so if you’re excited uh drop this like a smash that thumbs up button and also guys pull out your phones and tag me and frankie right here if you’re watching this video whether it’s a replay or you’re watching it right now and uh tag us on instagram and shoot a story when we deploy it go on to the website yourself and shoot a story for us and it’s really nice to see that we can see that you watched it you stuck with us and yeah we always loved that so firebase deploy i guess guys let’s go all right should we do it frankie should i hit should i hit enter on this let’s do it man i think they’re ready yeah let’s do it dude so i hate enter and that’s it let’s go let’s see it’s counting it down i think it’s gonna be five four three three two one nice so go ahead and go over to this link guys uh and you’ll be able to actually go ahead and check out i’m going to drop it in the comment section as well there you go go ahead and check out the app guys and you can pretty much play around with it see it for yourself and yeah like you can see that the app should be up and running you can click on the different things and it will go ahead and it should be working as expected mess around with the hover functionality finalize that yep let’s show it on ours yeah so let’s go ahead and let’s actually go to the live version so you can see how fast that was guys like if i go ahead and open up again like boom look how quick that is it’s insane like yeah and you see like even when we do so clean like and everything works super nice and guys the amazing thing is this is going to be on your portfolio so like you can go ahead and show someone this and i think it’s a really nice showpiece on your portfolio like it would be a really awesome thing to show you can show a bunch of different things you can show responsive design you can show uh api usage you can show that you can build things in es6 fashion with react hooks and do everything in a modern way um yeah so i can see a lot of people are going crazy in the comments that’s awesome see puniam says great sunny sunday says hey good to be here muhammad says good job guys um comedia says i just joined for the first time you thank you so thank you for being here dude i appreciate that let’s go this is amazing man this build makes me want to watch movies because they look so beautiful yeah insane insane dude thank you guys so much if you guys are finding this very useful for you go to the description below check out our free one-hour training to become a javascript developer i think if you got if you guys got value from this you’re gonna get value from that as well and stay tuned for the other lives as well we’re going to be going live tomorrow sunny and kaz are going to go live and they’re going to build airbnb clone so that’s an amazing build i know that a lot of boot camps actually use that as their final project i heard death mountain used to use that as a final project airbnb clones so yeah i mean that’s a great tool that’s awesome that’s awesome yeah uh give one sec okay yeah i think guys yeah like if you’re interested then definitely tomorrow be sure to set a reminder on your phone uh we go live i’m not sure what time it is on in american time but i think it’s 6 30 b 6 30 p.m bst and that turns out to be what time that would be about 10 about 10 30 10 15 yeah pst yeah it’s a big time exactly so we’ll be going live again tomorrow and the day after so awesome stuff um yeah like if you guys enjoyed that let us know i think what we do now frankie any lasting last minute things to say as of now man i love this build it’s insane guys just putting in well how long was this this was two hours and 34 minutes if you guys can make and follow this build in two hours and 34 minutes guys you guys can literally change your life change your opportunities and actually get a job from this so you know there’s so many ways that you can even spice up this project you can add a little bit more functionality to the the first header that we have and yeah make it interesting play around with the code like we said if we find we’re going to discuss about this but if we find it useful to drop the actual github repo link for you guys it’ll be in the description below but honestly guys don’t be lazy you know follow the project sunny does a great job at explaining everything and you’re going to get massive tons of value from this exactly guys make sure you definitely do like follow along with it because honestly copying something you’re not going to like just think of yourself you’re cheating yourself like you’re going to be cheating yourself like going ahead and even if you don’t fully understand what you’re sort of coding when you follow along with these tutorials trust me do it so many times like do it do it enough times and that pattern recognition will kick in and you’ll start to see the patterns you’ll start to see what state props all these like what is a hook you’ll start to see it it will really um really really be good because is it is it too loud oh damn it i didn’t even notice it that’s crazy the gain is too too high i think nice somebody asked somebody even asked did you use back end for this and guys we used firebase for this and the reason why you guys maybe didn’t even notice if you’re not paying that much attention is because it’s so easy to implement we touch on it at the beginning we’re touching it at the end but pretty much by setting it up in the beginning it took us what sunny about one to two minutes literally and from there you have a full full-on functionality with back-end using firebase yeah it cracked me up so much i didn’t realize i was kind of leaning against the mic thank you so much man for the indian rupees appreciate your donation right now guys we are at 1274 likes so 1274 likes that’s insane and our chat donations reached the 100 100 mark so thank you guys so much for that yeah honestly insane support today guys and uh yeah like we said make sure if you are interested you found value from this then be here for tomorrow’s live build today we built the hulu app uh completely deployed on firebase and like frankie mentioned before we have a free training and link is in the description be sure to check it out and yeah that’s awesome dude oh that was fun thank you guys so much now go on and build it let’s go exactly go ahead build that app and tag us in the stories in the texas like we’ve dropped here and yeah i think with that said frankie i think that’s an awesome place to wrap this video up would you say i think that’s a wrap man beautiful beautiful rap yeah that’s it dude all right guys thank you so much for watching and we will see you in the next video peace peace bye bye
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Saani is really a genius.
nice guys just finished deploying .
good stuff guys , you gonna clone everything soon you will clone corruption in Kenya
please create a project from 0 from figma to react
thank you
Nice stuff, however it would have been great to see playing either of video.. looking forward for full funtionality if possible.
This is a great for students…πππ
i could not watch the video live but now saying ur teaching style is up to up to mark
Love this duet!
Sonny what is the program called that your using to draw on your screen?
Could you show how to build a responsive CMS / Blog Crud application using Firebase DB and Hosting?
I agree the repo links should not be given so that you follow the build to the end. Thats how you learn guys. Not from copying code.
This Hulu clone is worth yup 2 comments from your boy Papa React ! Amazing tutorial my guy clean, articulate and beginner friendly
OK CP this is my 3rd project completion with you guys loving the content , LET'S GOOOOO!
Please do some backend stuffs
Make robinhood clone app
https://github.com/cagriacar?tab=repositories repo – source code and similar projects
Thank you, so much Clever Teams….ππ₯
okay guys, for my video cards I can only get 2 in a row not 3 wtf did I do wrong?
sounds good manππππππ
Wow greate
12:09 Start firebase settings
Thank You for not pushing this code on github , we'll learn directly.
width: 100vw; in App.css causes horizontal scrollbar. Why don't we use width: 100%; instead?
Just curious could this have been done using python? Is there a reason why you did not use python?
Could u drop the code into GitHub…
Great going guys!
Became a fan of your videos during the lockdown
I cant any of the images or information to show when i use movie.backdrop_path. console says undefined
This will be my second time following one of these tutorials. The first was an instragram clone and for both I am using firebase! Adding both to my portfolio and will probably build more! Thank you so much.
41:52 he copied header__icons, how did paste with CSS attribute with default? Is this any shortcut we don't know?
Next video: Build a programming lenguage
how would you put the hide scrollbar css in a styled-component situation?
You guys are doing an amazing job! This is the first clone that I have built following the video, it was really fun, learnt a lot of new stuff like react-flip-move & text-truncate…. and I am very motivated to continue on building the rest of the clones developed by you guys…thank u very much! π Also, I just voted for you guys as the top programming guru on the noonies.tech! You are truly amazing!
Hi Guys – first of all, THANK YOU very much for all of these FREE React projects you are publishing. My React skill set is growing by the day! π»π
Second – Is there any chance you guys might create a React app that uses a back-end Express server to handle API requests that require an API key. I'm having a hard time wrapping my head around securing API keys in a React front-end environment. From what I have been reading, it seems it cannot be done in React alone and that you need Express as a proxy to store the API keys, make the request, then pass it back over to the React front-end. Here is an article that describes the issue -> https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app
I'm asking if there is a software that ahelp of eye glass and hearing aids can see and lissen sound of Jesus and devils or a video camera software that both appeare
Hey man I've been watching your videos and I want to learn this stuff. I have been using freecodecamp.com for a little while now, and it's not exactly a bad resource, but it's boring enough to make you want to wash you mouth out with buckshot. I have visited you website and I may be looking in the wrong place, but I am trying to figure out the cost of training and all that good stuff. Can you help me out?
This is great !
A google maps mobile app clone would be amazing
very thanks dear both of you
how does this dude not have millions of subscribers?