Skip to content

imkaranks/netflix-clone

Repository files navigation

Netflix Clone

Table of contents

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

Desktop Preview

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

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