This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
EcoSnap is an AI-powered environmental assistant that turns any photo of waste or pollution into instant, actionable intelligence.
You snap a photo. EcoSnap tells you:
- What kind of waste it is and how severe the damage is
- How much CO₂ impact it creates
- How many years it will take to decompose
- An emotional story from the waste's own perspective
- 5 concrete things you can do about it right now
- An AI coach you can chat with for more guidance
The core insight behind EcoSnap came from a real observation in Vadodara, Gujarat, India 🇮🇳 — people see environmental problems every day but don't act because they simply don't know what to do. EcoSnap bridges that gap.
Features
🔍 Eco-Detection
Upload any photo — plastic, garbage, polluted water, dead plants — and Google Gemini Vision AI instantly identifies the waste type, damage level (Low / Medium / High / Critical), CO₂ impact in kg, and years to decompose.
📖 Waste Story (The feature I'm most proud of)
Every piece of waste gets an emotional first-person narrative — told from the perspective of the waste itself. This makes the invisible impact visible and human.
"I was once a vibrant part of the river, teeming with life, but now I am choked by the refuse of humanity. My waters, once clear and life-giving, now bear the scars of neglect and indifference..."
⚡ 5-Minute Action Plan
Not just awareness — action. 5 concrete steps tailored to the specific waste detected.
🌱 Eco Score
A 0–100 environmental health score with a visual progress bar.
💬 AI Eco Coach
A conversational AI coach that answers your environmental questions in plain language.
Demo
🔗 GitHub Repository: https://github.com/exedistrict-ux/ecosnap
Screenshots
Detection Tab — Waste analysis with CO₂ impact and Eco Score:
EcoSnap Detection - Mixed solid waste detected near Taj Mahal river, Critical damage, 5000kg CO2, 500 years to decompose, Eco Score 10/100
Story Tab — Emotional narrative from the waste's perspective:
EcoSnap Story - I was once a vibrant part of the river...
Action Tab — 5-Minute Action Plan:
EcoSnap Action Plan - 5 concrete steps to tackle the detected pollution
Coach Tab — AI conversation:
EcoSnap AI Coach - Conversational environmental guidance
The Comeback Story
This project started during the DEV Weekend Challenge for Earth Day 2026. I had the idea, I had the passion — but I ran out of time before I could finish it properly.
Where it was before:
- Just a basic photo upload with a broken Gemini API call
- No real UI, no tabs, no styled components
- The "Waste Story" feature existed only as an idea in my notes
- API key was accidentally committed to GitHub (classic mistake 😅)
What I changed, fixed, and added to finish it:
- Built the complete 4-tab UI from scratch (Detection, Story, Action, Coach)
- Fixed the Gemini Vision API integration with proper base64 encoding
- Added the Waste Story feature — the emotional narrative that makes EcoSnap unique
- Built the full AI Coach chat with conversation history
- Designed a complete green nature theme with custom typography (Syne + DM Sans)
- Fixed the GitHub secret scanning violation and properly secured the API key
- Wrote a professional README with full documentation
The transformation from broken prototype to working, polished app happened in 3 days — with GitHub Copilot making a huge difference.
My Experience with GitHub Copilot
GitHub Copilot was genuinely essential to finishing EcoSnap. Here is exactly how it helped:
1. Gemini API Integration
The trickiest part was formatting the vision API request correctly — base64 encoding the image, structuring the inline_data object, and handling the response. Copilot suggested the correct structure on the first try, saving me hours of debugging documentation.
2. JSON Response Parsing
Gemini sometimes returns JSON wrapped in markdown backticks. Copilot suggested the clean regex strip pattern:
const clean = text.replace(/```
{% endraw %}
json|
{% raw %}
```/g, "").trim();
3. Chat History Management
Building the conversational AI coach required managing message history arrays correctly across re-renders. Copilot's suggestions for the state management pattern were clean and worked immediately.
4. CSS Animations
The loading spinner, fadeUp animations, and score bar transition — Copilot generated these CSS keyframes faster than I could have written them manually.
5. Error Handling
Copilot consistently suggested try/catch patterns and fallback states that made the app resilient, not just functional.
Without Copilot, this project would have taken a week. With it, I shipped in 3 days — solo, from a small room in Vadodara in 42°C summer heat. 🌡️
Tech Stack
- Frontend: React.js 18
- AI: Google Gemini 1.5 Flash (Vision + Text)
- Coding Assistant: GitHub Copilot
- Fonts: Syne + DM Sans (Google Fonts)
- Deployment: GitHub
What's Next for EcoSnap
- 📍 Nearby recycling center locator
- 🏆 Community leaderboard
- 🌐 Multi-language support (Gujarati, Hindi, English)
- 📱 PWA for direct camera access on mobile
Built for Earth 🌍 | Solo builder from Vadodara, Gujarat, India 🇮🇳
Every photo you snap is a step toward a cleaner planet.
Top comments (0)