Load the Real Library

Task

Replace the Library’s mock book source with the Book API or a server-side database query.

Find the component that currently receives mock books.

Replace the mock import with an application data call. For a client-rendered Library, the request can be:

const response = await fetch("/api/books");
const data = await response.json();

setBooks(data.books);

Keep the existing card/list presentation. The goal is to change the data source, not redesign the prepared UI.

Add a loading state while the request is pending:

if (loading) {
  return <LibrarySkeleton />;
}

Use the prepared loading treatment if one exists.

When the database returns no books, render the Library empty state instead of an empty grid.

Create one Book record directly in the database, sign in as its owner, and open My Library.

Then sign in as another user and confirm the first user’s book is not shown.

My Library now renders real PostgreSQL data while preserving the supplied Readly design.