0
0
Learn how to use GraphQL and GraphCMS by building a Next.js Disney+ Clone! In this 2hr tutorial I show you how to use a Headless CMS in order to build a working streaming app. You must sign up here to follow along with the tutorial:
00:00 Introduction
01:37 Setting up GraphCMS
25:35 writing GQL queries and mutations
32:54 Starting a Next.js App
37:34 Getting data into our App
50:54 Creating individual movie pages
58:18 Creating Components
01:46:45 Writing mutations in the App
01:57:00 Final styling
Final code:
___
⭐ Click here to get started (I get no commission from this link, but this video is a collab):
⭐ Use promo code ANIAKUBOW for 3 months free of WebStorm IDE here (I get no commission from this link, but am in a partnership):
⭐ New to code and none of this is making sense? Watch my ’12hr+ YouTube Coding Bootcamp’ in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It’s on my channel and its 100% free.
⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here (I get no commission from this link, but am in a partnership):
⭐ You can get a blockchain domain with my affiliate link here:
⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! :…
source
This post was automatic generated with this wp-automatic-plugin
Inside pages/index.js , why pass in videos inside filterVideos(videos, 'classic') function when it's already available in scope? :p
How do you get the trailer?
Works like a charm! Thanks!
Professional as usual ❤
I like 20:02 =)
yo at the end in the mutation section, I get an error about slug not being defined. if someone has a fix for those, pls let me know
Error: variable 'slug' must be defined: {"response":{"errors":[{"message":"variable 'slug' must be defined"}],"data":null,"extensions":{"requestId":"cl0vzm2rjbbi80biqy983zdtw"},"status":400,"headers":{}},"request":{"query":"n mutation($slug: String!){n updateVideo(where: {slug: $slug}, data: {seen: true}){n id,n title,n seenn }n }n ","variables":{}}}
Love the in depth explanation. I was going to watch this from a few other channels, but they really didn't explain graph cms or exactly what their code was doing. They even started with their next js files already set up. Definitely worth making a more lengthy video, so it actually sticks with you.
57:58 in case you are getting an error – check your gql-query. You might have accidentally written "videos" (like in index-query) instead of "video".
at ~11:30, why allow multiple videos to a platform, but not the other way around? Different users can watch the same video, right? Or am I misunderstanding something?
She is so beautiful.
thank you. your videos is clear and most important – practical cases
good course, but some content like Star Wars and different other styles are missing or not implemented in video, but in github src code… leaving out big steps in the video and I'm wondering how this all fits together..
I love your videos but I wonder if I'm the only one who would make use of more technical introductions. For example : making a quick visual about the way each framework / layer interacts with the others. The main steps of the tutorial (1. Create schema, 2. upload data …), a breakdown of the features you'll be working on and shortcuts you'll be taking.
In this particular example I don't really understand why the video belongs to the platform if the platform can only have one user… I think this schema would be specific to your tutorial and not the actual design of Disney +, but you didn't really explain that.
In Candy Crush I remember it took me a while to understand you were working on filling the grid with no 3-in-a-rows. I would have like for it to be listed as one of the key challenges at the beginning of the video.
Still learning a lot though and I really do think your content is amazing.
Ania, great tutorial!
One off-topic comment: when you're on-camera, the sound contains a bit of static, that disappears when you just show your screen.
Ok, maybe I am just dumb as @#$%, which is absolutely true, but where the hell is the SAVE Query 29:45. It looks like the video is cut and magically the query is saved. My options don't show anything for saving queries and neither does the abominable GraphCMS documentation. Its stupid crap like this that makes you just want to say %@^# it. I have zero chance to follow along when something so simple id not glaringly obvious
at 29:44 you talk about saving the query but there are no options for that and your video just skips ahead to it being done…. and at the end of that section you summerise everything we've done "And we've saved our queries" … How? I feel like this should be fairly obvious but I am seeing no options for this at all.
Guter Arbeitsfreund!🧡🧡🧡
Disney princess building disney plus? Somethings not right
excellent video
So great!!
Awesome Video. Please Do a Docker Begginer friendly project with react or MERN, I have been trying to learn that, With your videos it will be so much helpful.
where are the files? greetings from Colombia
What keyboard do you use?
your tutorials are fantastic and a wonderful presentation style, thanks so much for creating this content. I hope you will continue to create this kind of high quality content in the future. cheers!
Love this video. It is better than 80% of available Youtube developers content.
i follow you from Brazil, thanks for contents very, very interest.
inyect a malware with ida pro and open cl for registers procesosors in ensambler code…….. or yur method java script iagggggggggggg
Great video. Just I found the .info-footer treatment strange for video at full screen fluid. I position it to the top right with ×. Looking into mouse idle react hook drives me nuts. Looking forward for more videos.
btw calling randomVideo(videos) twice at <img> will result in 2 different object
Aniu, do u speak polish?
What am I doing here if I'm a product designer :)) ?
Can I download GraphCMS on my local machine?
Would you use this stuff, IF You simply wanted to display a page with all the videos contained in a given directory? That page would display the image of each video. That image is part of the files meta-data. When you click on a video, it'd play it and under the video, it'd display the rest of the videos meta-data. I'd REALLY like to see a video for something like this.
nice tutorial…..
very nice
very good
Dzięki za tutorial. W Polsce nadal nie ma Disney+. Teraz sobie zrobimy sami 😉
i still cannot believe a girl like you giving graphQL trainings. This does not mean majority of developers are ugly but while watching your videos i always expect "well now i will show you my top 3 eyeliners and how i use them everyday" 😀 . Great video btw.
вот же бабы за границей какие штуки делают, наши только могут губы намазывать, уважуха товарищ!
I love you!!
Please tell where do you work ?
Hi Ania, What plugin are u using to put text inside the gql() function and get no error? I'm still using Intellij
Hey Ania … great tutorial! I actually have a video on creating the exact slider as Disney+ is using … it's made in React just as the Disney+ app =)
https://youtu.be/q-Bz8FKPQVI
Lost her accent at 58:13.
This really helps me a lot!! Thanks!!