Stop 22 · Build Portfolio ProjectsProjects · 5/15

Movie Search

In short

A movie search app tests the skills behind every search bar you've used: waiting for the user to stop typing, handling empty results and loading images without slowing the page.

An extended movie app with watchlists, ratings, and recommendations — moving beyond simple search into a more complete product experience.

The jaadu waits patiently at a video rental counter while a customer thinks.

Think of it like this

The old video rental uncle

You start saying 'that movie with Shah Rukh and...' and he waits until you finish before searching his shelf. If he ran to the shelf after every word, he'd be exhausted. That patience is debouncing.

Watch it happen

Typing 'dune' with a debounce

Search box

400ms timer

Movie API

'd'

1/6You type 'd'. A 400ms timer starts.

The big ideas

What you need to know

Debounced search

Search only after the user pauses typing. Proves you care about API limits and performance.

Details page with routing

Click a movie to open /movie/[id]. Shows you know dynamic routes.

Watchlist

Save favourites to localStorage or a backend. Adds state that lives beyond one page.

Images done right

Lazy-loaded posters with fixed sizes and a fallback for missing ones.

How it works

Build plan

1
Get an API key
Use a movie API like TMDB or OMDb and read its search docs.
2
Search page
Debounced input and a results grid.
3
Details page
Dynamic route with plot, cast and rating.
4
Watchlist
Add and remove favourites, persisted.
5
Polish
Pagination or infinite scroll, empty states, deploy.

See it in code

Walk through the code

1function useDebounce(value, delay = 400) {2  const [debounced, setDebounced] = useState(value);3 4  useEffect(() => {5    const id = setTimeout(() => setDebounced(value), delay);6    return () => clearTimeout(id); // reset if value changes again7  }, [value, delay]);8 9  return debounced;10}11 12// Usage13const query = useDebounce(input);14useEffect(() => { if (query) searchMovies(query); }, [query]);