I Built a Gamified Carbon Footprint Platform for 1.4 Billion Indians in 14 Days — Using Only Prompts

javascript dev.to

A Build-in-Public story for PromptWars Virtual Challenge 3


The Problem Nobody Talks About

India emits about 1.9 tonnes of CO2 per person per year. That number means absolutely nothing to most people.

Tell someone "you emit 1.9 tonnes of CO2" and you'll get a blank stare. Tell them "your lifestyle is equivalent to taking 14 flights from Mumbai to Delhi every year" — and suddenly you've got their attention.

That gap — between abstract data and human understanding — is exactly what I set out to close with EcoTrack India.


Why Every Carbon Calculator I've Used Has Failed

I've tried at least six carbon footprint calculators before building this. Every single one had the same problems:

  • They used global emission averages. India's electricity grid in Jharkhand (coal-heavy, 0.95 kg CO2/kWh) is almost three times more carbon-intensive than Himachal Pradesh (hydro-heavy, 0.30 kg CO2/kWh). Using a single national average is just wrong.
  • They showed you a number and did nothing with it. "You emit 2.3 tonnes." Cool. Now what?
  • They had zero retention mechanism. You calculated once, felt vaguely guilty, and never came back.
  • They were designed for Western lifestyles — no LPG cylinders, no CNG autos, no train-heavy commutes.

So I decided to build the calculator I actually wanted to exist.


Enter Google Antigravity: The Tool That Changed Everything

Before PromptWars, my workflow was: idea → wireframe → code → debug → repeat. That loop took weeks.

With Google Antigravity, the loop became: idea → prompt → working prototype → refine.

Here's the first significant prompt I wrote (condensed):

Build a multi-step carbon footprint calculator for India. 
Use state-specific electricity grid emission factors 
(coal-heavy states like Jharkhand: 0.95 kg CO2/kWh, 
renewables states like Himachal: 0.30 kg CO2/kWh). 
Include Scope 1 (petrol, LPG), Scope 2 (electricity), 
and Scope 3 (food, flights, shopping). 
Output a "Carbon Credit Score" from 0–850 styled like a 
financial credit score with tiers.
Enter fullscreen mode Exit fullscreen mode

In under two minutes, I had a working calculator with all 29 state grid factors, the Scope 1/2/3 breakdown, and a score engine. Something that would have taken me 3–4 days of coding took 2 minutes of clear intent.


What Antigravity Got Wrong (And How I Fixed It)

This is the part most Build-in-Public posts skip. Antigravity isn't magic — it's a powerful tool that needs direction.

Problem 1: The score formula was off. The initial version scored everyone too low. A vegetarian in Karnataka with no car was getting 420/850 when they should be at 720+. I had to specify the exact formula: Score = max(0, 850 - (userTonnes / 10 * 850)) and cap it properly.

Problem 2: The nudges were generic. The first version showed the same tip to everyone. I reprompted:

The AI coach tips must analyze the user's actual breakdown 
and identify their TOP emitting Scope category. 
If Scope 2 (electricity) is highest AND the user is in a 
coal-heavy state, show tips about rooftop solar and 
off-peak AC usage specific to that state's grid factor.
Enter fullscreen mode Exit fullscreen mode

This turned generic advice into something that felt genuinely personal.

Problem 3: The Canvas share card was boring. The first generated card was functional but looked like a receipt. I asked for a glassmorphism-styled card with a leaf pattern background, the user's tier emoji prominently displayed, and a QR code placeholder with "Scan to calculate yours!" — the kind of card someone would actually want to share on Instagram.


The Five Features I'm Most Proud Of

1. State-Level Grid Intelligence

Every Indian state has a different electricity mix. EcoTrack knows this. Selecting Maharashtra vs. Himachal Pradesh with the same electricity consumption gives you meaningfully different scores — because the underlying carbon reality is different.

2. The "Making the Invisible Visible" Engine

After your score, the app shows you six relatable equivalents:

  • "Your footprint = charging your phone 487,000 times"
  • "Your footprint = 14 Mumbai–Delhi flights"
  • "You need 43 trees to offset your annual emissions"

These aren't decorative. They're the moment the number stops being a number and starts being something real.

3. Real-Time Behavioral Nudges

Selecting "Omnivore" diet immediately triggers: "Shifting to vegetarian could save ~1,000 kg CO2/year — that's like parking your car for 5 months." These aren't pop-ups. They're contextual, non-intrusive toasts that fire at the exact decision-making moment.

4. The 5-Step Onboarding Tour

Built entirely in vanilla JS with zero external libraries. Uses scrollIntoView() + CSS z-index stacking + a custom overlay engine. First-time users get a guided walkthrough of every key insight. Returns to localStorage so it never repeats.

5. The Shareable Carbon Card (Canvas API)

A fully programmatic image generator using HTML5 Canvas. Every card is unique — it paints the user's exact score, tier, state, and city benchmark in a downloadable PNG. Built from scratch. No Canva, no template.


The Numbers Behind the App

The emission factor database I compiled for this:

  • 29 Indian states, each with a unique grid emission factor
  • 5 diet types with scientifically sourced annual emission values
  • 8 transport modes with India-specific factors (CNG autos, 3-wheelers, etc.)
  • 8 city benchmarks for peer comparison
  • 3 Scope categories following enterprise carbon accounting standards

What I Learned About Vibe Coding vs. Traditional Dev

Traditional development is like being an architect who also lays every brick. Vibe coding with Antigravity is like being the architect with a skilled crew — you still need to know exactly what you want, you still need to catch mistakes, but you're no longer bottlenecked by execution speed.

The biggest shift: your bottleneck moves from "can I code this?" to "can I describe this clearly enough?"

Writing a precise prompt is now a technical skill. Knowing why a formula is wrong and how to correct it is still a technical skill. Antigravity amplifies competence — it doesn't replace it.


What's Next

EcoTrack India is live on GitHub Pages. The next features I want to build:

  • A community leaderboard showing anonymized state-vs-state comparisons
  • Monthly recalculation reminders via browser push notifications
  • Integration with UPI transaction data to auto-detect shopping and food delivery spending

Try It Yourself

🔗 Live Demo: https://manojs923.github.io/Carbon-Footprint-Awareness-Platform/
💻 Source Code: https://github.com/manojs923/Carbon-Footprint-Awareness-Platform.git

If you calculate your score, share your Carbon Card and tag me — I want to see how India's leaderboard looks.


Built for PromptWars Virtual Challenge 3 | Powered by Google Antigravity

#PromptWars #BuildInPublic #GoogleAntigravity #Climatetech #EcoTrackIndia #Hack2Skill #VibeCoding

Source: dev.to

arrow_back Back to Tutorials