This is a submission for Weekend Challenge: Earth Day Edition
What I Built
Most people understand climate change — but very few can see their personal impact in a meaningful way.
EcoTrack AI is a frontend-only React application that turns everyday lifestyle choices into a measurable carbon footprint and feedback system.
Users enter three simple inputs:
- transport
- food habits
- daily energy usage
The system then computes a deterministic carbon score using real-world emission factors, compares it against global benchmarks, and generates rule-based sustainability recommendations.
But the core idea is not calculation.
It is behavior visibility.
EcoTrack AI is designed as a behavioral feedback system, where small daily actions become visible, comparable, and improvable over time.
Demo
The demo shows:
- lifestyle input selection
- simulated analysis flow
- carbon score generation
- comparison with global averages
- personalized suggestions
- weekly trend visualization
- collective impact projection
- feedback loop for behavior adjustment
How I Built It
EcoTrack AI was intentionally designed as a frontend-first behavioral simulation system, not a backend-driven AI product.
The goal was to build something explainable, transparent, and focused on user behavior feedback.
Key Design Decisions
1. Deterministic Carbon Engine
All emissions are calculated using predefined real-world factors for transport, food, and energy usage. This ensures full transparency and reproducibility.
2. Rule-Based Recommendation System
Suggestions are generated using explicit conditional logic tied directly to user inputs. No machine learning or external APIs are used.
3. Simulated Intelligence Layer (UX Choice)
A short loading sequence simulates “AI analysis”. This is not real AI — it is a deliberate UX decision to make the system feel responsive and intentional.
4. Behavior-Driven Architecture
Every component is designed around one idea:
👉 “How does this change user behavior after seeing their result?”
5. Personalized Visualization System
Weekly trend data is generated based on user input, making insights feel contextual rather than static.
Technical Architecture
Built using React (Vite) with a modular component structure:
- Centralized state management in
App.jsx - Isolated carbon logic in
carbonLogic.js - Component-driven UI for each stage of user journey
- Recharts for visualization
- Pure CSS design system with semantic color tokens
AI Usage Transparency
EcoTrack AI does not use real AI models.
All “AI-powered insights” are simulated using deterministic rule-based logic.
However, the architecture is intentionally designed to support future integration with LLM-based systems such as Google Gemini for contextual recommendations.
Development was accelerated using AI tools for component scaffolding and UI iteration.
Additional Notes
- All carbon calculations are based on defined emission factors
- No backend, APIs, or external services are used
- System is fully explainable and runs entirely in the browser
EcoTrack AI is not a prediction tool.
It is a feedback system for behavior change.
Its purpose is simple:
Make impact visible → make decisions conscious → enable small, consistent change.
Because awareness alone doesn’t change behavior — feedback does.
![Defluffer - reduce token usage 📉 by 45% using this one simple trick! [Earthday challenge]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiekbgepcutl4jse0sfs0.png)
