Inspiration
Our goal at the EcoChain team was to make people more environmentally conscious of their actions, but we also wanted to make it fun and enjoyable.
What it does
EcoChain is a gamified eco-action tracker. Users log actions like biking, composting, or refusing plastic bags by photo or text. Gemini 2.5 Flash Lite identifies the action, calculates CO2 saved, and generates a ripple prediction showing what would happen if a million people did the same. Actions earn XP, badges, and leaderboard rankings.
How we built it
Multi-page web app built with vanilla HTML, CSS, and JavaScript. Gemini 2.5 Flash Lite handles photo recognition and impact predictions. We built custom ripple animations, a scrolling impact ticker, and a live leaderboard across four hackathon tracks simultaneously.
Challenges we ran into
Getting Gemini 2.5 Flash Lite to reliably classify eco-actions from real photos required significant prompt engineering. Making the ripple visualization feel meaningful to the user took many iterations. We also needed many revisions for when the backend wasn't running.
Accomplishments that we're proud of
Shipping a fully polished multi-page app with a cohesive design system in one hackathon. The AI photo recognition working end-to-end was a highlight, and we're proud the app feels motivating rather than preachy.
What we learned
Making sustainability fun is a real design challenge. We learned a lot about prompt engineering for vision models, resilient UI design, and how a strong visual metaphor like the ripple can unify an entire product.
What's next for EcoChain
A mobile app, an expanded action library with regional CO2 data, city vs city community challenges, and brand partnerships offering real world rewards. Long term we want wearable and smart home integrations to auto-log eco-actions without any manual input.
Built With
- claude
- css
- gemini
- html
- javascript
- node.js
- supabase
- vercel