Create the TMDB Client Foundation

Create the file that owns all communication with TMDB. Keep the networking code in one place so the pages do not need to know how TMDB URLs or image URLs are assembled.

Step 1 — Add the TMDB constants

Create lib/tmdb.ts. Start with the API base URL and the image base URLs. These constants keep URL construction in one place.

const TMDB_BASE = "https://api.themoviedb.org/3";
const IMG_POSTER = "https://image.tmdb.org/t/p/w500";

Add the backdrop and profile bases beneath them. They will be used later by the movie detail page.

Step 2 — Keep the featured genres readable

Add the existing FEATURED_GENRE_NAMES array near the top of the file. It is intentionally a list of names rather than hard-coded TMDB ids. Later, getFeaturedGenres will resolve those names against TMDB’s genre list.

Step 3 — Add the sort mapping

The UI uses the short values rating, year, and title, while TMDB expects different sort_by strings. Create the map that translates between them.

const SORT_MAP: Record<SortOption, string> = {
  rating: "vote_average.desc",
  year: "primary_release_date.desc",
  title: "original_title.asc",
};

Import Genre, MovieDetail, MovieSummary, CastMember, and SortOption from ./types as you add the functions in later lessons.

Checkpoint

lib/tmdb.ts exists with the request constants, featured genre names, and sort mapping. The application UI should still behave exactly as it did before because no page is using the new file yet.