Code a Netflix Clone with GraphQL Pagination - Reviewed by a Netflix Engineer

Overview

Learn how to build a Netflix clone using React, Apollo GraphQL, DataStax Astra, and Netlify Serverless Functions in this comprehensive tutorial. Explore GraphQL pagination, database management, and frontend development as you create a fully functional streaming platform. Master essential concepts such as setting up a Cassandra database, using GraphQL mutations and queries, implementing serverless functions, and designing an interactive user interface. Dive into advanced features like auto-playing videos, hover effects, and dynamic content loading. By the end of this hands-on tutorial, you'll have the skills to create a professional-grade streaming application with modern web technologies.

Syllabus

Introduction
Signing up to our Datastax Astra Cassandra database
Using the GraphQL Playground
Creating Tables using GraphQL mutations
Adding Data using GraphQL mutations you can use my pre-made data below
Retrieving Data using GraphQL queries
Adding our Movies to our database
Retrieving all of our Movies by Genre
Limiting our Data in GraphQL queries
Creating our React App
What is LOLOMO at Netflix?
Setting up Netlify Serverless Functions
Adding your DataStax token and endpoint
Adding the Netlify config
Writing a serverless function to get the Genres
Getting the Genres using GraphQL
Getting the Movies by Genre in our browsers
Pagination in GraphQL
Calling the next page by button
Loading more Genres when we hover at the end of the screen
Adding a NavBar and HeroSection
Making our Movie Cards pop out when we hover over them
Making videos auto-play and show more info on hover
HeroSection
Font Awesome Icons
Final basic styling