Neflix Gemini

• Create React App
• Configure TailwindCSS

Features

• Login / Sign Up Page

  • Sign In Sign Up Form
  • Redirect to Browse page

• Browse (After Authintication)

  • Header
  • Main Movie -Trailer in BG
    • Title and Desc and play button
    • List of Movies

• Neflix Gemini

  • Search bar
  • Movie Suggestions

Overall Build Process

• Create React App
• Configured TailwindCSS
• 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 Sign out
• Update Profile
• 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
• Gemini Search Page
• Gemini Search Bar
• (BONUS) Multi-language Feature in our App
• Get Gemini AI Api Key
• Gemini Search API Call
• fetched geminiMoviesSuggestions from TMDB
• created geminiSlice added data
• Resused Movie List component to make movie suggestion container
• Memoization
• Fixing rounting while refreshing the page
• Added .env file
• Adding .env file to gitignore
• Made our Site Responsive