top of page

Portfolio

Houseplant Care App

Overview

As someone with years of houseplant experience, I've developed an intuitive sense for plant care that goes beyond rigid watering schedules. However, this intuitive knowledge is difficult to share or systematize because plant conditions are so unique.

 

For my web development course final project, I created a houseplant care tracking app that helps users develop their own plant care intuition through personalized data tracking rather than prescriptive rules.

Role

Full-stack App Developer

UI Designer

Tools 

React.js

Firebase

Material UI

Users

Plant owners (novice or experienced)

Time

4 weeks

The Challenge

How might we help plant owners develop plant care intuition based on their own experience and environmental conditions, rather than generic recommendations?

Process

Research & Planning

I conducted competitive analysis of existing plant care apps and identified a key gap: most focused on universal care instructions rather than helping users understand their individual plants' needs.

​

These apps rely on generic, prescriptive recommendations (e.g., "water every 7 days, fertilize once every two months") that don't account for individual environmental factors, plant adaptation, or seasonal changes. Through research into existing plant care applications, I found that these rigid approaches often fail because plants adapt to their specific conditions over time.

​

I created wireframes and prototypes to map out a data-driven approach that would capture user observations over time.

Prescriptive?
or 

Five Plants Tile Collage

Descriptive

Technical Implementation

Building my first full-stack React application presented significant technical challenges. I implemented:

​

  • User authentication system using Firebase

  • Dynamic form components with Material UI for plant data entry

  • Real-time data updating capabilities

  • Personalized dashboard displaying each user's plant collection

  • Responsive design ensuring optimal user experience across desktop, mobile, and tablet devices with adaptive grid layouts and form components

​

The development process required extensive problem-solving and collaboration with my instructor. I attended office hours regularly, not just seeking quick fixes but working to deeply understand the underlying code functionality. This persistent approach to learning became a defining aspect of the project.

Code snippet from React Developer Tools
Code snippet from App.js

Design Decisions

​Due to technical constraints and time limitations, I focused on core functionality over visual polish. Key design decisions included:

​

  • Prioritizing intuitive data entry and editing flows

  • Creating a dashboard that provides an "at-a-glance" overview of all plants

  • Using Material UI components for consistency and accessibility

Houseplant care app update form

Learning Outcomes

What worked:

The application successfully met its core goal of helping users track personalized plant care data. Key successes included:

  • Smooth data entry and updating functionality

  • Effective dashboard overview that provides instant insight into plant status

  • Personal validation: I continue to use the app myself and find it genuinely helpful for maintaining awareness of my plants' needs

 

What I learned:

This project pushed me significantly outside my comfort zone, requiring me to balance technical implementation with user experience design. The biggest learning came from my approach to problem-solving: consistently seeking to understand not just how to fix issues, but why they occurred. This deep engagement with the technical aspects helped me grow as both a developer and designer.

​

Areas for Improvement:

Given more time and resources, I would focus on:

  • Enhanced visual design and UI polish

  • Plant iconography and color-coding systems for better visual organization

  • Delete functionality for plants that don't survive

  • More robust user testing with other plant owners

© 2025 by Eileen Zhang. Proudly created with Wix.com

bottom of page