## Overview The Movies Discovery App is a feature-rich web application that allows users to explore, search, and track movies. Built with the MERN stack and integrated with The Movie Database (TMDB) API, it provides an engaging platform for movie enthusiasts to discover new content, read reviews, and manage their watchlists. ## Key Features ### 1. Movie Discovery - **Trending Movies**: Display currently trending movies - **Popular Movies**: Most popular movies across platforms - **Top Rated**: Highest-rated movies by users - **Upcoming Releases**: Preview upcoming movie releases - **Genre Filtering**: Browse movies by genre ### 2. Search & Filter ```javascript // Advanced search with filters const searchParams = { query: "inception", year: 2010, genre: "sci-fi", sort_by: "popularity.desc", }; ``` - **Intelligent Search**: Real-time search with autocomplete - **Multi-criteria Filtering**: Genre, year, rating, popularity - **Sort Options**: By popularity, rating, release date, title - **Pagination**: Infinite scroll for seamless browsing ### 3. Movie Details - **Comprehensive Information**: Plot, cast, crew, runtime, budget - **Trailers & Videos**: Embedded YouTube trailers - **User Ratings**: Display TMDB ratings and reviews - **Similar Movies**: Recommendations based on current movie - **Cast & Crew**: Detailed information about actors and directors ### 4. User Features - **Personal Watchlist**: Save movies to watch later - **Favorites**: Mark favorite movies - **Viewing History**: Track watched movies - **User Reviews**: Write and share movie reviews - **Ratings**: Rate movies on a 10-point scale ### 5. Authentication System - **User Registration**: Sign up with email and password - **Login/Logout**: Secure JWT-based authentication - **Password Reset**: Email-based password recovery - **Profile Management**: Update user information and preferences - **Protected Routes**: Authenticated-only features ## Technical Architecture ### Frontend (React) ```jsx // Movie Card Component const MovieCard = ({ movie }) => { const { addToWatchlist, isInWatchlist } = useWatchlist(); return (

{movie.title}

⭐ {movie.vote_average}/10

); }; ``` - **Component-Based Architecture**: Reusable, modular components - **React Hooks**: useState, useEffect, useContext, custom hooks - **React Router**: Dynamic routing for movie details pages - **Responsive Design**: Mobile-first CSS with Flexbox/Grid - **Loading States**: Skeleton screens for better UX - **Error Handling**: User-friendly error messages ### Backend (Node.js + Express) ```javascript // TMDB API integration router.get("/movies/trending", async (req, res) => { try { const response = await axios.get(`${TMDB_BASE_URL}/trending/movie/week`, { params: { api_key: process.env.TMDB_API_KEY, page: req.query.page || 1, }, }); res.json(response.data); } catch (error) { res.status(500).json({ error: "Failed to fetch movies" }); } }); // User watchlist endpoint router.post("/watchlist", authenticateJWT, async (req, res) => { const { movieId } = req.body; const userId = req.user.id; const watchlistItem = new Watchlist({ userId, movieId }); await watchlistItem.save(); res.json({ message: "Added to watchlist", item: watchlistItem }); }); ``` - **RESTful API**: Clean endpoint structure - **TMDB API Integration**: Fetch movie data, trailers, cast - **JWT Authentication**: Secure user sessions - **MongoDB Integration**: Store user data, watchlists, reviews - **Error Handling**: Comprehensive error middleware - **Rate Limiting**: Prevent API abuse ### Database (MongoDB) ```javascript // User Schema const userSchema = new Schema({ username: { type: String, required: true, unique: true }, email: { type: String, required: true, unique: true }, password: { type: String, required: true }, // hashed watchlist: [{ type: Schema.Types.ObjectId, ref: "Movie" }], favorites: [{ type: Schema.Types.ObjectId, ref: "Movie" }], reviews: [{ type: Schema.Types.ObjectId, ref: "Review" }], createdAt: { type: Date, default: Date.now }, }); // Review Schema const reviewSchema = new Schema({ userId: { type: Schema.Types.ObjectId, ref: "User", required: true }, movieId: { type: Number, required: true }, // TMDB movie ID rating: { type: Number, min: 1, max: 10, required: true }, review: { type: String, maxlength: 1000 }, createdAt: { type: Date, default: Date.now }, }); ``` ## UI/UX Design ### Design Principles - **Dark Theme**: Cinema-inspired dark interface - **Card-Based Layout**: Pinterest-style grid for movies - **Smooth Animations**: Hover effects and transitions - **Intuitive Navigation**: Clear menu structure - **Responsive Images**: Optimized poster loading ### Color Palette - Primary: `#141414` (Netflix-inspired dark) - Accent: `#E50914` (Red for CTAs) - Text: `#FFFFFF` / `#B3B3B3` - Cards: `#1F1F1F` with subtle borders ## Implementation Highlights ### 1. Efficient API Usage - **Caching**: Cache TMDB responses to reduce API calls - **Debouncing**: Debounce search inputs to minimize requests - **Pagination**: Load data in chunks for better performance ### 2. Responsive Design ```css /* Mobile-first responsive grid */ .movies-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; } @media (min-width: 768px) { .movies-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } ``` ### 3. State Management - **Context API**: Global auth state - **Custom Hooks**: useMovies, useWatchlist, useAuth - **Local Storage**: Persist user preferences ## Technologies Used - **Frontend**: React, React Router, Axios, CSS3 - **Backend**: Node.js, Express.js, JWT - **Database**: MongoDB, Mongoose - **External API**: TMDB (The Movie Database) API - **Authentication**: JWT, bcrypt - **Deployment**: (Ready for Vercel + MongoDB Atlas) ## Challenges & Solutions ### Challenge 1: TMDB API Rate Limits **Problem**: Hitting API rate limits with multiple users **Solution**: Implemented Redis caching layer and request queuing ### Challenge 2: Image Loading Performance **Problem**: Slow loading of high-res movie posters **Solution**: Progressive image loading with blur placeholders ### Challenge 3: Real-time Search **Problem**: Too many API calls during search **Solution**: Debouncing with 300ms delay + cancel previous requests ### Challenge 4: Responsive Grid Layout **Problem**: Inconsistent card sizes on different screens **Solution**: CSS Grid with auto-fill and minmax for flexibility ## Key Learnings - **Third-Party API Integration**: Working with external APIs, handling rate limits - **Authentication Flow**: Implementing secure JWT-based auth - **State Management**: Managing complex state across components - **Responsive Design**: Building mobile-first, adaptive layouts - **Performance Optimization**: Caching, lazy loading, code splitting - **User Experience**: Designing intuitive interfaces with smooth interactions ## Performance Metrics - **First Contentful Paint**: < 1.5s - **Time to Interactive**: < 3s - **Lighthouse Score**: 90+ (Performance) - **API Response Time**: < 500ms (cached) ## Future Enhancements - **Social Features**: Follow friends, share watchlists - **Recommendations**: ML-based personalized recommendations - **Streaming Integration**: Links to Netflix, Prime Video, Disney+ - **Multi-language Support**: Internationalization (i18n) - **Progressive Web App**: Offline support, push notifications - **Dark/Light Mode Toggle**: User preference for themes ## Demo & Code 🔗 [GitHub Repository](#) 📸 [Screenshots](#) 🎬 [Live Demo](#) ## Impact This project showcases full-stack development capabilities with a focus on: - Clean, maintainable code architecture - Integration with third-party APIs - User authentication and data persistence - Responsive, modern UI design - Performance optimization techniques The Movies Discovery App demonstrates the ability to build production-ready applications that provide real value to users while adhering to industry best practices.