Connect the Home Page to TMDB

Replace the local movie source on the home page with the functions you just built. The page should keep the same markup; only its data source changes.

Step 1 — Replace the local data import

Open app/page.tsx and import the TMDB functions.

import { discoverMovies, getFeaturedGenres } from "@/lib/tmdb";

The page no longer needs the local starter movie list.

Step 2 — Read the returned data on the server

Make the page function async and call both functions together. Use Promise.all so the genres and movies can load in parallel.

[genres, { results, totalPages }] = await Promise.all([
  getFeaturedGenres(),
  discoverMovies({ query, genreIds: activeGenreIds, sort, page }),
]);

At this point the existing FilterBar receives real genres and MovieCard receives real MovieSummary objects, while the markup remains unchanged.

Step 3 — Keep the page resilient

Wrap the two requests in try/catch, retain an errorMessage, and leave the detailed error UI for a later module. The important thing now is that a failed request does not take down the entire route without a readable explanation.

Checkpoint

Open / with a valid TMDB key. The existing Matinee interface should now display real movie posters, ratings, years, and featured genre chips from TMDB.