Ania KubowIn 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
