Netflix Clone

Table of contents

• Overview
  • Responsive
  • Screenshot
  • Install and Run the Project
  • Links
• My process
  • Built with
• Author

Overview

Responsive

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Install and Run the Project

• Step 1

  Install required dependencies.

  npm install
  

• Step 2

  We require these API(s) for this app to run.

  1. TMDB API
  2. Youtube Data API

  Register Here and get your API Key

• Step 3

  Set the environment variable in .env file at root of the folder.

  In Create React App prefix variable with REACT_APP.
  For example

  REACT_APP_KEY="1234"
  

  Access your variable with process.env.REACT_APP_KEY

  In Vite prefix variable with VITE.
  For example

  VITE_KEY="1234"
  

  Access your variable with import.meta.env.VITE_KEY

  Change the values with your registered API key.

  VITE_TMDB_API_KEY=<Your Key Here>
  
  VITE_YT_API_KEY=<Your Key Here>
  
  VITE_FIREBASE_API_KEY=""
  VITE_FIREBASE_AUTH_DOMAIN=""
  VITE_FIREBASE_PROJECT_ID=""
  VITE_FIREBASE_STORAGE_BUCKET=""
  VITE_FIREBASE_MESSAGING_SENDER_ID=""
  VITE_FIREBASE_APP_ID=""
  VITE_FIREBASE_MEASUREMENT_ID=""
  

• Step 4

  You're all set up. Start your app in development mode

  npm run dev
  

Links

• Live Site URL: https://chic-nasturtium-3b31e3.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• tailwindcss - CSS framework
• Framer Motion - For Animations
• Firebase - Backend-as-a-Service (BaaS) app development platform

Author

• Website - Karan Sethi