Danilo Ley Alves
All projects
Case study · 01
FairTrack

Every rescued gram, counted.

FairTrack turns food handovers at public Fairteiler shelves within the Foodsharing community into numbers communities can act on. Born in a university project, rebuilt from scratch as a real platform.

Project
FairTrack
Status
Live · in daily use
Year
Since 2023
Stack
Next.js · TypeScript · PostgreSQL · Drizzle · Tailwind · Motion
FairTrack

RETTEN. TRACKEN. TEILEN.

The tracking platform for Germany's Fairteiler network. Free, open source and in daily use.

In Germany, over 18 million tonnes of food are thrown away every year, close to a third of everything the country eats. A movement of foodsavers rescues what it can and hands it over at public shelves called Fairteiler. FairTrack exists to answer a deceptively simple question: what, from where and how much?
Source · WWF, Das große Wegschmeißen

From uni project to platform

FairTrack began as a university project at Hochschule der Medien Stuttgart, in collaboration with Raupe Immersatt, Germany's first foodsharing café. Around twenty students across design, management and engineering built a first version of the digital Retteformular, the rescue form meant to replace a paper sheet.

I was one of those twenty. When the semester ended, the project would have ended with it. I re-conceived FairTrack and rebuilt it from scratch as a standalone platform, with a new data model, a new codebase and an updated take on the original design guide. Today it runs in daily café operation, and the paper form is gone.

Two products in one

FairTrack serves two very different people. A foodsaver stands at the shelf with a bag in one hand and a phone in the other, so their flow has to work one-handed, outdoors, in under a minute. An operator runs the station and lives in dashboards, histories and exports. The landing page tells both stories with an animated product tour, which is ported here 1:1.

The rescue form is the heart of it. It only unlocks within 20 meters of the station, walks you through origin, category and quantity. Contributors who prefer speed can switch to a table-based fast mode.

Operators get the same form plus an admin area with configurable form fields, member and role management, guest access profiles for stationary tablets, and statistics that filter down to category, origin and time range. The Excel export exists because funding applications want spreadsheets, not screenshots.

The brand, as shipped

The design guide is itself a product of the uni project. The design students developed it with the goal to capture the movement, warm, hand-made and optimistic. So instead of replacing it during the rebuild, I updated it. The palette pairs warm paper with two greens straight from the vegetable crate. Londrina Solid gives headings a hand-lettered voice while Geist keeps the UI quiet. Blob shapes morph slowly signaling a sense of organic motion.

Primary
#446622
Headings, buttons, data
Secondary
oklch(90% 0.004 106)
Badges, subtle fills
Tertiary
#99BB44
Accents, blobs, the logo
Chart green
#C3D963
Chart scale, highlights
Background
oklch(96% 0.002 85)
Warm paper surface
Foreground
oklch(25% 0.019 272)
Text, near-black with a blue lean
Display · Londrina Solid 400
Retten. Tracken. Teilen.
UI & body · Geist

In Deutschland landen jedes Jahr über 18 Millionen Tonnen Lebensmittel in der Tonne. FairTrack macht einfach, einheitlich und nachvollziehbar sichtbar, wie viele davon gerettet werden.

Illustration does a lot of the lifting. Vegetable doodles are scattered across the site, and hand-drawn category icons live inside the form itself. The caterpillar mascot, a nod to Raupe Immersatt, marks milestones.

tomatocarrotoniongarlicsaladpepperbeetrootmushrooms
Fruits
Vegetables
Baked goods
Chilled goods
Dry goods
Other

Technical subtleties

20 m
Geofenced form
The rescue form only unlocks within 20 meters of the station. The distance check runs on the Haversine formula, and the position is verified once, then thrown away.
TanStack
React Query data layer
Reads run through TanStack Query with per-domain query keys, and typed server actions invalidate the affected keys on mutation. Dashboards refresh after every contribution without hand-rolled refetch logic.
Mon–Sun
Gamification engine
Streaks count calendar weeks with at least one rescue, computed from weekly buckets in a unit-tested processor. Milestones and an optional streamed AI cheer sit on top, and all of it can be switched off.
Resend
Email as components
Member invitations and password resets go out through Resend, with templates written as React Email components.
Sentry
Observability
Sentry instruments the client, server and edge runtimes. A failed submission at the shelf shows up with full context, debuggable before anyone writes a support mail.
1 seed
Generative branding
The morphing blobs are seeded Perlin noise, so server and client render identical paths and the organic motion never causes a hydration mismatch.
Just try it yourself.

The demo runs on real seed data, with no account and no setup. Poke around the dashboard, the map and the Retteformular yourself.