Produce Path

Planted: 2023

To become the new maintainers of Produce Path, SKYCATCHFIRE was rewriting a legacy ASP.NET/Angular web application to Next.js and the mobile application to React Native.

Stack: Language: TypeScript; Runtime: Node.js; Web framework: Next.js (React.js); Async state management: React Query; CSS framework: Tailwind; Database: AWS RDS; ORM: Prisma; Auth: AWS Cognito; Hosting: AWS Amplify; Storage: AWS S3

Produce Path is a mobile and web application that combines FM Tracks and FM Engage.

What is FM Tracks?

FM Tracks is designed for managers operating direct-to-consumer markets. For example, farmers markets, mobile markets, or Community Supported Agriculture (CSA) programs.

Managers use FM Tracks to collect data on sales, customers, and vendors at the market for personal accounting and year-to-year comparisons they can share with advisory boards, funders, and the general public.

The Network feature of FM Tracks allows for all markets connected through a Network to share data collected via FM Tracks with a central Network Manager.

FM Tracks is included in the US Department of Agriculture SNAP-Ed Toolkit.

What is FM Engage?

FM Engage allows market consumers to see market locations, hours, and potential offerings.

Mid-port Authentication

The authentication in this project was a challenge. The legacy application used ASP.NET for the auth, but the new application required AWS Cognito. Because the legacy application was still in use by the new application for some application logic, the new application had to do a complex dance between

the browser,
the Legacy App API,
the Database, and
AWS Cognito.

Figuring this out required a few rewrites of the auth logic.

FM Tracks Daily Data

To help market managers enter daily data, I designed and built a new interface that surfaces important data points and allows managers to visually get a sense of the market data available in a given month.

To build this, a blend data is needed from

market hours,
market limited hours,
market transactions,
market reimbursements, and
market post-market reports.

As this project was a port of an existing application, I poured over the legacy code to determine how things worked. I then designed new HTTP API interfaces to support the new interface and implemented them in the Next.js API routes.

To keep people moving fast, I used React Query to keep any given months data around locally for five minutes.

At this time, I finally decided to pick up Envisioning Information by Edward R. Tufte. I used the book to help me design the Daily Data interface and it specifically influenced the inclusion of sparklines for transactions and reimbursements.

FM Engage Proximity Map

To help market consumers see market locations, I built a market proximity map.

Market consumers can specify a location to search, or use their current location using the Geolocation API. If they specify a location to search it will be converted to latitude and longitude coordinates using the Google Geocoding API. An upper and lower bound latitude and longitude is calculated from an approximation of a 25 mile radius the simple approximation of 1 degree of latitude being 69 miles and 1 degree of longitude being 69 miles at the equator and 0 miles at the poles. The upper and lower bound latitude and longitude is then used to query the database for markets within the approximate 25 mile radius.

The map is built with Google Maps and the Google Maps JavaScript API.