This is a submission for the Weekend Challenge: Earth Day Edition
🌱 What I Built
I built EcoSnap — an AI-powered plant identifier and eco-garden advisor that helps anyone discover, care for, and garden with native plants to support local biodiversity.[reference:0]
The goal was to create something free, private, and actionable—a tool that not only identifies plants but also empowers users to make eco-conscious gardening choices.
Key Features:
- 📸 Instant Plant ID – Upload, snap, or paste any plant photo.[reference:1]
- 📋 Detailed Plant Info – Common name, scientific name, description, and care instructions.[reference:2]
- 🌿 Eco Gardening Tips – Native companion plants to boost biodiversity.[reference:3]
- 🕒 Recent History – Saves your last 10 identifications locally.[reference:4]
- 🔒 Privacy First – Images are sent directly to Gemini API; no data is stored on any server.[reference:5]
🎥 Demo
Live Demo:
GitHub Repository: github.com/setuju/ecosnap[reference:6]
📸 Screenshots
| Main Interface | Plant Identification | Eco Tips |
|---|---|---|
 |
 |
 |
💻 Code
The entire project is vanilla HTML/CSS/JavaScript — no frameworks, no build complexity.[reference:7]
git clone https://github.com/setuju/ecosnap.git
cd ecosnap
python3 -m http.server 8000
🛠️ How I Built It
Tech Stack
- Frontend: HTML5, CSS3 (Glassmorphism, CSS Grid/Flexbox), Vanilla JavaScript (ES6+)
- AI Model: Google Gemini 2.5 Flash (free tier)
- Storage: LocalStorage for anonymous history
- Deployment: Vercel & Netlify (static hosting)
-
Dev Server: Python
http.server
The Hardest Parts
1. Getting Gemini to return valid JSON
Gemini is powerful, but getting it to consistently output clean, parseable JSON was tricky. I crafted a detailed prompt and built a robust fallback parser that can extract JSON from markdown code blocks or plain text.
2. Securing the API Key on a Static Site
Since this is a client-side app, I couldn't expose my Gemini API key in the source code. I wrote a small build script (generate-config.js) that injects the key from Vercel's environment variables during deployment, keeping it secure.
3. Designing an intuitive, beautiful UI
I wanted the app to feel premium and trustworthy. The glassmorphic design with soft gradients and smooth animations creates a calming, nature-inspired experience that invites users to explore.
How GitHub Copilot Helped (Prize Category)
I actively used GitHub Copilot throughout development. Here's exactly where it shined:
| Task | Copilot's Help |
|---|---|
| Gemini API integration | Generated the complete fetch request structure and error handling. |
| JSON parsing fallback | Wrote robust regex-based extraction logic for malformed API responses. |
| Share & copy functions | Scaffolded shareResult() and copyResult() with proper clipboard and Web Share API usage. |
| History management | Generated LocalStorage read/write logic with automatic expiration of old entries. |
| CSS glassmorphism | Suggested backdrop-filter and gradient combinations for the aesthetic. |
Without Copilot, I would have spent hours on boilerplate and API docs. With it, I focused on the user experience and ecological accuracy.
🏆 Prize Categories
This project is submitted for:
- ✅ Best Use of Google Gemini
- ✅ Best Use of GitHub Copilot
🙏 Thank You
Thank you to the DEV Community and the Weekend Challenge judges for organizing this inspiring event. Building EcoSnap was a reminder that technology, when wielded with intention, can be a powerful force for planetary good.
If you found this project interesting, I'd really appreciate a ⭐ on GitHub!
🌍 Every plant identified is a vote for a greener, more biodiverse planet. Happy snapping — and happy Earth Day!
This article was originally published by DEV Community and written by HARD IN SOFT OUT.
Read original article on DEV Community