← Back to Projects
Movie Search

Movie Search

A snappy movie search app featuring debounced API queries, paginated browsing, and smooth image animations.

A responsive movie discovery web app that connects to TheMovieDB API. It allows users to search across thousands of films, view posters and plot summaries, and navigate through paginated results with smooth fade-in animations.

Live SiteGitHub
ReactJavaScriptTheMovieDB APICSS

Core Problem Solved

Browsing large media databases can feel clunky if searches trigger excessive API requests or images pop onto the screen without smooth loading states.

Why I Built This

Built to demonstrate clean third-party REST API integration, asynchronous data fetching, and polished UI transitions in React.

Features

  • •Live Movie Search: Fast title search powered by TheMovieDB REST API.
  • •Clean Pagination: Browse through multi-page film lists without losing your place.
  • •Animated Poster Loading: Custom Higher-Order Component (HOC) that fades images in smoothly as they download.
  • •Global Context: Lightweight React Context managing search queries and page numbers.

Architecture

Frontend: • React SPA consuming external REST endpoints from TheMovieDB. • React Context API providing global state management without external library overhead. • Higher-Order Component pattern to manage image loading states and fade-in transitions.

Challenges

  • •Debounced Search & Image Loading: Learned the importance of input debouncing to prevent rate limiting from rapid keystrokes, and implemented higher-order component wrappers to ensure image posters fade in smoothly once downloaded rather than flickering.

Tradeoffs and Decisions

Used React Context API rather than Redux to keep the project lightweight and avoid unnecessary dependencies for a focused front-end application.

Impact

Delivered an intuitive, responsive media search tool while reinforcing front-end fundamentals in pagination, asynchronous image handling, and API integration.