Borders
Authors: Evan Brand
Abstract: Borders is a tool to help users choose plants for a garden border based on their USDA hardiness zone. Users can browse plants for their zone, filtering by characteristics like sunlight needs, water requirements, or flower color. They can also search for a plant directly by common name or scientific name. Once they've added plants to their border, their border can be viewed and edited in an Offcanvas panel and saved by creating a bookmark in their browser. They can also view care guides for their border, although these are only available for a limited set of plants. The app was built using bslib and is set up to work for both desktop and mobile displays.
Full Description: # Borders
Borders is a tool to help choose plants for a garden border. Users are first asked to enter their US ZIP Code and then taken to a page that allows them to explore border plants for their USDA hardiness zone (there is also an option to enter their hardiness zone directly in case they live outside the US). They can then add plants to their border, which is available in a right-side Offcanvas panel.
There are three ways a user can update their border:
- By clicking on "Add to border" or "Remove" on a plant card.
- By searching for a plant using the "Find a plant" dropdown.
- By removing a plant from the Offcanvas panel directly.
Design
This app was built using the bslib package and makes heavy use of Bootstrap 5 responsive classes. It was set up for both desktop and mobile displays.
Plant icons used in this app are from the Noun Project. When possible, plants are mapped to an icon based on plant type.
Structure
This app is structured as an R package. This was done primarily for organizational purposes - it isn't set up to be distributed and installed like a regular package. It makes use of modules to help break the codebase into more manageable pieces.
Data
Plant data
The plant data in this app come from the Perenual API. Three different endpoints were used:
- A species list endpoint that returns a list of plants along with basic information about each plant.
- A species details endpoint that provides richer information about each plant but can only return data for one plant at a time.
- A care guide API, which also only returns data for one plant at a time.
A particular challenge was filtering by characteristics like flower color that cannot be directly passed as URL arguments to the species list endpoint. More information about how this was done can be found in the README on GitHub.
Hardiness zone data
The hardiness zone information in this app come from the PRISM Climate Group. Zones were mapped to US city names using data from United States Zip Codes.org.
Bookmarking
This app uses a simple form of bookmarking to allow users to save their border by creating a bookmark in their browser. The url stores a user's zone and the IDs of plants in their border. Filters are not saved.
Shiny app: https://evanbrand.shinyapps.io/borders/
Repo: GitHub - etbrand/borders: Shiny app for garden border design
Thumbnail:
Full image:
