area · Frontend
Next.js App Router and React in production: a white-label portal serving 3 brands from a single codebase, with design tokens, i18n at scale and in-house testing infrastructure.
measured impact · before → after
255 s → 178 s
◆ TokenPlayground
Pick a brand or move the hue: the components on the right only read semantic tokens, so they re-theme without touching their code. It is the same 3-layer model as the real white-label.
1 · brand foundations
2 · semantic tokens
3 · components
Available balance
$1,250,000
Changing a real brand's primary color is a diff of about 11 lines in its config.
Atoms10
Molecules7
Organisms5
Templates5
Structure of the Trades.org component library, shared by 2 web apps and a React Native app. Names are representative.
Demo with fictitious data: no real clients and nothing from production.
A single codebase serves 3 production brands: 3-layer tokens, Zod-validated brand configs and a scaffolder to add new brands.
Atomic design with about 27 components (10 atoms, 7 molecules, 5 organisms and 5 templates) shared by 2 web apps and a React Native app.
A production application moved from React to Next.js with route-level code splitting, server rendering and asset optimization.
Backend and payment site
Collections platform an institutional client's borrowers use to pay online via PSE and Bre-B. Certified by the payment processor and deployed; in pre-production testing before cutover.
ADR author and implementer
3-layer tokens (brand foundations → semantic tokens → components) with Zod-validated brand configs and a CLI scaffolder for new brands.
I reply in English or Spanish.