área · Frontend
Next.js App Router y React en producción: un portal white-label que sirve 3 marcas desde un solo codebase, con tokens de diseño, i18n a escala e infraestructura de testing propia.
impacto medido · antes → después
255 s → 178 s
◆ TokenPlayground
Elige una marca o mueve el tono: los componentes de la derecha solo leen tokens semánticos, así que se re-tematizan sin tocar su código. Es el mismo modelo de 3 capas del white-label real.
1 · fundamentos de marca
2 · tokens semánticos
3 · componentes
Saldo disponible
$ 1.250.000
Cambiar el color primario de una marca real es un diff de unas 11 líneas en su configuración.
Átomos10
Moléculas7
Organismos5
Templates5
Estructura de la librería de componentes de Trades.org, compartida por 2 apps web y una app en React Native. Los nombres son representativos.
Demo con datos ficticios: nada de clientes reales ni de producción.
Un solo codebase sirve 3 marcas en producción: tokens en 3 capas, configuraciones de marca validadas con Zod y un scaffolder para sumar marcas nuevas.
Atomic design con unos 27 componentes (10 átomos, 7 moléculas, 5 organismos y 5 templates) compartidos por 2 apps web y una app en React Native.
Una aplicación en producción pasó de React a Next.js con code splitting por ruta, renderizado en servidor y optimización de assets.
Backend y sitio de pagos
Plataforma de recaudo con la que los deudores de un cliente institucional pagan en línea por PSE y Bre-B. Certificada por la procesadora y desplegada; en pruebas preproductivas antes del corte.
Autor del ADR y de la implementación
Tokens en 3 capas (fundamentos de marca → tokens semánticos → componentes) con configuraciones de marca validadas con Zod y un scaffolder CLI para marcas nuevas.
Respondo en español o en inglés.