ABC Connectivity

Company: Agencia Digital de Innovación Pública

Role: Lead Frontend Developer

Stack: React, Django, Python, PostgreSQL

ABC Conectividad

The agency requests internet, the Digital Agency processes it, Finance approves, the service is contracted. All digital, all traceable.

My first government project. Four months.

ABC Conectividad — The requests inbox, filtered by status

The hard part wasn't the code

That flow is four steps on a diagram and fourteen in real life: cascading approvals, cross-checks between agencies, rules that change depending on who signs, and an audit trail for everything, because it is public money.

I learnt more about bureaucracy than about React. In government that is half the job: if the system doesn't fit the process that already exists, nobody uses it no matter how good it looks.

::carousel images=[{"src": "/media/work-projects/images/abc/abc-dictamenes.webp", "alt": "Sign-offs", "caption": "Technical, financial and delivery record"}, {"src": "/media/work-projects/images/abc/abc-requerimiento-aprobado.webp", "alt": "Approved", "caption": "A request with its three signatures"}, {"src": "/media/work-projects/images/abc/abc-cambio-domicilio.webp", "alt": "Address change", "caption": "Moving a service from one point to another"}] height="460px"::

On the map, not in a text field

Every service sits where it actually is. An identifier is a street, a number and a borough — you pin it, you don't type it.

::carousel images=[{"src": "/media/work-projects/images/abc/abc-mapa-identificadores.webp", "alt": "Identifier map", "caption": "With each service's details"}, {"src": "/media/work-projects/images/abc/abc-identificadores.webp", "alt": "The catalogue", "caption": "By agency, street and borough"}, {"src": "/media/work-projects/images/abc/abc-ubicacion.webp", "alt": "The location", "caption": "Inside the request itself"}] height="460px"::

What I built

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

Mine

The whole frontend in React: multi-step forms with cross-validation, the OpenStreetMap layers, async document uploads and the cache that stops the same request firing ten times. The design and mockups too.

::column-break::

The team's

Django, PostgreSQL and the REST APIs everything else consumes.

::/two-columns::

Result

End-to-end digital contracting, with every request traceable from submission to signature. In use across several Mexico City agencies.