Netflix GPT

• Create React App -Configured TailwindCSS into out app
• Header
• Routing of App
• (LOGIN FORM)
• Sign Up Form
• Form Validation
• useRef Hook
• FireBase SetUp
• Deploying our app to production
• Create SignUp user account
• Implement Sign In User Api
• Created Redux Store with userSlice
• Implemented SignOut
• Update profile
• BugFix: Sign Up user displayName and Profile Picture Update
• BugFix: If the user is not logged in Redirect/Browse o login page and vice-versa
• unsubscribed to the onAuthStateChanged callback
• Add HardCoded values To The constants files
• Register TMDB API & create an app & get access token
• Get data from TMDB now playing movies list API
• Fetch Movies from TMDB
• Custom Hook for Now Playing Movies
• Create moviesSlice
• Update store with movies data
• Planning for MainContainer & SecondaryContainer
• Fetch Data for Trailer Video
• Update store with Trailer Video Data
• Embedded the youtube VIDEO & make it autoplay and mute
• Tailwind Classes to make MainContainer look awesome
• Build Secondary Component
• Build Movie List
• Build movie Card
• TMDB Image CDN URL
• Made the browsre page amazing with Tailwind CSS
• usePopular Movies Custom Hook
• GPT Seacrch Page
• GPT Srearch Bar
• (Bonus)Multi-Language feature in our App
• Get Search Google Gemini API key
• GPT search API call
• fetched gptMovieSuggestions fromTMDB
• created gptSlice added data
• reused Movie List Component to make movie suggestion Container
• Memoization
• Adding .env file
• Adding .env file to gitignore
• Made our Site Responsive

Features:

• Login/SignUp page -Sign In/ Sign Up Form -redirect to browse page

• Browser page(after authentication) a. Header b. Main Movie -b1. Trailer in Background -b2. Title & Description -b3. MovieSuggestions b31. MovieList * N (which is vertically scroll)

• NetflixGPT

  • Search Bar
  • Movie Suggestions