Plataforma de gestión de riesgos y cumplimiento normativo
Una sola herramienta para que empresas de distintos rubros demuestren que cumplen normativas de privacidad y seguridad de la información.
- Período
- 2024–2025
- Equipo
- 4 a 6 devs
- Mi rol
- Frontend developer
- Foco
- 100% frontend
Proyectos bajo acuerdo de confidencialidad. Los nombres de clientes, el código y las capturas no se muestran; los títulos son descriptivos.
Contexto
Plataforma web SaaS multi-tenant para gestionar el cumplimiento normativo: inventario de activos y actividades, análisis de riesgos, planes de tratamiento, controles de seguridad, gestión documental e informes.
La usan equipos de compliance, responsables de seguridad y consultores de organizaciones de distintos sectores. Trabajé en la SPA de administración.
Problema
Centralizar todo lo que una empresa necesita para demostrar que cumple normativas de privacidad y seguridad (estilo RGPD o estándares de seguridad de la información): qué activos y datos tiene, qué riesgos existen sobre ellos, qué medidas aplica y cómo evolucionan.
En la interfaz, el reto era presentar con claridad grandes volúmenes de datos relacionados entre sí: activos, riesgos y controles.
Qué hice
- Dashboard con gráficos interactivos que llevan a las pantallas de detalle ya filtradas.
- Grafo interactivo de dependencias entre activos y diagrama de Gantt para los planes de acción.
- Exportación de informes de riesgos y tratamientos, con selección del tipo de informe.
- Mapeo de equivalencias de controles entre distintos marcos normativos.
- Validaciones de fechas y estados en el seguimiento de objetivos y acciones.
- Paginación y filtros en listados y modales, y unificación visual de componentes (refactor de UX/UI).
Desafíos resueltos
- Corregí un listener que provocaba llamadas infinitas a la API al crear entidades.
- Arreglé la visualización de evaluaciones de impacto, que mezclaba activos agrupados y no agrupados.
Arquitectura
SPA en Angular organizada en módulos por funcionalidad, con una capa core (servicios, interceptores, guards) y componentes compartidos, que consume una API REST.
Stack
- Angular
- TypeScript
- RxJS
- Angular Material
- ApexCharts
- Cytoscape
- ngx-translate
- SweetAlert2
- ngx-toastr
- Git
- Docker
- ESLint
- Prettier
Resultado
Sigue en producción y las empresas cliente la usan como software interno.
Aprendizajes
Angular, RxJS y asincronía; trabajar sobre un código grande y con años de historia; visualización de datos con gráficos, grafos y diagramas de Gantt.