debugfest/mern-book-tracker

Feature Request: Implement Add Book Form with Validation

オープン

#3 opened on 2025/10/11

 (0 件のコメント) (0 件のリアクション) (0 人の担当者)TypeScript (5 件のフォーク)auto 404
enhancementgood first issuehacktoberfest

Repository metrics

Stars
 (0 個のスター)
PR merge metrics
 (PR metrics pending)

説明

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.

コントリビューターガイド