SavvyGarden

SavvyGarden started as a weekend project to build a comprehensive database of companion plants that I could use to plan our food production efforts on the farm.

View the site

Skills Used

  • UI Design
  • Wireframing
  • Prototyping
  • Development

Stack

  • Vue
  • Airtable
  • Gridsome
  • CommerceJS
  • TailwindCSS

About

SavvyGarden started as a fun weekend project to create a searchable list of companion plants that I could use as a reference tool for the farm. I used Airtable to easily maintain the list of plants, along with their friends and foes. I chose Gridsome as the static site generator, Tailwind for the front-end styling and configured it up as a progressive-web-app (otherwise known as a PWA).

The first version was intentionally simple, with an auto focussed search input the list of plants, making it easy to filter the results to find the plant you're looking for.

I also added an extra column to the plants sheet for "other names" to use it as a lookup field for the search. That way, if you type in coriander, dhania, or cilantro the correct result would show up.

I am currently working on an update, which I'll be releasing in the next few months.

  • Increases the plant count to 200
  • New section for plant guilds
  • Some much-needed design love
  • New ways to filter and view the content
  • New built-in shop to sell gardening-related merch, music, posters, jewelry, and art.
  • Dark-mode

The shop is being built from scratch in Gridsome, using CommerceJS as the headless commerce backend.

The app is free, works offline, has no tracking or ads, and will remain so. I may add a subscription service later, but that would for value-added tools and independent of the core app.