FloraMedic

Upload a photo of your plant and get AI-powered insights into possible health problems, likely causes, and simple steps to help it recover.

Comment

Inspiration

I wanted to build something that could make plant care easier for people who do not know much about plants. A common problem is seeing a plant losing leaves, changing color, or developing unusual marks without knowing what is wrong or what to do next.

That led me to FloraMedic: a simple tool where someone can upload a photo of a plant and receive an AI-generated analysis of its visible condition and possible care steps.

What it does

FloraMedic allows users to upload a photo of a plant directly from their device. The image is sent to an AI model that examines visible features and returns a structured plant health report.

The report can include:

  • Plant identification
  • Overall health status
  • Visible symptoms
  • Most likely issue
  • Confidence level
  • Suggested care guidance

The goal is not to replace professional agricultural or botanical advice, but to give users a quick and accessible starting point for understanding what may be happening to their plant.

How I built it

I built the frontend using HTML, CSS, and JavaScript and hosted the project using Vercel.

When a user selects an image, JavaScript displays a preview and sends the image to a serverless API endpoint. The backend then sends the image to Google's Gemini multimodal AI model for analysis. The response is returned to the website and displayed as a FloraMedic health report.

I also used GitHub for version control and to manage the project's source code.

Challenges I ran into

The biggest challenge was connecting the website to an AI model securely.

At first, the image upload interface worked, but the AI analysis did not. I had to debug API requests, environment variables, serverless functions, deployment logs, and model compatibility.

One particularly useful lesson came from reading the server logs instead of only looking at the error shown on the website. This helped me identify API and model errors and eventually get the complete image-analysis pipeline working.

What I learned

This project taught me much more than simply building a webpage. I learned how a frontend communicates with a backend, how APIs work, why API keys must remain on the server, how environment variables are used, how serverless functions work, and how deployment logs can be used to debug a real application.

Most importantly, I learned that building software involves a lot of testing, debugging, and improving rather than everything working on the first attempt.

What's next for FloraMedic

I would like to improve FloraMedic by adding plant history tracking, better formatted reports, follow-up questions, multilingual support, and the ability to compare photos over time to monitor whether a plant is recovering.

Built With

Share this project:

Updates

Submission history