Netflix GPT

• Create Vite Project
• Install tailwind and configure vite.config
• Common Header
• Routing Setup
• Login Form
• SignUp Form
• Form validation
• useRef hook
• Firebase Setup & Deployment for Vite Project
  • Create a Firebase Project
  • Go to console.firebase.google.com → Click “Add Project” → Follow the prompts
  • Enable Firebase Authentication (if needed)
  • Go to Authentication → Click Get Started → Enable "Email/Password" or other providers
  • Install Firebase CLI (if not installed) [npm install -g firebase-tools]
  • Log in to Firebase [firebase login]
  • Go to your Vite project directory [cd path/to/your/project]
  • Build your project [npm run build]
  • Initialize Firebase in the project [firebase init]
  • During prompts:
    • Select: Hosting,
    • Choose: Use existing project → Pick your Firebase ,
    • Public directory: dist,
    • Configure as SPA: Yes
    • Overwrite index.html: No
  • Deploy your app [firebase deploy]
  • (Optional) Preview Locally: Run Firebase local server [firebase serve] Visit http://localhost:5000
  • Redeploy After Future Changes: After changes: [npm run build][ firebase deploy]
• Create signup in
• Implemented signIn in firebase
• create store for user using redux
• Implemented signOut, update profile from firebase -BugFix: Sign up user displayName and profile picture update
• BugFix: if the user is not logged in Redirect /browse to Login Page and vice-versa
• Unsubscibed to the onAuthStateChanged callback
• Add hardcoded values to the constants file
• Regiter TMDB API & create an app & get access token
• Get Data from TMDB now playing movies list API
• Custom Hook for Now Playing Movies
• Create movieSlice
• Update Store with movies Data
• Planning for MainContauiner & secondary container
• Fetch Data for Trailer Video
• Update Store with Trailer Video Data
• Embedded the Yotube video and make it autoplay and mute
• Tailwind Classes to make Main Container look awesome
• Build Secondary Component
• Build Movie List
• build Movie Card
• TMDB Image CDN URL
• Made the Browsre page amazing with Tailwind CSS
• usePopularMovies Custom hook
• GPT Search Page
• GPT Search Bar
• (BONUS) Multi-language Feature in our App)
• Get Open AI Api Key
• Gpt Search API Call
• fetched gptMoviesSuggestions from TMDB
• created gptSlice added data
• Resused Movie List component to make movie suggestion container
• Memoization
• Added .env file
• Adding .env file to gitignore
• Made our Site Responsive

Features

• Login/signup Page
  • Signup/signIn form
  • Redirect to Browse Page
• Browse Page (comes after authentication)
  • Header
  • Main Movie
    • Background Trailer
    • Title & description
    • Buttons
    • Movie Suggestion by category, genres
      • Movies List * n (horizontally scrollable)
• Netflix GPT
  • Search Bar
  • Movie suggestions