debugfest / debugfest/mern-book-tracker

Feature Request: Implement Add Book Form with Validation

Open
#3 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

Users should be able to add new books to the tracker with details like title, author, genre, year, and status. The form must include input validation and display clear error messages for invalid fields.

### 🎯 Proposed Solution
- Create `AddBook.tsx` component and `/add` route.
- Fields: `title`, `author`, `genre`, `year`, `status`.
- Validate:
- All fields are required.
- `year` must be numeric.
- POST to `/api/books` upon submission.
- Display success toast and redirect to book list.

### ✅ Expected Behavior
- Invalid inputs show inline error messages.
- Valid submissions create a new book in the database.
- User sees confirmation and redirection to book list.

### 💻 Technical Notes
- Use controlled inputs with React hooks.
- Utilize form libraries like React Hook Form (optional).
- Validation logic runs both client-side and server-side.

### 🧪 Test Steps
1. Open `/add` page.
2. Try submitting with empty fields → error messages appear.
3. Add valid book → redirect and verify entry in list.

Contributor guide

Open the contributing guide

Research direction

Start by inspecting the existing React entry points and book-list flow, then trace the `/api/books` endpoint and database model. Use the proposed `AddBook.tsx` component and `/add` route as the scope; verify empty and nonnumeric inputs show inline errors, while valid submissions create a book, show confirmation, and redirect to the list.

Written by the indexing model from the issue text.

Assessment

Tech stack
express, mongodb, node.js, react, typescript
Domain
databases, full-stack
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.