debugfest / debugfest/mern-book-tracker

Feature Request: Build Book List UI with Empty-State and Loading

Open
#2 0 comments 0 reactions 0 assignees View on GitHub
enhancement good first issue hacktoberfest
Dominant language
TypeScript
Stars
0
Forks
4
PR merge metrics
No merged PRs in 30d

Description

The app currently lacks a proper interface for viewing books. We need a **Book List** component that displays books in a clean grid or list layout. The UI should handle all states — loading, populated, and empty — for a complete user experience.

### 🎯 Proposed Solution
- Create `BookList.tsx` in `App/src/components/`.
- Fetch books from `/api/books` using Axios or Fetch API.
- Implement three UI states:
- **Loading:** show skeleton or spinner.
- **Empty:** show a message and a CTA button (“Add your first book”).
- **Loaded:** display grid of book cards (title, author, year, status).

### ✅ Expected Behavior
- Book list renders accurately once data is fetched.
- Empty state displays a friendly message and “Add Book” button.
- Loading spinner appears while fetching data.

### 💻 Technical Notes
- Use React state (`useState`, `useEffect`) for API handling.
- Utilize Tailwind grid utilities for responsive layout.
- Consider reusable `BookCard` component for each book entry.

### 🧪 Test Steps
1. Load `/books` route.
2. Observe the spinner during loading.
3. Check empty state if no data.
4. Add a book and verify it appears in the list.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.