debugfest/mern-book-tracker

Feature Request: Implement Add Book Form with Validation

Offen

#3 geöffnet am 11.10.2025

Auf GitHub ansehenContributor Guide
 (0 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (5 Forks)auto 404
enhancementgood first issuehacktoberfest

Repository-Metriken

Stars
 (0 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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

Research-Richtung
Erstelle eine AddBook Komponente mit kontrollierten Eingaben, implementiere clientseitige Validierung (alle Felder erforderlich, Jahr numerisch) und integriere sie mit dem POST /api/books Endpunkt. Verwende React Hooks oder React Hook Form. Teste sowohl Client als auch Server Validierung.
Tech Stack
javascripttypescriptreactnodejsexpressmongodb
Domain
full stack
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-2 Tage
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Frisch
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
GitReactNode.js
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
80