DEV Community

Cover image for Building EcoSnap: An AI-Powered Plant Companion for a Greener Planet
HARD IN SOFT OUT
HARD IN SOFT OUT

Posted on

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

#devchallenge #weekendchallenge #earthday #javascript

DEV Weekend Challenge: Earth Day

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
Front Plant 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
Enter fullscreen mode Exit fullscreen mode

🛠️ 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!

Top comments (0)