My Plants Rooted at Home
Result: My Plants Rooted at Home · Gardener’s Guide
It started last August when I brought home a Daphne and a Bengal Ficus. Before I knew it, I had 7 plants at home. Today, after picking up a Scotch Broom, I wanted to build an online plant shelf where I could manage my plants and show them off! Right after that thought, I got started and finished the whole thing in an hour with Claude Code.
Starting Point: 14 Photos and a One-Line Prompt
I placed all my plants on the living room chair, took photos one by one, used iPhone’s cutout feature to remove backgrounds, and put 14 front/top-view photos of 7 plant species into the img folder.
I’ve put front and top shots of my houseplants in the img folder. I want to build a site with these. Let’s organize them from the day I brought them home, I’ll share what I heard at the plant shop, and you can look up more info too.
Claude Code opened every photo, identified each plant, then asked me about the dates I brought them home and the care tips I’d heard at the plant shop. After that, the agent ran 7 web research queries simultaneously to gather scientific names, characteristics, and care instructions for each plant.
Concept Pivot: From Timeline to Plant Shelf
The first version came out as a dark theme + timeline layout. It wasn’t the vibe I wanted. What I wanted wasn’t a simple plant encyclopedia — it was an online plant shelf. I rewrote the prompt.
What I want is something like a plant shelf where they’re all lined up horizontally, scrollable, and clicking on one opens a card with its info.
So, a complete redesign. Transparent PNG plants sitting on a shelf against an ivory background, swipeable sideways, with a modal popping up on click to show detailed info.
Details I Refined Along the Way
For the title, I went back and forth between several candidates before settling on “My Plants Rooted at Home.” Just like repotted plants take root in their new pots, I wanted to convey the feeling that I’m slowly putting down roots in this home too.
I paid close attention to adjusting each plant’s size. I wanted to express that their pots are all different sizes. Chlorophytum and Ivy are in smaller pots, so I scaled them down for variation.
Initially, the 14 PNG images totaled 79MB, making mobile loading painfully slow. When I mentioned it was too slow on mobile, Claude suggested converting to WebP — after conversion, it dropped to 8MB, a 90% reduction. Mobile loading got noticeably faster.
Gardener’s Guide: A Page for the Caretaker
After finishing the plant shelf nicely, I thought it’d be great to have a reference page for actually caring for them. I wanted to see at a glance when to water and where to place each plant.
So I built the Gardener’s Guide as a separate page. The key idea: grouping by sunlight requirements.
- Full sun (south-facing window, balcony): Bengal Ficus, Ivy, Scotch Broom
- Indirect light (1–2m from window, behind sheer curtains): Daphne, Green Beauty Philodendron
- Low light (interior, north-facing, near bookshelves): Pothos, Chlorophytum
Since touching the topsoil is the most accurate way to judge watering needs, I chose to show characteristics comparatively rather than prescribing “water on day X.” I also added a monthly timeline covering blooming periods, fertilizing schedules, and pruning times.
Timeline
| Time | What happened |
|---|---|
| 14:30 | Started with 14 photos + one prompt |
| 14:40 | Entered plant info, 7 web research queries running simultaneously |
| 14:50 | First version → concept change (plant shelf with horizontal scroll) |
| 15:05 | Title finalized, size adjustments, flower indicators added |
| 15:13 | First deployment |
| 15:21 | Image optimization (PNG → WebP, 79MB → 8MB) |
| 15:30 | Meta tags, favicon added → complete |
| 16:50 | Gardener’s Guide page deployed |
As I started growing plants one by one, I think my affection for this home grew little by little too. When you repot a plant from the shop into a new pot, it struggles to adjust at first, but once it settles in, it puts down roots and grows new leaves. I think I’m kind of the same. Looking at this home that’s gradually filling with green, I feel like spending this year’s Arbor Day appreciating it all. Time to tend to both the real plants and the online plant shelf!