Creating the Book Details Page

Welcome back! So far, you have learned how to fetch, sort, and paginate a list of books in your catalog app. In this lesson, you will take the next step by building a Book Details Page. This page allows users to click on a book in the catalog and see more information about it, such as the title, author, and some interesting statistics.

A details page is a key part of any data catalog. It helps users dive deeper into a specific item and learn more about it. By the end of this lesson, you will know how to fetch and display detailed information for a single book and how to connect your catalog to this new page.

Let’s start by declaring a dynamic route so the app can open a details page for any book. A dynamic segment (:id) captures the book identifier directly from the URL (e.g., /books/2).

Here’s how your routing is set up in src/routes/router.tsx:

import BookDetailsPage from "../features/book/BookDetailsPage";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      { index: true, element: <HomePage /> },
      { path: "catalog", element: <CatalogPage /> },
      { path: "books/:id", element: <BookDetailsPage /> }, // ← new dynamic route
      // ...other routes
    ],
  },
]);

Why this matters

• books/:id tells React Router to match any id and pass it to the page via useParams().
• Navigating to /books/2 renders BookDetailsPage with { id: "2" }.
• Keeping details under /books/... keeps URLs predictable and deep-linkable from the catalog.

We’ll consume two public endpoints your backend already exposes:

GET /books/:id (Public)
- Purpose: fetch a single book by ID.
- Response: { success: true, data: Book }
- 404 if not found.
- Tested for id=2 (Dune): OK.

GET /books/:id/stats (Public)
- Purpose: aggregated reading stats for a book.
- Data fields: { bookId, readers, avgCurrentPage, completionRate, avgProgressPct }
- Example tested for book 2:
  {"success":true,"data":{"bookId":2,"readers":1,"avgCurrentPage":100,"completionRate":0,"avgProgressPct":0.24271844660194175}}

These two endpoints give us entity data (title/author/etc.) and derived metrics (how folks are progressing). We’ll fetch them in parallel and render the combined view.