Skip to content

Latest commit

 

History

History
71 lines (51 loc) · 2.18 KB

README.md

File metadata and controls

71 lines (51 loc) · 2.18 KB
Raw

NETFLIX GPT

  • Create React App
  • Configured Tailwind css

Features Planning

  • Login and SignUp page

  • R outing

    • Sign up and sign in screen
      • Login Form
      • Form Validation (useRef hook)
    • After login --> redirect to browse page
    • Create signup user account - firebase
      • Whenever we sigin or sigup , fire base will give an access token , to verify the authentication
      • And UID

  • Browse Page (After Authentication)

    • Register for TMDB api
    • Creatr app and get access token and api key
    • get data from TMDB now playing movies list API
    • get data in browse page
    • Header
    • Main Movie
      • Background trailer playing
      • Movie title and Description
      • Movie suggestions
        • Movie List * N

  • Netflix GPT

    • Search bar
    • Movie Suggestions

  • Formik Library--> forms for react application

  • useRef hook --> to get the data entered from the input boxes

  • Once user signed in / signup we will add the data to the redux store and then navigate to browse page

    • Because we need data anywhere in the app

  • Bug1 : Even if the user is logged out - trying to access /browse --> user is able to access :::: we need to restrict

  • Bug2 : After logged in , if user wants to access /login --> opening login page :::: we should redirect to browse page till user logs out ::: we need to redirect

  • fix:: place auth api , in the central place , where it will be present every where in the app

  • place it in the header , so that every time it will check for the auth change , so based on that it will be redirected accordingly

  • Good practice: Unscbscribed to the onAuthStateChaneg callBack, because header will be changed more timed

  • For Browse Movies - We use TMDB API to get the data

    • Open TMDB and Login
    • Open edit proile
    • Go to api section
      • Find api key and api access token

  • ReactStrictMode -- > in local everything happens twice --> react does extra rendering to check inconsistency in rendering cycle'

    • This will only happens in the development phase
    • When we do the prod build, it wont happen

Browse page planning

  • Main Container
    • Video Background
    • Video Title
  • Secomdary Container
    • Movie list * N
      • Many Cards * N