DEV Community

Ania Kubow
Ania Kubow

Posted on

Let's code a Netlifx Clone with GraphQL Pagination (Reviewed by a NETFLIX ENGINEER!)

In this video, I build a Netflix Clone using React, Apollo GraphQL, DataStax Astra + Netlify Serverless Functions! For more free credits on top of your already free ones, use code ANIA200 on https://www.datastax.com/

This video is great for those wanting to see how I build an app that fetches data from our Cassandra database using the GraphQL API, as well as learn how to use pagination and slicing. Here are just a few things we will be covering:

00:00 Introduction
04:32 Signing up to our Datastax Astra Cassandra database
07:16 Using the GraphQL Playground
09:51 Creating Tables using GraphQL mutations
18:22 Adding Data using GraphQL mutations (you can use my pre-made data below)
25:03 Retrieving Data using GraphQL queries
26:20 Adding our Movies to our database
34:48 Retrieving all of our Movies by Genre
36:39 Limiting our Data in GraphQL queries
38:01 Creating our React App
41:31 What is LOLOMO at Netflix?
43:05 Setting up Netlify Serverless Functions
49:36 Adding your DataStax token and endpoint
46:03 Adding the Netlify config
46:56 Writing a serverless function to get the Genres
57:36 Getting the Genres using GraphQL
01:04:48 Getting the Movies by Genre in our browsers
01:20:45 Pagination in GraphQL
01:23:51 Calling the next page by button
01:31:19 Loading more Genres when we hover at the end of the screen
01:38:20 Adding a NavBar and HeroSection
01:42:20 Making our Movie Cards pop out when we hover over them
01:51:24 Making videos auto-play and show more info on hover
01:55:28 HeroSection
02:13:36 Font Awesome Icons
02:16:20 Final basic styling

Movie Data: https://github.com/kubowania/netflix-clone-graphql-datastax

As always, please take this project and make it your own. I have done some basic styling for you to get going. This is not a tutorial on styling, it is more to practise your database management skills, so please go wild on the styling yourselves :D! I would love to see what you have made!!

The full finished project can be found here: https://github.com/kubowania/netflix-clone-graphql-datastax/tree/main/data


⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

codingbootcamp​ #coding

Top comments (1)

Collapse
 
huydhoang profile image
Huy

Nice work! Just one little thing, it looks like you have put up the links in wrong order (movie data link's in place of finished project link) :-)