/Netflix-Clone

The Netflix clone application was built using React (Custom Hooks, Context), Firebase & Styled Components. The Application contains the following pages: sign in, sign up, browse & lastly the homepage. There are four different pages, some using protected routes with auth listeners. Firebase firestore handles all the data and that data is retrieved using a custom hook; authentication is used on all pages, which is handled by Firebase as well.

Primary LanguageJavaScript

Netflix Clone

The Netflix clone application was built using React (Custom Hooks, Context), Firebase & Styled Components. The Application contains the following pages: sign in, sign up, browse & lastly the homepage. There are four different pages, some using protected routes with auth listeners. Firebase firestore handles all the data and that data is retrieved using a custom hook; authentication is used on all pages, which is handled by Firebase as well.

Getting Started

To run the site on you local machine

  • Fork or Clone this repository in your local machine.
  • Cd into the directory and run npm install to download all the required packages.
  • Then run npm start inside the terminal (To start the appllication on browser).
  • Create a Firebase account and start a new Project (To store all the series and flims data as well as user data).
  • Copy your Firebase project config form the "project setting" of the project (which contains the api key etc.) and paste it under the config in "./src/lib/firebase.prod.js" (Now the application is connected to firebase but there is no data in it).
  • To "Seed" the data into the FireStore Database uncomment the code (Tagged as uncomment to seed) in 'firebase.prod.js' and refresh the app in browser once to seed the data in the database.
  • Refresh only once and comment the code again to avoid multiple instances of same data written into the database.
    • If this occurs delete the collection in database and redo the seeding from step 6.
  • To create a user just signup form the app. (This will create a new user).

Info

  • The Netflix Clone is a React application inspired from the real Netflix site, which uses React with router and custom hooks on Client side and Firebase in the backend.
  • The project was an effort to recreate the original Netfix site with similar features using React.
  • The Application contains almost similar design and features of the original Netflix site.
  • The site is Bootstraped using create-react-app.
  • Firebase is used in backend to store Data.
  • The project uses Styled components which allows you to write css in javascript to design the site.
  • In order to write a new blog post, the user has to register and login.

Potential Improvements

  • A better way to seed the data in Firebase.
  • Better Optimization of certain parts of component.

Technologies Used

Some of the technologies used in the development of this web application are as follow:

  • React.js: A JavaScript library for building user interfaces.
  • Firebase: The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in realtime.
  • Styled Components: A CSS-in-JS styling framework that uses tagged template literals in JavaScript and the power of CSS to provide a platform that allows you to write actual CSS to style React components.
  • Fuse.js: a powerful, lightweight fuzzy-search javascript library, with zero dependencies, that provides fuzzy search capabilities for applications and websites.