Skip to content

kradyy/react-netflix-clone

Repository files navigation

Netflix meets Tailwind

Netflix clone that uses the TMDB API to fetch movies and tv shows. It also uses the Youtube API to fetch trailers for the movies and tv shows. 🚀

Hobby project for advancing my React skills and my first real React project, added my own twist to certain elements but overall tried to mimic the Netflix UI as much as possible.

Bootstrapped with create-react-app and tailwindcss.

To deploy the project:

  1. Clone the repo
  2. Run npm install
  3. Run npm run build

API Keys 🔑

You will need to create a .env file in the root directory and add the following:

REACT_APP_TMDB_API_KEY= REACT_APP_FIREBASE_API_KEY= REACT_APP_FIREBASE_AUTH_DOMAIN=n REACT_APP_FIREBASE_PROJECT_ID=n REACT_APP_FIREBASE_STORAGE_BUCKET= REACT_APP_FIREBASE_MESSAGING_SENDER_ID= REACT_APP_FIREBASE_ID=

Features 🚀

  • Login with simple Firebase authentication
  • Signup page with validation
  • Add movies and tv shows to your watchlist
  • Remove movies and tv shows from your watchlist
  • Search for movies and tv shows
  • View movie and tv show details
  • View movie and tv show trailers

Using 🧰

  • React (Router, Context, Hooks, Axios etc.)
  • Tailwind CSS (with JIT)
  • Firebase (Auth, Firestore, Hosting)
  • TMDB API (The Movie Database)
  • Youtube API (For trailers)

Screenshots

Demo

https://netflix-tailwind.app/

License

MIT

SVG Icons from: https://www.svgrepo.com/

Netflix is a registered trademark of Netflix, Inc. This project is not affiliated with Netflix in any way. All rights reserved.