What If Every Purchase Showed Its Real Environmental Cost? I Built That.

Nisha Singh — Mon, 20 Apr 2026 04:30:26 +0000

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

Step	What happens
1	You enter a product + quantity (or pick one of 7 presets)
2	Google Gemini runs a Lifecycle Assessment — trees felled, water consumed, CO₂ emitted, sustainable alternative
3	Backboard checks the result against stored institutional sustainability limits — fires a warning if you're about to breach them
4	An animated world scene makes the numbers physical — lumberjack chopping, water tanks filling, chimneys smoking — all scaled to real data
5	You click Approve Sustainable Alternative
6	Auth0 for Agents authenticates the AI via M2M to draft the replacement PO — no human credentials exposed
7	Snowflake logs the full transaction: original request, alternative selected, trees saved, water saved, carbon avoided

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

Nishu3005 / Dev-to-Weekend-challenge-Earthday-edition

GreenGate 🌿

Autonomous Procurement Guardian — Earth Day Weekend Challenge

GreenGate intercepts institutional procurement requests, calculates the real hidden ecological cost using Gemini AI, checks against sustainability goals, and lets an AI agent securely draft a greener Purchase Order — all visualised in a live animated world scene.

Quick Start

Prerequisites: Python 3.8+ and Node.js 18+

python start.py

That's it. The script installs all dependencies on first run, starts both servers, and opens the browser automatically.

Frontend → http://localhost:5173
Backend → http://localhost:3001
Press Ctrl+C to stop

API Keys (all optional)

The app ships with mock fallbacks — runs fully without any keys. To activate real integrations, enter them in the API Keys & Credentials panel in the UI. No .env editing required.

Key	Effect
Gemini API Key	Real LCA on any product you type
Backboard API Key + Project ID	Live institutional goal checks
Auth0 Domain / Client / Secret

…

View on GitHub

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

How I Built It

Stack

Layer	Technology
🧠 AI Brain	Google Gemini 2.5 Flash
🧠 Memory	Backboard
🔐 Execution	Auth0 for Agents (M2M)
🗄️ Data Vault	Snowflake
🎨 Frontend	React + Vite + Tailwind CSS + Framer Motion
⚙️ Backend	Node.js + Express
🤖 Dev	GitHub Copilot

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.

DEV Community: Nisha Singh