CompoundsCoffee
A headless, bilingual coffee-discovery platform — brews, brew methods, and a searchable roaster locator — designed and built end to end on a modern composable stack.
- Role
- Design & build (solo)
- Type
- Headless web app
- Core stack
- Next.js · React · TS
- Content
- Contentful (headless)
A content-rich coffee library that stays fast and easy to run
Build a bilingual site where coffee lovers can explore brews, brew methods, and roasters, and where non-technical editors manage everything without touching code — all on an architecture that stays fast, accessible, and maintainable.
The catch is that the content is deep and relational: a single brew carries a full pour-over recipe and tasting notes, links to the roaster that made it, and that roaster links to its physical shops on a map. That richness is exactly where a monolithic CMS gets brittle, so the whole thing is built composable from the ground up.
The build, spec sheet
- Architecture
- Headless / composable
- Content
- Contentful, decoupled API
- Front end
- Next.js · React · TypeScript
- Locator data
- Contentful + Google Places API
- Localization
- English / Français
- Access
- Authenticated login
- Content model
- Relational (brew → roaster → shop)
- Delivery
- Fast, accessible, SEO-ready
// styled after the site's own brew-parameter tables
A store locator that fuses two data sources
Most store locators are an afterthought. Here it was the most interesting problem in the project. Instead of one source, it merges curated roaster and shop data from Contentful with live business data from the Google Places API — so visitors get searchable, real-time results with accurate mapping that neither source delivers alone.
Search by zip or city, filter by distance, and switch between map and grid views. The real work was reconciling two differently-shaped datasets into one clean, fast, user-facing feature.
- Google Places API
- Distance search
- Map / grid views
- Themed map
Deep, relational, editor-friendly
Every brew is a rich, structured record: region, roast, and process alongside a complete pour-over recipe — method, grinder, grind setting, water temp, dose, bloom, yield, and times — plus free-form tasting notes. Each brew links to the roaster that produced it, and each roaster links to its shops in the locator.
Modeling that in Contentful means editors add a new coffee, roaster, or shop through simple forms, and it flows automatically into the brew pages, the roaster links, and the map — in both English and French, with no developer in the loop.
- Relational modeling
- Structured content
- i18n (EN/FR)
The engineering behind the cup
Composable architecture
A cleanly decoupled front end over an API-first content layer — the direction modern content and commerce sites are moving.
Multi-source integration
Two live data sources reconciled and fused into one performant, user-facing feature.
Relational content design
A content model deep enough to be useful and simple enough for non-technical editors to run.
Internationalization
Full English/French localization across structured content, not bolted on after the fact.
Accessible, fast front end
An SEO-ready Next.js build with accessibility considered from the start.
End-to-end ownership
Architecture, design, and implementation through to production — one person, whole stack.