Haunted Energy Dashboard

Inspiration

Monitoring energy usage is essential, but most dashboards are visually tedious—rigid layouts, outdated graphs, and numbers stripped of context. I was inspired by the idea that utility and aesthetics don't have to be mutually exclusive. I asked: What if a smart home dashboard felt like stepping into a glowing, haunted control room? The goal was to build a system that was both technically robust and visually captivating, using a cyber-goth aesthetic to transform dry electrical data into an engaging narrative.

What it does

The Haunted Energy Dashboard is a full-stack, real-time smart home system that monitors power consumption and detects anomalies, all narrated by a custom AI persona.

Real-Time Monitoring: Tracks power usage (kW) and consumption (kWh) across multiple devices and rooms, updating every 1.5–3 seconds.
Anomaly Detection: Custom algorithms identify power waste and safety issues:
Phantom Load: Detects devices drawing standby power.
Power Spikes/Surges: Flags sudden, dangerous usage increases.
The Haunted Oracle: An AI persona (enforced via Kiro Steering Rules) delivers poetic, thematic alerts and provides actionable remediation advice (e.g., "A Quiet Thief lurks. Consider unplugging it...").
Multi-User Security: Supports multiple users and homes with strict data isolation.
Atmospheric UI: Features include fog overlays, neon glows, flicker effects on critical alerts, and custom themed reports.

How we built it

The project was managed using the Kiro Specs System to blend complex engineering with artistic vision.

Frontend: Built with React 18 and Vite. Zustand managed lightweight, fast state (especially for authentication). Custom CSS3 was used extensively for the unique visual effects.
Backend: Node.js and Express.js handled API routes and streaming data.
Data & Auth: Supabase provided the PostgreSQL database, integrated authentication, and Row Level Security (RLS) for multi-user data isolation.
Structure: We used Kiro's Specs System (e.g., haunted-energy-phase2 spec) to define 15 core requirements and 75 acceptance criteria before coding, ensuring a disciplined, goal-oriented process.
Consistency: Kiro Steering Rules were used to define the Haunted Oracle's personality and tone constraints, which was critical for a consistent user experience.

Challenges we ran into

Real-Time Performance with Heavy Aesthetics:

Challenge: Rapid telemetry updates (1.5s) combined with continuous CSS animations (fog, particles) risked UI lag and low frame rates.
Solution: State updates were throttled, and visual effects were optimized using techniques like request Animation Frame to ensure a smooth 60fps experience.

Maintaining Tone Consistency Across Alerts:

Challenge: Ensuring hundreds of different anomaly and remediation messages all sounded like the same, sarcastic "Haunted Oracle."
Solution: This was solved entirely by defining and iterating on the custom Kiro Steering Rules, forcing the AI to generate consistent gothic, poetic dialogue for every severity level.

Verifying Complex Logic (Data Isolation):

Challenge: Proving that no user could ever access another user's device data, especially with rapid updates.
Solution: We defined 39 correctness properties in our design spec and used fast-check for property-based testing. This went beyond typical unit testing, rigorously validating the Supabase RLS and multi-user logic under diverse conditions.

Accomplishments that we're proud of

Blending Art and Utility: Successfully creating a dashboard that is both a powerful, real-time monitoring tool and a cinematic, immersive experience.

The Haunted Oracle AI: Developing a functional, character-driven AI messaging system using Kiro Steering Rules that transforms technical alerts into engaging narrative.

Structured Development: Executing a complex, multi-phase project (Phase 1: Simulation, Phase 2: Production-Ready Auth) entirely managed by the Kiro Specs System, demonstrating the power of a disciplined approach.
Robust Testing: Achieving comprehensive test coverage (25+ frontend, 29+ backend tests) including advanced property-based testing, guaranteeing the application's stability and security.

What we learned

Structure Enables Creativity: The most valuable lesson was that defining strict requirements with Kiro's Specs System did not hinder creativity; it enabled it. With the foundation rigorously tested, I had the freedom to focus entirely on advanced CSS and the AI personality.

Testing Complexity: I learned the necessity of property-based testing for complex applications dealing with security (RLS) and real-time concurrency, offering a level of certainty unit tests cannot match.

Aesthetic as Utility: I confirmed that strong visual design (flicker effects, neon) can directly enhance a tool's utility by drawing attention to critical data far more effectively than a simple change in text color.