debugfest / debugfest/mern-book-tracker
Feature Request: Build Book List UI with Empty-State and Loading
- 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
Assessment
This issue has not been assessed yet.