Site energy · monitoring · Dashboards
Wattmeter
Site power, live
Scroll to explore ↓
01 · Site energy · monitoring
Usage, in live gauges
Site power, live. Fictional direction — same craft as real client work under NDA.
- 01
Endpoints
API, webhooks, billing — healthy / degraded.
- 02
Toggle
Click to simulate an alert — the board reacts.
- 03
Latency
ms shown, not a ghost dashboard.
01b · Engineering
Technical sheet
Stack, shipping and my role on this build — for recruiters and tech leads.
- Technologies
- Next.js
- TypeScript
- React
- Tailwind CSS
- Libraries & tools
- Recharts-style charts
- Framer Motion
- Deployment
/play demo — simulated ops app, mock data
- Role
Data UX · dense UI · business components
- Context
Playable prototype — filters, states, navigation
02 · Inside the product
One scroll, one screen
Each section locks to the viewport — keep scrolling past the last screen to return to the brief.
Site energy · monitoring
Usage, in live gauges
+12 kg
Squat
2:14
Hyrox
8 sem.
Cycle
47
Sessions
WEEK 01–02
Endpoints
API, webhooks, billing — healthy / degraded.
WEEK 03–04
Toggle
Click to simulate an alert — the board reacts.
WEEK 05–06
Latency
ms shown, not a ghost dashboard.
Open Wattmeter
Playable monitoring · zero backend.
Open gaugesBack to the brief
You’ve left the demo screens — next: try it, then the craft notes.
03 · Facility & IT
They see the spike before the bill
“We killed a ghost process in 10 minutes.”
“Degraded status is impossible to miss.”
04 · Gauges
Open Wattmeter
Playable monitoring · zero backend.
- →Hero + below-the-fold sections (not just a hook)
- →Visual hierarchy and primary CTA
- →Information density vs readability
Site power, live
Local demo — no data is sent.
05 · Same family
Other directions of the same type — to compare density and mood.
06 · What to look at
- 01Hero + below-the-fold sections (not just a hook)
- 02Visual hierarchy and primary CTA
- 03Information density vs readability
- 04Interactive states (hover, selection, feedback)