Learn GraphCMS and GraphQL by building a Next.js Disney+ Clone

hello everyone so i'm super excited for this video in this video we're going to learn how to build a disney clone using a content management system but not just any content management system one that is based on graph qr okay so a lot to learn in this video we're going to learn how to create schemas and models and then we're going to use that in order to upload data such as mp4 files and jpeg files and strings onto our content management system and then we're going to learn how to retrieve that data back using queries and mutations okay so queries retrieve all data and mutations to edit delete and create a new data too okay so this is what the finished product will look like by the end as you can see there is a page like a home page where you can view all the videos based on category and if you click through into a card you will see the individual item and if you click play a video will appear there's a lot happening behind the scenes there is a mutation happening here but don't worry we'll cover that as we go wonderful now the only prerequisites that i ask of you before starting this course is to have a basic understanding of javascript html css and react and whilst next year s is nice it is not necessary for this video so it is going to be a long one but loads to learn so i hope you're super excited i can't wait to get going let's get to it as always please do give me that sub if you do like my channel as this really is the way this channel can grow and i can continue to create free content for everyone here okay so let's get to it the first thing i do is obviously just log in to my graph cms now i've already signed in but if you haven't used this before then please do take the time to sign up just pause here and do so until you see this dashboard right here so now the first thing i'm going to do is just create a new project i'm going to start off with a blank project as i want to be doing this completely from scratch of course if you ever want to come back here there are plenty of templates for you to make your life easier too so i'm just going to click here and what shall we call this i'm going to call this disney clown a clone of disney for educational purposes just in case i get sued for educational purposes great and i'm just going to click europe because that is where i am and create a project so that should get my project set up in order for me to start working on my schema okay first off i'm just going to select free forever so i'm just going to select that plan and i'm going to select invite later okay great so here we are on the dashboard i mean i know what to do the first thing we're going to do is set up some schema the next thing we're going to do is create some content and then we're going to make our api accessible so that we can use it in our project so let's go ahead and do that we will be using the interactive playground as well i'm going to show you how to do that so we're going to cover all these four points essentially so just in here here is the first thing we're going to do is going to create some schema now the schema that i want to make i think the first thing we should make is the video as that's the first thing we need to create really so i'm just going to go ahead and create a model and i'm just gonna call it video like so i'm gonna let these auto populate because i'm happy with that this is looking great plural of videos videos and the apa id that looks good to me too we can put a description but i'm not going to for now if you are using this in teams then perhaps that is wise as it does make your work more readable to everyone else and just create okay so now that we are here perhaps just click don't show again all i'm going to do is create my video model so what do we want our video to have well i wanted to have a title so that is going to be a single line text i'm going to put title uh again description i don't really want this and do we want to allow multiple values no we don't want any of that and then we can also put make this field required okay so that we have to put a title in for our video so that's just what i'm going to select and this looks good and i'm just going to click create okay so i'm going to do this first and then we'll talk through a little bit so i've just added a title to my video model the next thing i want to do is put a description so maybe let's make this a multi-line text let's call this description and then shall we make this required let's make it required so i'm saying that anytime i want to create a video in my uh i guess content manager it has a title and i have to put in a description i also have to put in an mp4 file right because that is the main crux of a video so i'm actually going to go to asset picker and let's call this an mp4 and then let's also make this a required field and just click create great so this is looking good now what else do i want i can also have a boolean so i can actually select a boolean of if this video has been seen or not so i'm just going to put to scene and this does not need to be required i'm just going to put that as optional and the next thing we need to do is have a slug for those of you who don't know what a slug is a slug is simply a uh way a url identifier okay so that if we visit the slug then we will visit the uh video itself so let's call this slug like so and again i'm gonna make it required and it's already set as unique that is good and wonderful i'm not sure if we do need to do anything else here we've got the display name we've got this we can also have generate slug from template let's just have that and let's generate the slug based on the title okay that we give the video so that is the syntax for doing that i can of course generate this by whatever i wish i'm choosing to generate it by the title and it's gonna be lower case okay and this is looking good and create great i need to do two more things so i also want to add a thumbnail so that is going to be an image so once again i'm just going to select the asset picker and i'm going to make it a thumbnail like so spelling thumbnail correctly and i am going to say that this is not required and i'm just going to create and the last thing i want to do is actually add some tags to this too so i'm just going to select this so i can essentially put tags to the video so that you know like on uh disney plus you probably have a video that belongs to family comedy and so on so that's exactly what i want to do let's call this tags making sure that it's capital and this time well i want to allow this to have multiple values so i'm just going to select this and create okay great so that is our video model wonderful okay so our video model's gonna have a title description mp4 uh we're gonna allow it to be seen or not seen it's also gonna generate a slug for us based on the title and then we're also gonna request a thumbnail to add it to the video and some tags wonderful okay we have to actually reference this but i think let's continue first because that is something i'm going to do last i essentially want to reference it to a specific user or platform but let's get to creating the usual platform first so we've got the video the next thing i want to do is create a unique platform okay so just imagine that each platform has its specific id because you want to know exactly what videos have been seen on that platform so say it's the smith's family's platform they're going to watch some videos if it's someone else's platform they're going to watch some different videos and so on so let's go ahead and do that so once again i'm creating a new model so we've got a video model and our platform model i'm just gonna click that like so okay and what do we want in our platform model well we could have a title sure let's give it a title just so we can sort of identify you know as the smith's families or so on and let's make this required so make required field i'm also going to generate a slug for it so once again a slug the display name is going to be a slug and then again let's make this required but also set field is unique and great let's go ahead and create that one last thing each platform is going to consist of multiple videos however i want to reference this video okay i don't want to be the video itself i want to reference the video so to make a reference i'm just going to show you how to do that i'm just going to click click here sorry and i'm going to say that i want to define the relationship allow multiple models to be referenced so this one right here and i'm going to the model i want to reference is the video model so just like so it's going to be a two-way reference with one too many like so okay great so one too many that looks good allow multiple videos per platform but don't allow multiple platforms per video okay so that makes sense one platform has multiple videos not the other way around and finally okay so this looks good let's continue let's give it a display name so i'm just going to call this video reference like so and give it the ap id of video reference and wonderful now we're gonna leave as it is and click create okay great so this is looking good we've got the platform we have the video the last thing i'm gonna do is just create accounts so let's go ahead and do this again i'm going to call i'm going to create a model for an account just like so and click create model and what would we like our account models look like well i want it to have a username so that each account has a username which is going to be a required field to make required and that's about it the next thing that i'm going to do is want an avatar because each account comes with this little picture so let's call this avatar just like so and okay this is looking good do we want to allow multiple essence no so let's just create that okay so there we go and one last thing each account is of course going to be linked with you guessed it a platform so let's do that we want the model to reference platform and it's going to be a one-way reference one-two-one and we don't want to allow multiple platforms per account we just want it as it is so it's going to be a one-to-one relationship and continue create wonderful okay so i think that is all we need to get started in putting our data and assets into this platform okay so we've created our models we've defined the relationships between the models now let's get to using what we have built so let's get to it so we've completed this part the schema let's move down content wonderful okay so now that we have done that i'm just going to create my first item so let's make this a video i'm just going to select here and ta-da so everything that we created in the first part so in the schema part you will see i'm being asked for a title which is required a description which is required an mp4 file which is required the brilliant associated with an account or a platform and then to create a slug which is auto generated and add some tags as well as a thumbnail that is crazy i've literally just built this and it's in front of my face i'm being asked to put in this data and only this data nothing else so let's do it what should we call my first film let's call it jaws a film about a shark let's maybe make a little bit longer just we are so we have something to work with a film about shark uh this is a classic film that is pretty scary at times and just great in other times okay i mean i'm not i'm not a copywriter don't hire me as a copywriter clearly okay so we've got a title a description let's add an existing mp4 so i'm just going to actually upload the trailer because i don't want to be here forever so all i'm going to do is drag it in from my downloads i'm probably going to speed this up because you don't really want to watch this so blue great and now seeing i'm actually gonna just leave it i'm not gonna leave it true or false i'm just gonna leave it as null the slug has been generated from the title for me as we requested and i'm just gonna add a thumbnail so i'm just going to upload a thumbnail for this one that i have also just downloaded and just click upload okay so there we go and tags what are we gonna put i'm gonna put classic what else can we do we can put thriller i'm not sure this is a disney's one but just bear with me i'm sure it's fine let's also do is it family that's not really family is it let's put scary or let's put uh drama and let's put animals okay i'm just gonna try to do four for each again probably shouldn't work at disney plus because these tags don't really make sense but i'm liking them anyway okay so hopefully you get the gist okay and then once we have everything we can we also do need to link this to a platform we don't have one yet so i can actually choose to create a new platform from here so let's go ahead and do that let's call this platform smith's family so it's whatever they chose to call this platform when they signed up to disney and then let's generate a slug perhaps let's make it random this time um let's go ahead and just make it quite random so this is something that let's say we just generated okay and wonderful so this is looking good and then of course um we would have to add video references so this is essentially saying which videos the family can see for example maybe they're in a different region like europe that's different to america and i know that netflix doesn't allow certain videos on certain networks so so we would then have to add an existing document but we haven't published this one yet so i'm just going to save and publish this everything that we've made so far and great so now our video is published and if we go to platforms oops no we need to publish this too so we just published the platform now we need to publish this and let's publish all of these as well so everything is now published great and if we go into the platform let's edit the platform and wonderful so we have a video that is referenced to as well okay and if we edit it you will see it's jaws great wonderful and now let's just create an account so i'm going to create an account my username for the smith family for some reason i'm called anya smith so maybe let's do that ania smith oh one that's the username and then let's give me an avatar so i'm just going to upload an image of myself there we go and upload great so username and a headshot and which platform do i want to associate myself with well i want to associate myself with the smith family so let's go ahead and do that and save and publish great okay so ania smith part of the smith family can see jaws okay because that is what we have done we've linked all this up jaws is available on the smith family platform that i as anya smith have access to wonderful so ideally we would have a lot of data here however i don't want this to be all about data uploading um so i'm gonna upload four videos just to get to the coding part and then at the end i'll show you what the platform looks like with a bunch of other data but like i said i don't want you to sit here while i just upload uh you know dozens of videos so let's just do four mulan a disney classic in which a girl or young woman goes to fight for china now um once again let's add this to an existing platform so the smith's family platform they can watch mulan let's put in an existing mp4 so i'm going to upload one two here of the mulan trailer once again great so we've got the mp4 trailer c naught c and i'm gonna leave that as blank the slug has been generated for me from the title so it's really good or lowercase and let's add a thumbnail so once again i'm simply going to drag that in from my downloads and then tags i'm going to put classic here i do think it's a classic i'm also going to put family i'm also going to put drama and i'm also going to put disney because that is a disney classic so i'm going to put disney in there too okay great and save and publish let me just check that we've done all of this okay save and publish select all save and publish correct okay two two more that we're going to make english create item this time moana a story i don't really know the story very well of a young girl who meets a demi god and saves the uh world okay i'm not sure if she saved the world but you know what i uh i just needed something she saved something okay add an existing platform once again the smith family platform is going to be linked to this they can watch moana existing mp4 let's upload moana official trailer so there we go and once again i'm going to speed this up great and add an existing thumbnail so i'm just going to select that one that looks good and tags once again let's put family this is a disney film so once again i'm gonna put disney it's not like marvel or anything or star wars uh let's also put what can we put here we need some more tags comedy and let's also have i don't know it's quite hard to think of these it's not really a drama adventure great so we have all of these filled in and what's associated with a platform great save and publish select all save and publish okay wonderful one last one i promise uh four is really not enough but you'll get the gist of what we are doing so eternals we're gonna have a marvel one i don't really know what this is about either i just saw it when i was googling a marvel film with i think it's angelina jolie so i'm gonna put that coming um this is a great film everyone should see it immediately i mean no one's seen that i think it's it's not really even out yet okay great so we have that once again add an existing platform the smith's family can see this you could replace this with like europe or something you know and then have associated accounts with europe that have users if you want if you want to add in that extra layer if you really are as big as disney uh but this is just to give you an example of what you can do add an existing mp4 okay so i'm just going to upload and just upload that mp4 okay great and i think we're nearly done once again let's generate a slug and an existing thumbnail so i'm just going to upload one again very last one now so just there we go upload and the tags we're going to have with this well this is marvel and then let's also have family i'm going to have adventure again and let's maybe have action [Music] or let's put thriller just because i want to have multiple tags okay so save and publish and we are done let's carry on great so we have created our schema we've then done the content parts we've used our content manager to upload assets and data you know mp4 files and jpegs and next we can actually see all the assets that we have so there we go you can see all the images and the mp4s this is looking cool and then let's have a play around in our api playground to see if our data actually comes back to us now for those of you who aren't familiar with graphql i'm going to show you how it works in a very crash course sort of way so let's do it so to us disposal we actually have the docs so this has been generated based on the schema we wrote okay this is really clever so if you look here well you will recognize videos okay and each video so we can query for all the videos so if you look here let's just go a step back actually here is what i can do i can query for things so in other words i can search for things in my data using the query word here or i can add stuff or edit stuff or delete stuff using the mutation so i'm going to choose to query and this is really helpful these dots have been essentially generated for us so if i want to query for videos i'm simply going to write query open up some curly braces and if i want to search for videos okay if i want to search for all the videos i can do so just like this and then if i search for all the videos well what do i want to come back i want a video to come back and this video is made up of we can have an id we can also choose for these extra things to come back so obviously we added the title we also added a description we also added scene we also added a slug and we also added text but look at all the stuff we didn't add so created by updated by published thumbnail we did add um so let's have a thumbnail thumbnail actually is part of an asset so these okay let's go back step one again so i didn't add an id but this one's been generated for me which has the type of id we added a title which was a string we did choose for that to be a string same as the description a string scene was a boolean that's right slug was a string again a required string hence the uh i guess what's it called exclamation point and the tagged with strings in an array so that's also defined for us that's what's going to come back but all these extra things such as created at updated that's that's extra stuff that we can get so i'm just going to go for it let's get created at let's see what that returns and then also a thumbnail now a thumbnail is actually an asset okay because we did choose an asset and the asset comes with all of this as well so i could just get the file name i could also get a height and width of the asset which is quite cool and then i can also get the url so that is one of the things i wanted so now if i run this this is what returns so here is my data here are all the videos let's have a look at the first object in here so that is one object you will see that the film jewels or the video drawers well it gave me the timestamp i created this it also generated an id for me so i can pick it out there's the title i gave it that's the description i gave it we didn't set scene so that is null is this slug that got generated for us the tags as an array of strings and the thumbnail url so that i can get the thumbnail wonderful and of course we have four of these objects because we made four videos so that is how you would use a query to return all the data that we have okay so maybe let's save this query we can of course like i said get more we can get the size of the or you can get all of that one thing we did forget is to get the mp4 actually and what does the mp4 come with let's see let's go back there's the mp4 it's an asset that comes with once again i think i just want the url yeah let's just grab the url so there we go so this is what i want to save let's save this query um okay so here we go those are my queries and then let's make a new query so once again query and this time i just want one video so let's go back to here let's look at queries and i just want one video so here we go video so now i need to open up these and i need to put where and for where i need to get the unique identifier video so if i want let's just say i want the eternals eternals have this id so i'm going to grab that string i'm going to paste it here okay and then what do i want to return well i can also do it by slug by the way i didn't have to do id that's what the documentation told me and then video what do i want to return well i can actually just return the same things so if i look at this query and i just take all of these and whack them in here and run this oops why is that wrong ah okay we wrote this incorrectly where i'm going to open up some curly braces and id you have to give the id like so and now run it okay and there we go what is returned back to us is just the one video the eternals video with all the information that we requested so all of this okay and i can also do it by slug which is probably a lot more memorable so slug and then i'm just gonna put the string of eternals a video no eternals how did i spell it slug see what this slug is for eternals tunnels and there we go wonderful so we have created some schema we've added content based on the schema we defined we have then had a look at all the assets and then we've played around in the playground to check if our queries work and we've saved our queries so we can use them when we start building our project so now i think it's time to start building our project let's do it okay so to do this i am going to make a next js app so to do this i'm just going to get up my terminal i'm going to go into webstorm projects and i'm just going to use the next command which is next gs next.js create app just making sure i get the right command because i can never remember it okay this one right here npx create next app and let's call this disney club and just click enter okay so that is now our work it's going to essentially return back with a project that's been configured for us with a template as well oops we need to install the latest so let's just go ahead and do that okay great so now let's get up web store or whatever code editor or id you are using i'm just gonna get it up i'm just going to open the disney clown project okay wonderful okay so this is the command that i need to start this i'm going to copy that get rid of that get up the terminal and just use npm run dev and now i'm going to visit here and wonderful so this is the boiler plate that it comes with i don't really like it we can obviously get rid of all of this uh perhaps let's do that okay i'm just gonna keep this running down here and actually no let's just make it smaller we don't need it now so now it comes with a bunch of stuff a bunch of stuff that i don't really want so let's go ahead and delete it in the pages in the index js file i'm just going to get rid of all of this so i'm literally just going to get all of this and delete it okay so now we just have one div let's put hello to see if this has worked but i'm pretty sure it has and then we don't need any of these for now even though we might need the next image later on so i'm just going to delete all of these okay so that is now gone in the app.js file the only file i want to keep for styling is this one we're not going to have that much styling so i think that's enough and i'm just going to delete this file right here okay so just the one style sheet now and we don't really need these either so i'm going to delete this uh let's keep the favicon why not so in here we've got a fresh start and in here we've got a fresh start too i'm just going to rename this just because this is i prefer functional expressions okay so that is looking good and index.js oops oh so we need to export default my app okay and just in here too so i'm just gonna once again change this to a functional expression so const it's just my preference you could have kept it as it is export to default home wonderful okay so now there we go we see the word hello and i'm just going to inspect this so we can see a little bit better what is going on okay so now that we have done that i think the first thing we should do is worry about getting our data and see if our data is coming in here correctly before we do anything else so let's do that okay so the first thing i'm going to do is uh get the data so i'm going to do this like so the first thing that we need is actually well because i will be making graphql queries i need to import the gql tag to allow us to write in uh essentially like gql language and format and the graph ql client from a package called graph request if i can only spell things correctly request okay graphql request sorry that's the correct package and this is what it looks like so this is what we need okay and it comes with a bunch of really useful things if you want to have a look at it then please do essentially we are going to be using this syntax to request our data and pass through queries into it as well so let's do it let's go ahead and install this package so we can use it so let's get our terminal up i'm just going to make a new uh tab and do npmi for install graphql request okay so there we go that's installing i'm pretty sure that's the only package we need but we'll see okay so now that we've done that i need to this is the syntax for getting static props we're going to get static props we're not going to get server side props so get static props equals maybe let's make this bigger i don't know if you can read it get static procs equals and this is going to be an async function um right so to make a essentially what if i want to get this data right here well i would need to visit this url and i'd also need a token okay so because we are in here and this essentially we don't need a token for this because we're signed in if i was just to visit this url without a token it wouldn't let me access this data okay so let's get a token so all i'm going to do is go to settings i need to create a token so i'm just going to click here and what should we call this anya dev token of course please feel free to call this whatever you wish and then yes publish so create like so okay tunnels and there we go wonderful so now that we have that and i have access to the published stuff i'm just going to create copy this because that is a token that we need and i am just going to save it so for now i'm actually just going to put it as a string here we should really save this to a nv file but let's just check it works here first of course i will be deleting this so please don't go ahead and use it it won't work by the time i publish this so exporting get okay and then i'm going to use the graphql client so this is how you would use it i've just gotten this from the documentation of graphql requests the npm page that i showed you new graphql client like so and i'm just going to pass in so we're going to pass a url as well as a header so we can communicate with our data so headers i'm going to pass through the header and this is our token i'm just going to cut that and work it in here of course let's just try to keep everything consistent okay so maybe let's make this a little bit smaller so you can see well it's a long token okay so i've got to crop graphql client uh by making a new graphql client so i've imported graph your client from graphql request i made a new one and i stored its graphql client i made a new one by passing in a url and some headers so we can communicate with that database and as i said this is the url that we need to communicate with our database so let's go back to here this is it so i'm going to grab that if you need this with a header so we can communicate with our database so let's save that as well hopefully you see how this works so let's save this as console url equals once again just make a string okay why am i getting curly braces oops okay okay great so now we should be able to communicate with our database but let's try it out so what's the query we were making well const let's just call it query for now so i'm going to use the gql tag so i can literally use the uh syntax for queries however we want to get all the videos don't we so i'm going to use this i'm just going to copy that that we made i'm just going to paste it in here okay so all i've done okay so there we go if you want to format it a little bit better then please do i will be doing this all later i don't want to focus on it too much for now but there we have it so that is our query making sure that this is all inside get static props okay so why is this not closed off okay so here is get static props and inside we are creating a new graphql token we're passing through the url and the header so we can communicate with our database great and we're saving it as graphql client and then we also have a query okay so that is good we've got a query the next thing we need to do is uh actually get our data so we get our data so i'm going to save it as let's save it as just data for now and then i'm going to use a weight graphql client let's make this a small g just to differentiate a weight graphql client request so this is exactly what i showed you here this core way of requesting data okay i'm going to pass through a url password query and then get our data like so okay request and then i'm actually going to pass through the query because we don't need to do any of this other stuff because we've sort of already done it there so just request the query like so so we're going to get these data and then once the data comes back to us well actually maybe let's just console log data see what comes back see if it works huh module not found okay maybe let's stop this from running and just install all the packages again okay and just on the project ah okay it's strange this apparently solves the issue let's try it out okay once again let's see if that's worked npm install and save graphql as a dependency okay great so this is looking good we did not add a return so let's go ahead and do that i thought it could just work with me consoling the data but it won't let's return some data well perhaps let's just try without any of this hard stuff let's just take let's just see if it works on these so closing tag closing tag so all i'm gonna do is return uh and let's return props okay so i wanna return the videos um and i think okay let's have a look at the response here so if i make this query this will return data and that has videos so i need to go data videos so let's just try that const videos equals data dot videos so it's gonna return an array of videos and then let's just console log out videos so we can see what is being returned so if i then pass through videos i'm gonna do structure videos like so and go console log videos i should get all the videos coming back to me so let's check it out and great okay so we have all four of the videos this is looking good i'm just going to replace my full query again so we can get all the data so just here i'm just going to replace it back to what it was and tab it out okay so this is now working brilliantly we're getting our data uh so now that's worked i'm actually i'm gonna put this in a emv file i think it's always good to check in here first so just in the root of my project i'm gonna create a new file called.env and then i'm just going to grab my token and what shall we call this maybe let's call it uh graph cms again and then i'm just going to save it and then also we need the end point so let's just save this as end endpoint and then let's grab the endpoint put it in our env file and then let's replace it in the index file so to access this i need to write process env that's how we access env variables and i'm going to put endpoint exactly how i spelled it in the env file and then the same for this process env and what do we call this oh yes that was it graph cms token thank you webstorm okay so hopefully that should work and we didn't break anything let's rerun this because we need to inject the variables okay and there we go everything is fine let's carry on so we're getting the data we're getting all the data that we need for our uh i guess home page the next thing i want to do is create a individual page so this is how you would do so in next.js i'm actually going to create a folder um let's make it on the same level as api so pages so in pages yeah that's correct okay and then i'm going to make a new directory called video and then i'm going to create a new file and then it's just going to say slug dot js so just like so add okay so in here we're essentially going to build a another query we're going to write another query but this time to get one fill based on the slug okay so that is what we need uh let's actually just put some boilerplate in here so all i'm going to do is what should we call this let's call it video and export default video just like so and then just let's return for now let's just return it div it really doesn't matter okay cool now to the fun part uh once again i'm gonna have to use these two things so let's copy that and just whack them in there and then this time i need to get service side props okay because we need to get the slug so export const get server side props okay this is also going to be an async function and then we're going to have to pass through the page context okay so this is what the page context does i think it's always worth showing you instead of explaining this so if i want to get the page slug well actually we just let's console console log page context so if i console the page context and then i visit uh so we made a directory called video didn't we and then the slug that we used was it let's just do drawers because i remember how to spell that uh we need to do return always get all the time actually maybe it would have worked anyway without return let's look in the terminal ah okay so it did work so we just console log the page context and that's what's returning to us this is all of the page context all of this stuff right here but we need to get the page context query slug see query slug so i want the query slug okay that's what i want and i'm going to save this as the page slug so if i console log page slug now let's visit a different one what else do we have we had moana click enter and then we go back to here and look in the terminal moana has been returned back to us we are getting the page select we are essentially getting this uh okay so that works we're getting the page slug now let's get to using the page slicks we can pass it into our query so we can get the data back hopefully that makes sense let's do it so once again i'm actually going to have to get the url so const url in fact i'm actually just going to copy it from here so we get the url and then also once again i'm just going to copy this from here because this is how we interact with our database and then we've got the slug the next thing we need is the query so const query equals and i'm going to use the gql tag that we imported so we can write like gql and i'm just going to get this whole query right here and paste it but of course we need to um replace some of these things so i'm going to show you how to do that now so in the query part i'm just going to maybe tab this out it's more a little ball so if i want to replace this i can't simply go you know page slug it won't work we need to pass it through as a variable so to do this i'm going to open up some uh parenthesis and page slug it's going to be a string okay that is required and then i'm going to pass through the slug as page slug but this comes from a variable so i need to put const variables page slug so if i was to show you how this goes it goes oh we assigned pages like a value then it goes here or what page slug is now a variable and then when we do this graph qr client request so once again this is just from the npm page documentation i'm going to pass you a query which is the query wrote along with the variables okay so that's how you do it that's how you pass through the variables into this query uh and then await this and then let's save this as data cool so now once again this data data videos that's why i need to do data videos to get my videos so what should we call this const video singular data video because that's what i was getting yeah data video okay good i thought i was going crazy though okay data video cool so we're getting our video back and now we need to return it so to do this i'm just gonna go return props video we can return different things as well but for now we just have videos so we've only queried for the videos and once again i'm going to pass through a video it's a destruction prop and it's console of the video to see if everything we want returns back to us so now here ta-da we get moana and if i change it to jaws we get jaws and if i change this to mulan we get mulan so we now have enough data to populate this individual page too wonderful okay so i think now perhaps it's time to actually start building up front and visually with the data that we have so let's do it okay so which page shall we start with let's start with the main page so this is going to be a bunch of jsx work but jsx by the way so the first thing that i'm going to do is i should just get rid of all this and i'm just going to maybe add some more spaces so we can see things a little bit better so the first thing that i'm going to do is actually just create a div and let's just call it app so we're just going to give it the standard name of app so we can style this later on and how do we want to style our app well first of all let's get some details in here and then probably let's get to styling so the first thing so we're gonna have a big video so let's maybe make a big a div um and let's call it let's also give it the class name of main video and in it let's put an image so i'm just going to open up my image uh let's make a closing tag and then in here the source of my image is going to be well we just want a random video from our videos right so perhaps we could do that should we do that now yeah okay let's do that now so i'm going to write a function here that's going to help us do this it's going to help us get a random video so i'm simply going to go const i'm going to write a function const random video i'm just not in here here and then whatever i pass through into here which is going to be all the videos uh i am going to essentially what i'm going to do is check the videos or use return then use math random multiplied by the videos length of course you've got loads of videos this probably isn't the word best way to do it but we're not working with huge volumes here and then i'm going to use math floor to round this down to the nearest uh integer okay so that is what i'm doing so the math roundable math random multiply the number will give me anything up to just under the number itself so if i round that down it will literally come back with a zero a one a two or a three and i'm going to pass that back into my videos array to bring back a random video okay so that's what's being returned uh so now if i use for example math math video ran random video and passed through the videos so all the videos okay so whatever returns back whichever video turns back i'm gonna get its thumbnail and i'm gonna get the thumbnail url so that gets displayed okay and of course we need some alternate alternative text because we're not monsters and we need to make this uh accessible to everyone so i'm just going to get these videos titled okay that's going to be our alternative text great and this needs to be closing tag here not up here okay so this is looking good um of course okay let's check that out let's see if that works i'm just gonna go back on the main page and wonderful so the random film that got returned back to us is eternal and if i click it again it's a random film each time okay great so that is looking good i don't know why it's shouting at me but we'll figure that out later okay so let's carry on so we've got a random image the next thing i want to do is actually create a feed so i'm going to do that uh let's okay let's make a div and then let's give it the class name of feed or video feed and in the root of my project i'm going to create a new directory called components and then in my components i'm going to create a new javascript file i'm going to call this section okay so i'm creating essentially a section component so const section and then export default section just like so and what's it going to return well it's going to return something that looks like a section so let's do that now so what it's going to return is i'm just going to make something for now i'm going to return a div that has a h3 tag that essentially is going to just display a genre okay um and then a video for now let's just do one genre and see how that works so i'm going to pass through a genre like so and i'm going to go back here and we need to decide what genres are going to have so let's import import section from components section okay thank you for that very much uh and then here so i'm going to use the component i just made like so and then i'm going to pass through the genre uh and what should the first genre be what genres did we actually make we have like family i remember that one so perhaps maybe let's start with that okay family i know is a genre so let's put that in here let's have one two three four five six uh family is a genre we also have you know star wars uh disney what else do they have national geographic um marvel of course pixar and then let's have some more of these generic ones we've got family uh what else do we have we had thriller i think and we had classic okay oh oops we missed spelt section this needs to be a capital yes okay so we're importing this section or passing through a genre as the section and then we're just gonna show the genre okay so there we go ta-da is just showing up as uh header ties at the moment let's actually start this up because it's really big and it's a bit pixelated and i'm not really enjoying looking at it so i'm just gonna start this up a little bit before we move on that is called the main video so let's do some styling so in here um what do we can delete this and i'm just going to go main video and how should we style it well the width we do want to be 100 view width and then the height let's say it's going to be like 30 viewport height and then any overflow is gonna be hidden and then let's also give it some margin at the bottom so there's a bit of space between the image and when the other films start and also position relative oops over flow hidden okay so that's what it's going to look like for now i mean i'm happy with that uh i think it's fine we'll obviously like readjust all this a little bit later and position it maybe a little bit better the thumbnails i chose weren't great but you know what can you do okay so we've got these let's carry on actually while we're here let's also maybe give the app some padding so i'm just gonna grab the app uh actually just give it some margin 20 pixels just like so and then the whole body well the whole body i actually want to have a different color so i'm going to keep the fonts like this i really don't mind but background color um i'm actually going to give it a hex code that i found earlier a one three one five one f okay so that's what i want and all the text from now on is going to be white i feel like this isn't in okay so that's outside of that i want it to be inside the app okay so we're passing through the sections genres however i also want to pass through the videos so i want to pass through videos into the genre of uh family however i want to filter these videos i just i don't want to just pass you all the videos so i'm going to do so by filtering out the ones i want so i'm just going to do so here so const filter const filter videos equals i'm going to pass through videos and i'm also going to pass through the genre that we want to filter by and then i'm going to return so this is how you filter i'm going to grab the videos array this is an array of videos i'm going to filter each video okay so whatever so each item in the video array i'm going to look at each item i'm going to look at that items tags and if those tags because the tags are an array remember then array of four things and if that includes if that array includes the genre we pass through then return the videos so now if i do filter videos and pass through obviously the videos videos and then also pass through the genre of family i can't remember how we spelt it but i think that was fine let's see family so that should work so let's now check videos okay so now let's check the videos let's see if this has worked i'm just going to console log videos and see if the ones with family have been filtered out oops videos okay and they have i've got three that have the tag of family wonderful this is looking great i'm getting about the videos so now now that that's worked i'm actually going to make some videos make some little video cards so once again in the components i'm just going to create a new component let's call it a video or should we call it a card whatever you want to call it maybe let's call it a card card js add and then in this section i'm actually just going to copy this paste that and then place this with card and replace this with card and into the card well what do we want to pass through well i actually just want to pass through the what do we need a thumbnail to be fair that's all we really need so thumb now okay and what i want to return is it doesn't need to be this long i just want to return an image actually that has uh the source of thumbnail url okay and then also as an alternative the thumb does the thumbnail have a title i hope so otherwise we don't have anything to put for the alternative text we'll have a look in a bit okay i know we didn't add one but perhaps it comes with one if that makes sense with all the ones that we got added and let's style the card in a specific way so card and let's style it up so i'm just going to move this all up a little bit i'm going to grab the card and then how do we want to style the card well i'm going to make it responsive so i'm going to say that the card has a width of 20 and a height of auto based on the uh thumbnail itself let's actually also give it a border radius to sort of round it off so border radius uh let's say five percent and a margin around it so they're not all squashed together and then let's also give it a little bit of a drop shadow rub shadow drop shadow 5 pixels 5 pixels 10 pixels and make the color just black okay so now let's go so we've got a card let's get to using our card in this section so i'm going to import card from it's in the same place so car js okay so in this section what do we want to do well i think we should map over all the videos that come back right so maybe let's get rid of well we can let's do let's just keep that for now um we're gonna have to style this up so i'm just gonna give this the class name section for now because we're going to want the cards to uh appear next to each other and not unblock so you've got an h3 tag to let us know which genre is and then i'm going to have a video feed again okay so i'm just going to give this the styling of video feed because we have we've used it okay so i'm just going to give this the class name of video feed um just so we can see each video and what i'm going to do is i'm going to grab all the videos and i'm going to use map and for each video in our videos array i want to well essentially i want to link the card itself so let's link the card i need to give this a key an individual key so i'm just going to give it the video id and then i'm going to link it so i'm going to use href yes thank you very much i'm going to go to the videos or video sorry because that's what we called it video slug and the slug is going to be the video slug okay so hopefully you can see how that makes sense i passed through the videos and for each video i'm essentially mapping over each item and i'm creating an a tag that has a reference to this url which we've also just created okay so that is looking good let me just make sure that i am okay so that looks good and then inside i'm going to use the card component to self closing component and i'm just going to well we want to pass through the thumbnail don't we that's what we decided so video thumbnail and i think that's all we passed through yeah that's correct that's all positive great ah okay i don't think we're passing through videos into this section so let's do that let's go back in here and we need to pass through videos for all of them so videos for now i'm just going to do all the videos we can of course replace this later so one two three four five six seven and there we go how good is that looking i am loving this so far we and it's looking pretty responsive um wonderful okay this isn't being responsive we can fix that let's go back to here so the main video main video if any image exists in that which it does just make sure to make the width 100 okay there we go how good is that looking in family we've already filtered out all the videos that are that have the tag family however let's do the rest so this should be easy now because we've already done all the grunt work so let's go back to index and i'm just going to filter videos i'm going to pass through videos and the genre i want to filter by is thriller making sure to spell it like i did right here okay so under the tags right here on the video uh and once again i can just actually copy paste this probably that should be a lot easier and filter by classic i'm going to filter by pixar oops videos videos the filter by i mean i i know we don't have any national geographic but it's going to be an em a sad row filter by this knee and filter by star wars so unfortunately some of these will be empty we just don't have enough data but again i'll show you what this looks like after i've populated with all the data so now it's going to look a lot sadder unfortunately but at least we know it's working this is looking good pixar has nothing national geographic has nothing so that's why it looks a bit weird and star wars has nothing but all the rest have a few okay uh one more thing i'm actually going to have another section and this time i'm going to do recommendage for you and this is going to be based on what you have seen so how to do this well i'm going to use another function to help me do so and all i'm going to do is do unseen videos see videos and then i'm gonna pass through these videos and then i want to return back so once again i'm going to filter i'm going to grab grab the videos array and filter and look at each video in the array and if the video is seen so if it's video scene okay if the video is seen equals false or video scene equals null because we had no uh it's just going to return all the ones that aren't seen basically they're not true so unseen and i'm just going to do it for this one unseen and i'm just going to pass through these videos so now i'm seeing videos that should be plural ta-da because nana's seen we're attending all four videos how cool is that uh we are going to i'm going to show you how to change scene uh with a mutation in a bit but for now let's actually carry on so we've done that we've created some sections the next thing that i'm going to do is actually create a what else we need to do on this page well we should probably have a navbar i know there's a navbar on here so i'm just going to create a component new javascript file let's call it navbar s add and once again i'm just going to const nav bar equals and then export default nav bar and return give a div that we're going to style as a navbar but what do we want inside it um actually let's try class name now oh let's just do that for now or if you want to spell it it really doesn't matter and then well let's just watch me do i'm going to actually use link for this because i'm going to show you how to link to another page so i'm going to use link from next js and what i want to do is link an image which is going to be our disney logo so image and the source of this is going to be the disney logo uh the alt for this is going to just say disney yoga doesn't need to be in these width i can set the width if we use these images from um next so i can set the width in here be 90 and the height uh i don't know let's just say 50 for now okay so we've got our image it's actually imported so you can use it so import link from next link and also import image so import image next image great and now i'm going to show you how to work with images in your next js project so i'm just going to go into public this is where you're going to have to store it so with the favicon i'm just gonna drag that in here that so now that's in there i can actually import it to use it so i can import let's call it logo i can call it whatever i wish from and then we just need the path to it so i'm going to go into public and then i'm just going to grab the disney png okay and i'm just going to use it here great so that's our navbar so far um let's actually also well let's get to using it first so in my page here i'm just going to import the navbar and then import it oh so that's already been done for me so now if i look here oh okay so we need we forgot to do this i'm just going to make this go to the home page so i'm just going to put in that that is how you would link it to the home page and there we go we have our little logo let's actually start this now bar up so i'm just going to grab that and just place it up here i think that's where now i should go and i'm just going to give a height of let's say let's just hard code as 80 pixels and width of 100 percent again i'm not going to go wild on the styling i don't really think this is a styling lesson this is more a lesson about using uh the graphql content management system okay so that looks good um sort of uh okay we will fix that uh i don't know we should we should we add the account now too okay let's add the account so actually maybe let's leave that to last so at the moment we've got another and everything looks a bit bad but we'll fix it i want to display a single movie if i click on one of these so this is working it's going to the correct thing but now let's actually populate this page with some stuff so let's go ahead and do that so i'm just gonna shut down some of these i'm gonna keep the css file and get the slug page up okay so we've got the video what do we want to happen with it well let's keep that up there for now so i just want to return essentially an image and the uh source of this image is going to be well it's going to be the video whatever the video is thumbnail url so i'm just going to start for the thumbnail and then as an alternative let's have the video title for the visually impaired uh okay so that's our image with all of its stuff inside oops so we've got an image the next thing we want is uh i guess the info right so let's make another div that's gonna hold a we could show all the tags so video tags and then we can also show another let's have another paragraph with the video description okay and then just a little tag to go back so just go back a page because we don't have a navbar in this there's not one on the actual disney site so we're not gonna have one here we're just gonna have a little a tag that says go back uh okay so we've got that and then we're gonna have a button that says play so have a button that says play okay so there we go if we look at this it won't look too exciting for now there's our thumbnail and there's like all the information and stuff let's format this a little bit better let's get the tags and on the tags i'm just going to use join to make this a string that's joined together by commas just like so okay so that's looking a lot better i've got the description we've got the go back and we've got play the button play great okay maybe let's do some styling so let's go ahead and do that how are we going to do this well the first image let's give this a class name so we can figure out of video image i'm just going to get rid of this for now and put the star shape over here so just get the video image like so now the video image will obviously it's going to have a width of 100 and then also a position of absolute okay because we don't want it to move and we want the info to go on top of it so i'm just gonna fix it to the top okay and now let's grab the rest of this so i'm just gonna grab this and call it the info so class name info and let's style up info so info it's going to actually have a position of relative this time and margin from the top so it's always going to be 30 from the top and margin i've used view widths and view heights of percentages i should actually clean this up i will clean this up when i actually share the code uh so just be aware of that or at the end we'll do a little cleanup session so margin left 50 pixels and then let's also have a max width of it so it doesn't go all the way across the screen but it's always going to be just 50 okay so there we go that looks a lot better again sorry about the pixelated image i should really use better images but there we go so that looks really good so far let's carry on a little bit with the styling i'm just going to make this a p tag so that it's consistent with everything else and then we've got the button the button well okay the button is going to do quite a lot uh let's give it the class name of video overlay just going to grab it here so dot video over play and i'm going to give it a position of absolute okay so at the moment doesn't do anything but what i want to happen is if i click on the button it will essentially show me a pop-up with the video so just like in the real app so all i'm going to do is right on click just like so and then write a function of what happens when we click on this button and what i want to happen is essentially i want to set so i'm going to use use state for this uh i'm going to say so const watching set watching equal and then use state and it's going to start off as false because we're not watching okay we're not watching when we start this off is use state imported now we need to import import use state from react okay so hopefully you know how to use use state essentially all i am saying is that to start off the state is false so this gets set to false watching is false but to change watching to true i can use set watching and what i'm gonna do is say if watching is true so if we are currently watching are we watching i'm gonna set watching to foss okay so if we're watching and i click this button then i'm going to click it false change it to false sorry and otherwise if it's if we're not watching and i click it i'm going to start watching to true okay so i have done that i've done that because i want to essentially show a another component if watching is true so if watching is true then we want to show this component or these elements i want to show the video tag okay this is how you use the video tag and the source for the video tag is going to be well i'm going to use source video mp4 url uh and then we need to set the type to be video mp4 okay and then we're gonna actually have the video uh should we have okay yeah let's make it with a hundred percent you can set that in here or we can set it in the css it is up to you so 100 and uh i'm going to give it some control so you can see you can play it and so on and stop it from playing okay so let's check that out now if i click play okay the trailer shows up wonderful how good is that uh we of course need some styling and we need to figure out a way to you know hide it so let's carry on but at least this works this is looking good we don't need that much space for the styling so when we are watching we want to show this however when we are not watching well we don't want this to show up we have to do two because of the way i've done this so if we're not watching then we want the image to show up and also if we are not watching we're not watching bang watching essentially not watching then we also we're not watching then we want this to show up otherwise when you're watching we want that to show up okay so that looks fine uh and then do we need to style this yeah okay fine let's refresh that play we're watching we're watching and then we want to click off it so let's do it if we click off it like off the image then it should disappear so for this i'm actually just going to add a footer so just below here let's make it a div class name info footer and then let's style it up so let's make it quite large info footer let's give it a height of 100 vh now if we click so on click of this well what do we want to happen well once again if watching this time of watching we're watching then set watching to false otherwise null okay we don't want to start the video if we click the footer okay we don't want anything to happen so that is looking good let's check it out again play play the video we can make it auto play if we want and if we click here then we go off it video no video video no video looking great i mean this is looking so good i'm really happy with it so far um okay wonderful so we've done this now it's time to do two more things before we really get to styling this up fully so i need to do two things let's get the uh account info up and then let's i'm gonna show you how to make a mutation to change the scene from false or not to true so let's do the avatar bit first so we don't need this for now i'm going to make a new query in here so we need to rename this uh something let's change this to oops not in this one this is where we need to make a new query so we've got a query but i'm going to change this to videos query and don't forget to change it here too so we've got one query however we need another query and that's to get the account details so const account query equals gql i'm going to use the tag now how do we create an account let's go back here and i'm just going to just make a new query so again we can use the documentation for this so let's look at the queries available to us so i'm just going to write query and this time we need to query an account okay so i'm going to query an account and then where so this time we're going to search for an account where id is and then we need to get the id of my account okay so this is how we're choosing to do this of course you could do it however you wish so if i actually look in here in my content and i look at the accounts and i just have a look at this one i could see that this is my platform that i'm associated with however what is my id here is my id so i've just copied that let's go back in here i'm going to paste that and what do i want return back to me well i really just want my username and attack so i think that should be it username and avatar as an asset so i need its url so if i search for that there we go so that is the correct query let's carry on so all i'm going to do is paste that query like so so we've got our query so i'm just going to use this again i'm going to essentially get our data except we shouldn't call it data again we can't use data let's maybe call it account data and i'm going to use await graphql client and request this time i'm going to request the account query okay and whatever comes back well we know that it's going to be account data dot account because we just saw it here account data which we've saved to data which we saved as account data account and that's what we need okay so now that we have that let's actually return it and pass it through into our component so account okay great so we have the account however i'm actually going to pass through this account into the navbar so account account just like so because that's where we want to use it we want to use it in the navbar so now let's get our navbar i'm going to pass through the account and now let's actually uh use it so here we have our navbar again we've got this link but then let's also have some account info so i'm just going to make another div um and then maybe let's call this account info oops account info and inside this div well i just want to pee tag oops that says welcome account username and then maybe let's have an image as well so i'm just going to do image class name avatars gonna have to style it up and the source of the image is gonna be the account avatar url okay this needs to be curly braces okay so this is looking good let's see what that looks like let's go back to the main page okay so there we are let's get to style this up a lot smaller than it is now so once again i'm just going to get my css file let's get the account info i'm just going to use display flex on it let's also give it a height of 50 percent and the avatar itself well i want the avatar to save you 50 pixels width and height also 80 pixels [Music] and then border radius 50 and i think that should be fine let's maybe space it out a bit as well so i'm going to give it a margin the left of 10 pixels order radius okay okay so that's looking good and now let's actually just space this out in between so what is that in that is in a navbar so let's find the navbar and i'm going to do justify content space between wonderful and of course that could do us some more styling but we're going to leave that because we have one more thing to do before doing the refactoring the tidying up and the final pieces of styling and that is do a mutation so to make a mutation i'm just going to shut all this down because we're going to be doing this in the slug page so to make a mutation i actually need to make this in the api i'm going to create a new javascript file and i'm going to call it change to scene just like that and this is how we would do this so here is the syntax um export default async and then i'm gonna have to pass through a body and a response if you're used to doing uh you know serverless functions this is kind of similar so there we go uh here we are and then i'm also going to import the graph qr client from graph qr quest because we're going to need it okay so once again we're going to make a new graphql client and i'm gonna pass through the end point again so the url so process env endpoint so just like we were doing before url and then the uh token so the headers with the token and then process env graph cms token okay so that we can communicate with our database uh and now we're gonna have to do this so wait once again i'm just getting this from the graphql request documentation if you want to check it out graph cms request and the request i need to make is the mutation so the mutation that i need to do to edit a let's make a new thing so the mutation that i need to do is looks like this so i'm going to go into the mutations okay because we just do the documentation for this a mutation and what i'm doing is overriding one of the video i guess elements that i have one of the video objects to have seen from false or not to true so all i'm going to do is essentially use update video which video so i'm going to use where and i'm going to do it by slug so if i do jaws oops okay so if i do jaws and the data that i want to pass through is seen true and then i'm just going to return the id and and the scene okay and the title okay so if i do that ta-da we've changed the video to have seen as true i can change it by to false if i want cool but of course we just need to send you c to true because you can't unsee something so this is all that matters i'm going to take that i'm just going to put it in here so there's a mutation but of course we need to pass through the slug so i'm just going to this is how you would do it and i'm also going to get this slug which is the body slug and then i'm going to replace it in here with the slug so i'm just going to pass through the variable so slug is going to be a string and i'm just gonna replace it here with slug so now whatever i pass through in here okay will be changed so that is looking good i'm just gonna do a 201 it's gonna return with the jason slug body slug okay so this is looking good uh graph cms we didn't define graph cms oh yes constant graph cms so that's graph cms okay okay and now we just need to write mutation to publish the video so it's just the same as above it's just a different mutation so i'm going to write a weight graph cms request mutation publish video which is the mutation that we need and i'm gonna pass through a slug as we're going to find the video by its slug so we can publish it okay so i'm defining this i'm saying this slug as a string and then i'm just going to write the mutation that i need to do i already know it because i have done this before so publish video i will show you where i found this mutation though so don't worry publish video and i'm just going to put where slug and this is going to be the slug that we pass through from the body so just like above from the body and then i'm going to say to publish and just to check this has worked i'm going to return the so just in between here i'm going to return this slug okay so that is really it once again we need to pass through the variable slug so we're going to take it from the body and pass it through as a variable and i'm going to say that the slug we pass through from the body i'm gonna assign this to slug so i can use it in the mutation okay so this is looking good don't forget the comma great great so that is the mutation to publish the video okay and this is where i got it from so just in here under mutations i'm just going to search for it there we go that's it okay wonderful great so we've got the chain scene now let's get to using it in here so let's write a function for this i'm just going to do it above here so const change to scene a sink it's gonna be an async function and whatever slug i pass through is the one that we're gonna send to the mutation okay so i'm gonna use a weight fetch for this and i'm just gonna pass through the url that goes to my api change to scene so make sure you spot exactly the way that you spelled it here change to scene and the method is going to be a post and headers well we're going to have to say it's content type application json making sure just to keep everything a bit more consistent okay and then of course we need to also pass through the body jason stringify on the slug okay so we've written the function that essentially will uh use our mutation and then on click so when we click the play button we're just going to change scene change the scene and we're going to pass through the video slug great so now that should work let's check it out okay so at the moment we have four films which are unseen and recommended for me if i click on one of them however and i click play so there we go we're watching moana watching moana it's a great film love moana whoa and now let's go back to the home page okay so now we can only see three films in the recommended this is because we changed the scene from false or no to true okay so there's only three films in here now this wouldn't work if we didn't publish the video just an fyi that's why we need to publish the video and now if we want to change this back i'm just going to do this in the graph cms so the playground i'm going to once again just grab the mutation that we wrote before and then i'm going to change this to scene okay just because i want all four to return back but hopefully you understand how this works now uh if i played the video on any one of these cards again it would change scene to true again okay so hopefully that explains that let's carry on with some styling so all i'm going to do is actually get a div let's make some divs uh and i'm going to actually make a div and give her the class name of franchise because i want to then link to other sections in here so on this page so class name franchise and then i'm going to give this the id of disney so we can style it up as we need and then let's actually wrap this up in something so we can use an a tag i'm just going to grab this stick that in here and use the href in order to go to disney okay so now i'm going to give this the id of disney id equals disney so then if you click on that it will take us to that genre and i'm gonna do these same so we've got one for disney i need five two three four oops four five we've got disney let's have pixar let's have star wars let's have nat geo and let's have marvel oh once again pixar star wars nat geo marvel and let's give some ideas so id not geo id marvel id pixar and id it's great so that should link to those things whenever we click on it uh and of course let's actually style it up so i'm gonna get a show you how to make a little franchise one so dot franchise let's give it a width of 20 a height of 100 pixels a background color of gray is that 80 80 80 80 80 18 margin 5 pixels border radius 10 pixels okay and then in here what does that belong to video feed video feed display actually just going to change these to links just to make it more uh friendly and then import link import link from next link okay so that is actually going to be part of a video feed like so now let's get the class name of section and i'm just going to go back here and actually delete this i don't think we need it okay there we go wonderful so this is looking a lot better one last thing to do and let's sort this out and then maybe make some images for these so i'm just gonna go back in here get the nav bar and make a div here called logo stick that in there logo wrapper giving a padding of 10 pixels and 30 pixels so 10 from the top and 30 from this side great and finally the navbar itself and i'm just going to give it a padding top of 30 pixels account info margin top indexes 20 pixels margin 20 pixels okay so what i'm going to do is just drag in some image i'm going to use just drag them in like we did before so here they are just some logos just gonna get rid of this and all i'm gonna do is use the image from next image and then the source and pass through the image okay which we're gonna import into this file so again just like we did before so let's import the image import image from next image okay great and i'm just going to get rid of these semicolons great now we need to import the logo so let's do disney first import disney logo from and then the path to where i store the png file so public disney button okay this actually doesn't need to be cutting braces it's the only thing in there that we need and then i'm gonna do it for all of them so marvel marvel button then we have then we have nat geo geo button then we have what else pixar this is actually just this this is just pixar png that's what we saved it as and then let's also have star wars so star wars logo okay just like that and we save this file as star wars button png great so they're imported now let's use them so the image this actually needs to be in between the two divs sorry so the image for that should go here and wonderful okay this is looking good let's carry on so we've got one logo in let's do the others before we move on though the div that we are currently in the height is fixed i don't want that so i'm just going to get rid of that from here so i'm going to go here and enfranchise because that is the class name that the div has i'm just going to delete the height and grade okay so we have that done let's do the next one in between these two divs i'm going to put in a logo in between here as well and in between here and what should we call this well that's marvel logo and now we just need to pass through the marvel logo pass through the internet geo logo the star wars logo and the pixar logo great and i'm just going to format so reformat the code i can do so super easily in webstorm i can actually just reformat the whole project by clicking here and then going under the tab code reformat code great and then my whole project has been reformatted it also tells me instead of spelling mistakes so that's handy thank you very much geographic and what else can we do sometimes i feel like i put the class name in kylie braces and i don't want that i just want the class name to be a string so let's find where i did that because i definitely did somewhere out there okay so i like to keep class names like this but again it's just my preference it is totally up to you so great this is looking good okay it's the final look wonderful and delete any console logs as well so let's just get rid of this console look here great okay okay and finally let's do some final styling so i'm just going to do a little bit of this i mean it's essentially all fine i'm just doing some final touches so and that's it thank you so much for following on to the tutorial please go ahead and take this project make it your own improve on it really take it to the max uh i can't wait to see what you build with it and i'm really excited to see the results so thanks so much again for watching and i'll see you soon

Channel: Code with Ania Kubów

Views: 24,549

Rating: 4.9361024 out of 5

Keywords: web development tutorial, headless cms, web development, graphcms, disney clone, graphql, gql, nextjs tutorial, tutorial, graphcms course, graphql course

Id: u1ovHJXkPBY

Length: 127min 32sec (7652 seconds)

Published: Wed Sep 15 2021