Project Overview
NetflixGPT is an AI-powered movie discovery platform inspired by the Netflix interface. Traditional streaming sites recommend movies based on rigid algorithms, which often fail to capture subtle semantic search intents (e.g. searching for "feel-good movies on a rainy day"). NetflixGPT integrates OpenAI's GPT recommendation API to provide highly context-aware recommendations matching complex search queries, emotions, and descriptions.
Architecture & Core Tech
The frontend is built with React, coordinating user authentication via Firebase Auth and global state management via Redux Toolkit.
System Data Flow
- AI Recommendation Layer: User search queries are sent directly to a GPT parser that interprets intent and outputs a structured comma-separated list of movie titles.
- Media Retrieval: The movie titles are then processed in parallel, firing search requests to TMDB (The Movie Database) APIs to fetch detailed summaries, posters, and trailer details.
- State & Auth: Authentication changes are synced using Firebase's auth state listener. Movie search histories and preferences are stored in Redux slices for global access.
Key Features & Implementation
- GPT Search Bar: Semantic query engine capable of interpreting prompts like "funny 90s action movies with a dark twist".
- Dynamic UI Layout: A polished Netflix clone structure showing trailer auto-play headers, genre grids, and animated movie information tabs.
- Secure Auth Gateway: Login/Signup panels managed via Firebase Authentication with automated route guards.
- Responsive Experience: Fully optimized grid views for mobile, tablet, and wide screens.
Key Lessons & Takeaways
Integrating third-party LLMs taught valuable lessons in token budgeting and handling API error states (such as OpenAI rate limits or query timeouts). Managing search states in Redux Toolkit demonstrated how to prevent unnecessary re-renders when managing deep arrays of movie catalog details.
Also, designing responsive grids with high-density images highlighted the need for image lazy-loading and skeleton screens (shimmer effect) to ensure smooth initial paint times.