How I Built a Carbon Footprint Tracker in One Prompt Session — PromptWars Build Log

Google PromptWars 2026 — Build-in-Public Technical Blog By Abirami

The Problem I Chose to Solve

Climate change is the defining challenge of our generation — but most people have no idea how their daily choices contribute to it. I wanted to build something that made the invisible visible: a tool that translates lifestyle habits into concrete CO₂ numbers, and then actually tells you what to do about it.

The result: CarbonTrace — a 5-question carbon footprint calculator with a personalized action plan, built entirely through vibe coding in a single session.

What Is Vibe Coding?

Vibe coding is the PromptWars way of building: instead of writing every line of code by hand, you describe your intent clearly and let AI agents construct the solution. You are the architect. The AI is the builder. Your job is to communicate your vision precisely enough that the output is production-worthy.

It's faster. It's creative. And it forces you to think about what you're building before worrying about how.

My Prompt Strategy

I broke the build into four intent layers:

Layer 1 — Core Structure

"Build a React carbon footprint tracker. 5 questions covering transport, flights, diet, home energy, and shopping. Each question has 4 options with real CO₂ estimates."

Layer 2 — Results & Scoring

"After the quiz, show a grade (A–F), total CO₂ in tonnes/year, a visual bar breakdown by category, and compare against the global average of 4.7 tonnes."

Layer 3 — Action System

"Add 3 checkable action tips per category. When the user ticks actions, show an estimated CO₂ savings counter that updates live."

Layer 4 — Design Direction

"Use a deep forest green palette. Dark background, sage accents, warm sand text. Clean, minimal, climate-focused aesthetic." Key insight: specificity in prompts = precision in output. Vague prompts produce vague apps.

The Technical Architecture

CarbonTrace is a single-file React component with three views:

Intro Screen → Quiz (5 steps) → Results Dashboard

State Management

No Redux, no Context API — just useState. Five answers, one index tracker, one animation flag. The simplest architecture that works is always the right one.

Scoring System

if (total < 5) grade = 'A' // Climate Champion

if (total < 8) grade = 'B' // Eco Aware

if (total < 12) grade = 'C' // Room to Grow

if (total < 16) grade = 'D' // High Impact

else grade = 'F' // Critical Zone

The Action Savings Estimator

Every action you tick updates a live savings estimate (~0.4 tonnes per committed action). This number is conservative but the point is behavioral: seeing a number move creates commitment.

Design Decisions

Why Dark Forest Green?

Generic dashboard apps default to white backgrounds and blue accents. For a climate tool, the design should feel like the subject matter. Deep forest green creates environmental resonance without being literal or clichéd.

Why No Charts Library?

Pure CSS bar charts instead of Recharts or D3. Fewer dependencies = faster load = cleaner code. The bars are a single div with a width percentage and a CSS transition — 8 lines of code, zero imports.

Animation Restraint

One transition: the quiz card fades on question change. Everything else is instant. Restraint in animation = trust in the UI.

What I Learned

1. Prompt decomposition is the core skill. Breaking a complex app into intent layers is the same as breaking a problem into subproblems — fundamental CS thinking, applied to AI collaboration.

2. Design direction in prompts matters more than design code. Saying 'deep forest green, sage accents' produces a more distinctive result than specifying hex codes. AI responds to mood and metaphor.

3. Diet and transport together account for over 50% of average personal emissions. The most impactful single insight your app can surface.

4. Vibe coding is iterative, not a one-shot. Each prompt refines the previous output. The best builders treat it like pair programming.