Netflix Clone

Table of Contents

1. Prerequests
2. Which features this project deals with
3. Third Party libraries used except for React and RTK
4. Contact

Home Page

Mini Portal

Detail Modal

Grid Genre Page

Watch Page with customer contol bar

Prerequests

• Create an account if you don't have on TMDB.
• And then follow the documentation to create API Key
• Finally, if you use v3 of TMDB API, create a file named .env, and then paste the API Key you just created.

FEATURES USED:

• Create and use Custom Hooks
• Use Context and its provider
• Use lazy and Suspense for Code-Splitting
• Use a new lazy feature of react-router to reduce bundle size.
• Use data loader of react-router, and how to use redux dispatch in the loader to fetch data before rendering component.
• Use Portal
• Use Fowarding Refs to make components reusuable
• Create and use HOC
• customize default theme of MUI
• Use RTK
• Use RTK Query
• Customize default classname of MUI
• Infinite Scrolling(using Intersection Observer API)
• How to make awesome carousel using slick-carousel

Third Party libraries used except for React and RTK

• react-router-dom@v6.9
• MUI(Material UI)
• framer-motion
• video.js
• react-slick

Install with Docker

docker build --build-arg TMDB_V3_API_KEY=your_api_key_here -t netflix-clone .

docker run --name netflix-clone-website --rm -d -p 80:80 netflix-clone