Menu Close

Netflix Clone using React18, Typescript, Material UI, and TMDB API

Netflix Clone using React18, Typescript, Material UI, and TMDB API
Table of Contents
  1. Prerequests
  2. Which features this project deals with
  3. Third Party libraries used except for React and RTK
  4. Contact

Logo

Home Page

Logo

Mini Portal

Logo

Detail Modal

Logo

Grid Genre Page

Prerequests

  • Create an account if you don’t have on TMDB.
    Because I use its free API to consume movie/tv data.
  • And then follow the documentation to create API Key
  • Finally, if you use v3 of TMDB API, create a file named .env, and copy and paste the content of .env.example.
    And then paste the API Key you just created.

Which features this project deal with

Third Party libraries used except for React and RTK

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

  • 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 render of the component. there are several ways to prevent the re-renders from these behaviours. 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 nor ready to use right now. it just support Next.js, and they plan to support all others as soon as possible. so if it’s ready to use, replace Vite with Turbopack.

Contact

Note
There might be several things to improve for performance.
Because this project only aims to show how to use the features mentioned above.
So I welcome anyone who wants to contribute.
If there are anyone who wants to contribute, there are some points(animation using react-use, not framer-motion, and fix position of the portal in Grid page)

View Source Code
Posted in Material UI, React, TypeScript