MovieMentor
A feature-rich React web application combining movie streaming with AI-powered recommendations, built using React, TailwindCSS, Firebase, and TMDB APIs.
🚀 MovieMentor is a feature-rich React web application that combines movie streaming with AI-powered recommendations. Built using Create React App and styled with TailwindCSS, it offers a seamless user experience with authentication via Firebase, form validation, and user profile management. The app supports login and signup functionality, utilizing Redux for state management and ensuring smooth user interactions.
🎬 The app integrates TMDB APIs to fetch movie data, allowing users to browse now-playing movies, view trailers, and explore categorized movie lists. It also ensures secure authentication and redirects users accordingly if they are not logged in. A standout feature is its AI-powered movie search, leveraging OpenAI’s API to suggest personalized movie recommendations. Users can enter queries, and the app fetches relevant suggestions using TMDB’s API, enhancing content discovery.
⚡ To optimize performance, the app implements lazy loading, code splitting, and memoization, reducing the cost of each API call to less than $0.0001. Custom hooks like usePopularMovies and useNowPlayingMovies were created to fetch and manage movie data efficiently. The project also uses environment variables for API security and a responsive UI design.
🔑 Key features include:
- 🔐 Login/Sign Up: Secure authentication with Firebase.
- 🎥 Browse Page: After authentication, users can explore movies with a trailer in the background, title, description, and movie suggestions.
- 🔍 GPT Search: AI-powered movie search with personalized recommendations.
- 🌐 Multi-language Support: Enhanced accessibility for global users.
- 📱 Responsive Design: Seamless experience across devices.
🛠️ Technical highlights:
- ⚙️ Redux Store: Centralized state management with userSlice and movieSlice.
- 📹 Trailer Integration: Embedded YouTube videos with autoplay and mute.
- ✨ Shimmer UI: Smooth loading transitions for a better user experience.
- 🔧 Bug Fixes: Resolved issues like profile updates and redirection logic.
By combining modern web technologies and efficient optimization techniques, MovieMentor delivers an intuitive and engaging movie discovery platform. 🍿