Let's code a Netflix Clone with GraphQL Pagination! Reviewed by a NETFLIX ENGINEER!

hello internet i hope you're excited for this video i really am i'm excited because we are going to be building a netflix clone using the same database management system that the software engineers over there actually use that's right we're going to be using data stacks which is built on apache cassandra and his netflix database management tool of choice and we have an actual netflix software engineer that is here to review our app and not only that we're going to be using the graphql api to communicate with our database if you are new to grockewell this is the perfect video for you as i'm going to be taking you through step by step into how to create tables and make queries we are also going to learn how to use pagination and slicing pagination in a nutshell is a way for you to get data page by page instead of getting it all at once similar to this that we will be building in our app crafty well essentially enables you to get the fields you need from your datagraph without any unnecessary overhead this helps keep network responses small and fast think of it like this say we have this query right here now if we had loads of movies this would literally return every single movie in our database do we really need all of this enter pagination when a client queries a paginated list field the server returns only a portion or page of the list's element and then we have slicing slicing is essentially what we're going to use in order to call as many genres as we want so for example when we have the page up and loaded for the first time we're going to get four genres and as we move the cursor to the bottom of our browser we're going to get more genres that are added to that list and more and more and so on okay okay so to recap that is a netflix app that uses data stack built on apache cassandra to store our database and we are also going to learn about graphql pagination and slicing but before we get going please welcome our netflix software engineer who will be reviewing our app for us welcome hi i'm steven and i'm excited to be here with onion to talk about how we do things at netflix okay awesome so please do stick around for that we will be getting feedback throughout the app as we are coding along there is a lot to cover in this tutorial it will be a long one but don't worry you're in safe hands i'm gonna be taking you through absolutely everything step by step now as always before we get started let's actually break down what we are gonna build in this tutorial we are going to start off by creating two tables a table that is going to help us deal with genres and a table that is going to help us deal with the movies next we're going to get to actually adding data for the two tables once we have added all our data it's time to start building our app we are going to be doing this in react and using serverless functions in order to get our data using graphql queries so in other words we're going to be making a query to get all our genres and then we're going to be mapping out the genres onto sections in our app next we're going to actually populate each section with the movies for that genre with another query and after that we're going to be using pagination in order to fetch more and more movies when we click the next button getting only six at a time and then we're going to cover the limit part so limiting how many genres we get and getting more or calling more if we move our cursor to the bottom of the page and of course styling so doing things like using use state in order to show more information if we hover over a movie card okay so i hope you're ready i'm really excited let's do it please don't forget to like and subscribe to my channel it would really mean a lot as it does mean i can keep creating more content for you guys so let's do it okay so let's get to it now the first thing we need to do is sign up to use the database to see all our data and what better database to use than one that's free of course for beginners but also the one that uh netflix actually uses so that is a bit of trivia for you uh we're gonna be using data stacks astra cassandra as a service um you don't need a credit card to sign up so i'm just gonna go ahead and sign in please do sign up uh here of course i'm not going to because i already have an account so like i said no credit card details necessary um and it's free to use for beginners so let's do it so so we use cassandra a ton at netflix it's uh it's it's great for a service like netflix that needs to be able to scale globally and so ever since we launched into a 190 countries in 2017 we you know we need everything to work around the world all the time and so so a a database like sandra's been really helpful to to make that work and allow us to sleep at night at the same time i'm going to sign in just by clicking here and this is essentially what you should see when you sign up now i'm going to create my first database so i'm just going to click here and give our database a name let's go ahead and call it netflix uh database or netflix clone database to be more precise and let's just give it the key space i don't know netflix netflix is fine great um please select your provider and region now this is totally up to you whichever you want to choose and i'm just going to click europe middle east africa because that is where i am and then click west europe and then of course create a database and click continue ready for liftoff okay so there we go we have now created our database it was that easy now i'm going to be using uh this is really cool actually so this is stuff you need to remember we've got our cluster id which we're going to be using uh we're going to be using a bunch of this stuff later but for now just be aware that my status is pending but that's fine i'm going gonna show you something cool as soon as we have this uh active so i'm just gonna perhaps speed this up uh i'm just gonna go okay and we are active so let's do it great so we've got our netflix clone database now i'm gonna actually use uh the graphql api and what is so handy about data stacks is that it actually uh provides us the playground like complete with um a it's basically just done it all for us okay so here we go the graphql api will essentially allow us to interact with our data using the graphql types queries and mutations so we're going to be doing this in the playground first in order to add data to our database but then use the same queries to retrieve them but in our app okay we're going to add the data in this playground that has been provided to us by data stacks we're going to add it add the data through the um graphql api and then we're going to get it out using the same query language but in our app so i just had to say that twice because it might be a bit confusing to people who haven't uh worked with this graphql playground before so okay what i'm gonna do is just click here to open it up oops i'm gonna click it though and then in another window though just really have to keep going back and forward so again to the graphql api i'm gonna copy this link i'm gonna just paste it in a new tab like this so now the first thing we need to do is make sure we get our application token and put it in the http headers section at the bottom of the playground so that we can you know like talk to our database so what i'm gonna do now is go back to the netflix clone um and then i am just going to click on the settings get an application token i'm going to select a role so let's just put add on user and generate a token i have actually generated them before but this is the token we need so i'm of course going to delete this database by the way so please don't use my tokens they won't exist anymore please do generate your own it wouldn't really uh make sense for you to use mine anyway right because you want to communicate with your own database rather than using mine so in here the http headers just uh where it says cassandra token i'm just going to paste that like so okay so we can now officially communicate with our database okay so just so you know the forward slash graphql schema this is an api for exploring and creating the schema so that is what we're going to do being in here and next we're going to be looking at graphql slash key space so that'll be our key space name and this api is for querying and modifying your cassandra tables using graphql fields so just remember that when we start going we're going to start off with the uh graphql schema first to start creating some schemas to start creating some tables so let's just go back uh let's go back to the connect go back to the graphql api so now that we can communicate with our database the first thing we want to do is create two tables i'm going to create a table that deals with the genres and then a table that deals with the movies so i'm gonna use please do use this uh here as a sort of like template and guide um however i'm just gonna go in here and then delete this okay so we're going to create our first table this is how we would do it we're going to write a mutation so i'm going to write mutation and in here use reference list create table uh making sure to use camel case create table okay and in my table i'm gonna have to use that's right the key space name we know that our key space name we called it netflix remember so make sure to use the same key space name that you did uh when creating your database that is important um and then let's give our table name as i've already alluded to up there our table name is going to be reference list so i'm simply going to paste that as a string if no not exist true and then we want partition keys okay because i want to essentially be able to uh filter out our movies by genre so this is what this is going to help me uh do i'm going to use the partition keys and then the name label and then we have to give a type it's going to be text we have different types but this the label is going to be text because i want to filter out the partition key is going to be the label which is going to be text and then we're going to have a clustering key too so this will make a lot more sense when we actually start dealing with the uh databases database itself and the clustering key i'm going to actually put the name value type basic text because that's going to be a string too and i'm going to give it an order of ascending because i want these genres to be an ascending order uh based by the text okay so this is what this is doing i'm creating a table that's going to deal with these genres essentially so i'm going to create that table first i'm simply going to run it like so and there we go we have created something it's called a reference list but just know that that's going to help us deal with the genres i want to actually create two tables okay our next table is going to be for the movies so once again i'm just going to use the same uh sort of i guess logic i'm going to write a mutation i'm going to call it movies by genre just to be super clear about what is essentially happening and let's create a table so once again we do that and our table is gonna have a key space name i'm just gonna make sure that that's below here though netflix our table name just gonna be movies by genre if no exists true and then we're also going to have partition keys we're gonna do it name genre type basic text and once again a cluster it's clear clustering keys and our clustering key is uh can we name i'm going to do it by here and the year type is not going to be text it's going to be an integer so basic int order and this time name title uh this title is going to be text why is it not liking this descending whoops type name title uh yes that's going to be text and the order of this is going to be ascending so just like that once again put that there okay so we have the partition keys we have the cluster and keys next we need the values as well because the genre doesn't really need to have values it's just the genre right however the movie does need to have values each movie is going to have as of course it's going to have it's going to be part of a genre it's going to have a year and a title and then it's also gonna have so these you can't really cluster with these but there's just it's just like data that is also attached to the movie if you will type basic text we're gonna have oops let's make sure to format that correctly of course gonna have a synopsis i'm gonna have a duration which is gonna be an integer synopsis i should probably spell that right synopsis duration and a thumbnail let's call it our thumbnail now it's going to be more like a moo like mp4 but okay thumbnail for now okay that's fine i'm happy with thumbnail let's just go with it you'd have to call it thumbnail if you don't wish to okay so this is looking good let's hit run ah wrong type argument value basic value within there's not a valid basic type okay what did i do here ah yes i put this as a string whoops this does not need to be strings so just keep that in mind it's lucky that we have our messages in our lives and there we go so we've now added the two tables we have the reference list we'll deal with genres and we've added the movies by genre okay so now um let's actually get to adding so that is it we've created the tables the next thing we want to do is start adding the data so let's do it the next thing we need to do is in the graphql playground we need to change the tab to now use uh another endpoint essentially we need to edit the end of this to change from system to the name of your key space that we have okay so we have netflix we need to do that luckily we can actually just take it from here as well so we've done the table we've created it our two tables so here we go we don't really need to do much because uh the platform is provided for us so that's really nice so i'm gonna go here and just paste this new url that's gonna take us to our key space so just like that and let's not forget that we also need our cassandra token so we can communicate with our database like so great so now let's get to adding some data i'm going to do this by running another mutation like so so we're gonna do the genres first again uh i'm going to uh insert a genre so my mutation i'm just gonna call it insert genre like this um genres and then i'm going to have an action genre so i'm going to insert reference list thank you very much and value the value of it is going to be well i want to give a label because remember that is uh one of our partition keys next thing is going to be the value and i'm just going to simply put that as action so each reference list item that we insert it's going to have a label that says genre and a value that says uh what the value of what we're doing right we're certainly a genre that has the value of action so that is how i would uh do it essentially and then i'm just going to simply put value value like so if you really want to format it a little bit better this probably is the way to do it uh okay so here we go if i run this now we have added one genre but we need to add a few genres right so i'm gonna do that now we could just do them all at one time so we've added action we don't actually need to worry about action anymore let's also add anime i'm just gonna change this to anime a comma here let's also have whoops got anime let's have um award like award winners i'm also gonna have children let's give it the value of children and family then let's have comedies comedies comment jesus for that correctly hopefully uh comedies and then perhaps just copy all of these again okay okay from here and then comedies let's have documentaries i hope i'm spelling all this right documentaries document the more data the better okay documentaries because we'll really fill out our netflix uh app we're gonna have drama too let's have dramas uh and let's have fantasy and then just a few more i promise okay so we've got quite a few there just maybe let's just do like a tiny bit more um let's have french french um horror horror independent independent music music romance romance and then i'm just going to put sci-fi and thriller so that's going to be it i promise um i want all the data and plus i've got it so i might as well use it sci-fi fi and last one thriller thriller okay so um are you ready are you ready let's go okay so we have all of our genres now created this is looking good as you can see it was successful so let's carry on we've added the genres now let's add the movies i'm not gonna make you sit here and watch me do all of them again uh i'm gonna show you where you can get all this data because of course we have so many movies to add you can think this is just the genres you can imagine how many movies there are right so we've added the uh genres if you do want to actually retrieve these genres you can do so simply um so if you did actually want to get all these genres you would simply write this query get all genre i'm going to call it um why not i can call it whatever i wish and then get the reference list uh and then values and i just want to get the value okay so the value as we know is what we called each genre like action or something so then of course we need to search for it by value label genre so there we go that's how we can retrieve all the genres that we've just created so we can see what's in our reference list so they are all there great okay also once again make sure that you are in the netflix uh key space name if you're not then of course that won't work make sure you're in the key space name of netflix great now let's create our um first movie so once again i'm going to write mutation and let's call it insert movies and the first movie that i want to create is inception so that's what i'm gonna call it and then i'm gonna need to use insert a movie by genre and then let's get up some um we need to put the value in uh and i'm gonna say the genre for inception is psi phi the year is gonna be 2010 that's the release date the title of it is of course inception as a string and sep chun like so let's make a capital um this synopsis is is gonna be i don't know cobb steals information from his targets by entering their dreams okay let's give it a duration of one two one minutes i have made that up and the thumbnail okay now the thumbnail is uh i'm going to store all of my thumbnails so they're going to be mp4 files on imager please feel free to store them whatever you want but i think this is quite nice and it just means that you can use them because i'm going to make it public as well so this is what i i'm gonna do so yeah so that's great and uh we we do basically that at netflix we uh you know we don't provide the video files uh write inline like through graphql we you know we provide urls to the files and then we store the files on a uh we call it a cdn a content distribution network and so there's computers that netflix ships all over the world to your local internet provider so so down the street at your internet provider they probably have one of netflix's servers sitting there loaded up with netflix movies and so our special url is going to be pointing you to the closest server that can give you your movie here are just some of the uh mp4s i've stored on imager i'm going to give you the links so you can have all of them check it out i mean it's some like literally just like a little clip that plays and yeah i'm going to give you the links uh so please be able to use them the link to all of this is in the description below please have a look at that where you can get all my data that i've kindly made for you so you can have and you can share with your friends and blah blah blah just make sure to credit me okay because it ah that's a nice thing to do uh okay so let's get the uh link for inception um i'm just gonna get that link here and then in the thumbnail part i'm gonna just paste it as a string like this okay and then so we've got all of that uh i just need to put value title okay so now i'm just gonna add that like so and there we go we've added our first movie now like i said i don't need to sit through all of this so i'm just going to get all the movies and i'm just going to paste them in because i pre-made them and there is a lot so let's get rid of that i'm going i'm gonna insert the action movies click so that is how many i have added some of them are repeated i'm going to add the anime movies so that is now added once again as you can see there are some repeated i'm gonna add the award-winning movies i'm gonna add the children's movies by the way this is just me naming it uh just so we can see what is happening but um we don't actually need to i could do it like that and it will still add all these movies so just have a look and there you go okay so that is just for us uh it's just so everything's a bit more readable but you can just use mutation if if you wish okay um this will still work because you know we have uh arranged our data in such a way um when we create each of our movies that it will know uh to put it in the movies by genre table okay and that is thanks to this right here and then of course we are going to filter them by genre so i've just added the comedies now we still have a few to get through let's do the documentaries next so i'm gonna add the documentaries i'm going to add some dramas let's actually add we just had one drama for now let's add some fantasy i'm gonna also add some french films because everyone loves a french film amy is a pretty good one i'm not gonna lie i've watched it a few times and then horror one of my favorite genres um actually it's probably more thriller but you know horrors don't know what kind of horror like if they're two graphic slasher ones i'm not really into them if they're more psychological i think that's like a lot better right everyone likes a psychological horror psychological thriller everyone loves some independent films too so i put in entering red and war room and i'm going to put in some music ones because you know why not it's our database and we can do whatever we wish and then of course uh romance because romance is a very popular one too so i'm just gonna shove in some romance movies and then i hope you guys appreciate this getting this data um was quite uh long especially in getting all the mp4 files so if this doesn't get like a retweet or a sub at least i'll be pretty upset okay so we've got these sci-fi films now there's a lot of those and the thriller as well so i'm just gonna put in the thrillers too i think sci-fi has probably got the most for sure um again one of my favorite genres and thrillers okay perfect okay and now let's actually uh get the data back right so you can see it now as we are going to be getting the movies by genre i'm going to show you how to do it in here and then you can see how we're doing it doing it in our app okay because we're essentially going to be writing the same query just in our app so i would use query um once again you don't have to name it if you don't want and we're going to get the movies by genre and then i'm going to get the value let's get sci-fi right so you might see that some of these are sort of like auto completing for me this is something that i haven't shown you yet but i wanna i'm gonna show you now it's quite handy it's quite a cool thing that comes with the playground um so i'm just gonna do yeah i'm just gonna order it for now i'm gonna show you some other cool stuff that we can do or dubai uh yeah descending so once again i can use that um and then let's get back so these are the values that i want to get back in my search let's get the year let's get the title let's get the duration let's get this synopsis and let's get the thumb now so if i click search oops what have i done here what's it not liking oh yes oops that should wrap everything in here sorry okay so there we go we now get all the moves by genre we get all the sci-fi movies we get the year title duration stops the thumbnail if i delete these say we just want to get them by the value of year well then that's what we get okay or i can do whatever i want i could just get the title and duration for example so these are the values that i won't return cool right now check out these docs because this is really cool movies by genre so that's the query that we are doing we can also get stuff like page state which we will go into later as we are going to look at pagination and stuff and we also can do options so if i pass through options this is really hungry handy the arguments here we've used value as an argument i can't also use options and then we need the curly braces so options and i could use limit for example this is just one of the things i can use these are one of the things that to my disposal uh so i love these dogs it's really handy and it makes our life so much easier and it says that i can pass through an integer so let's just pass through maybe two and now let's run it there we go we got the first two so that is really cool i just should have highlighted that earlier that is something of fun that graphql playground gives us it's all very neat and it makes our lives a lot easier when working with data like this okay so we've got our data in i think it's now to move on to part two part two is gonna be where we start building our app and start getting this data into our app so we can use it and of course looking at pagination too okay so the first thing i'm going to do is navigate to a directory of my choice and i'm just going to create a uh netflix app using create react app so sorry mpx create react app and then let's call it netflix data stacks uh and click enter so that is all happening now and uh create react app is essentially creating a project for us that's configured already uh to use and has all of these set up you needed to create a react app essentially we are going to be doing this with create react app and we're also going to be using serverless functions in order to get our data so if you haven't used serverless functions before netlife serverless functions to be exact i do have a separate tutorial specifically on this but um if you follow me step by step then perhaps you won't need to so please do follow me and if you do get really stuck then use the other tutorial that i talked about okay so once again i'm just going to probably edit this out because it's taking a while okay and we are done let's open up our project so i'm gonna open up using code dot which is a shortcut i have for vs code which would open up my project whoops i need to make sure i'm actually in the project first so uh netflix data stacks clone okay and now code dot perfect so you will see here our project configured thanks to create react app which is pretty handy we have the package json here which has all these scripts that we need as well as the dependencies that came with this it has some libraries we're not going to be doing any testing for this project i'm actually going to delete some of these files just to make our lives a bit easier i'm going to move that to trash i'm going to move the web report vitals to trash we don't need the logo so i'm just going to delete that too i'm not going to do testing so i'm going to delete the app test js file and then delete the index css file we're going to do all our styling and app css so now of course we need to get rid of this i also don't really like using semicolons in my project so i'm just gonna delete those two oops why did that happen so those are now gone uh we don't have this file anymore and then in the app js file once again to delete those we don't have the logo anymore so delete that otherwise uh everything will break i'm going to keep that so you can see i guess what this looks like but we don't have the logo and i don't really like using this we use a function expression const app uh there we go it's a personal preference you could have kept it as it is if you wish and click save cool okay so now if i run npm run dev is it dev i think it's start i always get them confused stopped uh npm run start i've just used the script in order to start my app so uh so so our netflix app has has evolved over the years but it's still the basic home screen structure has it hasn't really changed that much you have a list of lists of movies and at netflix uh as an engineer one of the first words you you you learn and you hear and you're like what are they talking about is lolomo everyone's talking about the lolomo like what in the world is the logo it's a list of list of movies that's just the netflix homepage so now on localhost 3000 well there we go obviously i've deleted the logo and the font so that is what our create react looks like and i've also got rid of some styling but this is just to you know show you that it's working um i am now going to get rid of everything else so i'm just going to delete all of this because for now we don't need it i'm just gonna put just empty elements and like so and then i'm also gonna delete everything in here because i really want to start from scratch great okay so the first thing i think we should do is just make sure that we can actually get the data right because when we have the data everything um should be a lot easier for us so the first thing that i am going to do is actually uh use um yes okay we're gonna use netify functions as i said so we need to get the netlify cli i'm going to install it globally uh for those of you who haven't used before netlify cli is the thing we are going to need in order to make netflix surplus functions so in here i'm going to start a new tab i'm just going to install it globally so that's what the g is for i'm installing the netlife command line interface or cli as i like to call it so i can use the netlify command line interface so once again we need to wait for that to install okay so once that's done let's just check that has worked i'm just write notify and great you will see all the commands that we have to our disposal uh i'm gonna have to use netlifydev and this is gonna help me inject all the uh i guess secrets that we need in order to get our data so saying that let's make a dot env file in the root of our project like so and in here i'm going to store all my secrets okay so let's go our cassandra token once again i will be deleting this please don't use it uh and i'm just going to whack it in here now what should we save this as um let's save it as astra token like so okay so we could do it like this uh let's just leave that up here for now maybe astra just be very explicit database astra database application token now so just think of it like we just what we want to do is communicate with this right we just want to send queries to the same thing so what did we need to do for this well we needed the token and we needed the endpoint so i'm simply just going to take the point really astra graph ql and point and paste it oh there we go cool so that is all these secrets that we need um now let's create our first netlify function so once again in the root of our project i'm going to call this functions like so i'm also going to have to create a netlife file once again please do refer to my tutorial or notify functions this is essentially just sort of like configuration um so we're going to have to specify a command if you run functions is going to be essentially so we this is my functions folder essentially so what i've named it here i have to name it here and then publish well i'm just going to publish it to a directory called build okay so that is everything that we need in here make sure to create that in the root of your file and now we need to create our first function so i'm gonna write a function let's call this uh get genres js this is essentially the syntax for writing a serverless function you need to write export handler like so uh exports plural and then it's an async function um i'm just gonna do this empty for now because that is fine we don't need to pass through anything but essentially you can password like event context um to pass stuff back and forward from your front end um let's write our first query so we know how to do this because we've already written our first query i'm gonna have to write this in i'm gonna write it like in back ticks like so oops const query and all i'm going to do is remember the last query that we wrote so we don't know what movies we want to get by genre the query was it looked like this query and then we can name it i'm gonna name it so we know what we're dealing with get all genre but we don't have to okay like that is just up to you on how readable you want to make this and then we need to get by reference list value label genre okay and then let's just i think that's fine and then let's just return the values value because that's what we did so that is our query if i put this in here and wrote that query and got it we would get all that so essentially that's all we're doing okay we're sending this query to this endpoint but from our project okay it really is that simple okay so now we need to make that query to actually fetch the response so const response um await and then i'm just gonna use fetch so we need to actually in we need to import fetch so we can use it um and i'm gonna get the url which is our end point so const just going to tab this out const url equals and then i'm going to use process env and what did we call it astrograph ql endpoint okay so that's our url so we're going to go to that url and we're going to get our query okay we're going to pass sorry we're going to pass through the query so it makes it on that endpoint that's really um it but of course we need to pass through a lot more information here like our application token and we also need to stringify this okay so first off though let me just import uh the package node fetch is what we need to import npmi node fetch yeah okay node fetch so let that import for now great so now we can use it let's just uh const fetch require require choir choir sure whatever require no fetch why can't i type anything nerd fetch okay so cons response equals await fetch and then like i said we need to pass a lot more things in here than just the query so let's open up our little object it's going to be a post okay because we are posting um the query i'm just gonna do a single quote but do you know what i'll i'll clean this up later for you um let's not waste time too much time so it's going to be post and then in the headers just like we did in our playground um i'm actually going to put content type content type uh what's it application json and then x you could just copy it so i'm just literally going to copy what it says here cassandra token and then process env and again what did we call it called it this i'm just gonna post that okay so that's what we need to pass through the headers and then of course the body is gonna be our query but we're gonna use a json string of 5k because we need to stringify the query so just like that cool so that is what we need to do um and then i'm just going to use a try so that we uh can get the response body to await response jason and fonz jason is going to be assigned to response body um and then we're going to return a status we're going to actually say the status code is going to be 200 um and then body is just going to be again jason stringify response body cool so i'm going to try that i'm going to catch uh any errors so this is how you would catch the errors i'm just gonna close all of the errors and return again we are going to hard code status code 500 and body jason stringify stringify the errors cool so that's it um we have written off a service function we are just writing a query to get all the genres okay that's all we are doing now in our app.js file let's try get that information so up here all i want to do is fetch uh the data that comes back from the get genres function so i'm going to write const future data equals it's going to be an asynchronous function and then i'm going to once again so i'm going to get the response uh and i'm going to fetch um and then i need so if i actually ran this i should probably show you that first let me just console log this out now i'm going to stop the app running and i'll see and this time i'm going to use netlify dev to start the app okay so i've stopped the app and i'm using netlifydev in order to get going so as you can see i've injected the application token i've injected the endpoint okay and now so it's just opened up again if i visit forward slash uh dot netlife functions i've also used it quite a few times get genre enter process is not defined okay i've obviously misspelled something ah process there we go we have got all our data so now of course all we need to do in the front end is just use this url to get that data into our front end so that is what i am doing here essentially so fetch and then i'm just gonna actually just copy this because that's all i really care about fetch this url okay and then um now let's just just fetch it for now we're not gonna bother doing anything uh quite yet so we're gonna fetch that data and then [Music] fetch the data and then we're gonna um we need to get the response body again response body equals uh await response jason okay and then once we have it we just want to set the genres so i'm going to use use state for this const genres set genres equals use state and let's start off as null and of course we have to do uh we have to import use state from react so you've got use state now let's set the genres to be the response body our response body um i think that's what we want to do let's actually console.log what the response body is okay and then of course we need to put them in a use effect so we just affect fetch data uh okay so we've got use effect here okay cool so i've consoled blog the response body let's go back to localhost 8888 i'm just going to inspect the page to view our console log so it's no longer on localhost 3000. we're using localhost 888 and whoa okay that's because fetch data let's just uh put the empty array as a dependency otherwise it's going to keep calling our data there we go so our data great but we just want the values here so i'm going to have to put responsibility data reference list values so let's do that response body data reference list values okay so now if i actually um console log this well yeah that's what we want we want an array of all of these objects okay so perfect we've got it and we've set it so now we can use it it's saved under genres cool so what are we gonna do now well i think we should um okay yeah okay let's actually map out each row let's do that so i'm going to i guess create a component so here i'm going to call this components and i'm going to call this a section js okay so const section equals um there we go and of course we need to export it so export default section so we can use it great so we've got our section and for now i'm just gonna return a div and that div is gonna have the section genre um so now if i import it in here import a section from um components section and now i'm just going to return it like so all right okay sorry i need to put section components in the source directory i'm going to put it there okay so great so now yes so now i'm in app.js and i'm going into components and i'm going to section so that should work okay so there we go section genre i have one section in there but i want to map out each uh section based on how many genres we have right so what i'm going to do and i'm also going to pass through this section uh so in here what i am actually going to do is um how should we do this i guess if genres exist then we want to go into we want to essentially map each one out so if that exists genres exist uh we want to get these genres we want to get the its values right so object values of genres and we're gonna map each genre onto the section i'm going to pass it through the genre value so each genre's value so before i do this what oops okay it's obviously not liking this already object genre oops okay so once again if i actually let's console log this out or i can just do it here console oops genres so here we have our genres i want to essentially pass this through each time okay so that is how i would do it for each of the genres i want to get each individual genre or each individual object and i just want to pass through the genres value so this is what i'm passing through so i guess it's the uh property name values value if you want to be precise okay so now i just need to pass through the genre into the section so i'm going to destructure the prop like so oh sorry yeah the genre that's fine and i'm just going to put genre so now if we click save easy right please do have a go at this if you need that is simply how i would map out each of the uh names onto each of these sections so if you've got your section right um the next thing i want to do is get the movies for each section or each genre so now let's go into the section and we're going to do that in here let's actually create our other function um while we're here so yeah let's do that first okay so this time i'm gonna call this con function let's call it get movies js okay and i am literally just gonna go in here and copy all of this and paste it because it's pretty much the same not really but uh it gives us a good sort of like boilerplate and place to start right so we're gonna have to again make a query so the query we're gonna write now is what's gonna be the query to get movie by genre so the query is uh movies by genre and then well i'm just gonna let's just do sci-fi first okay so i'm gonna search for psy phi and that's going to be it for now and then i'm just going to return the values of uh title just just to see what is happening so essentially once again i am just doing it oops it's got authentication and make sure that we are in the right end point argument value with the type okay value see the docs again so movies by genre values i can get the so it's quite handy probably doing everything in here first so those are the films that i can get um great we can get the title what else were the values year title once again let's refer to the docs if you wish your title duration synopsis thumbnail year title uh i've already forgotten duration uh synopsis thumb nail i think that was it okay so now we'll get all that information um i can of course maybe uh order it as well so let's shall we do that sure just make a comma order by and then let's put yeah descending like this so it actually is already by default but just so you know and the one thing that i will actually do when we do the pagination um is uh shall we do it here let's just see if this is working for now and then i'll show you what i mean so i'm just gonna paste this query in instead so that's the query we're going to be making this time i'm going to keep the rest the same save that and now if i go to forward slash dot netify functions get movies all right okay we need to restart the app so cancel that nullified dev okay injecting injecting injecting press enter press enter press enter uh okay so now great so that is all the information you need great we're getting all the movies in sci-fi so once again now all i'm gonna do let's get rid of some of this stuff that's our function great uh i haven't started anything yet so i don't need it i'm actually just going to copy most of the stuff i did here so i'm just going to copy all of that and put it in the section um so once again we need to import these up here and this time when we fetch the data i'm not gonna well let's actually just console.log what's coming back first console log response body um okay oh yeah sorry oops uh we need to get movies okay uh okay cool so now if we refresh um once again so it's getting the movies but it's getting it this many times right because we have one two three four however many sections there are that's how many times getting the data which um it's fine for now it's gonna give us the sci-fi movies each time but we're gonna change that so now great we're getting all the movies fantastic sci-fi movies done um okay let's actually maybe do a little bit of styling in here just the smallest amount so we want to get the response data movie by genre movies by genre of value so response body data movies by genre value right why is it undefined values sorry cool cool so that's what we want it's an array of objects amazing and let's set that as set movies and then pass through just pass through that so that's we're going to set that so now that's going to be set as movies uh const movies set oops set movies this is me just using use state uh equals use state and we're going to start with null so we've got our movies now so okay i'm gonna have to do some more mapping okay so we're gonna have the genre and then if movies exist so let's get our curly braces uh so if movies exist then we want to essentially um we could create a card here do you want to create a card no let's just make a card in here i'm just going to make a div for now and in this div hmm another title and then let's have actually okay fine i'm gonna call it uh okay let's give it a class name because we're gonna have to make them appear in line i'm gonna call it a uh movie section so it's actually the first signing we've done so far i'm gonna grab it dot movie section and i'm just gonna make it display flex for now so they don't stack up but they appear in a row and okay so if movies exist we want to show the movie section and then we're going to grab the movies i'm going to map oops we're gonna map um for each movie uh and i'm also gonna have an index actually for each movie that resists in our movies array i am going to ah let's just create a card element it's probably easier it will be a lot less messy so in the components i'm going to just create a card.js file and once again const card equals and then export default card like so and in here i'm just going to return for now a card okay so it's gonna look something like this and i'm just gonna pass through what should we pass through for each card okay we're gonna get the card itself let's give it a key of index and then uh we're gonna let's just pass through the whole movie object okay like so which means that in here i'm gonna just destructure the movie um and then in here let's just have like an h2 tag maybe even smaller let's make an h4 tag that has the movies title movie duration and then just a quick mp4 file so i would do this like so have a video um and the sauce is going to be sauce movie thump now uh and of course it's going to be a video so i need to say that type video mp4 file okay so i think for now this could be fine um obviously we have a lot of styling to do and for card from let's get it from the components cool we're in the component so that's all we need to do okay and great so now for action and anime and award-winning and children and family and everything we have this sci-fi movies cool we're getting somewhere now i just need to make sure that we get the right movies for each section so i'm gonna do so like this um okay here's our section and then it's to get movies we're gonna have to pass through the genre too right so i'm gonna have to open this up like so um method it's going to be post and the body jason stringify uh and i'm going gonna actually pass through into the body the genre like this um okay yeah that should be fine so we're gonna pass that through into the body into the get movies uh um serverless function so now i need to get event here okay i'm just gonna console.log event uh and show you what happens so now if i just refresh the page there we go so this is what is coming back this is my event uh and you will see get movies okay the body genre thriller okay so that's what we want we want to get this word right here so if i go event body um let's actually make it clearer that this is what is coming back once again we just need to refresh that page so now event body is genre romance great so obviously if we want to get genre we would have to go like that and i'm just going to say this is const genre we can even actually maybe neaten this up a little bit so i can go like const body equals um you can use jason pass event body so i'm just going to break it up a bit event body so that this means i could just book body genre and i'll get the genre um so we have the genre now and the next thing so instead of passing it through here i'm just gonna pass through the genre so i'm gonna do it like this genre um will that work let's let's just see okay yeah i need to wrap this again in jason stringify okay because we need to string a fire in order for it to work in the query so there we go so now for action i'm actually getting action films um this is pretty epic uh for award winning i'm getting the award-winning films for children and so on and so on and i'm actually getting the right films this is great okay this is so good and exactly where i want to be so i'm passing through the genre from the front end to my function by using a vent okay so i'm passing it through body to body i guess body to event yeah nice so let's just get rid of uh no we don't need to get rid of that let's keep everything as it is cool so we've got that um the last thing i want to show you before styling this up is how i would do pagination and how i would essentially get so say we only want like four um let's say we only want four genres to load and i want the rest to load if i put my i guess cursor at the bottom of the page so i would do so like this what should we do first let's do the pagination first so let's go back to the section in here and ah just like we did in the playground so get moves by genre so now i'm going to go back to the dots and you remember when we had options here well i'm going to want to get the page size and the page state so right here or wherever really i could just go options and then page size and let's say i want the page size to come back with two well i'll simply do that i can get two but then say the first page comes back with these two how do i get the next two well i could use page state to help me with this so i'm just going to put page state here and click there so now we have the next pages state okay so aqua and to upgrade are my uh two films that come back on page one and if i now put page state and use this uh sort of id if you will i get the next two and to get the next two well i just use this so pagination on the the lolomo is is really important and netflix you you might be watching netflix on your phone or your tv and your laptop and these are all very different the the ui has different needs on your phone you only see a few you know a few movies on a time at a time in your uh in your home screen whereas and if you open up netflix on your laptop you might see a whole lot also your you know your internet connection on your phone probably isn't going to be as stable as the broadband connection that your your tv might be plugged into so pagination allows us to to be flexible for these different these different uis that you might be using and so you can fetch from the device you can get just you know just a few movies at first like just the initial screen and then you can load as the user starts to scroll around you can load the ends of the rows you can load the the movies that are down at the bottom of the page later so it really is that easy and we're going to use this in our query so back in the [Music] get movies query right under here options i'm going to put page size and let's say six uh and for now i'm just going to put page state like so so let's see if that works let's go back here and we should only get six one two three four five six perfect now i'm going to have a button here and perhaps this maybe make these a little bit smaller because they're not very easy to work with at the moment so let's just do that now movie section card and let's maybe style the card i'm just going to put class name card for now i've got card and put width 100 pixels okay just just for now um and then of course the video itself with a hundred percent okay so i'm just going to put a quick button here in order for us to get the next six and the next six and next six for now on i'm aware this looks horrible but um i want to get all the heavy lifting out the way first before we start styling so back in this section um i'm literally just going to make a div that says sorry div and i'll give it the uh class name of more button and for now once again i'm just going to make it look horrible more button width 100 pixels height 100 pixels background color red so there's our if there's a button if i click this i want to get the next six so in our section um well i need to figure out a way to get the next page state right so how are we going to do this in the fetch data when i when i get the movie genre i also i need to set the um page state okay so i'm going to get the page state uh const page state set page state equals use state i want to start with null because we don't have one yet we started with null when we made the query so we've got that um and then i'm just gonna we don't need that now once again i'm just gonna console.log the response body all right just so we can see what is happening oops response body okay so here we go here's our data the movie genre page state so that is the next page state so you need to go data movies by genre page state data movies by genre page state so that is going to be our next page state um once again if like we refresh here some of them have them some of them don't because some of them don't have more than six movies in the section um that's fine okay so we have some for each of those sections so once again i need to set page genre and i'm literally just gonna get this so now i'm setting the page genre if i console log the page state oops what i say that set page state set page state so in fi console.log page state i should get the page state and what i can do is essentially say we've got our page state great and we want to get the next page state if we click the button right so on the more button on click oops i need to do that in the first tag um and let's actually make this let's just leave it for now okay actually okay on click well if we click it i want to do a few things right i want to set the page state again to page stage so if i click it again i'm going to set the page state which is then going to set it here which is then going to send it on here yeah so page state page state okay so we've got a page state at the moment we click it we want to set it up here so it sends it and then we want to fetch the data again to get the next two okay so hopefully that makes sense um this means that now in the get movies as well as getting the genre we're getting a page state the body page state and we need to put it here just like we were doing in the query remember we were just copy pasting the next one next one that's exactly what we are doing here so jason string if i page state okay i'm just going to check it out click great so we're getting the next six click well there's no more to get click click click awesome okay let's do the uh loading more genres first when we put our button here i wanted to know the next four and the next four but not get rid of the others okay so it's not gonna be pagination we're simply gonna be getting changing the limit this time so if you remember this time let's go to our app.js and of course we are getting the genres by passing through this query so i'm just going to show you in the playground again query get all references i only want four so i can do it by writing options if you want to refer to the docs that's fine uh i'm not going to or maybe i will actually options just to be sure options limit so that is what we want to use options limit let's save four so i only want four so now and i want to actually update this limits before 8 12 and so on so let's actually just copy that great so just like we did last time we're gonna have to uh change this limit so back in our app.js file um once again what i'm gonna do is actually const increment uh count or just increment genre increment is it an increment increment i'm just going to save it as that anyway genre increment and let's say 4. and then i'm actually going to so we've got this and then i'm going to create another div here um so let's just check that to work actually we should only get four so we're getting four now i'm going to create a div at the end here so div uh give it the class name of page and for now and then again in my styling width is going to be 100 height is going to be i don't know 300 pixels i'm going to give it a background color blue so we can see what we are doing so there we go now no apps yes so now if i'm gonna make this soft closing i'm gonna use on mouse enter this time so on mouse enter um and once again on mouse enter i want to uh set limit so i'm going to use state again const limit set limit and of course we we let's use use state inc genre increment because obviously we know that as four on mouse enter we want to set limit to whatever limit is plus the uh i guess in general increment okay so we're going to set that um let's just console.log limit for now see if it works all right oops that's true let's put that up here okay so each time i hover my mouse over s and d going up by four pretty cool so now we need to actually apply it and send that over so let's again um i'm gonna have to send that over as the body so method is going to be post and then body go away body this time i'm just going to send over the limit like this not the bossy body so i'm just going to send that over to the get genres so event and once again const we should call it limit equals json parse event body so now that we have the limit i can simply replace it here making sure to use json stringify because as we know from before we need to do that otherwise it won't work okay let's try so now i've got four okay that's not working why is that not working okay we are passing it through and app.js passing it through ah okay so setting the limit we need to fetch the data every time limit changes okay there we go ah we've done it okay so we've got eight now i've got 12 now i've got 16 now i've got 20 now and of course it's gonna keep incremented but we've run out of uh genres but that is pretty cool check it out again uh that was maybe a bit too fast i think i've made this too big uh but we've got four we now have eight we now have 12. we're now 16. we now have 20. [Music] um cool well this is looking good and of course if i click here we're getting more and more and we are getting uh we are looping we are looping we're getting more and so on okay so we have now essentially done all the heavy lifting of our app we have done pagination we've uh uh figured out a way to load more and more genres on our page let's get to starting it up cool okay so we've got our genres here um the first thing that i probably want to do is we're gonna have a navbar we're gonna have this heroes section but just in here so actually let's maybe create that nav bar here section because i definitely know i want those two components there so let's make them components nav rjs and then again uh [Music] what was it here section yes so const hero section and then i'm just gonna return something generic for now so return just nothing like so and export default hero section okay so there we go there's one on the nav bar and then i'm just gonna use command d to change this to left bar like so and of course i'm going to import each one of those import import uh command d heroes section and then command d here section great so we've got those in there we then also have the genres which are going to spin up a um let's actually put these in a container i think that'll probably make the most sense so i'm going to just put div class name container i'm just going to whack that inside here okay now inside this section i'm actually going to change this to an h2 tag which i'm also going to give it an id of a genre because i want to actually be able to navigate to each section if i wish by the header and then movie section call we have also a more button um which i'm going to start again more probably appropriately and then we have our card in which we have uh let's start this up maybe a little bit more so we've got the video i'm gonna give the video the class name of video 2 just like that and then on the video itself so yeah this is maybe not the source i want to put that on the video itself video class name video i'm also going to put controls um so we can control the video and auto play true so that it starts playing automatically um but we only want that if we hover over it so maybe let's leave it for now and then let's make it loop again maybe let's have that later on when we hover over it so that is everything we need let's maybe do some styling now so as you can see each of them have controls now let's go to our css file so the first thing we want to do is perhaps give our body the same color as netflix house so i'm going to use background color i'm just going to make it like a really dark color um that's quite a dark one and make sure that all the font is white so color white or if we want to make everything consistent uh one two three it's fine we just need three now font family um i'm just gonna use helvetica but please make uh feel free to use like whatever you wish of course helvetica new i quite like that one um so that is what i'm going to use so now if we go look at the body at least that's looking a little better now let's actually style each container okay um and i'm just going to give it a margin of 050 pixels more gin okay it's looking a little bit better margin um let's style the card more a little bit so let's make the card with 230 pixels uh i'm going to give each of them a border radius of 5 pixels too and let's say a margin of 2 pixels just space them out a tiny bit and then i'm also going to give them a transition so this is me actually making our cards i guess expand transition transform 500 position relative display oops display block cool so already that's looking much nicer [Music] now if i want to get rid of the controls on the video themselves what i can do let's give this border radius to border radius 5 pixels um i can do this i can get the video and i can use media controls in order to not show uh the controls at all because we had to put controls on the we just had to otherwise the the video wouldn't work but we can actually hide the controls now using display none okay so as you can see the controls are now gone now let's get to making the movies actually stick out a little bit when we hover over them so i'm going to go into the movie section and then uh when the movie section on focus i'm gonna get the card so any card in the movie section and also we're gonna get the movie section uh on hover then we need to effect the card we want to transform the card so if we're on focus of the movie section okay we want the card to transform translate minus 25 and then let's also give it a z index of one so it sticks out okay and then i'm also gonna add card focus so this is all stuff to essentially make um the movie cards you know like stick out when you hover over them and so on transform translate x 25 um so already you'll see they are spacing out we just need them to get bigger now and i could do that by grabbing the movie section card focus and then movie section we don't really have to i mean we're only using the card in one place um so maybe some of this is overkill but hey it's good too i guess just fool proof it right transform and this is where we make it uh scale up by 1.5 so we're now increasing its size by 1.5 1.5 also giving it a z index of one so it sticks out so now you'll see the movie's increasing in size they're great uh cool so this is looking good the next thing i want to do is actually hide all this information and only show it on hover and also add in hero image and style the button right so that is looking good um let's actually change the more button i'm just simply going to give it a height of 100 percent uh display flex give it some padding too i'm gonna put a icon in it okay so i already have an icon that i use quite often and that's what i'm going to use today so i actually could just cut this out and just do that um border radius 0 10 pixels 10 pixels zero cool so we've got our more button and if we hover over the more button i think let's change its color so more button hover let's make it ground color um rgb two five five two five five two five five zero point five great so now oh there it is okay so we need to style this maybe a little bit further um let's do the more information thing that i was talking about so back in the card i'm actually going to use state for this as well so i'm going to import use stage from react and then const is oops const is shown or set is shown so that's what i'm going to use to essentially figure out um if we're hovering if what what we want to show on hover i'm going to set it to false use state is false at the beginning from yeah you see from react okay now on the card um once again on mouse enter i just want to set is shown as true but on mouse leave i want to set shown is shown as false so it really is that easy on mouse leave and then i'm actually just going to create two different components okay so let's get rid of this so that is the div and i'm going to wrap this first one if is shown then i want to show this video okay so really simple just the thumbnail and then however if it's not shown so if it's not meant to be shown actually no if it's not shown i obviously want want to show the strip down but if it is shown so if i'm hovering over it well then i want auto play to be true so i wanted to start playing and i also want it to loop to keep looping the movie i also want to show an information box so perhaps it's maybe put this in a wrapper another wrapper just to finish that off um and then of course i i need to format all of this but i will do that at the very end really okay so i'm gonna also have a div with an information box oops let's say class name info box we will call it okay so there's our info box and when we hover over it well i'm just gonna have the movie title um i'm not gonna have the synopsis you can of course if you want i'm just gonna have the movie duration uh two so that'll be in minutes uh let's just leave it let's just have the movie title of course you are free to take this project and improve on it you have all the data at your disposal you can even like have a click through where you see uh more information of the movie if you wish so let's check that out okay cool so now if i hover over it i'm seeing the title as well otherwise i don't see the title yay so this is looking great and we have the button here of course too um and i'm definitely going to have to do some more styling because uh this i mean there's a lot of work to do so more button let's give it a height we have given it a height of 100 okay let's carry on so now that we have that let's actually uh style more stuff up so i'm also going to make a hero section if you remember in here in my return well i just want to get one movie really um i think i'm just gonna hard code one movie so let's actually make a random movie i think that'll be more fun so i'm just gonna use the get movies by genre query uh or just the yeah the get movies query so where do we do that well we do it in the section so i'm just going to once again just copy all of this go to the hero section and just paste it like so once again i'm making sure to import use state and use effect from react okay so this time we want to just get a let's just say we want to get a random movie um it means that we don't actually need to pass through a genre i'm just going to hard code her as sci-fi okay that is the movie that i want to get uh we are going to again wait for the movie we're gonna set the movie um we don't need this and in fact i'm just gonna get a random movie from these so instead of just sending the movie here i'm gonna get const movies equals this and instead i'm going to get the movie's length and pass it through sorry you use math random to multiply the movie's length to get a random number that is anywhere between the movies the array movies length and i'm going to wrap it in math floor to round it down so we get a full integer okay so we're now getting a full integer and then i need to get my movies array and pass through that random integer in order to get a random film from our array okay i hope that makes sense um i think it should right if it doesn't let me know and i could do an explainer but we are this is essentially just a random number all of that is either a zero or a one or two or three depending on how many movies we have in our movies array and i am passing that back through the movies array in these square brackets to get a random movie from our sci-fi films okay so now if we get movie set movie i'm going to call this set movie because you know we're just sending one equal use state we're of course starting with null um we don't really need page state here so maybe i'll just constant page state uh equals null let's see if that will well that wouldn't really work if i was passing it through um you know i'm just gonna set it anyway set page state even though this is sort of redundant i shouldn't really be doing this uh okay i think you don't know i'm just gonna set it as now whatever i'm sure this will work okay great so we're getting around the movie um yeah now if the movie exists then we want to let's make this class name of hero so we can style up the hero movie and then in here um once again what do we want to do here well i think why is it done that video and then the video let's give this a class name of um hero video so we can style it up let's make it muted obviously we have to pass through controls and auto play true because the movie on netflix does start auto playing so autoplay true and again let's make it look and the source for this is going to be well the movie uh thumbnail okay and we just need to get a type type video okay oops should we have a look great so there's a random movie from sci-fi there's another random movie from sci-fi another random move on sci-fi should we do action let's change the genre action there's a random movie there's a random movie and so on i prefer sci-fi though just because i've actually um formatted them a bit better sci-fi cool great now let's get some writing on top of it um fun yeah let's do it okay so we've got our video and under the video so just here i'm going to make a div that we're going to hold our uh you know the overlay of the information so info section i'm gonna call it and in it well i'm gonna have the uh let's call this hero blub class name hero blurb and the hero blurb is kind of the movie synopsis okay so we're gonna have that and we're gonna have another div that i'm gonna call the class name section and in the button section we are going to have a play button plus name uh so it's gonna be a button but i'm also gonna give it a class of play so that's two classes there and then a button with a class of more okay like that so that's two class names and one two for the price of one the play button i'm actually going to give it a span oops because i want to use an icon in here um and the word play essentially and it's the same for the more button so more will just have the word more info like that cool um so we need to obviously set uh start that up so it appears in here shall we do that now uh i'm actually going to do the nav bar as well just put all the information we need the navbar first before carrying on the nav bar is going to be super easy that's why i wanted to do it i'm going to give this little class name of bar like that and in it i'm gonna have an unordered list with list items so the first one is going to be the logo the second one is going to be the home page so it's going to have an href i should probably use link but whatever great so that's all we will need for the nav bar um let's finish our styling shall we so we've got our container let's do our navbar a height of let's say 50 pixels a width of 100 percent position sticky because we always want it to be at the top and top zero next let's do the hero section so the hero section again i want to have width 100 let's give it a margin top of minus 100 pixels and then i'm just gonna give it padding zero like that so that's what it should look like now and now let's start the info section it's going to go over the hero image so dot info section position i'm gonna have to give it a position absolute and then margin top uh i'm just going to put 30 percent of whatever the parent is margin um let's put 50 pixels from it and the parents left and give it an overall width of i don't know 600 pixels let's say so now got the movie section let's make the button section display flex uh and the button so anything with the class of button there was two buttons to each shared uh this class i'm gonna give it a border radius 10 pixels um a background color of one two three just for now uh let's make the um writing black uh and it's got a padding of uh 10 at the top and 20 at the sides and 10 at the bottom and margin of 3 pixels now if it's a play button um well yeah let's keep the background color white but if it's a more info button i want it to give it a background color that is slightly different so this is the color that we got from i lifted this from the site itself it's like a transparent color essentially so now in the hero section if it's got a more oh it's just more is it okay more and it's going to look like that okay great so we've done that um we have our card we have our videos we have our hero video so let's do our hero video dot hero and this could explain why with 100 float left top zero padding none i forgot about the hero video okay so now that looks better and actually if um this would make sense to make it around 30 percent and then i actually want to move the here section so margin top 100 pixels so i want it to be all the way up because i want the nav bar to go over it okay now let's do the navbar right so let's get the unordered list um let's just give it display flex list style i'm going to say none and then let's get the list item so each list item um well i'm just going to give it maybe like a little bit of margin okay so none from the top and 10 pixels from the side and none at the bottom that's the shorthand for writing that so now okay that looks a lot better and then we just need a title so the logo sorry so i can do that easily i'm just gonna actually get the info box itself so where's the info box we're going to style the info box we haven't styled the info box so let's do that maybe now um so the info box is basically what stores the information for the movie title when we hover over a movie card and well well i want this to perhaps be a hundred percent uh let's give it a padding though of 10 pixels um and then a background color that's the same as the background color of the page just in case there's like a movie or something under it and i'm also going to give it a box shadow so i've just literally taken that from the internet it's not even being applied where's the card info box okay so it's not even being applied there we go info box okay so now you can see a little bit more of a i'm a box shadow but please like i said feel free to mess around with these if you wish okay so that's a lot darker i think i prefer that one it also needs a z index so let's give it a z index to make sure that it's always i guess in front of everything said index five because i think we've got a lot of z indexes one now and finally let's add the logo and the icons so i'm going to do this in the public directory in the index.html file under the meta i'm just going to stick my script for front awesome please feel free to get your own font awesome is amazing you can have so many icons so this is what it looks like you just need to sign up and it is for free um i already have my icons that i want to take so i've got a play icon so i'm going to use this one right here and all i need to do is start using this icon and simply copy this like so and then in the uh let's go into the main section so the hero section i'm simply just going to paste it here and change this to be class name so so now there we go we got a little icon uh that is pretty fun um you can of course add way more icons i'm gonna do that too i think i'm gonna have a more info icon so more info oops we'll just put info and i quite like that one so that's the one i'm going to use uh start using this icon copy this once again and just stick it in my project it really is that easy uh so once again there we go again like please feel free to style these out a bit i will uh let's grab it by this once again i'm just going to go here and um right here probably just there i'm going to give it a margin nothing from the top maybe like three pixels from each side uh and nothing from the bottom i think that should be fine you can even do a little bit more i reckon maybe like five cool and i think that's looking better and let's just get rid of the uh styling so a um we need to put text decoration none and let's just make it white like so so now here i am going to once again get the logo and i'm going to use background image i'm going to use the url of now with our logo i've actually saved it again to my imager just to keep everything in one place really so if i go here i'm just gonna copy the link here and then paste it like so okay so there we have it uh i'm also gonna put background size uh 88 pixels let's give it some margin because i love giving things margin and of course maybe let's set its width to 88 pixels too so there we go uh we also have to give it a height of course width height 22 punch let's just carry on styling this for now so we've got the info section um i will leave that for now okay and there we have it we have finished our netflix clone i mean it looks great please feel free to style this much more than i have i didn't want this to be all about the styling i wanted you to be able to you know be able to create a project using data stacks using graphql learn how to do pagination learn how to you know set new limits and pass them through into your graphql queries so i hope you have learned that please do take these projects apply this knowledge that you have learnt in this video to anything really that you wish that is totally up to you i would absolutely love if you can share the final thing with me um please share your netflix clones or please show me what you have built using this knowledge as well i would absolutely love to see thanks so much again for coding with me and i hope to see you soon okay everyone thanks again and bye

Channel: Code with Ania Kubów

Views: 35,762

Rating: 4.9542856 out of 5

Keywords: react tutorial, netflix tutorial, netflix clone react, graphql tutorial, gql, cql, gql pagination, graphql pagination, graphql slicing, cassandra pagination, CQL pagination, netflix engineering, day in the life netflix, day in the life of a netflix engineer, netlify servlerless functions, netlify graphql, datastax graphql, datastax tutorial, ania kubow, graphql playground, learn to code, datastax astra, servleress, pagination, slicing, limit, reactjs course

Id: g8COh40v2jU

Length: 138min 24sec (8304 seconds)

Published: Thu May 27 2021