• 

  Logo

SwampSaver - Project Submission

Inspiration

In an era where digital consumption is invisible but environmentally costly, we wanted to bridge the gap between our screen time and its tangible impact on the planet. We realized that while people care about the environment, "energy usage" is often just a boring number. We asked ourselves: "What if saving energy wasn't just responsible, but fun?" Taking inspiration from Tamagotchi-style mechanics and modern dashboard aesthetics, we created SwampSaver to turn energy efficiency into a game where your eco-friendly actions literally "save the swamp."

What it does

SwampSaver is a full-stack eco-dashboard that gamifies energy reduction.

• Live Energy Monitoring: It tracks real-time system power draw (CPU/RAM) and converts it into equivalent CO2 emissions and fun units (like "Airpods charged" or "Smartwatches powered").
• Vampire Hunter: It identifies high-energy processes and distinct browser tabs, allowing users to "kill" them directly from the dashboard to save power.
• Swamp Intelligence: An AI-powered Gator chatbot that analyzes your specific running apps and gives personalized, witty advice on how to reduce your carbon footprint.
• History & Analytics: Tracks your energy usage hour-by-hour and day-by-day, letting you visualize your long-term impact.
• Gamification: Completing eco-challenges earns you "Leaves" to upgrade your virtual swamp, keeping you engaged with your habits.

How we built it

We built a tri-connected ecosystem:

1. Frontend: A responsive React application with a rich, animated UI using Recharts for data visualization. We utilized clear glassmorphism and neon aesthetics to make the dashboard feel premium.
2. Backend: A Python FastAPI server that uses psutil to tap into low-level system metrics (CPU, RAM, PIDs) and estimates wattage usage. It serves as the central brain, handling logic for the AI tips and data aggregation.
3. Browser Extension: A custom Chrome Extension that communicates with the backend, allowing us to monitor open browser tabs, detect idle "zombie" tabs (like a paused YouTube video in the background), and close them remotely.

Challenges we ran into

• Cross-Context Communication: Getting the Chrome Extension, React Frontend, and Python Backend to talk seamlessly was a hurdle. We had to implement a polling mechanism so the Extension could pick up "kill" commands sent from the React Dashboard.
• Data Persistence: Since backend stats are transient, we had to implement a robust client-side HistoryManager in React that uses LocalStorage to aggregate and persist hourly/daily energy stats without needing a heavy database.
• Accurate Estimation: converting arbitrary CPU percentages into "Watts" is complex. We tuned our algorithm to approximate generic hardware usage while keeping it consistent enough for gamification.

Accomplishments that we're proud of

• The "Kill Switch": It feels incredibly satisfying to click a button in the web dashboard and watch a real Windows process or Chrome tab vanish instantly.
• The AI Persona: Our "Gator" isn't just a generic bot; it sees what apps you're running (e.g., "I see you're running VS Code...") and gives context-aware advice with a swampy twist.
• Visual Polish: We managed to make an "energy monitor" look less like a spreadsheet and more like a video game HUD.

What we learned

• Browser Extension Limits: We learned a lot about the Chrome Runtime API and how to bridge the gap between a web page and the browser itself.
• User Psychology: Gamification works. Seeing a "Week Peak" graph or a challenge progress bar makes the abstract concept of energy saving immediately actionable.

What's next for SwampSaver

• Hardware Integration: Connecting with smart plugs to monitor external devices (monitors, lights).
• Leaderboards: Competing with friends to see who can use the least energy while working.
• Pet Evolution: Evolving the swamp creatures based on how much C02 you save over a month.

Built With

• css
• fastapi
• html
• javascript
• manifest
• openai
• psutil
• python
• react