EcoSpark

EcoSpark: an AI‑powered gamified platform that turns students’ real eco‑friendly actions into verified points, streaks, and rewards—making sustainability a daily habit, not just a lesson.

Comment

EcoSpark: Gamifying Global Climate Action 🌱✨

TSOC 2026 Theme Alignment: Learn, Build, Contribute, and Inspire.

💡 The Problem: Bridging the Action Gap

The climate crisis is the defining challenge of our generation, yet many students and young professionals feel paralyzed by "climate anxiety." We identified a critical flaw in how sustainability is approached: the feedback loop for individual action is fundamentally broken. If you recycle a bottle or ride a bike today, you don't see the global temperature drop tomorrow.

Aligning with the TSOC vision of building software that solves real-world problems, we asked ourselves: What if we could combine the addictive, dopamine-driven engagement of premium gaming with tangible, verifiable ecological impact?

🚀 The Solution: EcoSpark

EcoSpark is a comprehensive, AI-powered gamification ecosystem designed to make sustainable habits addicting. We drew inspiration from the progression systems of modern RPGs and the tactile aesthetics of high-end interfaces to create a platform where doing good for the planet feels as instantly rewarding as leveling up in your favorite game.

Our alignment with TSOC's Vision:

  • Learn: Our interactive AI Eco-Coach educates users in real-time, teaching them actionable sustainability practices.
  • Build: We engineered a highly scalable, modern web application integrating complex AI and WebGL technologies.
  • Contribute: Users actively reduce their carbon footprint through verified real-world tasks.
  • Inspire: By gamifying climate action, we inspire a community-driven movement toward environmental responsibility.

⚙️ Technical Architecture & Engineering Practices

Building EcoSpark during TSOC was an incredible journey in applying modern software engineering. We focused heavily on clean code, maintainability, and open-source best practices, ensuring our repository is well-documented and accessible for future contributors.

  • Frontend (Web Development): Built on React 19 and Vite, utilizing Framer Motion for fluid micro-interactions. State management is cleanly handled via Zustand to ensure robust offline-sync capabilities.
  • Visuals & 3D (Interdisciplinary): We engineered a custom "Regalia" design system. The landing page features a dynamic 3D Earth built with Three.js and React-Three-Fiber, carefully optimized to remain accessible and performant across devices.
  • Backend & Security: Powered by Firebase (Firestore and Auth). A core focus was security—we implemented a strict server-authoritative architecture using the Firebase Admin SDK (via Vercel Serverless Functions) to ensure our virtual economy is entirely tamper-proof.
  • AI Integration (Artificial Intelligence & Machine Learning):
    • Gemini Vision: Powers our proof-of-work system. Users snap photos of eco-actions, and Gemini instantly verifies them to prevent cheating.
    • Groq (Llama-3.3-70b-versatile): An ultra-fast, streaming AI Eco-Coach providing personalized, contextual tips.
    • Oracle Prediction Market: We built an automated prediction market ("The Arena") grounded in real-world data by proxying live sustainability headlines via the GNews API.

🧮 The Mathematics of Impact

Innovation isn't just about code; it's about system design. To ensure our gamification remained balanced and rewarding, we developed a dynamic scoring algorithm for user progression:

$$ S = \sum_{i=1}^{n} \left( V_i \times W_i \right) \times M(s) + \left( P_g \times R \right) $$

(Where $V_i$ is task value, $W_i$ is carbon-offset weight, $M(s)$ is a logarithmic streak multiplier, $P_g$ is the Growth Pool, and $R$ is the community yield rate).

This mathematical foundation ensures that consistency (streaks) is rewarded just as heavily as isolated, high-effort tasks.

🚧 Challenges & Continuous Learning

TSOC is about the learning journey. Here is how we grew as engineers:

  1. The "LLM Hallucination" Trap: Initially, our AI prediction markets invented fictional scenarios. We learned the importance of grounding AI, forcing us to rebuild the architecture to integrate the GNews API so the LLM only resolves outcomes based on verified, real-world news.
  2. Economy Security & State Management: We quickly learned that client-side state manipulation could destroy our in-game economy. This was a massive lesson in secure backend engineering, prompting us to migrate all critical logic to secure, idempotent server-side functions.
  3. WebGL Performance & Accessibility: Rendering high-res 3D earth textures caused stuttering on mobile devices. We learned how to optimize rendering pipelines using lazy-loading boundaries, texture compression, and graceful fallbacks for devices with prefers-reduced-motion enabled.

🏆 Accomplishments & Open-Source Culture

  • Flawless Vision AI Verification: Getting the Gemini Vision model to accurately parse messy, real-world photos and filter out fakes was a huge technical triumph in prompt engineering.
  • A True Server-Authoritative Ledger: We built a tamper-proof economy mimicking Web3 mechanics, but powered entirely by a free-tier Web2 serverless infrastructure.
  • Open-Source Readiness: We maintained strict Git hygiene throughout TSOC. Our repository features clean commit histories, modular folder structures, and a comprehensive README.md designed to onboard new open-source contributors seamlessly.

🚀 What's Next: Expanding the Ecosystem

Our vision for EcoSpark extends far beyond this hackathon:

  • IoT & Hardware Integrations: Connecting EcoSpark to smart home devices (like smart thermostats) to automatically verify energy-saving tasks.
  • School & Corporate Leagues: Creating private dashboards for organizations to track and gamify their collective carbon offsets.
  • Open-Source Contributions: Expanding the Oracle to include a wider array of community-submitted eco-bets, fully embracing the global open-source ecosystem.

Built With

  • firebase-(auth
  • firestore
  • framer-motion
  • gemini
  • google
  • groq-(llama?3.3?70b)
  • react-18
  • react-three-fiber-(three.js)
  • recharts
  • storage)
  • typescript
  • vercel
  • vision
  • vite
  • zustand
Share this project:

Updates

Submission history