EcoQuest - From Concrete to Canopy with Gemini AI

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

Most environmental apps are just glorified spreadsheets. They ask you to manually log your "carbon footprint" or read articles about distant melting glaciers. They feel like homework. EcoQuest is different because it starts with where you actually live: your neighborhood.

EcoQuest is an AI-powered "Restoration Engine" that turns your local street into a playable quest. It uses computer vision to analyze photos of your immediate surroundings, identifies ecological "dead zones" (like concrete-heavy parking lots or barren sidewalks), and generates a high-stakes mission to bring nature back.

The goal isn't just to "be greener"—it's to transform yours and your neighbors' physical reality. By completing real-world tasks—from planting micro-forests to installing permeable water-catchment systems—you earn Seeds, unlock Guardian Themes, and contribute to a global, real-time leaderboard of restored hectares.

Demo
Live Demo: https://earth-day-hackathon-2.vercel.app/

Code
GitHub Repository: https://github.com/catcodey/earth-day-hackathon_2

How I Built It

The technical challenge was moving beyond simple "image recognition" into "Visual Reasoning." I didn't just want the app to see a tree; I wanted it to notice the absence of a tree and understand the civic implications.

1) The Vision Engine (Google Gemini)

The "brain" of EcoQuest is Gemini 1.5 Flash. I used Gemini 1.5 Flash not just for captioning, but for structural extraction. On every upload, the app sends the neighborhood image with a complex system prompt. Instead of returning a caption, Gemini returns a structured JSON payload containing:

• The Earthiness Index: A score based on greenery density and sustainable infrastructure.
• The Gap Analysis: A bulleted report explaining exactly why a neighborhood is "starved" for nature.
• Actionable Missions: 3 distinct, actionable custom missions that are specifically designed to improve the earthiness index of your neighborhood.

Once a mission is complete, Guardians upload a "Finished" image. This "Before & After" record serves as the proof of restoration and unlocks the full reward bounty.

2) The Guardian Community & Rewards

Environmentalism is a team sport.

• Neighborhood Spotlight: A real-time feed where Guardians from around the world post their transformations. You can "Support" other projects to boost their visibility and foster civic pride.
• The Point Loop: Finishing missions earns you Seeds.
• The Eco Shop: Seeds are used here to purchase Guardian Themes (like Midnight Forest or Royal Waves) and status badges. This gamification layer ensures that the more you restore the physical world, the more you can personalize your digital presence.

3) Global Stats

Transforms your effort into localized science metrics:

• Carbon Offset: Estimated CO₂ sequestered by converting gray concrete to green space.
• Water Restoration: Rainwater volume absorbed into the ground via permeable surfaces.
• Heat Mitigation: Localized temperature reduction achieved by expanding the urban canopy.
• Biodiversity Resilience: Progress toward creating micro-habitats for native pollinators.

4) The Dynamic Theme Engine

Advice is better when it looks good. I implemented a custom Theme & Effect System. When users spend their Seeds (earned via real actions), the entire UI morphs.
Aesthetic Invariants: I built a state-driven CSS bridge where "Equipping" a theme like Midnight Forest or Volcanic Earth updates the primary color tokens, shadows, and borders across the entire app.

5) Celebrating Progress

I used canvas-confetti and motion (Framer Motion) to make "checking a box" feel visceral. Completing a mission doesn't just bump a number—it triggers a visual celebration and updates your Global Impact metrics. These metrics (Carbon offset, Heat mitigation) are calculated dynamically based on the specific missions Gemini generates, moving the impact from "vague idea" to "specific data."

Workflow

• Scan: Upload a photo of your neighborhood to the AI Earthiness Analyzer.
• Analyze: Gemini 1.5 Flash audits the image and assigns an Earthiness Index.
• Select: Choose one of three actionable missions tailored to your block’s needs.
• Act: Complete real-world sub-tasks using the persistent mission checklist.
• Verify: Upload a "Restored" photo to document the physical transformation.
• Quantify: The app calculates CO₂ and water impact based on your success.
• Reward: Earn Seeds to unlock exclusive themes and badges in the Eco Shop.
• Inspire: Share your Before/After results with the global Guardian community.

Technical Stack

• React 19 + Vite: For the blazing-fast SPA scaffolding.
• Tailwind CSS 4.0: Powering the "Geometric Balance" design theme.
• Google Gemini SDK: For the core visual analysis and mission generation.
• React Markdown: Custom-styled to ensure AI reports are high-legibility and beautiful.

Prize Categories
Best Use of Google Gemini
EcoQuest relies entirely on Gemini's multi-modal capabilities. Not only does it "see" the neighborhood, but it also projects a better version of it. The 2x "Mission Reroll" feature showcases Gemini's ability to provide creative variety within a fixed set of constraints, ensuring that no two Guardians have the exact same quest.

The planet doesn't need more spectators; it needs more Guardians. EcoQuest is my attempt to make that transition addictive.