This is a submission for Weekend Challenge: Earth Day Edition 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. 🌍 Live: https://ecosense-ai.pages.dev Try it right now — takes about 60 seconds! / ecosense-ai EcoSense AI 🌍 AI-Powered Carbon Footprint Analyzer — Built for Earth Day 2026 What It Does Answer 4 quick questions about your daily habits (transport, diet, energy, shopping) and EcoSense AI uses Google Gemini to: Calculate your estimated annual carbon footprint Grade your eco-friendliness (A+ to F) Show impact breakdown by category Give 5 personalized tips to reduce your footprint Generate a shareable Earth Day pledge Live Demo https://ecosense-ai.pages.dev Tech Stack Next.js 16 (static export) Tailwind CSS (custom Earth Day theme) Google Gemini 2.0 Flash (AI analysis via server-side proxy) Cloudflare Pages (hosting + serverless functions) Lucide React (icons) Architecture Browser → Static HTML/JS (Cloudflare Pages) ↓ /api/generate (Cloudflare Function — server-side only) ↓ Google Gemini API (key never exposed to client) Setup npm install npm run build # Deploy: wrangler pages deploy out # Set GEMINI_API_KEY in Cloudflare Pages environment variables Built for DEV Weekend Challenge: Earth Day Edition … View on GitHub 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 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 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. 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. 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 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.