Git Product home page Git Product logo

netflix-clone's Introduction

Steps

  1. Mock API
  • services
  1. Breakdown and install all libraries
  • setup next js
  • tailwind
  • chakra ui
  • react icons
  • heroicons
  • framer-motion
  • recoil
  • react-player
  • react-hook-form
  • firebase
  1. Breakdown UI
  • Pages & Components Structure
  • assets (icons, images video, )
  • color
  • static text
  1. Breakdown Project
  • Hooks / State Management (Auth, Modal)
  • constanst (static Text, etc)
  1. Koding
  • Global state management -- Auth -- Modal
  • Create UI
  • API Integration -- Auth (login , signup) -- protected route

Project Setup

  • Setup next js typescript
  • constants > staticText
  • services config (Api key, base url,request)
  • .env.local
  • tailwind
  • recoil
  • chakra ui
  • firebase
  • Auth Hooks
  • react-player
  • assets
  • react hook form
  • react icons
  • heroicons
  • framer-motion

icons used

heroicons

  • InformationCircleIcon

  • SearchIcon

  • BellIcon

  • CheckIcon

  • PlusIcon

  • ThumbUpIcon

  • VolumeOffIcon

  • VolumeUpIcon

  • XIcon

  • ChevronLeftIcon

  • ChevronRightIcon

react icons

  • FaPlay

Color:

  • headerLink #e5e5e5 hover:#b3b3b3
  • bg body,header #141414
  • bg input $333 , focus #454545
  • placeholder gray
  • modal button #2a2a2a/60 #181818
  • modal bg 181818
  • btn login #e50914
  • checkicons #E50914
  • #333 divider signup

Tailwind

  • tailwindcss-textshadow
  • tailwind-scrollbar-hide
  • tailwind-scrollbar

netflix-clone's People

Contributors

yudistir4 avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.