30 september 2026

Overzicht

Traza is een proefboek voor koffie — de origen a tu gusto, van oorsprong tot jouw smaak. Elke koffie die je proeft wordt een pour: een pagina in je veldboek die de koffie vastlegt, hoe je ze hebt gezet (methode, dosis, opbrengst, maling, temperatuur, tijd, ratio), een SCA-cuppingscore, je smaaknotities en waar je ze dronk. Op termijn worden die pours een smaakprofiel — Mi Traza — dat je zegt wat je hierna moet proberen, je linkt aan de mensen die de koffie teelden en je toelaat ze rechtstreeks bij hen te kopen. Het zijn twee dingen die in elkaar passen: een Flutter-app voor iOS, Android en web, en een bijhorende website. Ik heb beide ontworpen en gebouwd, en de app shipt nu als TestFlight-bèta. Zie het als "Untappd voor koffie", maar gericht op traceerbaarheid en de teler in plaats van enkel op de check-in.

Waarom het bestaat

Drinkers van specialty coffee proeven constant en onthouden bijna niets. Je hebt een briljante kop, je bent van plan de brander en het proces te noteren, en een week later is het weg. Ondertussen zijn de mensen die de koffie effectief teelden onzichtbaar op het moment dat je er verliefd op wordt. Traza dicht beide gaten. Voor de drinker is het een geheugen en een smaakkaart: wat heb ik geprobeerd, wat vond ik geweldig, wat probeer ik hierna. Voor de teler en de brander is het een directe lijn naar de persoon die van hun koffie geniet — een geverifieerde pagina, een catalogus en fairtradeverkoop zonder tussenpersoon. Het proefboek is de haak; de connectie met de oorsprong is het punt.

De app

Eén architectuur, gebouwd om van backend te wisselen. De hele app draait achter één repository-interface. Een in-memory implementatie met seeddata draait de volledige ervaring met voorbeelddata, en een Firestore-implementatie schuift achter exact dezelfde interface zonder enige UI-wijziging. Die naad zorgde ervoor dat de schermen al lang voor de backend bestond tegen realistische data ontworpen en getest konden worden, en de overstap naar echte accounts heeft de UI-laag nooit geraakt. Een echt domeinmodel. De data is gemodelleerd zoals koffie echt werkt: een brander verkoopt koffies, een café is een plaats, een brew guide is een getimed recept, een cuppingscore is het volledige SCA-formulier met een score van 0 tot 100, en een pour is de check-in die een koffie, een bereiding en een beoordeling samenbrengt. Die nauwgezetheid zorgt ervoor dat de app zowel een casual check-in als een serieus cuppinginstrument kan zijn, afhankelijk van wie ze vasthoudt. Een echt sociaal product, geen lijstjesapp. Er is een feed, discovery, volgen, likes en reacties, en een plank met de koffies die je bewaard hebt. Alle sociale mechanismen die betrouwbaar moeten zijn — de notificaties, de geaggregeerde tellers, de moderatie — draaien server-side in Cloud Functions in plaats van in de client: iemand volgen stuurt die persoon een notificatie, een like of reactie notificeert de auteur (nooit voor jezelf, nooit voor concept-pours), meldingen worden behandeld, en admins kunnen naar een gekozen publiek uitzenden. Die logica op de server zetten is wat verhindert dat tellers liegen en notificaties vervalst worden. Twee soorten accounts. Naast persoonlijke accounts is er een zakelijke kant voor branders en cafés: een opeisbare, geverifieerde pagina met een catalogus, koffie-insights, een "on bar"-menu en een zaakpagina. Een claim wordt nagekeken door een admin, en goedkeuring stempelt het commerciële profiel op het account — dus een geverifieerde branderpagina betekent iets, omdat een mens ze heeft gecontroleerd. Beveiliging die in de database zit. De Firestore-rules beperken persoonlijke en sociale data tot hun eigenaar, laten elke aangemelde gebruiker bijdragen aan de gedeelde catalogus (de contribute-a-coffee-flow hangt daarvan af) terwijl alleen de bijdrager, de eigenaar van de brander of een admin mogen bewerken, en laten niets verwijderen toe. De rules zijn een eigen, gereviewd artefact, met de productiehardening expliciet als to-do's opgeschreven in plaats van aangenomen.

De look: Cuaderno del Valle

