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
No comments:
Post a Comment