← Back to Projects
03

Movie Watchlist

Difficulty: Intermediate

Build a movie watchlist application that integrates with The Movie Database (TMDB) API. Users can search movies, add them to their personal watchlist, rate them, and write reviews. This project focuses on external API integration, React Query for data fetching, and testing.

Estimated Time: 4-5 days

Learning Objectives

Project Requirements

Core Features

  • Search movies using TMDB API with debounced input
  • Display search results with posters, titles, release dates, and ratings
  • View detailed movie information (cast, crew, synopsis, trailer)
  • Add/remove movies to personal watchlist
  • Mark movies as watched/unwatched
  • Rate movies (1-5 stars or 1-10 scale)
  • Write and edit personal reviews
  • Filter watchlist by status (watched, unwatched, all)
  • Sort by title, rating, release date, date added

React Query Implementation

  • Use useQuery for fetching TMDB data
  • Use useMutation for adding/updating user data
  • Implement query caching and invalidation strategies
  • Show loading states with skeletons
  • Handle errors with retry logic
  • Prefetch related data for better UX

Backend Requirements

  • Create proxy endpoints for TMDB API to hide API key
  • User authentication with JWT
  • Watchlist model with movieId, userId, status, rating, review
  • API endpoints for watchlist CRUD operations
  • Endpoint to get user statistics (total movies, avg rating, etc.)
  • Cache TMDB responses to reduce API calls

Testing Requirements

  • Backend: Test API endpoints with SuperTest and Jest
  • Backend: Test authentication middleware
  • Backend: Mock TMDB API calls in tests
  • Frontend: Test components with React Testing Library
  • Frontend: Test user interactions (search, add to watchlist)
  • At least 70% code coverage

Bonus Features

  • Recommend movies based on user's watchlist using TMDB recommendations
  • Create custom lists/categories
  • Share watchlist with unique URL
  • Movie comparison feature
  • Export watchlist to CSV/PDF
  • Trending movies section
  • Watchlist analytics dashboard
Technical Stack
Frontend React, React Query, React Router, axios, debounce
Backend Node.js, Express, JWT, node-cache (optional)
External API TMDB API (free API key required)
Testing Jest, SuperTest, React Testing Library

📚 Helpful Resources

TMDB API Documentation → React Query (TanStack Query) → React Testing Library → Jest Documentation → SuperTest →

💡 Development Tips:

Sign up for a free TMDB API key before starting. Never expose API keys in frontend code - use backend proxy. Implement debouncing for search (300-500ms) to reduce API calls. Use React Query's staleTime and cacheTime wisely. Write tests as you build features, not after. Mock external API calls in tests to avoid real API requests. Consider implementing pagination for search results.

Submit Your Project