Owner: Sameer
Technology Stack: React, TMDb API, Redux, Local Storage, Tailwind CSS
The IMDb-style movie discovery platform enables users to search, filter, and explore movies using the TMDb API. Users can favorite movies and create a watchlist, all without authentication. The project is built using React, with Redux for global state management, and Tailwind CSS for a responsive UI.
- Search for movies using title, genre, actor, or director.
- Fetch real-time movie data via TMDb API.
- Display search results in a responsive movie card UI.
- Filter movies by genre, release year, rating, and language.
- Sort movies by popularity, top-rated, and trending via TMDb API.
- View synopsis, cast, trailers, ratings, and reviews.
- Retrieve box office collection and awards from TMDb.
- Users can favorite movies by clicking the heart icon.
- Redux store manages favorites globally.
- Data is synced with local storage for persistence.
- Users can add/remove movies from their watchlist.
- Redux store handles global watchlist state.
- Watchlist persists via local storage.
- Fetch popular, trending, and top-rated movies via TMDb.
- Display recommended movies based on ranking.
- React for UI development.
- Redux Toolkit for state management.
- Tailwind CSS for styling components.
- Axios or Fetch API for TMDb integration.
- React Router for navigation.
- Redux Toolkit (RTK) for structured state handling.
- Slice-based architecture for movies, favorites, and watchlist.
- Local storage sync ensures persistence across sessions.
| Component | Tailwind CSS Classes |
|---|---|
| Search Bar | flex items-center px-4 py-2 bg-gray-800 rounded-md |
| Movie Card | shadow-md hover:scale-105 transition duration-300 |
| Filter Panel | grid grid-cols-3 gap-4 p-4 bg-gray-900 |
| Watchlist Page | min-h-screen bg-gray-800 text-white |
| Feature | TMDb API Endpoint |
|---|---|
| Search Movies | /search/movie?query={movie_name} |
| Discover & Filters | /discover/movie?sort_by=popularity.desc&with_genres={genre_id} |
| Movie Details | /movie/{movie_id} |
| Cast & Crew | /movie/{movie_id}/credits |
| Trending Movies | /trending/movie/day |
| Top-Rated Movies | /movie/top_rated |
| Popular Movies | /movie/popular |
- Redux store handles favorites & watchlist globally.
- Local storage sync ensures persistence.
- As a user, I want to search for movies using TMDb API so I can quickly find relevant results.
- As a user, I want to filter movies by genre, rating, and popularity so I can refine my search.
- As a user, I want to view comprehensive movie details so I can make informed choices.
- As a user, I want to watch trailers within the platform to preview a movie.
- As a user, I want to favorite movies by clicking the heart icon to keep track of preferred films.
- As a user, I want to add/remove movies in my watchlist to organize what I plan to watch.
- As a user, I want my favorites and watchlist to persist across sessions so I don’t lose my selections.
- No authentication; data is stored in local storage.
- Recommendations are based on TMDb’s popularity rankings, not personalized.
- User authentication to maintain favorites and watchlist across devices.
- AI-driven movie recommendations based on user preferences.
- Social features such as sharing lists and reviews.
- Dark mode toggle for better user experience.
- Performance optimizations for faster loading times.
- Accessibility improvements to ensure compliance with WCAG standards.
- Mobile app version for iOS and Android using React Native.
This IMDb-style movie discovery platform aims to provide a seamless and engaging experience for movie enthusiasts. By leveraging the TMDb API, Redux for state management, and Tailwind CSS for styling, the platform will offer a robust solution for discovering, favoriting, and organizing movies without the need for user authentication. Future enhancements will further enrich the user experience and expand the platform's capabilities.
- TMDb API Documentation
- Redux Toolkit Documentation
- Tailwind CSS Documentation
- React Documentation
- Axios Documentation
- React Router Documentation
- Local Storage API
| Version | Date | Changes |
|---|---|---|
| 1.0 | 2025-06-15 | Initial PRD creation |
For any questions or feedback regarding this PRD, please contact: Sameer
- Email: [email protected]