Skip to content
Le tableau de bord admin : visualiser tes donnees
← ← Retour aux Réflexions Course

Le tableau de bord admin : visualiser tes donnees

Publié le

Cours Vibe Coding par TEN INVENT · Avril 2026

Tu collectes des emails — mais ou les vois-tu ? Dans cette lecon, nous construisons un tableau de bord admin : une page protegee qui affiche toutes les inscriptions dans un tableau propre avec des graphiques et un export CSV.

Ce que nous allons construire

A la fin de cette lecon, tu auras :

  • Une page /admin affichant tous les emails collectes dans un tableau
  • Une protection par mot de passe basique (pour que seul toi puisses voir les donnees)
  • Un graphique montrant les inscriptions au fil du temps
  • Un bouton pour telecharger toutes les donnees en CSV

Creer la page admin

Essaie

Dans 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"

Ensuite, cree la route API pour servir les donnees :

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).

Va sur http://localhost:3000/admin — tu devrais voir ton tableau de bord avec tous les emails que tu as envoyes precedemment !

Ajouter une authentification basique

Pour l'instant, n'importe qui peut visiter /admin. Ajoutons une simple protection par mot de passe :

Essaie

Dans 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"

Note honnete

C'est une authentification basique — suffisante pour un projet d'apprentissage et un usage personnel. Une application en production utiliserait une authentification appropriee avec des mots de passe haches, de la gestion de sessions, une protection CSRF, et probablement un fournisseur d'authentification tiers. Mais pour notre panneau d'administration de waitlist, cette approche simple convient.

Visualisation des donnees

Un tableau est utile, mais un graphique rend les tendances visibles en un coup d'oeil. Ajoutons-en un :

Essaie

Dans 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 installera Recharts et creera le composant graphique. Tu devras peut-etre envoyer quelques emails de test supplementaires a differentes dates pour voir des donnees interessantes.

Astuce pro

Si tu n'as pas assez de donnees de test, demande a Claude : "Add a seed script that generates 50 fake signup entries spread across the last 30 days. Store them in data/signups.json." Ca te donnera des donnees realistes a visualiser.

Exporter les donnees en CSV

Chaque tableau de bord a besoin d'une fonctionnalite d'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.

Polish et UX

Ajoutons quelques touches finales :

Etat de chargement :

Add a loading skeleton while the dashboard data is being fetched. Show 
animated placeholder rows instead of a blank page.

Etat vide :

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.

Tableau responsive :

Make the table horizontally scrollable on mobile devices so it doesn't 
break the layout.

Tester le tout ensemble

Verifions que le flux complet fonctionne :

  1. Va sur http://localhost:3000 (landing page)
  2. Envoie un email de test
  3. Va sur http://localhost:3000/admin
  4. Entre le mot de passe (changeme123)
  5. Vois l'email dans le tableau et le graphique
  6. Clique sur "Download CSV" et verifie le fichier
  7. Clique sur "Logout" et verifie que tu dois te reconnecter

Essaie

Parcours le flux entier ci-dessus. Si quelque chose ne fonctionne pas, dis a Claude exactement ce qui s'est mal passe, et il le corrigera.

Checkpoint Git

git add .
git commit -m "admin dashboard with auth, chart, and CSV export"

Rappel : ne commite jamais .env.local (il contient ton mot de passe). Il devrait deja etre dans .gitignore par defaut.

Point cle

Tu as maintenant un tableau de bord admin fonctionnel. Tu peux voir tes donnees, visualiser les tendances et exporter des CSV. C'est un vrai MVP (Minimum Viable Product) — un outil fonctionnel qui resout un vrai probleme.

Checkpoint

Ton tableau de bord admin est protege par un mot de passe, affiche toutes les inscriptions dans un tableau et un graphique, et peut exporter les donnees en CSV. Le flux complet de l'inscription a la vue admin fonctionne de bout en bout. Git commite. Prochaine etape : configurer ton compte AWS pour le deploiement.