EcoSense AI: Know Your Carbon Footprint in 60 Seconds

Source: Dev.to

EcoSense AI – AI‑Powered Carbon Footprint Analyzer (Earth Day 2026)

How It Works

1. Transportation – commute method & distance 🚗
2. Diet – from heavy meat to vegan 🍽️
3. Home Energy – fossil fuels to 100 % renewable ⚡
4. Shopping – fast fashion to minimal/second‑hand 🛍️

Google Gemini 2.0 Flash analyzes the answers and returns:

• An eco score (0‑100) with a letter grade
• Estimated annual CO₂ emissions in kg (compared to the global average)
• Impact breakdown by category with visual indicators
• Five personalized tips to reduce the footprint
• A shareable Earth Day pledge that can be copied and posted

The goal is to make carbon awareness accessible and actionable—practical, not preachy.

Live demo: (takes about 60 seconds)

What It Does

• Calculates an estimated annual carbon footprint
• Grades eco‑friendliness (A+ to F)
• Shows impact breakdown by category
• Provides five personalized reduction tips
• Generates a shareable Earth Day pledge

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

flowchart TD
    Browser["Browser (Static HTML/JS)"]
    API["/api/generate (Cloudflare Function)"]
    Gemini["Google Gemini API"]
    
    Browser --> API --> Gemini
    style Browser fill:#f9f,stroke:#333,stroke-width:2px
    style API fill:#bbf,stroke:#333,stroke-width:2px
    style Gemini fill:#bfb,stroke:#333,stroke-width:2px

• The API key lives only in the Cloudflare Function; it never reaches the client.
• The frontend sends a structured prompt to /api/generate.
• The function adds the Gemini API key server‑side, calls the Gemini REST API, and returns only the generated text.

Setup

npm install
npm run build
# Deploy
wrangler pages deploy out
# Remember to set GEMINI_API_KEY in Cloudflare Pages environment variables

Key Files

• app/page.tsx – Full React UI with step wizard, SVG donut chart for the eco score, and results display.
• functions/api/generate.js – Cloudflare Function that proxies the Gemini API (key never reaches the browser).
• app/globals.css – Custom Earth Day green theme.

Other Notable Components

• SVG donut chart for the eco score – visually satisfying.
• Color‑coded impact badges (red → green) for 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 four simple inputs into a comprehensive environmental analysis with personalized recommendations. Prompt engineering ensures Gemini returns consistent JSON with realistic CO₂ estimates, making the results genuinely useful.

Built for: DEV Weekend Challenge – Earth Day Edition
View on GitHub: (replace with actual URL)