Stop 10 · API IntegrationProjects · 2/3

Movie App

In short

A movie app is the perfect practice ground: a real API with images, search, filters and detail pages. It's also a project that looks good in your portfolio screenshots.

A movie browsing app with search, filtering and detail pages, backed by a real movie API — solid end-to-end API integration practice.

The jaadu holds popcorn and looks up at a board of colourful picture-only movie posters.

Think of it like this

The single-screen theatre noticeboard

Outside the old theatre, a board lists what's showing, the timings and posters. You read it, pick a film and step inside for details. Your app is that board, but with every movie ever made and a search box.

Watch it happen

Search to poster grid

Movie app

TMDB API

Image CDN

GET /search/movie

1/5After the debounce, the app searches with query=dangal and your API key.

The big ideas

What you need to know

Debounced search

Search titles as the user types, without firing a request on every key.

Filter and sort

Filter by genre and year, sort by rating or release date, all through query params.

Detail pages

Clicking a movie opens /movie/:id with the cast, runtime and trailer.

API keys

TMDB and OMDb need a key. Keep it in a .env file and out of your Git repo.

How it works

Build plan

1
Get an API key
Sign up on TMDB or OMDb and store the key in .env.
2
Trending page
Show a grid of posters with skeletons while loading.
3
Search
Add a debounced search box with 'No results' handling.
4
Details and filters
Add a movie detail route, then genre filters and pagination.

See it in code

Walk through the code

1const KEY = import.meta.env.VITE_TMDB_KEY;2const IMG = "https://image.tmdb.org/t/p/w342";3 4export async function searchMovies(q: string, page = 1) {5  const params = new URLSearchParams({ api_key: KEY, query: q, page: String(page) });6  const res = await fetch(`https://api.themoviedb.org/3/search/movie?${params}`);7  if (!res.ok) throw new Error("Search failed");8  return res.json(); // { page, results, total_pages }9}10 11const posterUrl = (path: string | null) => (path ? IMG + path : "/no-poster.png");