A Netflix Clone Application

Live Demo

• Netlify
• Youtube (4mins)

Tech Stack

• TMDb API's
• Firebase
• Babel
• Webpack
• Tailwindcss
• React
• Redux Toolkit
• Redux Saga
• Framer Motion
• Material UI
• Netlify

Features

• Google authentication
• Movies slider
• Preview movie popper & detail modal
• Movie player
• Infinite scroll
• Rating movie
• Skeleton loading
• Code splitting
• Responsive layout, etc

About

This repo was inspired by Fakeflix of Davide Mandelli on Github. He's amazing.

I've done it like the Netflix original as much as I can. The aim is that I can put what I've learned about React into practice.

Hopefully, you're gonna like it.

Quick Start

Netlify deploy

1. Create your firebase projects & config ur firebase (auth, rules...)
2. Replace the firebaseConfig in src/firebase/index.js with your firebaseConfig
3. Fork the repo
4. Connect your Github to Netlify
5. Build command: npm run build:prod
6. Publish directory: dist/
7. Add your environment variables such as API_BASE, API_KEY, IMAGE_BASE...
8. Add the netlify domain that you've just deployed to your firebase project in Authentication/sign-in method

Run locally

• Nodejs v16 installed

• Clone then go to the project

  git clone https://github.com/vdtrung1706/netflix-clone.git

• Install dependencies

  npm install

• create .env file which includes

API_KEY=YOUR_API_KEY_HERE(get one on themoviedb)
API_BASE=https://api.themoviedb.org/3
IMAGE_BASE=https://image.tmdb.org/t/p

• Start

  npm run dev

License

MIT

Sreenshots

Wellcome

Login

Home

Search

Modal

Player