Netflix GPT

A netflix clone. Uses TMBI api to fetch movies data, youtube for displaying trailer and LLM for searching movies.

Local Installation

Follow these steps to set up the project locally:

# Setup environment variables
# 1. Create a .env file in the project root.

# 2. Get your OpenRouter API key: 
#    https://openrouter.ai/settings/keys
#    Add to .env: 
REACT_APP_OPENROUTER_API_KEY=<Your OpenRouter API key>

# 3. Get your TMDB API Read Access Token: 
#    https://www.themoviedb.org/settings/api
#    Add to .env: 
REACT_APP_TMDB_API_READ_ACCESS_TOKEN=<Your TMDB API Read Access Token>

# Install dependencies
npm install

# Start the server
# The server will be available at: http://localhost:3000
npm start

Steps involved in creation of this app-

• npx create-react-app Netflix-GPT
• Configured TailwindCSS
• Installed React Router DOM: npm i -D react-router-dom
• Added Header component
• Added App routing
• Added Login form
• Added Sign-up form
• Added Form validation
• Used useRef hook
• Integrated Firebase
• Deployed app to production
• Created sign-up/sign-in with Firebase
• Created Redux store with userSlice
• Updated user slice with user info
• Implemented sign-out functionality
• Updated profile API call
• Bug fix: Added dispatch to onAuthStateChanged
• Bug fix: Redirect to / if the user is not logged in
• Registered for TMDB API, created an app, and obtained access token
• Fetched data from TMDB API
• Created a movies Redux store and added data to it
• Abstracted functionality with useNowPlayingMovies hook
• Completed SecondaryContainer
• Implemented GPT search feature
• Added multi-language support
• Applied memoization
• Added media queries

Features

• Log In/Sign Up
  • Form
  • Redirect to /browse
• Browse (after authentication)
  • Header
  • Main movie section
    • Trailer in the background
    • Title and background image
  • Movie suggestions
    • Movie lists
• GPT search bar
  • Movie suggestions