## 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](/firestore) was chosen as it offered minimal storage needs. [React](/react) and [MUI](/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.

![](/images/bonafarm.png)

## 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.

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 ...

Bonafarm: stock management app

While working on apps that will be deployed to Vercel, I have run into this situation several times, where I wanted to be able to start my api middleware together with the Vite dev server for local development. Normally you would run the api middleware separately using an express server for example and proxy requests from your Vite app to that server. However, since the Vite dev server can use express middleware, I wondered if it would be possible to eliminate the need to run a separate express server:

```tsx
import express from 'express'
import { defineConfig, ViteDevServer } from 'vite'

const app = express()

app.get('/api', (req, res) => {
  res.send('Hello world!').end()
})

function expressPlugin() {
  return {
    name: 'express-plugin',
    configureServer(server: ViteDevServer) {
      server.middlewares.use(app)
    }
  }
}

export default defineConfig({
  plugins: [expressPlugin()]
})
```

By default, the Vite dev server won't pass on any requests to our middleware, so the code above will not work. However, with a little trick using the proxy config, we can tell the dev server to let a certain request be handled elsewhere, or in this case, by our middleware:

```tsx
import { ProxyOptions, ViteDevServer } from 'vite'

const proxy: Record<string, string | ProxyOptions> = {
  '/api': {} // proxy our /api route to nowhere
}

function expressPlugin() {
  return {
    name: 'express-plugin',
    config() {
      return {
        server: { proxy },
        preview: { proxy }
      }
    },
    configureServer(server: ViteDevServer) {
      server.middlewares.use(app)
    }
  }
}
```

Now if we run our dev server and go to the `/api` route, it will display our `Hello world!` response.

While working on apps that will be deployed to Vercel, I have run into this situation several times, where I wanted to be able to start my api middleware together with the Vite dev server for local de...