Logo
screenshot of invoice-app

Invoice App

next.jsreactreact-hook-formstorybooktailwindcsstypescriptzod

Dies ist eine Lösung für die Invoice App Challenge auf Frontend Mentor.

Anforderungen

Benutzer*innen sollten in der Lage sein:

  • Das optimale Layout der App je nach Bildschirmgröße ihres Geräts zu sehen
  • Hover-Zustände für alle interaktiven Elemente auf der Seite zu sehen
  • Rechnungen zu erstellen, anzusehen, zu bearbeiten und zu löschen
  • Formvalidierungen beim Erstellen/Bearbeiten von Rechnungen zu erhalten
  • Entwürfe zu speichern und ausstehende Rechnungen als bezahlt zu markieren
  • Rechnungen nach Status (Entwurf / Ausstehend / Bezahlt) zu filtern
  • Zwischen Light- und Dark-Mode zu wechseln
  • Bonus: Änderungen auch nach dem Aktualisieren des Browsers beizubehalten (localStorage könnte verwendet werden, wenn keine Full-Stack-Lösung gebaut wird)

Gebaut mit

Code-Qualität mit

Projekt-Highlights

  • Rechnungsverwaltung: Einfaches Erstellen, Anzeigen, Bearbeiten und Löschen von Rechnungen für einen effizienten Abrechnungsprozess.
  • Technologie-Stack: Next.js für nahtlose Frontend- und Backend-Integration, Prisma als ORM und Tailwind CSS für responsives Design.
  • Datenbank: Verwendung von PostgreSQL, selbst gehostet auf einem Ubuntu-Server für robuste und sichere Datenverwaltung.
  • Responsives Design: Vollständig responsives Interface mit Unterstützung für Light- und Dark-Mode für ein verbessertes Nutzererlebnis.
  • Formularhandling: Verwendung von react-hook-form und Zod für effiziente Formularverwaltung und Validierung zur Sicherstellung der Datenintegrität.
  • Erweiterte Navigation: Umsetzung von parallelen Routen und "Intercepting Routes" in Next.js für eine verbesserte Nutzerführung beim Erstellen und Bearbeiten von Rechnungen.
  • Fehlerbehandlung: Umfassende Fehlerbehandlung mit klaren Nutzerhinweisen bei Dateneingaben und Aktionen.
  • Pagination & Filterung: Anzeige der Rechnungen mit Paginierung und Multi-Select-Filterung zur effizienten Verwaltung großer Datensätze.
  • Echtzeit-Updates: Sofortiges Feedback bei Erstellung, Bearbeitung und Löschung von Rechnungen für ein stets aktuelles Dashboard.

Implementierungszeit

Diese Challenge wurde innerhalb von 25 Stunden abgeschlossen.