Building EcoSnap: An AI-Powered Plant Companion for a Greener Planet

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!