This is a submission for Weekend Challenge: Earth Day Edition

What I Built

EcoSense AI is an AI-powered carbon footprint analyzer that helps people understand their environmental impact through a simple, beautiful 4-step questionnaire.

Users answer questions about their:

• 🚗 Transportation — commute method & distance


• 🍽️ Diet — from heavy meat to vegan


• ⚡ Home Energy — fossil fuels to 100% renewable


• 🛍️ Shopping — fast fashion to minimal/second-hand

Then Google Gemini 2.0 Flash analyzes their habits and returns:

• An eco score (0-100) with letter grade


• 
  Estimated annual CO₂ in kg (compared to global average)


• 
  Impact breakdown by category with visual indicators


• 
  5 personalized tips to reduce their footprint


• A shareable Earth Day pledge they can copy and post

The goal: make carbon awareness accessible and actionable — not preachy, but practical.

Demo

🌍 Live: https://ecosense-ai.pages.dev

Try it right now — takes about 60 seconds!

Code

Browser → Static HTML/JS (Cloudflare Pages)

            ↓

         /api/generate (Cloudflare Function — server-side only)

            ↓

         Google Gemini API (key never exposed to client)

npm install

npm run build

# Deploy: wrangler pages deploy out

# Set GEMINI_API_KEY in Cloudflare Pages environment variables

Key files:

• 
  app/page.tsx — Full React UI with step wizard, score visualization (SVG donut chart), and results display


• 
  functions/api/generate.js — Cloudflare Function that proxies Gemini API (key never reaches browser)


• 
  app/globals.css — Custom Earth Day green theme

How I Built It

Tech Stack

• 
  Next.js 16 with static export — zero server needed for the frontend


• 
  Tailwind CSS — custom green/earth color palette


• 
  Google Gemini 2.0 Flash — the AI brain that analyzes habits and generates personalized results


• 
  Cloudflare Pages — hosting with unlimited bandwidth + serverless functions


• 
  Lucide React — clean, consistent iconography

Architecture Decision: Security First

The #1 rule: the API key never touches the browser.

Browser → /api/generate (Cloudflare Function) → Google Gemini

               ↑ API key lives here only

The frontend sends a structured prompt to /api/generate. The Cloudflare Function adds the Gemini API key server-side, calls the Gemini REST API, and returns only the generated text. Users can inspect network traffic all day — they'll never see the key.

How Gemini Powers It

I send Gemini a structured prompt with the user's selections and ask for a specific JSON response. Gemini analyzes the environmental science behind each choice (e.g., gas car at 40km/day vs. public transit) and returns calibrated scores, actionable tips, and a personalized pledge.

The prompt engineering was key — I needed Gemini to return consistent JSON every time, with realistic CO₂ estimates. After testing, temperature: 0.7 gave the best balance of variety and accuracy.

UI Highlights

• 
  Step wizard with progress bar — keeps it feeling quick


• 
  SVG donut chart for the eco score — visually satisfying


• 
  Color-coded impact badges (red → green) on each option


• 
  Category breakdown bars on results


• 
  Copy-to-clipboard Earth Day pledge for social sharing

Prize Categories

Best Use of Google Gemini — Gemini is the core engine that transforms 4 simple inputs into a comprehensive environmental analysis with personalized recommendations. It's not just a wrapper — the prompt engineering produces calibrated, science-informed results that feel genuinely useful.