Colectezi emailuri — dar unde le vezi? In aceasta lectie construim un dashboard de administrare: o pagina protejata care afiseaza toate inscrierile intr-un tabel curat cu grafice si export CSV.
Ce construim
La sfarsitul acestei lectii, vei avea:
- O pagina
/admincare arata toate emailurile colectate intr-un tabel - Protectie de baza cu parola (ca doar tu sa poti vedea datele)
- Un grafic cu inscrierile in timp
- Un buton pentru a descarca toate datele ca fisier CSV
Crearea paginii de admin
Incearca
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"
Apoi creeaza ruta API pentru a servi datele:
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).
Viziteaza http://localhost:3000/admin — ar trebui sa vezi dashboard-ul cu toate emailurile pe care le-ai trimis anterior!
Adaugarea autentificarii de baza
Acum, oricine poate vizita /admin. Hai sa adaugam o poarta simpla cu parola:
Incearca
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"
Nota sincera
Aceasta este o autentificare de baza — suficient de buna pentru un proiect de invatare si uz personal. O aplicatie de productie ar folosi autentificare corespunzatoare cu parole hashed, gestionarea sesiunilor, protectie CSRF si probabil un furnizor de autentificare tert. Dar pentru panoul de admin al listei de asteptare, aceasta abordare simpla functioneaza.Vizualizarea datelor
Un tabel e util, dar un grafic face tendintele vizibile dintr-o privire. Hai sa adaugam unul:
Incearca
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 va instala Recharts si va crea componenta de grafic. S-ar putea sa fie nevoie sa trimiti cateva emailuri de test in zile diferite pentru a vedea date interesante.
Pro Tip
Daca nu ai suficiente date de test, intreaba-l pe Claude: "Add a seed script that generates 50 fake signup entries spread across the last 30 days. Store them in data/signups.json." Asta iti da date realiste de vizualizat.Exportul datelor ca CSV
Fiecare dashboard are nevoie de o functie de export:
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.
Finisaje si UX
Hai sa adaugam cateva detalii finale:
Stare de incarcare:
Add a loading skeleton while the dashboard data is being fetched. Show
animated placeholder rows instead of a blank page.
Stare goala:
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.
Tabel responsive:
Make the table horizontally scrollable on mobile devices so it doesn't
break the layout.
Testarea completa
Hai sa verificam ca intregul flux functioneaza:
- Mergi la http://localhost:3000 (pagina de prezentare)
- Trimite un email de test
- Mergi la http://localhost:3000/admin
- Introdu parola (
changeme123) - Vezi emailul in tabel si grafic
- Apasa "Download CSV" si verifica fisierul
- Apasa "Logout" si verifica ca trebuie sa te loghezi din nou
Incearca
Parcurge intregul flux de mai sus. Daca ceva nu functioneaza, spune-i lui Claude exact ce a mers gresit, si el va repara.Git Checkpoint
git add .
git commit -m "admin dashboard with auth, chart, and CSV export"
Retine: nu face niciodata commit la .env.local (contine parola ta). Ar trebui sa fie deja in .gitignore implicit.
Concluzia cheie
Acum ai un dashboard de admin functional. Poti sa iti vezi datele, sa vizualizezi tendintele si sa exporti CSV-uri. Acesta este un MVP (Minimum Viable Product) legitim — un instrument functional care rezolva o problema reala.