I Built a Carbon Footprint Tracker in 48 Hours — Here's How Copilot Saved Me

This is a submission for the Weekend Challenge: Earth Day Edition

🌱 What I Built

I built EcoTrack Pro — a beautiful, privacy-first carbon footprint calculator that helps individuals understand and reduce their environmental impact.

The problem: Most carbon calculators are either too simplistic (3 questions) or buried in corporate reports. People want to know their actual impact and get actionable steps to reduce it.

The solution: EcoTrack Pro asks 15+ lifestyle questions (transport, energy, food, waste, shopping), calculates annual CO₂e emissions using peer‑reviewed data, and provides personalized, quantified recommendations — not generic tips.

Key features:

• 📊 15+ input categories with sensible defaults
• ⚡ Real‑time grid intensity by country (Electricity Maps data)
• 📈 Interactive pie & bar charts (toggleable)
• 💡 Personalized recommendations with estimated CO₂ savings
• ☁️ Anonymous cloud sync via Supabase (no login required!)
• 🌓 Beautiful glassmorphic UI, fully responsive
• 🔗 Share results on X, Facebook, LinkedIn

🎥 Demo

Live Demo: ecotrack-pro.netlify.app

Screenshots:

The apps	Calculator

💻 Code

GitHub Repository: github.com/setuju/ecotrack

The entire project is vanilla HTML/CSS/JavaScript — no frameworks, no build steps. Just clone and open index.html.

git clone https://github.com/setuju/ecotrack.git
cd ecotrack
python3 -m http.server 8000

🛠️ How I Built It

Tech Stack

• Frontend: HTML5, CSS3 (Glassmorphism, CSS Grid/Flexbox), Vanilla JavaScript (ES6+)
• Charts: Chart.js (both pie and bar views)
• Backend/Storage: Supabase (PostgreSQL) with anonymous device‑ID sync
• Data Sources: EPA, IPCC, Poore & Nemecek (2018) Science, Electricity Maps
• Dev Server: Python http.server

The Hardest Parts

1. Balancing accuracy with simplicity

I needed enough inputs to be meaningful, but not so many that users bounce. I grouped 15+ fields into collapsible sections and pre‑filled defaults based on global averages.

2. Anonymous cloud sync without login

I didn't want to force sign‑up. Solution: generate a persistent device_id in localStorage, and if the user accepts cookies, sync their footprint to Supabase using that ID. Row‑Level Security ensures they only see their own data.

3. Chart.js "undefined" errors

When toggling between pie and bar charts, I kept getting broken charts. The fix: properly destroy the previous Chart instance before creating a new one, and always use a fresh canvas context.

How GitHub Copilot Helped (Prize Category)

I actively used GitHub Copilot throughout development. Here's exactly where it shined:

Without Copilot, I would have spent hours on boilerplate and docs. With it, I focused on UX and architecture.

🏆 Prize Categories

I'm submitting this project for the following prize category:

• ✅ Best Use of GitHub Copilot

(I used Copilot to accelerate development — generating emission factors, chart configs, share logic, and personalized recommendation text.)

🙏 Thank You

Thank you to the DEV Community and the Weekend Challenge judges for organizing this inspiring event. It was a joy to build something meaningful for Earth Day.

If you find this project useful, I'd really appreciate a ⭐ on GitHub!

This is a submission for the Weekend Challenge: Earth Day Edition