COFFEEDEX
a bilingual field guide to coffee, built for a real shop
Every coffee a local specialty shop serves, numbered for good, traced back to the farm that grew it on an interactive globe, and served whole in two languages because the owner speaks Spanish.
A coffee shop's rotating menu turned into a Pokédex: every coffee numbered, traced back to the farm that grew it on a spinning globe, and readable in English or Spanish.
- Live in production
- 2026
What it is
A specialty coffee shop rotates its beans every week, and the story of each one used to die with the chalkboard. COFFEEDEX gives every coffee the shop serves a number it keeps forever, like a Pokédex for beans. Spin a globe to see where coffee grows, follow any bean back to its farm, its altitude and its flavour, and log the ones you have tried. And because the shop's owner speaks Spanish, the entire site exists in Spanish too, down to the last tasting note.
The work
Context
A dex for coffee
HOLA is a specialty coffee shop in Prospect, South Australia. The beans rotate week to week, and the two questions regulars ask never change: what is on the grinder, and what does it taste like. A chalkboard answers for a week, then the answer is gone.
COFFEEDEX is the durable answer. Every coffee that passes through the shop gets a dex number it keeps forever, starting at #001. Anyone can browse without an account, follow a bean from the cup back to the farm that grew it, and signed-in regulars log what they drink and build a collection.
What it does
From the grinder back to the farm
The home page is a globe. Spin it, tap a producing country, and drill down from country to region to the individual coffees grown there. The heatmap is driven by FAOSTAT production data, so the colour on each country reflects real production volume rather than decoration.
Each dex entry carries the field record: origin, altitude, process, varieties, producer, harvest months, tasting notes and a flavour profile radar. A live badge marks what is on the grinder right now, and the barista curates all of it from an admin panel that works on a phone.
The Spanish build
Two languages, one codebase
The owner speaks Spanish, so the site speaks Spanish. Not a translation widget bolted on: the whole site exists twice. English is served clean at the root, Spanish lives at /es, and middleware rewrites bare paths internally, redirects explicit /en URLs to the clean form, and composes with the Supabase session refresh so auth survives the rewrite.
Interface strings come from a full Spanish dictionary that is key-parity checked at compile time, so a missing translation fails the typecheck instead of failing in production. Content is bilingual at the data layer: every table carries per-field Spanish siblings with English fallback. 70 country profiles, 25 region histories, 22 varieties with their histories, 5 processes, 41 flavour-note sets and both field guides, written in neutral Latin American Spanish.
Engineering
Static where it can be, live where it counts
Next.js 15 on the App Router with TypeScript throughout. Supabase Postgres sits behind row-level security: public reads for the catalogue, owner-gated writes for logs and admin. 309 pages are statically prerendered across the two locales, and the globe is WebGL with a static fallback for devices that cannot run it.
The data pipeline is scripted and licensed: FAOSTAT series ingested by script, imagery restricted to Creative Commons and public-domain sources with credits rendered on the page, and a validation gate over every string in the content data, in both languages.
How it was built
The same method as everything here
COFFEEDEX ran the estate's standard discipline: a design spec written before code, phased delivery, and lint, typecheck and build gates on every merge. Visual calls were made by a human on a real phone, including the globe's colour ramp and the switch from hex tiles to solid land masses.
The Spanish content pass fanned out across parallel agents, one per data file, then a coverage check against the live database confirmed every translatable field was filled before it shipped. The same validator that guards the English copy guards the Spanish.
Where it stands
Live, and in use
Live on Vercel and installable as a PWA. Lighthouse on the key routes: accessibility, best practices and SEO at 100 across the board, performance between 87 and 99 on a local production build.
The honest lines hold: coffee data is community-sourced and the site says so, and the admin and account screens stay English-only by design. The catalogue grows from behind the counter, one numbered coffee at a time.
