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:
| Task | Copilot's Help |
|---|---|
| Emission factor lookup | Wrote the entire EMISSION_FACTORS object with realistic values after I typed // per km gasoline car
|
| Chart configuration | Generated the complete Chart.js options object — I only tweaked colors |
| Tooltip CSS | Created the .tooltip and .tooltiptext classes from a single comment |
| Share button logic | Wrote the shareToX() and shareToFacebook() functions with correct URL encoding |
| Recommendation messages | Suggested realistic tips like "Reducing weekly driving by 20 km saves ~200 kg CO₂/year" |
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
This article was originally published by DEV Community and written by HARD IN SOFT OUT.
Read original article on DEV Community