case study · 2024

Movie Web App

Live demo // private repo

A fast, responsive movie-discovery platform.

React
React Router
Fetch API

Problem

Browsing and searching a large catalog should feel instant, with state that survives navigation.

Approach

A React SPA with client-side routing and a debounced search over a movies API, designed around predictable loading and empty states.

Architecture

Debounced search with cancellable requests
Route-level code splitting for fast first paint
Resilient loading / empty / error states

Results

Snappy search-as-you-type discovery
Clean, responsive layout across breakpoints

Type

SPA

Routing

Client-side

Status

Shipped

// code

movie-app.ts

// Debounced, cancellable search
useEffect(() => {
  const ctrl = new AbortController();
  const t = setTimeout(async () => {
    const res = await fetch(`/api/search?q=${query}`, { signal: ctrl.signal });
    setResults(await res.json());
  }, 300);
  return () => { clearTimeout(t); ctrl.abort(); };
}, [query]);

lessons learned

Debounce + AbortController kills race conditions in search-as-you-type.
Design the empty and error states first; they're most of the UX.