-
-
-
-
Dashboard
-
Landing Page
The average person emits 13.1 kg of CO₂ daily, but existing carbon calculators are either boring, clinical interfaces or require invasive account logins. EcoTrack was inspired by a simple goal to make personal sustainability as visually stunning, responsive, and satisfying as closing your smartwatch fitness rings, all running 100% offline, privacy first, and directly in your browser.
EcoTrack is an offline-first carbon tracker that allows you to easily log daily activities across transportation, energy, food, and shopping. It instantly calculates your carbon output, visualizes your emission history with dynamic charts, and leverages a browser-based local AI engine to provide immediate, privacy first sustainability coaching and insights to help you hit your green goals.
We built EcoTrack using a lightweight Vanilla stack (HTML5, CSS3, and JavaScript) to guarantee near instantaneous load times and absolute user privacy. We utilized GSAP and Lenis for smooth scrolling and 3D card tilt effects, Chart.js for real-time visualization dashboards, and developed a custom keyword heuristic AI engine in pure JavaScript that runs 100% client-side via LocalStorage.
Our primary challenge was building a highly polished, interactive 3D layout without using heavy frameworks. We faced render clipping issues where GSAP character splitting broke CSS gradient text, and the Lenis smooth scroll engine initially hijacked native scrolling, preventing our reveal animations from firing. We overcame these by implementing direct gradient clipping on dynamic spans and creating a custom triple-layered IntersectionObserver event fallback.
We are incredibly proud of creating a stunning, framework free dashboard that runs entirely client side, achieving a near-instant load time. We successfully built a local keyword heuristic AI Advisor that offers responsive, personalized coaching in less than 5 milliseconds, demonstrating that developers can build highly interactive, intelligent web applications without compromising user privacy or relying on costly cloud APIs.
We deepened our understanding of building high-performance websites using only native browser APIs and learned how to orchestrate complex animations (like Lenis and GSAP) without third party framework wrappers. Additionally, we learned how to translate raw scientific emission factors into visual, easy to understand carbon equivalents, gaining key insights into user experience designs that promote daily positive habits.
The next step for EcoTrack is implementing automated carbon tracking by integrating with transit APIs and smart home utility meters. We also plan to introduce gamified community challenges, social share cards to let users showcase their streaks, and upgrade our local heuristics engine to run a optimized, local WebAssembly LLM directly in the browser for richer conversational coaching.
Log in or sign up for Devpost to join the conversation.