👻 Building the Haunted Energy Dashboard: A Technical Deep Dive into a Cyber-Goth Smart Home System

Vansh — Mon, 24 Nov 2025 13:48:54 +0000

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.md document 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.

DEV Community: Vansh