School Energy Guardian

An enterprise AI dashboard built via Base44 to eradicate school energy waste. It features a Human-in-the-Loop system and a custom-engineered 3D campus twin rendered via MeDo.

Comment

School Energy Guardian is an enterprise-grade AI intelligence platform designed for campus administrators. It simulates the ingestion of real-time data from over 250 IoT sensors and visualizes it through a cinematic dashboard.

AI Energy Waste Feed: The system categorizes live anomalies across HVAC, Lighting, and Appliances, generating specific alerts like 'Occupancy Mismatch' or 'Pre-Cool Schedule Error'.

Human-in-the-Loop Architecture: We strictly adhered to Responsible AI principles. The AI flags the issue and provides a confidence score, but a human must manually click 'Approve Fix' to execute it.

Interactive 3D Digital Twin: A live, spatial 3D map of the campus that highlights energy waste zones with pulsating nodes and glowing data pathways.

Dynamic Impact Tracking: Real-time KPI counters that calculate Total Energy Wasted (kWh), Recoverable Cost (USD), and CO2 Emissions Avoided (kg).

Infinite Scalability: A seamless toggle to switch between a single-campus view and a multi-building district overview.

How we built it We engineered a highly complex, dual-layered architecture focusing on enterprise-tier UI/UX and 3D spatial computing:

The Dashboard (via Base44): We utilized Base44 to architect our React and Tailwind CSS frontend. We focused on a dark, enterprise glassmorphism aesthetic, integrating framer-motion for satisfying UI transitions, an animated aurora background, and glowing scan-lines.

The 3D Digital Twin (Custom Engineered & MeDo Rendered): Instead of settling for 2D charts, we custom-engineered an isometric 3D campus model from scratch using Three.js. We programmed raycasting, dynamic camera angles, and animated data flows. We then seamlessly deployed and rendered this custom 3D environment inside our dashboard using MeDo as an embedded iframe modal.

State Management: We built complex React state logic to ensure that when an administrator clicks "Approve Fix", the UI instantly transitions, and all KPI counters and Recharts graphs recalculate live.

Challenges we ran into 3D Integration without UI Blocking: Embedding a heavy, custom-built Three.js canvas into a React dashboard without causing performance lags was incredibly tricky. Optimizing the render pipeline via MeDo and ensuring the iframe communicated visually with the dashboard's aesthetic took massive effort.

The "Black Box" Problem: It is challenging to make users trust AI. We had to carefully design the "How It Works" 6-step pipeline modal to visually explain the AI's logic (Sensors -> Detection -> Human Approval -> Optimization) so judges and admins feel in complete control.

Balancing Aesthetics and Data: Making a data-heavy application look like a sci-fi cinematic command center without overwhelming the user required intense CSS fine-tuning and strict typographic hierarchy.

Accomplishments that we're proud of We successfully merged high-end 3D graphics with standard DOM elements to create a product that feels like a multi-million dollar SaaS platform.

We perfectly executed the "Human-in-the-Loop" workflow. The state transition from a red "Critical Alert" to a green "Optimized" status feels incredibly satisfying and responsive.

Building a comprehensive, enterprise-grade application with cross-district scalability at just 15 years old.

What we learned We vastly improved our skills in managing complex component states in React. We learned the deep intricacies of rendering 3D WebGL scenes alongside standard web applications. Most importantly, we learned that the future of AI isn't about autonomous takeovers; it's about "Responsible AI"—designing systems where AI acts as a hyper-intelligent advisor, but the human remains firmly in the loop.

What's next for School Energy Guardian Hardware Integration: Connecting the platform's simulated API to actual physical BMS (Building Management System) hardware and live IoT sensors.

Predictive Modeling: Expanding the AI engine to predict seasonal energy spikes before they happen based on weather APIs and historical campus data.

Mobile Companion: Developing a mobile application for on-the-ground facility managers to receive push notifications and approve AI fixes directly from their phones.

Built With

Share this project:

Updates

posted an update —

We Made it to Round 2! (And Here is What's Next for V2)Wow. First of all, a massive THANK YOU to the judges! We are absolutely thrilled that "School Energy Guardian" has advanced to Round 2 of the USAII Global AI Hackathon.Just to be 100% clear: We have put our pencils down Our code is locked, and we are NOT making any changes to our live application during this judging phase. We respect the rules and want you to evaluate the exact product we shipped before the deadline.However, building this project sparked so many crazy ideas in our heads. We literally can't stop thinking about where this platform could go. So, we wanted to share our official V2 Roadmap—the features we are going to start building the second the hackathon ends on June 27th!Here is what is coming next:The Live AI "Hacker" Terminal: We are building an auto-scrolling command terminal right into the dashboard. Admins will literally be able to watch the AI's "brain" work in real-time as it streams scanning logs, confidence scores, and background execution processes. "Talk to Your Building" (AI Assistant): Why just read charts when you can chat with them? We are adding an LLM-powered chatbot that analyzes live alerts so admins can ask things like, "Which building wasted the most energy this week?" and get instant, data-backed answers. Gamification & Real-World Impact: Numbers can get boring. V2 will translate kWh savings into tangible things (e.g., "You saved enough energy to power 5 homes today!"). We are also adding an unlockable badge system to turn energy-saving into a campus-wide game. Animated Energy Flow Network: A fully interactive SVG network graph with glowing particles flowing between the power grid, HVAC, and appliances, visually separating optimized zones (green) from waste zones (red). Mobile AR (Augmented Reality) View (New!): Imagine a facility manager walking around the campus, pointing their phone at an AC unit, and seeing real-time AI energy stats floating right above it in 3D space!Automated Maintenance Ticketing (New!): Instead of just alerting the admin, V2 will directly integrate with platforms like Jira. If the AI detects a faulty sensor, it will automatically draft a repair ticket for the maintenance crew.Building the MVP was an incredible journey, and we are so proud of our Three.js Digital Twin and Human-in-the-Loop architecture. No matter what happens on June 27th, we are turning this into a massive, real-world platform.Thanks for believing in our vision! Good luck to all the other amazing hackers in Round 2 .

Log in or sign up for Devpost to join the conversation.