Traza ziet er niet uit als een database, en dat is precies de bedoeling. De design language — Cuaderno del Valle, het valleinotitieboek — is warm papier en houtskoolinkt met karmozijnrode en gouden accenten, handgetekende wiebelige randen, foto's als geplakte polaroids en handgeschreven Caveat-annotaties boven een Cormorant Garamond-displayserif. Een koffie loggen moet aanvoelen als schrijven in een versleten veldjournaal, niet als een formulier invullen. Dezelfde taal loopt door van de app naar de website, zodat het product op elk oppervlak als één object aanvoelt.

De website

De bijhorende site, gebouwd met Next.js en volledig voorgerenderd naar statische HTML, doet drie dingen tegelijk.

• Ze verkoopt het idee — een editorial, dennengroene, Apple-achtige scrollpagina met het Traza-vingerafdrukmotief dat smaakgerichte discovery uitlegt, het leren kennen van de oorsprong van een koffie, en het rechtstreeks bij de teler kopen op fairtradevoorwaarden.
• Ze is het publieke gezicht van de content van de app. Pours, koffies en profielen hebben echte webpagina's (/p, /c, /u), dus wanneer iemand een pour deelt, opent die als een volwaardige pagina met correcte previews — de share-a-pour-loop landt op het web, waarna een "open in app"-deeplink de bezoeker aan de app overdraagt.
• Ze vangt vraag op met een bèta-wachtlijst en bevat de ondankbare essentials die een echt product nodig heeft: privacy, voorwaarden, een adminoppervlak en Engels/Spaans doorheen alles.

De marketingsite staat live op traza-web-amber.vercel.app.

Gebruikte technologieën

• App: Flutter, Riverpod voor state, go_router voor navigatie, één codebase voor iOS, Android en web.
• Backend: Firebase — Auth, Firestore, Storage, Cloud Messaging en Crashlytics, met Cloud Functions (Node) voor notificaties, geaggregeerde tellers en moderatie.
• Architectuur: een repository-naad met verwisselbare in-memory en Firestore-implementaties; handgeschreven Firestore-securityrules met een eigen testsuite; 32 testbestanden over de app.
• Website: Next.js (App Router), statisch voorgerenderd, met Firebase voor de wachtlijst en publieke profielpagina's, tweetalig (ES/EN).
• Release: Fastlane met een App Store Connect API-key voor hands-off TestFlight-builds; interne en externe bèta-tracks.

Uitdagingen en lessen

Ontwerpen tegen een backend die nog niet bestond. De repository-naad was de beslissing met de meeste hefboom in het project. Door de UI te laten afhangen van een interface in plaats van Firestore, kon de hele app gebouwd, gedemoed en getest worden op seeddata, en schoof de echte backend eronder zonder UI-herschrijving. Het is het verschil tussen "we ontwerpen het zodra de API klaar is" en vanaf dag één ontwerpen. Vertrouwen moet server-side zitten. In een sociaal product is de verleidelijke shortcut om tellers in de client te berekenen en notificaties van daaruit te sturen. Precies zo gaan tellers afwijken en worden notificaties vervalst. Elke vertrouwensgevoelige mechaniek naar Cloud Functions verhuizen was meer werk en de enige eerlijke manier om het te bouwen. Een geverifieerde pagina is een menselijke beslissing. De claim-and-verify-flow voor branders en cafés betekent alleen iets omdat een admin ze nakijkt en goedkeuring het profiel letterlijk stempelt. Dat moderatiepad ontwerpen — claims, resoluties, broadcasts, meldingen — was evenzeer het product als de proefschermen. Schoonheid is hier een retentiefeature. Een proefapp staat of valt bij of mensen blijven loggen. De notitieboek-esthetiek is geen decoratie; ze is de reden waarom de app openen als een klein ritueel aanvoelt in plaats van data-invoer, en rituelen zijn wat mensen doen terugkomen.

Resultaat

Een werkend, tweezijdig koffieproduct in bèta: een proefboek dat elke kop onthoudt en er een palet van maakt, een sociale laag die drinkers verbindt, en een geverifieerde zakelijke kant die branders en telers aan de andere kant van die connectie zet — allemaal onder één handgetekende visuele taal, gedeeld tussen een Flutter-app en een statische bijhorende site. De architectuur is gebouwd om op te schalen van seeddemo-data naar echte accounts zonder herschrijving, en het geheel is ontworpen rond één belofte: van oorsprong, tot jouw smaak.