Netflix Clone

View Demo · Report Bug · Request Feature

Table of Contents

1. Prerequisites
2. Learning objectives this project deals with
3. Third Party libraries used except for React and RTK
4. Features under development
5. Contact

Home Page

Mini Portal

Detail Modal

Grid Genre Page

Prerequisites

• Create an account or use your existing one at TMDB.

• Follow the documentation to create the API Key.

• Finally, if you use v3 of TMDB API, create a file named .env, copy-paste the content of .env.example to the .env file you just created and then paste the API Key you got at TMDB.

Learning objectives

• How to create and use Custom Hooks
• How to use Context and its provider
• How to use lazy and Suspense for Code-Splitting
• How to use Portal
• How to use Fowarding Refs to make components reusuable
• How to create and use HOC
• How to customize default theme of MUI
• How to use RTK
• How to use RTK Query
• How to customize default classname of MUI.
• Infinite Scrolling(using Intersection Observer API)
• How to make an awesome carousel using slick-carousel

Third Party libraries used except for React and RTK

• MUI(Material UI)
• framer-motion
• react-player
• react-use
• 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

Todo

• Add loader.
• Fix mobile version. Navbar is not displaying properly, as well as margins of the carousel.
• Implement animation using motion hook from react-use, now I am using framer-motion for animation. If we use the motion hook from react-use, framer-motion is not needed.
• Improve performance. I am using context and provider but all components subscribed to the context's value are re-rendered. These re-renders happen even if the part of the value is not used in the render of the component. There are several ways to prevent these re-renders. In addition to them, there may be several performance issues.
• Replace bundler(Vite) with Turbopack. Turbopack is introduced in Next.js conf recently. It's very fast but it's not ready to use right now with React. It just supports Next.js, they plan to support all others as soon as possible, so if it's ready to use, replace Vite with Turbopack.

Contact

• frontend.bcn.dev@gmail.com

Note This project only aims to show how to use the features mentioned above. There might be several things to improve for performance. I welcome anyone who wants to contribute.