Skip to content
Volver al Portafolio

V5 Hub

En DesarrolloSistema a MedidaDiseño UI/UX

Plataforma integral de gestión de operaciones de drones

48
Modelos de BD
Modelos Prisma cubriendo toda la operación: usuarios, jobs, entregables, geoespacial, IA
23
Módulos de Features
Frontend con módulos funcionales: admin, AI chat, analytics, auth, calendar, clients, dashboard, jobs, map, organizations, products, viewers...
2,830+
Tests
Tests unitarios y de integración, de ~12% a ~55% de cobertura en sesión de hardening
V5 Hub
Problema

Una empresa de drones operaba con herramientas fragmentadas: planificación en hojas de cálculo, comunicación por email, entregas manuales.

Cada etapa del negocio vivía en una herramienta distinta, planificación en WhatsApp, seguimiento en Kanban genérico, entregas por email sin trazabilidad, análisis sin dashboards. El sector de drones tiene particularidades únicas: geoespacialidad (jobs con GPS, geofences, restricciones LAANC/FAA), pipeline multi-etapa (bids → scheduled → processing → deliver → bill → completed), plugins de visualización especializados (mosaicos georreferenciados, nubes de puntos, modelos 3D), y multi-rol (admin, piloto, procesador, cliente, agente IA). La deuda técnica del legado era insostenible: sin testing, seguridad básica, cada feature nueva requería tocar múltiples sistemas.

Proceso
  1. 01

    Investigación y Arquitectura

    Mapeo del flujo completo de operación de drones: 5 roles, múltiples estados del pipeline, 4 tipos de visualización geoespacial. Diseño de monorepo con separación clara: frontend React, backend Express, paquete compartido de tipos y servidor MCP para IA.

  2. 02

    Base de Datos

    48 modelos en Prisma cubriendo: usuarios, organizaciones, sitios, productos, jobs con pipeline multi-etapa, logs de vuelo, programación recurrente, tiles geoespacial, conversaciones de IA y notificaciones. PostGIS para consultas geoespaciales.

  3. 03

    Sistema de Diseño Industrial

    Paleta oscura forzada con acentos naranja industrial. Estética de precisión técnica, paneles de vidrio, jerarquías de superficie en 4 niveles, tipografía Open Sans. ~56 componentes UI reutilizables con Shadcn UI.

  4. 04

    Backend y API

    33 rutas de API por dominio, 35 servicios de negocio. Redis para cache, BullMQ para colas, Socket.IO para tiempo real. Autenticación JWT con refresh token rotation, 2FA con TOTP, rate limiting. Integración LAANC para restricciones aéreas.

  5. 05

    Frontend y Viewers Geoespacial

    23 módulos de features. Sistema de viewers con framework de plugins extensible: LandscapeViewer (mosaicos georreferenciados), ConstructViewer (comparación temporal), CommunityViewer (datos comunitarios), ArbolViewer (análisis forestal). Carga dinámica bajo demanda.

  6. 06

    Integración de IA

    Servidor MCP con 24 herramientas invocables por IA. Chat con SSE streaming, persistencia en BD, rate limiting por usuario, tracking de costos por modelo, executor de escritura con tokens de deshacer para operaciones reversibles.

  7. 07

    Testing y Hardening

    2,830+ tests unitarios y de integración. Auditoría de seguridad con múltiples hallazgos corregidos. RBAC completo en herramientas MCP. Cobertura subió de ~12% a ~55%.

La reescritura tenía que modernizar todo sin perder los flujos operativos de los que la empresa dependía, y agregar capacidades que el negocio no tenía.
Construcción

33 rutas de API por dominio, 35 servicios de negocio.

Frontend con 23 módulos de features y un sistema de viewers con framework de plugins extensible, cada tipo de deliverable de drone tiene su propio viewer especializado (Landscape, Construct, Community, Arbol), carga dinámica bajo demanda.

Servidor MCP con 24 herramientas invocables por IA, chat con SSE streaming, persistencia, rate limiting y tokens de deshacer.

Testing: 2,830+ tests, cobertura de ~12% a ~55%.

Auditoría de seguridad con RBAC completo en herramientas MCP.

Resultado

Plataforma que unifica la operación completa de drones en una sola interfaz, desde la planificación hasta la entrega, con inteligencia artificial integrada y visualización geoespacial de clase profesional.

23 módulos de features, 48 modelos de BD, viewers geoespacial con plugins extensibles, chat IA con 24 herramientas MCP, portal de clientes, y 2,830+ tests automatizados.

Visuals
Artefactos del Sistema

Arquitectura de Monorepo

Monorepo de cuatro paquetes con pnpm workspaces + Turborepo para builds incrementales: frontend (apps/web), backend (packages/server), tipos compartidos (packages/shared) y servidor MCP (packages/mcp-server).

pnpm-workspace.yamlyaml
packages:
  - "apps/*"      # Frontend React
  - "packages/*"  # Server, Shared, MCP Server

Sistema de Plugins de Viewers

Framework de plugins lazy-loaded: cada tipo de deliverable de drone registra su propio viewer. Los plugins se cargan bajo demanda vía dynamic import, reduciendo el bundle inicial. Cuatro plugins: Landscape, Construct, Community, Arbol.

registry.tstypescript
const pluginRegistry = new Map<string, () => Promise<{ default: ViewerPlugin }>>();

export function registerPlugin(
  deliverableTemplate: string,
  loader: () => Promise<{ default: ViewerPlugin }>,
): void {
  pluginRegistry.set(deliverableTemplate, loader);
}

Pipeline de Jobs Multi-Etapa

Pipeline de 5 estados con transiciones validadas. Cada estado tiene reglas de negocio, solo se puede avanzar, no retroceder. Transiciones registradas en log de auditoría completo.

constants.tstypescript
PIPELINE_STAGES = [
  'bids',              // Cotización
  'scheduled',         // Programado
  'processing_deliver', // Procesando/Entregando
  'bill',              // Facturación
  'completed'          // Completado
]

Servidor MCP con 24 Herramientas

El servidor MCP expone la funcionalidad del sistema como herramientas invocables por IA. Cada herramienta tiene validación Zod, RBAC y scope de organización. La IA puede navegar, consultar y modificar datos de forma segura.

Stack Tecnológico
React 18TypeScript (strict)ViteTailwind CSSShadcn UI / Radix UITanStack QueryTanStack TableZustandReact Hook Form + ZodMapLibre GL JSOpenSeadragonFullCalendarApexChartsSocket.IOFramer MotionExpressPrisma ORMPostgreSQL 16 + PostGISRedisBullMQMCP ServerResendSentryDocker Composepnpm + TurborepoJWT + TOTP

¿Te gustaría construir algo así?

[Hablemos]