EcoTrack — A Habit Tracker for the Planet 🌍

Source: Dev.to

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

EcoTrack is a zero‑dependency eco habit tracker that helps everyday people build and stick to planet‑friendly habits — one small action at a time.

The idea is simple: most people want to live more sustainably but don’t have a lightweight, friction‑free way to stay accountable. EcoTrack makes it as easy as checking off a to‑do list — but for the planet 🌍.

Key features

• Daily one‑tap habit check‑in with per‑habit streak tracking
• Progress ring showing today’s completion at a glance
• 7‑day weekly heatmap to visualize consistency
• Cumulative impact dashboard — CO₂ saved, plastic avoided, energy and water conserved
• Browser push notification reminders at your chosen time
• Add custom habits beyond the defaults
• Fully offline — all data stored in localStorage, no account needed

Default habits include: using a reusable bag, choosing public transport, eating plant‑based meals, turning off unused lights, and carrying a reusable water bottle.

Demo

🔗 Live App: EcoTrack — Eco Habit Tracker

Code

🐙 GitHub Repository: github.com/makendrang/ecotrack

The entire app lives in a single index.html file — no build step, no dependencies, no framework. Clone it and open it directly in your browser.

ecotrack/
├── index.html   # Complete app — HTML + CSS + JS in one file
└── README.md

How I Built It

EcoTrack is built with pure vanilla HTML, CSS, and JavaScript — deliberately no frameworks or dependencies. The goal was to keep the app as lightweight and accessible as possible, something anyone could fork, modify, and host in minutes.

Technical highlights

• localStorage powers all persistence — habits, daily logs, streaks, and reminder settings survive page reloads with no backend.
• Streak algorithm iterates backwards from today through the log to calculate per‑habit and overall streaks.
• Impact calculations map each habit to an environmental category (carbon, plastic, energy, water) and compute cumulative totals across all logged days.
• Web Notifications API handles the reminder system — the app requests permission, then schedules a setTimeout to fire a browser notification at the user’s chosen daily time.
• CSS‑only animations drive the progress ring (SVG stroke-dashoffset transition) and impact bar reveals — no JS animation libraries needed.

How GitHub Copilot helped

GitHub Copilot was instrumental in keeping the build moving over a tight weekend window. Specific wins:

• Generated the streak calculation logic from a plain‑English comment in seconds.
• Autocompleted repetitive localStorage get/set patterns without manual boilerplate.
• Suggested the SVG stroke-dashoffset animation approach for the progress ring when I described the desired effect.
• Wrote the Web Notifications API scheduling logic — I described “fire a notification at a user‑chosen time daily” and Copilot filled in the setTimeout + Notification constructor code.
• Assisted with the CSS dot‑grid background texture and radial gradient layering.

What would have taken a full day of boilerplate and MDN lookups was compressed into a focused few hours, leaving more time to refine the UI and Earth Day theming.

Prize Categories

✅ Best Use of GitHub Copilot

GitHub Copilot wasn’t just a convenience here — it was a core part of making this build possible within a weekend. From streak logic to notification scheduling to SVG animation, Copilot accelerated nearly every technical decision in the project. I used inline suggestions throughout the codebase and Copilot Chat to reason through the localStorage data model before writing a single line.