Start Matinee and Read the Data Shape
Start Matinee and Read the Data Shape
Before changing behavior, get familiar with the exact places the first implementation will touch. The goal here is to run the project, open the home page, and identify the two pieces of information the next lessons need: movie summaries and genres.
Download the starter project
The course uses a prepared starter project. Download it from GitHub before continuing:
Step 1 - Run the project
From the project folder, install dependencies and start the development server.
npm install
Then start the app:
npm run dev
Open http://localhost:3000 and confirm the Matinee page renders.
Step 2 - Look at the movie shape
Open lib/types.ts. The home page works with MovieSummary, not with the entire TMDB response. Find the fields that describe one card: id, title, year, posterUrl, rating, and genreIds.
The important idea is that the rest of the application can depend on this smaller shape even though TMDB returns much more data.
Step 3 - Look at the sort type
In the same file, find SortOption:
export type SortOption = "rating" | "year" | "title";
That type will become useful once the browse controls begin changing the request.
Checkpoint
The project starts locally, the Matinee interface renders, and you can identify MovieSummary as the shape the browse page expects. No feature behavior needs to change in this lesson.