Fetching User Shelf

Welcome to the first lesson of this course on building a modern React frontend with a NestJS API. In this lesson, you will learn how to fetch and display a user's personalized reading shelf. The "shelf" is a feature that lets users keep track of books they are reading, want to read, or have finished. By the end of this lesson, you will understand how to retrieve this shelf data from the backend and show it in the frontend, setting the stage for more advanced features later.

To get oriented, let’s look at the main files used in this feature. These are the building blocks that combine backend API calls, type safety, and UI components into a single working page. Each file has a distinct responsibility, which helps keep our project modular and easy to extend. Here is the structure relevant to this unit:

src/
  api/
    reading.ts         # Functions to call the backend API for shelf data
  lib/
    types.ts           # Type definitions for shelf items and parameters
  features/
    shelf/
      MyShelfPage.tsx  # Main page to display the user's shelf
      ShelfFilters.tsx # UI controls for filtering and sorting the shelf
  components/
    Skeleton.tsx       # Loading placeholder component
  App.tsx              # Main app layout and navigation

• src/lib/types.ts provides strong type definitions for shelf data, ensuring consistency with backend responses.
• src/api/reading.ts centralizes API calls, so our UI never has to deal with raw HTTP logic.
• src/features/shelf/MyShelfPage.tsx is the main React page where the shelf is rendered.
• src/features/shelf/ShelfFilters.tsx contains the dropdowns and buttons that let users change filters.
• src/components/Skeleton.tsx provides a placeholder while data loads.
• src/App.tsx manages navigation and adds prefetching so shelf data feels instant.

Together, these files provide everything we need to build a polished and responsive shelf page.

Before we start coding, it is important to understand how the backend serves shelf data. The backend provides a protected endpoint that responds only when a valid authentication token is supplied, ensuring users can only access their own data. This endpoint supports query parameters for filtering and sorting, allowing us to provide a dynamic and user-friendly shelf view. Understanding this route is critical because our frontend logic will closely mirror these query options.

• GET /reading/shelf (Protected: requires authentication)
  • Purpose: Returns the current user’s shelf entries, enriched with book details such as title, author, and progress.
  • Query params (all optional):
    • status: one of 'not-started' | 'in-progress' | 'completed' | 'want-to-read'
    • sortBy: one of 'title' | 'author' | 'updatedAt' | 'progress'
    • order: 'asc' | 'desc'
  • Response shape:
    {
      "bookId": 2,
      "title": "Dune",
      "author": "Frank Herbert",
      "progress": 0.24,
      "currentPage": 100,
      "status": "in-progress",
      "updatedAt": "2025-09-21T12:30:00.000Z"
    }

Note: You can always test the backend routes on your own. During the practices, open a new terminal and send a curl request to the desired route to check the output. For protected routes, you’ll need to log in with the correct credentials and include the access token in your request headers. For example, you can log in as admin and capture the access token like this:

ADMIN_TOKEN=$(curl -s -X POST http://localhost:3000/auth/login \
  -H 'Content-Type: application/json' \
  -d '{"username":"admin","password":"admin"}' \
  | sed -E 's/.*"access_token":"?([^",}]+).*/\1/')
echo "ADMIN_TOKEN: ${ADMIN_TOKEN}"

Once logged in, you can use that token to access protected routes. For example, here’s how Alice could view her shelf entries filtered by status and sorted by progress in descending order:

curl -s -H "Authorization: Bearer ${ALICE_TOKEN}" \
  "http://localhost:3000/reading/shelf?status=in-progress&sortBy=progress&order=desc"

We go through this process in detail in our Building the Reading Tracker API with NestJS path, where we defined the backend, created all the routes from scratch, and explained the purpose and usage of each one.