Build the Wishlist Page

Create /wishlist as a Client Component because it depends on localStorage-backed context state and browser-side fetching.

Step 1 — Read saved ids

Create app/wishlist/page.tsx, mark it with the client directive, and read ids and ready from useWishlist.

const { ids, ready } = useWishlist();

Step 2 — Track page data

Add state for movies, loading, and error so the page can distinguish restoring the wishlist from loading the actual movie data.

const [movies, setMovies] = useState<MovieSummary[]>([]);
const [loading, setLoading] = useState(true);

Step 3 — Fetch each saved movie through the internal route

Once ready is true and there are ids, use Promise.all to request /api/movies/<id> for each saved id. Keep the result filtering logic so a failed individual movie does not break the rest of the wishlist.

Promise.all(
  ids.map((id) =>
    fetch(`/api/movies/${id}`)

Step 4 — Render the same movie cards

Once the requests finish, reuse MovieCard inside the existing grid. The wishlist is a collection of the same MovieSummary objects used by browse.

Checkpoint

Save two movies from browse, open /wishlist, and confirm both appear as the same card design used on the main page.