This is a submission for Weekend Challenge: Earth Day Edition

What I Built

Most sustainability tools show you dashboards after the damage is done.

GreenGate sits at the source — the moment someone is about to approve a procurement order. You type a product and quantity. Before you click approve, it tells you exactly how many trees get felled, how many litres of water get consumed, and how much CO₂ gets emitted. Then it offers a greener alternative, authenticates an AI agent to draft the replacement Purchase Order, and logs the saved impact to an immutable vault.

Sustainability failures at institutions aren't usually malice. They're friction. Nobody calculated what 800 reams of virgin paper costs the planet because nobody had a tool at the moment of decision. GreenGate is that tool.

The full agentic flow

No API keys required — everything ships with mock fallbacks and 7 pre-computed presets.

Demo

demo video link: https://youtu.be/J4a7WFIh1yI

Run it yourself in 30 seconds:

git clone https://github.com/Nishu3005/Dev-to-Weekend-challenge-Earthday-edition.git
cd Dev-to-Weekend-challenge-Earthday-edition
python start.py

Opens at http://localhost:5173. No .env needed. To activate real Gemini LCA, paste your key in the API Keys & Credentials panel and click Test connection — you'll get a live green/red status instantly.

Code

python start.py

github link: https://github.com/Nishu3005/Dev-to-Weekend-challenge-Earthday-edition

How I Built It

Stack

Backend: one pipeline, four sponsors chained

The backend is two Express routes. /analyze chains Gemini → Backboard. /execute chains Auth0 → Snowflake. API keys come per-request from the UI body, falling back to .env — the same code handles demo mode and live mode with zero config switches.

Gemini gets a strict JSON prompt so there's no parsing ambiguity:

const prompt = `
You are the GreenGate Lifecycle Assessment Engine.
Calculate the hidden ecological cost of procuring: ${quantity} x ${productName}.
Return ONLY a valid JSON object strictly matching this schema:
{
  "deforestationCostTrees": number,
  "waterCostLiters": number,
  "carbonCostKg": number,
  "sustainableAlternative": string,
  "reasoning": string
}`;

I also built a /api/test-gemini smoke-test endpoint — the UI calls it when you click "Test connection" so you know your key is valid before any real LCA request fires.

Frontend: making numbers feel real

The centrepiece is CombinedWorldScene.jsx — a fully SVG-based animated world where every visual element is mathematically driven by LCA output. Three characters, three ecological costs:

🪓 The Axeman — always chopping, tree count scaling to deforestationCostTrees.

💧 Water Operator — 6 tanks filling from a river intake, scaled to waterCostLiters. Uses SVG clipPath with clipPathUnits="userSpaceOnUse" for the fill animation.

🏭 Factory Worker — inside the factory building, smoke rings scaling to carbonCostKg.

One Framer Motion gotcha worth knowing

Never mix an initial prop with keyframe animate arrays. It causes a visible flash on mount — Framer tries to interpolate from the initial state to the first keyframe. Use pure keyframe arrays with times only, no initial.

GitHub Copilot

Copilot was my pair programmer throughout. It handled the repetitive-but-exact work that makes up most of a project like this: Express route boilerplate, Snowflake schema SQL, SVG path coordinates for the characters, and Tailwind class strings for the API keys panel. The SVG world scene especially — Copilot's ability to continue coordinate patterns from context saved hours.

Prize Categories

🥇 Best Use of Google Gemini — Gemini 2.5 Flash is the LCA engine. Every ecological cost flows through a structured JSON prompt. The animated world is entirely Gemini's output made physical.

🥇 Best Use of Backboard — Backboard stores the institution's quarterly sustainability goals and checks every LCA result against them at runtime. It's the app's institutional memory — the difference between a one-off analysis and a compliance system.

🥇 Best Use of Auth0 for Agents — The AI uses Auth0 M2M credentials to draft the Purchase Order autonomously. The human approves; the agent executes. No human credentials ever touch the vendor system.

🥇 Best Use of Snowflake — Every approved transaction is written to procurement_logs with full impact data. Trees saved. Water saved. Carbon avoided. Agent auth ID. This is the ledger that makes sustainability auditable over time.

🥇 Best Use of GitHub Copilot — Used throughout as a development accelerator for boilerplate, schemas, SVG geometry, and Tailwind styling. Particularly valuable for the coordinate-heavy SVG animation work.

Happy Earth Day 🌍 — every purchase is a vote for the kind of planet we're building.