Section 2: Baseline Task

Currently our application does not have pagination so we don’t get all the movies loaded as we scroll. We need to add this functionality.

Use your barebone claude code setup to achieve this.

The Task

Open Claude Code and give it this prompt:

Add infinite scrolling to the movie list.

Requirements:
- When the user scrolls near the bottom of the page, load more movies
- Show a loading indicator while fetching
- Handle the "no more movies" state
- Handle errors gracefully
- Then create a new Branch and commit the changes.

While Claude is Working, Notice

Project Understanding

  • Does Claude know your project structure, or does it have to scan multiple files to understand the project?
    • Bear in mind that every time you start a new session, Claude will have to scan the entire codebase to understand the project.

Code Organization

  • Claude will most probably add most components in the main page (app/page.tsx) instead of creating separate component files.
  • In this codebase we want to follow conventions and best practices as follows:
    • No raw HTML elements, only use shadcn components
    • Do not pollute app/ files with business logic, extract it to components/ or hooks/
    • Do not use raw spinners for component loading states, use modern Skeleton UI component

Explicit Instructions

  • Do we have to explicitly mention to Claude that we want to follow the above conventions?

After Completing the Task

Once you’ve finished the baseline task and observed Claude’s behavior, discard all changes to return to a clean state for the next section.

← Back to Setup Next: CLAUDE.md →