Netflix GPT is a Netflix-inspired, AI-powered movie discovery application built using React, Tailwind CSS, Firebase, Redux Toolkit, TMDB API, and OpenAI GPT.
The project focuses on building a real-world scalable frontend application with authentication, protected routing, API integration, state management, and AI-based search functionality.
- Frontend: React (Create React App)
- Styling: Tailwind CSS
- State Management: Redux Toolkit
- Authentication: Firebase Authentication
- APIs:
- TMDB API (Movies & trailers)
- OpenAI GPT (AI-powered search)
- Deployment: Firebase Hosting
📌 A full working demo video of Netflix GPT is available in the repository or linked externally.
Netflix.GPT.mp4
| Sign In | Sign Up |
|---|---|
 |
 |
- Sign Up & Sign In pages
- Form validation
- Firebase authentication setup
- Create user account
- Sign In user API
- Sign Out functionality
- Update user profile
- Protected routes:
- Redirect unauthenticated users from
/browse→/signin - Redirect authenticated users from
/signin→/browse
- Redirect unauthenticated users from
- Tailwind CSS configuration
- React Router based navigation
- Centralized constants file
- Redux Store setup with:
userSlicemovieSlice
- Multiple custom hooks for clean logic separation
- Registered app on TMDB and generated access token
- Fetch Now Playing Movies
- Store movie data in Redux
- Fetch trailer video data
- Store trailer data in Redux
- YouTube trailer embed with:
- Autoplay
- Mute
- TMDB Image CDN integration
- Netflix-style layout
- Responsive design using Tailwind CSS
- Main container with:
- Background trailer
- Movie title & description
- Play & More Info buttons
- Secondary container with:
- Multiple vertically scrollable movie lists
- Dedicated GPT Search Page
- GPT-powered movie recommendations
- AI-based search instead of traditional keyword search
- Multi-language support in the application
- Production build created using
npm run build - Deployed using Firebase Hosting
- Environment variables secured
- Optimized for performance
- Real-world Firebase authentication flow
- Redux Toolkit best practices
- Custom hooks for scalable architecture
- API integration & async data handling
- Route protection and session management
- Tailwind CSS for rapid UI development
- Integrating AI features into frontend applications
- End-to-end deployment workflow
Ayush Sahu
Frontend Developer | React | Tailwind | Firebase | AI-powered Web Apps
⭐ If you like this project, feel free to star the repository!