Energy monitoring tools are usually built for utility, not experience. You open them expecting insight, but get outdated graphs, rigid layouts, and numbers stripped of meaning. I wanted to change that.
The result is the Haunted Energy Dashboard a modern, real-time smart home system that merges engineering precision with a cinematic, cyber-goth aesthetic. Powered by a custom AI persona called the Haunted Oracle, the dashboard transforms raw electrical data into narrative, atmosphere, and immersive design.
This post is a full breakdown of the technical architecture and the creative engineering behind it and how Kiro made the entire complex system buildable.
This wasn't just an aesthetic experiment. It’s a fully engineered, real-time monitoring system built with:
- React 18
- Node.js + Express
- Supabase Authentication & RLS
- Zustand state management
- Vitest + fast-check
- Kiro’s spec-driven workflow
This post is a full breakdown of the technical architecture and the creative engineering behind it and how Kiro made the entire complex system buildable.
The Problem: Energy Monitoring Is Boring
Typical dashboards fail because:
- They show data, but not meaning.
- They overload users with numbers.
- They lack alert intelligence.
- They treat UI like an afterthought.
- They feel generic and lifeless.
So I asked: What if a smart home dashboard felt like stepping into a glowing, haunted control room?
That question shaped the entire system.
The Tech Stack (Performance + Atmosphere)
| Component | Technology | Purpose |
|---|---|---|
| Frontend | React 18 + Vite | Ultra-fast HMR, modern hooks |
| State | Zustand | Lightweight, scalable global store |
| Backend | Node.js + Express | API for homes, devices, usage |
| Database/Auth | Supabase Postgres | Real-time data, Auth, and RLS |
| Testing | Vitest + fast-check | Unit + property-based testing |
| Styling | Custom Neon + Fog FX | Immersive cyber-goth UI |
The system updates power readings every 1.5–3 seconds, handles multiple homes, computes anomalies, and pushes themed alerts through the Haunted Oracle.
Core Features
- Real-Time Telemetry: Device energy changes instantly reflect on the dashboard.
- Multi-User Homes: Each user only sees their own data thanks to Supabase RLS.
-
Power Anomaly Detection: Three custom algorithms detect:
- Phantom Load (low, slow drains)
- Sudden Spikes
- Critical Surges
- Haunted Oracle Alerts: Every alert is expressed in gothic, poetic language, powered by Kiro Steering Rules.
Example Alert: “A Quiet Thief lurks. Your device sips energy when it should sleep. Consider unplugging it lest its appetite grows.”
How Kiro Tamed This Project
This project was visually ambitious and technically complex. Kiro made it buildable.
1. The Specs System: Clarity First
Every feature was defined and tracked before coding, using Kiro's specs system (haunted-energy-phase2):
- Requirements: Defined 15 core requirements and 75 acceptance criteria.
- Tasks: Broke implementation into 32 major tasks (100+ subtasks) for smooth, incremental development.
-
Architecture: A full
design.mddocument contained the architecture and, crucially, 39 property-based correctness rules. This eliminated ambiguity and scope creep.
2. Steering Rules for the Haunted Oracle
Located in .kiro/steering/haunted-oracle.md, this file enforced the AI's unique voice:
- Elegance and Gothic tone.
- Slight sarcasm and actionable advice.
This created a consistent, system-wide personality, ensuring the Oracle’s messaging was never generic.
3. Quality Assurance Through fast-check
The 39 correctness properties were tested using fast-check, ensuring:
- Data isolation between users.
- UI/state stability under rapid data changes.
- Device power logic integrity.
The combination of Kiro's structure and property-based testing resulted in bulletproof logic for the real-time core.
UX & Visual System: Cyber-Goth Engineering
This project wasn’t just functionality it was atmosphere.
- Atmospheric Effects: Fog overlays, neon flicker alerts, themed scrollbars, and floating particles.
- Data Visualization: Room-by-room energy maps allow users to explore their "haunted house" and pinpoint energy drains instantly.
- Performance: All visual effects were optimized to maintain 60fps performance even during high-volume telemetry bursts.
Key Engineering Challenges & Solutions
| Challenge | Solution |
|---|---|
| Real-time data without UI lag |
requestAnimationFrame + throttled state updates via Zustand. |
| Supabase multi-user isolation | Strict RLS policies ensure data boundaries. |
| Making UI & state always consistent | Zustand + optimistic updates prevent flickering. |
| Enforcing Haunted Oracle’s tone | Kiro Steering Rules locked the voice style reliably. |
| Telemetry overwhelming the app | Rate-limiting and deduplication built into the Node.js backend. |
Feature Tour
- Dashboard Overview: Live readings with glowing cards.
- Device Manager: Add/remove devices with custom power profiles.
- Notifications: Surges, spikes, phantoms all narrated by the Oracle.
- Reports: Daily, weekly, monthly usage + predicted costs.
- User Settings: Profile, theme toggle, home management.
Final Echoes
The Haunted Energy Dashboard is proof that utility doesn’t have to be boring.
It’s: Creative, Atmospheric, Engineered with rigor, and Structured with Kiro.
Kiro turned the potential chaos of a complex, ambitious feature set into clarity, allowing this haunted vision to become a fully realized, tested system.
Top comments (0)