Template React CDMX

Empresa: Agencia Digital de Innovación Pública

Rol: Lead Frontend Developer

Stack: React, TailwindCSS, JavaScript

Template React CDMX

La base de la que salen todas las aplicaciones de React de la Agencia. Rutas, sidebar, layouts, componentes y la documentación para usarlos: un proyecto nuevo arranca de aquí y ya trae puesta la identidad de la ciudad.

Qué resuelve

Cada equipo montaba su proyecto desde cero, y cada aplicación acababa con su propio menú, su propia forma de declarar rutas y su propia versión de los colores de la CDMX. Cuatro aplicaciones eran cuatro maneras distintas de hacer lo mismo, y ninguna se parecía a la de al lado.

Aquí eso vive en un solo sitio: lo que cambia entre proyectos es un JSON, no código.

Sistema de rutas — Las rutas se declaran en un archivo: quién las ve, con qué layout y en qué orden

La sidebar sabe dónde estás

El menú no es uno: cambia según la zona de la aplicación en la que estés, y se configura por ruta. Un módulo de administración enseña lo suyo y el resto no estorba.

Sistema de sidebar — Menús por ruta, con la regla de que el más específico gana

La librería de componentes

Cada componente con su ejemplo funcionando, el código para copiar y la ruta del archivo donde vive. Es lo que hace que otro lo use bien sin preguntarme a mí.

::carousel images=[{"src": "/media/work-projects/images/template-react-cdmx/libreria-1.jpg", "alt": "Librería de componentes", "caption": "El catálogo completo, componente por componente"}, {"src": "/media/work-projects/images/template-react-cdmx/libreria-2.jpg", "alt": "Ficha de un componente", "caption": "Ejemplo interactivo, código para copiar y dónde está el archivo"}, {"src": "/media/work-projects/images/template-react-cdmx/libreria-3.jpg", "alt": "Más componentes", "caption": "Formularios, tablas y avisos, todos con la misma forma"}]::

::two-columns split="50-50"::

Lo que hice

Todo. El template lo escribí yo solo de principio a fin —arquitectura, componentes, rutas, layouts y la documentación— y lo mantuve hasta que salí de la Agencia.

::column-break::

Lo que importaba

Que lo usara gente que no lo escribió. Por eso la documentación viene dentro del propio template y con ejemplos que corren: un manual aparte se queda viejo en la primera semana.

::/two-columns::

Sistema de layouts — Los layouts: el mismo esqueleto para todas las aplicaciones de la ciudad

Stack

React con Vite y TailwindCSS, rutas declarativas en JSON y los componentes de la identidad gráfica de la CDMX.