ABC Conectividad

Empresa: Agencia Digital de Innovación Pública

Rol: Lead Frontend Developer

Stack: React, Django, Python, PostgreSQL

ABC Conectividad

La dependencia pide internet, la Agencia Digital tramita, Finanzas aprueba, se contrata. Todo digital y rastreable.

Mi primer proyecto en gobierno. Cuatro meses.

ABC Conectividad — La bandeja de requerimientos, filtrada por estado

Lo difícil no era el código

Ese flujo son cuatro pasos en un diagrama y catorce en la realidad: aprobaciones en cascada, validaciones cruzadas entre dependencias, normativa que cambia según quién firme y auditoría de todo, porque es dinero público.

Aprendí más de burocracia que de React. En gobierno esa es la mitad del trabajo: si el sistema no encaja con el proceso que ya existe, no lo usa nadie por bonito que esté.

::carousel images=[{"src": "/media/work-projects/images/abc/abc-dictamenes.webp", "alt": "Dictámenes", "caption": "Técnico, financiero y acta de entrega"}, {"src": "/media/work-projects/images/abc/abc-requerimiento-aprobado.webp", "alt": "Aprobado", "caption": "Un requerimiento con sus tres firmas"}, {"src": "/media/work-projects/images/abc/abc-cambio-domicilio.webp", "alt": "Cambio de domicilio", "caption": "El traslado del servicio de un punto a otro"}] height="460px"::

En el mapa, no en un campo de texto

Cada servicio se ubica donde está. Un identificador es una calle, un número y una alcaldía, y eso se marca, no se teclea.

::carousel images=[{"src": "/media/work-projects/images/abc/abc-mapa-identificadores.webp", "alt": "Mapa de identificadores", "caption": "Con la ficha de cada servicio"}, {"src": "/media/work-projects/images/abc/abc-identificadores.webp", "alt": "El catálogo", "caption": "Por dependencia, calle y alcaldía"}, {"src": "/media/work-projects/images/abc/abc-ubicacion.webp", "alt": "La ubicación", "caption": "Dentro del propio requerimiento"}] height="460px"::

Lo que hice

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

Mío

Todo el frontend en React: formularios de varios pasos con validación cruzada, los mapas con OpenStreetMap, subida de documentos en asíncrono y la caché para no pedir lo mismo diez veces. El diseño y los mockups también.

::column-break::

Del equipo

Django, PostgreSQL y las APIs REST que consume todo lo de al lado.

::/two-columns::

Resultado

Contratación digitalizada de punta a punta, con cada solicitud rastreable desde que entra hasta que se firma. En uso por varias dependencias de la CDMX.