Du sammelst E-Mails -- aber wo siehst du sie? In dieser Lektion bauen wir ein Admin-Dashboard: eine geschuetzte Seite, die alle Anmeldungen in einer uebersichtlichen Tabelle mit Diagrammen und CSV-Export zeigt.
Was wir bauen
Am Ende dieser Lektion hast du:
- Eine
/admin-Seite, die alle gesammelten E-Mails in einer Tabelle zeigt - Einfachen Passwortschutz (damit nur du die Daten sehen kannst)
- Ein Diagramm, das Anmeldungen ueber die Zeit zeigt
- Einen Button zum Herunterladen aller Daten als CSV-Datei
Die Admin-Seite erstellen
Probier es aus
In Claude Code:"Create an admin dashboard page at app/admin/page.tsx that: - Fetches data from a new API route GET /api/signups - Displays a clean table with columns: Email, Signup Date, Status - Shows a total count of signups at the top - Has a clean, professional design with a header that says 'Waitlist Dashboard' - This should be a client component that fetches data on mount"
Dann erstelle die API Route, um die Daten bereitzustellen:
Create an API route at app/api/signups/route.ts that reads from
data/signups.json and returns all signups as JSON, sorted by date
(newest first).
Besuche http://localhost:3000/admin -- du solltest dein Dashboard mit allen E-Mails sehen, die du vorher eingereicht hast!
Einfache Authentifizierung hinzufuegen
Im Moment kann jeder /admin besuchen. Lass uns eine einfache Passwortsperre hinzufuegen:
Probier es aus
In Claude Code:"Add basic password protection to the admin page: 1. Create a .env.local file with ADMIN_PASSWORD=changeme123 2. When visiting /admin, show a login form first (just a password field and submit button) 3. On successful login, store a session token in a cookie 4. On subsequent visits, check the cookie before showing the dashboard 5. Add a 'Logout' button in the dashboard header 6. The API route /api/signups should also check for the auth cookie"
Ehrlicher Hinweis
Das ist einfache Authentifizierung -- gut genug fuer ein Lernprojekt und den persoenlichen Gebrauch. Eine Produktionsanwendung wuerde richtige Authentifizierung mit gehashten Passwoertern, Session-Management, CSRF-Schutz und wahrscheinlich einem Drittanbieter-Auth-Provider nutzen. Aber fuer unser Waitlist-Admin-Panel funktioniert dieser einfache Ansatz.Datenvisualisierung
Eine Tabelle ist nuetzlich, aber ein Diagramm macht Trends auf einen Blick sichtbar. Lass uns eins hinzufuegen:
Probier es aus
In Claude Code:"Add a simple bar chart above the table showing signups per day for the last 14 days. Use the Recharts library (install it with npm). The chart should have: - Date on the X-axis - Number of signups on the Y-axis - Navy blue bars matching our color scheme - Responsive sizing"
Claude installiert Recharts und erstellt die Diagramm-Komponente. Moeglicherweise musst du noch ein paar Test-E-Mails an verschiedenen Tagen abschicken, um interessante Daten zu sehen.
Pro-Tipp
Wenn du nicht genug Testdaten hast, frag Claude: "Add a seed script that generates 50 fake signup entries spread across the last 30 days. Store them in data/signups.json." Das gibt dir realistische Daten zum Visualisieren.Daten als CSV exportieren
Jedes Dashboard braucht eine Export-Funktion:
Add a "Download CSV" button in the dashboard header. When clicked, it should
generate a CSV file with columns Email,Date,Status and trigger a file download
in the browser. Name the file waitlist-export-YYYY-MM-DD.csv.
Feinschliff und UX
Lass uns ein paar letzte Details hinzufuegen:
Ladezustand:
Add a loading skeleton while the dashboard data is being fetched. Show
animated placeholder rows instead of a blank page.
Leerer Zustand:
If there are no signups yet, show a friendly empty state message:
"No signups yet — share your landing page to get started!" with a
link back to the homepage.
Responsive Tabelle:
Make the table horizontally scrollable on mobile devices so it doesn't
break the layout.
Alles zusammen testen
Lass uns ueberpruefen, ob der gesamte Ablauf funktioniert:
- Gehe zu http://localhost:3000 (Landingpage)
- Schicke eine Test-E-Mail ab
- Gehe zu http://localhost:3000/admin
- Gib das Passwort ein (
changeme123) - Sieh die E-Mail in der Tabelle und im Diagramm
- Klicke auf "Download CSV" und ueberpruefen die Datei
- Klicke auf "Logout" und ueberprüfe, dass du dich erneut einloggen musst
Probier es aus
Gehe den gesamten Ablauf oben durch. Wenn etwas nicht funktioniert, sag Claude genau, was schiefgelaufen ist, und es wird es beheben.Git Checkpoint
git add .
git commit -m "admin dashboard with auth, chart, and CSV export"
Denk daran: Committe niemals .env.local (sie enthaelt dein Passwort). Sie sollte standardmaessig bereits in .gitignore stehen.
Wichtigste Erkenntnis
Du hast jetzt ein funktionierendes Admin-Dashboard. Du kannst deine Daten sehen, Trends visualisieren und CSVs exportieren. Das ist ein legitimes MVP (Minimum Viable Product) -- ein funktionales Tool, das ein echtes Problem loest.