Énergie site · monitoring · Dashboards
Wattmeter
La conso site, en live
Scroll pour découvrir ↓
01 · Énergie site · monitoring
La conso, en jauges live
La conso site, en live. Direction fictive — même niveau de craft que les missions clients sous NDA.
- 01
Endpoints
API, webhooks, billing — statut healthy / dégradé.
- 02
Basculer
Clique pour simuler une alerte — le tableau réagit.
- 03
Latence
ms affichées, pas un dashboard fantôme.
01b · Technique
Fiche technique
Stack, mise en ligne et mon rôle sur ce build — pour recruteurs et tech leads.
- Technologies
- Next.js
- TypeScript
- React
- Tailwind CSS
- Librairies & outils
- Recharts-style charts
- Framer Motion
- Déploiement
Démo /play — app ops simulée, données mock
- Rôle
UX data · UI dense · composants métier
- Conditions
Prototype jouable — filtres, états, navigation
02 · Dans le produit
Un scroll, un écran
Chaque section se cale à l’écran — continue après le dernier pour revenir au récit.
Énergie site · monitoring
La conso, en jauges live
+12 kg
Squat
2:14
Hyrox
8 sem.
Cycle
47
Sessions
WEEK 01–02
Endpoints
API, webhooks, billing — statut healthy / dégradé.
WEEK 03–04
Basculer
Clique pour simuler une alerte — le tableau réagit.
WEEK 05–06
Latence
ms affichées, pas un dashboard fantôme.
Ouvre Wattmeter
Monitoring jouable · zéro backend.
Ouvrir les jaugesRetour au récit
Tu as quitté les écrans démo — ensuite : tester, puis les notes de craft.
03 · Facility & IT
Ils voient le pic avant la facture
“On a coupé un process fantôme en 10 minutes.”
“Le statut dégradé est impossible à rater.”
04 · Jauges
Ouvre Wattmeter
Monitoring jouable · zéro backend.
- →Hero + sections sous la fold (pas juste une accroche)
- →Hiérarchie visuelle et CTA principal
- →Densité d’info vs lisibilité
La conso site, en live
Démo locale — aucune donnée n’est envoyée.
05 · Même famille
D’autres directions du même type — pour comparer densités et ambiances.
06 · Ce qu’on regarde
- 01Hero + sections sous la fold (pas juste une accroche)
- 02Hiérarchie visuelle et CTA principal
- 03Densité d’info vs lisibilité
- 04États interactifs (hover, sélection, feedback)