NOTE: Because this app looks identical to the web browser version of Netflix (at the time of publishing), Google has tagged it as a Dangerous/Deceptive site. I have tried to remedy this issue by putting at the top of the page the TMDB Logo and a clear label stating that this is not the Netflix app, however, this has not removed the warning. Please know that this is the only reason for the warning and nothing else. I have plans to completely rebuild and rebrand this app in the future, but until then, please check out the gifs below to view it. Thanks for visiting!

📜 Table of Contents

• About the Project
• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Run Locally

✨ About the Project

An iterative Netflix clone project that uses React, Firebase for authentication, the API, React bootstrap and other libraries

📸 Screenshots

Homepage

Movie/TV-show Browser Page

🎞️ Features

📦 Current

• Homepage with GIF's and a FAQ accordion
• User Authentication and account creation supported by Firebase
• Profile page
• The Browser page contains a banner that shows a randomly selected trailer that loops and can be un-muted by the user. If a trailer is not provided, then a poster image takes its place
• Carousel row of movies/tv-shows sorted by various categories and genres
• A User can click on a particular movie/tv-show and a feature modal displays the media's details including a trailer
• Feature modal also includes a list of recommended movies/tv-shows that are similar to the selection

🔮 Future

• Search Bar functionality
• Refactor codebase with Redux or Context to handle state.
• Allow a new modal to pop up when user clicks on one of the recommended movies/tv shows in the Feature Modal
• Add better error handling
• Add tests
• Lighthouse testing and improvements
• Accessibility improvements
• Payment implementation (stripe)
• Full profile page that allows user to change Avatar picture
• Redesign and Rebuild
• Build a backend to handle all data coming from TMDB

📚 Tech Stack

🖥️ Front End

• Axios
• React.js
• React Bootstrap
• React Icons
• React Player
• React Ratings Declarative
• Sass

🗝️ API and Authentication

• Firebase
• The Movie Database (TMBD)

🛠️ Getting Started

🌠 Prerequisites

🔥 Firebase

• A Firebase account and project will need to be created in order to use the Authentication setup currently available in the project.
• If you are unfamiliar with Firebase, I used the following tutorial from Karl Hadwen to set up the account and authentication database for this app.
• Or you can follow their provided documentation here

🎥 The Movie Database API

• Create an account with TMDB
• Use the following API Documentation to create an API Key

🔐 Environment Variables

To run this project, you will need to add the following environment variables to your .env file

REACT_APP_TMDB_APIKEY=value
REACT_APP_FIREBASE_UUID=value
REACT_APP_FIREBASE_APIKEY=value
REACT_APP_FIREBASE_AUTHDOMAIN=value
REACT_APP_FIREBASE_PROJECTID=value
REACT_APP_FIREBASE_STORAGEBUCKET=value
REACT_APP_FIREBASE_MESSSENDID=value
REACT_APP_FIREBASE_APPID=value

🏃‍♀️ Run Locally

⌨️ Clone

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

💿 CD into Project

cd netflix-clone

💽 Install Dependencies

npm install
#or
yarn install

✅ Start App

npm start

👓 Open http://localhost:3000 to view the project in the browser.

Licenses