Rense Bakker

Bonafarm: stock management app

Published: March 29th 2023
ProjectReactTypescriptFirebaseMUIProgressive Web AppViteVercel

The concept

Managing food orders and storage for animals at a petting zoo can be challenging. The existing paper lists used for ordering and tracking feed at a petting zoo were becoming hard to read and prone to errors. To address these issues, the goal was to create an app that could replace the paper lists, provide an easy-to-use interface, and prioritize user friendliness and accessibility.

Choosing the Right Tools

To make the app user-friendly and accessible, QR codes and colors were chosen for easy identification of different storage containers. The IBM design system color palette was selected to ensure accessibility for users with colorblindness. For data storage, a serverless approach using Firestore was chosen as it offered minimal storage needs. React and MUI were chosen for the frontend to expedite development and create an accessible app without extensive custom component creation.

Building the Prototype

The first prototype focused on displaying the list of storage containers and allowing users to view and modify the items in storage. Mutation logs were used to track changes, making it easier to generate future analytics. The prototype also included a QR code scanner for container identification. After one week, the first prototype was completed and deemed acceptable, but additional needs were identified. Users requested a list per feed item for the ordering process, the ability to add multiple feed items with one click, and an easy way to move items between storage containers.

Securing the App

Before going live, ensuring app security was essential. Firebase Auth was implemented to offer a secure login option without requiring users to create another account elsewhere, while also allowing the app to remain serverless.

Overall, the app was designed to replace paper lists, provide an easy-to-use interface, prioritize user friendliness and accessibility, and ensure security. Through iterative development and addressing user needs, the app was tailored to meet the unique requirements of managing food orders and storage at the petting zoo.

Table of contents

The concept Choosing the Right Tools Building the Prototype Securing the App