Template React CDMX

Company: Agencia Digital de Innovación Pública

Role: Lead Frontend Developer

Stack: React, TailwindCSS, JavaScript

Template React CDMX

The base every React application at the agency starts from. Routing, sidebar, layouts, components and the documentation to use them: a new project begins here and already carries the city's identity.

What it solves

Every team set their project up from scratch, and every application ended up with its own menu, its own way of declaring routes and its own take on the city's colors. Four applications meant four different ways of doing the same thing, and none looked like the one next to it.

Here all of that lives in one place: what changes between projects is a JSON file, not code.

Routing system — Routes are declared in a file: who sees them, with which layout and in what order

The sidebar knows where you are

There isn't one menu: it changes with the area of the app you're in, and it's configured per route. An admin module shows its own things and the rest stays out of the way.

Sidebar system — Menus per route, with the most specific one winning

The component library

Every component with a working example, code to copy and the path to the file it lives in. That is what lets someone else use it right without asking me.

::carousel images=[{"src": "/media/work-projects/images/template-react-cdmx/libreria-1.jpg", "alt": "Component library", "caption": "The full catalogue, component by component"}, {"src": "/media/work-projects/images/template-react-cdmx/libreria-2.jpg", "alt": "A component's page", "caption": "Live example, code to copy, and where the file lives"}, {"src": "/media/work-projects/images/template-react-cdmx/libreria-3.jpg", "alt": "More components", "caption": "Forms, tables and alerts, all built the same way"}]::

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

What I did

All of it. I wrote the template on my own from start to finish —architecture, components, routing, layouts and the docs— and maintained it until I left the agency.

::column-break::

What mattered

That people who didn't write it could use it. That's why the documentation ships inside the template itself, with examples that run: a separate manual goes stale in the first week.

::/two-columns::

Layout system — Layouts: the same skeleton for every application in the city

Stack

React with Vite and TailwindCSS, declarative JSON routing, and the CDMX design-identity components.