debugfest/mern-book-tracker

Feature Request: Edit Book UI with Optimistic Update

Offen

#4 geöffnet am 11.10.2025

Auf GitHub ansehenContributor Guide
 (1 Kommentar) (0 Reaktionen) (1 zugewiesene Person)TypeScript (5 Forks)auto 404
enhancementgood first issuehacktoberfest

Repository-Metriken

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

Beschreibung

Allow users to edit existing book details using a modal or dedicated edit page. The UI should optimistically update book details while waiting for the server response.

🎯 Proposed Solution

  • Add Edit button on each book card.
  • Create EditBook.tsx or modal-based editor.
  • Pre-fill form with existing data.
  • PUT /api/books/:id for saving updates.
  • Implement optimistic updates and rollback if the request fails.

✅ Expected Behavior

  • User can edit book fields and save.
  • UI updates immediately on save click.
  • Changes persist after backend confirmation.

💻 Technical Notes

  • Maintain a local copy of book data for rollback if needed.
  • Use React Query or manual state updates for optimistic UI.

🧪 Test Steps

  1. Open edit form for a book.
  2. Modify title or author → save changes.
  3. Observe instant update and confirmation after server response.

Contributor Guide

Research-Richtung
Implementieren Sie die Benutzeroberflächenkomponente zum Bearbeiten von Büchern und verbinden Sie sie mit dem PUT /api/books/:id Endpunkt, mit optimistischen Aktualisierungen und Rollback unter Verwendung von React Query oder manuellem Zustandsmanagement.
Tech Stack
typescriptreactnodejsexpressmongodb
Domain
frontend
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
Halber Tag
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
ReactTypeScriptGit
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70