• 

  Landing Page

• 

  Home Page

• 

  Rewards Page

EcoSpark: Gamifying Global Climate Action 🌍✨

💡 Inspiration

Climate anxiety is at an all-time high, especially among students and young professionals. We constantly hear about the urgency of the climate crisis, but 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.

We realized that to drive consistent, real-world environmental change, we needed to fix the incentive structure. We asked ourselves: What if we could combine the addictive, dopamine-driven engagement of premium gaming with tangible, verifiable ecological impact?

That question birthed EcoSpark. We drew inspiration from the progression systems of modern RPGs and the tactile, ultra-premium aesthetics of high-end interfaces. We wanted to build a platform where doing good for the planet feels as instantly rewarding as leveling up in your favorite game.

⚙️ How we built it

We architected EcoSpark to be lightning-fast, visually breathtaking, and technically robust:

• Frontend: Built on React 19 and Vite, utilizing Framer Motion for fluid, buttery-smooth micro-interactions. State is managed globally via Zustand.
• Visuals & 3D: We engineered a custom "Regalia" design system featuring deep-space glassmorphism and concentric growth rings. The landing page features a dynamic, interactive 3D Earth built with Three.js and React-Three-Fiber.
• Backend & Auth: Powered by Firebase (Firestore and Auth) with a strict server-authoritative architecture using the Firebase Admin SDK to ensure our virtual economy is tamper-proof.
• AI Integration:
  • We utilized Gemini Vision to power our proof-of-work system. When a user uploads a photo of an eco-friendly action (e.g., planting a tree or composting), Gemini analyzes the image to verify the action before awarding points.
  • We integrated Groq (Llama-3.3-70b-versatile) to act as a personalized, ultra-fast AI Eco-Coach, providing contextual tips based on the user's recent activity.
  • We built an Oracle Prediction Market ("The Arena") grounded in real-world data by proxying live sustainability headlines via the GNews API, rather than letting the LLM hallucinate outcomes.

The Mathematics of Impact (The Eco-Algorithm)

To ensure our gamification remained balanced and rewarding, we developed a dynamic scoring algorithm for user progression. The total Eco-Impact Score ($S$) is calculated as:

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

Where:

• $V_i$ = Base value of the verified task $i$.
• $W_i$ = Carbon-offset weight of the specific task category.
• $M(s)$ = The streak multiplier, modeled as a logarithmic curve: $M(s) = 1 + \alpha \ln(1 + s)$, where $s$ is the user's daily streak.
• $P_g$ = Points allocated to the Growth Pool.
• $R$ = The dynamic yield rate of community challenges.

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

🚧 Challenges we faced

1. The "LLM Hallucination" Trap: Initially, our AI prediction markets were inventing fictional scenarios and resolving them based on simulated logic. We had to completely tear down that architecture and rebuild it using real-time API integrations (GNews) so that the LLM only summarizes and resolves based on verified, real-world news.
2. Economy Security: We quickly realized that client-side state manipulation could destroy our in-game economy. We had to migrate all points-awarding logic, loot-box openings, and Oracle resolutions to secure, idempotent server-side transactions.
3. WebGl Performance: Rendering high-resolution 8K earth textures in Three.js caused initial stuttering on mobile devices. We implemented lazy-loading boundaries, texture compression, and a graceful fallback to a static hero component for devices with prefers-reduced-motion enabled or smaller viewports.

🏆 Accomplishments that we're proud of

• The "Regalia" UI: We successfully stepped away from the boring, corporate "green-and-white" eco-app stereotype. Our dark obsidian, sapphire, and gold aesthetic makes environmentalism look genuinely cool and ultra-premium.
• Flawless Vision AI Verification: Getting the Gemini Vision model to accurately parse messy, real-world photos submitted by users (and filter out fakes) felt like magic when it finally worked consistently.
• A True Server-Authoritative Ledger: We built a tamper-proof economy that handles chance games (Eco Vault, Spin to Win) and reward cases without ever putting user balances at risk of client-side exploits.

🧠 What we learned

We learned that gamification is a delicate science. If rewards are too easy, they lose meaning; if they are too hard, users churn. Balancing the math behind the drop rates for our "Celestial" tier loot boxes taught us a lot about probability and user psychology.

Technically, we learned the immense value of strict permission boundaries in serverless architectures. Trusting the client is the root of all evil in a digital economy!

🚀 What's next for EcoSpark

• School & Corporate Leaderboards: Allowing organizations to create private instances to compete internally.
• Hardware Integrations: Connecting EcoSpark to smart home devices (like smart thermostats) to automatically verify energy-saving tasks without requiring photo uploads.
• Expanded AI Coach: Giving the Llama-powered Eco-Coach long-term memory so it can track a user's carbon footprint journey over years, not just days.

Built With

• firebase-(auth
• firestore
• framer-motion
• gnews
• google-gemini-vision
• groq-(llama?3.3?70b)
• react-18
• react-three-fiber-(three.js)
• recharts
• storage)
• vercel-(serverless-+-cron)
• vite
• zustand