Proyecto académico
ExpressMX
Plataforma web y móvil para gestionar servicios a domicilio: un panel administrativo, una app para clientes y otra para prestadores, con un solo backend y una base de datos PostgreSQL.
Caso Práctico SOFTWARE 6 · Licenciatura en Informática · Acuerdo 286 de la SEP. «Desarrollo de una Plataforma Web y Móvil para la Gestión de Servicios a Domicilio».
La demo abre el panel administrativo con una cuenta de demostración compartida. Los datos son ficticios y se restablecen cada noche.
- Arquitectura
- Monolito modular
- Repositorio
- Monorepo pnpm + Turborepo
- Frentes
- Panel web, app cliente y app prestador
- Diagramas
- 66 figuras en PlantUML
01 · El caso
Del teléfono y la libreta a una plataforma
Servicios Express MX es una empresa hipotética de servicios a domicilio que opera de manera informal, por teléfono y mensajería. El caso práctico le atribuye cuatro problemas concretos:
- Mala asignación de servicios
- Falta de seguimiento
- Pérdida de clientes
- Errores en la facturación
La dirección quiere una app para clientes, otra para prestadores y un sistema web administrativo, pero no tiene requerimientos ni arquitectura definidos, y el equipo es nuevo. El diagnóstico de la tesis organiza la respuesta en cuatro frentes —captura de la demanda, asignación, seguimiento, y facturación y conciliación— más dos transversales: soporte y compliance.
02 · La solución
Módulos de la plataforma
Cada módulo responde a uno de esos frentes y está modelado en los diagramas y en la matriz de trazabilidad de la tesis.
Catálogo de servicios
Categorías y servicios navegables, zonas de cobertura y tarifas por zona. La empresa decide qué se ofrece y a qué precio.
Órdenes y asignación
El cliente solicita el servicio con dirección, fecha y método de pago; la orden se asigna automáticamente según disponibilidad, zona y carga del prestador, con ajuste manual cuando la operación lo pide. Seguimiento, evidencias, cargos extra y cierre con doble PIN.
Alta de prestadores
Registro solo con código de invitación, CURP y validación de mayoría de edad; después, los documentos y la disponibilidad del prestador.
Finanzas con segregación de funciones
Pagos, cortes quincenales a prestadores, facturas CFDI y reembolsos que requieren aprobación con segregación de funciones (SoD) para reducir el riesgo de fraude interno.
Soporte ITIL con SLA
Tickets con mensajería y escalamiento L1–L2–L3, base de conocimiento, encuestas CSAT e incidentes mayores (MIM). El SLA depende del tipo, la prioridad y la categoría, con calendario laboral y festivos mexicanos.
RBAC y Zero Trust
Permisos atómicos y un rol por defecto restrictivo. El acceso de soporte a los datos personales de un cliente usa break-glass: PIN, motivo y caducidad.
Auditoría
Bitácora centralizada con correlación por caso o ticket, y Row Level Security en PostgreSQL para que cada actor vea solo lo que le corresponde.
03 · Arquitectura
Un monolito modular en un monorepo
Para una empresa emergente con un solo equipo, la tesis descarta los microservicios y propone un monolito modular: un workspace pnpm + Turborepo con tres aplicaciones y paquetes compartidos, y un único backend Next.js que sirve la API y el panel administrativo.
apps/mobile-clientapps/mobile-providerapps/web@expressmx/database@expressmx/validations@expressmx/types@expressmx/utils@expressmx/config-*
Las apps móviles no importan @expressmx/database: todo acceso a datos pasa por la API, así que la cadena de conexión nunca viaja en un bundle móvil.
Por qué un monolito
Despliegue atómico
Una sola release sincroniza backend y frontend.
Transacciones reales
El cierre con doble PIN y la conciliación financiera ocurren en una sola transacción de PostgreSQL, sin sagas ni mensajería distribuida.
Tipos compartidos
TypeScript de extremo a extremo; el mismo esquema Zod valida el formulario y la petición en el servidor.
Costo
Un equipo pequeño no puede pagar la operación de una flota de microservicios.
Stack
| Capa | Tecnología | Razón principal |
|---|---|---|
| Panel web (admin) | Next.js + App Router | SSR y API en un solo despliegue |
| Apps móviles (cliente y prestador) | Expo + React Native + NativeWind | Multiplataforma sin Swift ni Kotlin; las mismas habilidades sirven para ambas |
| Backend | Next.js Route Handlers (Node + Edge) | La misma base de código que el panel web |
| Lenguaje | TypeScript estricto | Tipos compartidos entre cliente y servidor |
| Base de datos | PostgreSQL (Neon) | Branching, ACID, RLS, JSONB |
| Acceso a datos | Driver pg + SQL + helpers | Control fino sobre planes de consulta y RLS |
| Autenticación | JWT propio + bcrypt | Sin depender de un proveedor externo |
| Validación | Zod | Esquemas compartidos entre cliente y servidor |
| UI web | shadcn/ui + Tailwind | Componentes que se copian al proyecto, sin lock-in |
| UI móvil | NativeWind + Phosphor | Tailwind en React Native e iconos consistentes |
| Pruebas | Vitest + Playwright + Testing Library | Un solo stack TypeScript |
| CI | GitHub Actions + servicio Postgres | Estándar y gratuito al volumen del proyecto |
| Despliegue | Vercel + Neon + Resend + Expo EAS | Serverless con costo predecible |
Sobre la demo
La demo pública ejecuta únicamente el panel administrativo web. Las apps móviles de cliente y prestador (Expo) están en el repositorio, en apps/mobile-client y apps/mobile-provider, pero no se publican como demo.
Calidad
El pipeline de GitHub Actions ejecuta typecheck y lint, las pruebas con Vitest contra un servicio PostgreSQL real y el build de Turborepo. Las pruebas E2E con Playwright están en el repositorio, pero su job de CI sigue desactivado (if: false) hasta contar con un administrador semilla determinista.
04 · Diagramas
El paquete de diagramas de la tesis
66 figuras hechas con PlantUML, agrupadas en las mismas waves que el paquete entregado con la tesis. Abre cualquiera para verla en grande; todas se descargan en PNG, SVG y fuente PlantUML. Las etiquetas (Fig. 4, A.1, B.13…) indican dónde aparece cada figura en el caso práctico.
Wave 0 · 9 figuras
Modelo entidad-relación (notación Chen)
Modelo conceptual de la base de datos en notación de Chen: rectángulos para entidades, óvalos para atributos y rombos para relaciones. Se divide en nueve vistas para que cada una sea legible en formato carta; las nueve salen de un mismo archivo PlantUML.
-
Fig. 4
Vista global
Núcleo operativo: las entidades fuertes principales, sus relaciones binarias y la calificación ternaria.
Descargar PNG — Vista globalDescargar SVG — Vista globalDescargar fuente PlantUML — Vista global
-
A.1
Identidad y RBAC
Identidad, credenciales, RBAC y especialización del usuario en cliente, prestador y administrador.
Descargar PNG — Identidad y RBACDescargar SVG — Identidad y RBACDescargar fuente PlantUML — Identidad y RBAC
-
A.2
Catálogo de servicios
Catálogo, geografía y tarifas por zona; las comisiones de plataforma como entidad débil.
Descargar PNG — Catálogo de serviciosDescargar SVG — Catálogo de serviciosDescargar fuente PlantUML — Catálogo de servicios
-
A.3
Onboarding de prestadores
Invitación, redención y registro del prestador, con documentos, disponibilidad y dirección.
Descargar PNG — Onboarding de prestadoresDescargar SVG — Onboarding de prestadoresDescargar fuente PlantUML — Onboarding de prestadores
-
A.4
Operación de órdenes
La orden de servicio con su historial, evidencias, cargos extra y la calificación ternaria.
Descargar PNG — Operación de órdenesDescargar SVG — Operación de órdenesDescargar fuente PlantUML — Operación de órdenes
-
A.5
Finanzas
Pagos, transacciones del prestador, cortes de pago, facturas CFDI y reembolsos.
Descargar PNG — FinanzasDescargar SVG — FinanzasDescargar fuente PlantUML — Finanzas
-
A.6
Soporte ITSM
Tickets, SLA, mensajes, escalamiento, CSAT, base de conocimiento e incidentes mayores.
Descargar PNG — Soporte ITSMDescargar SVG — Soporte ITSMDescargar fuente PlantUML — Soporte ITSM
-
A.7
Zero Trust y auditoría
Break-glass: PIN de administrador y de cliente, accesos a perfil, casos de soporte y bitácora.
Descargar PNG — Zero Trust y auditoríaDescargar SVG — Zero Trust y auditoríaDescargar fuente PlantUML — Zero Trust y auditoría
-
A.8
Jerarquía de usuario
Vista EER: la superclase Persona y las especializaciones de usuario y de administrador.
Descargar PNG — Jerarquía de usuarioDescargar SVG — Jerarquía de usuarioDescargar fuente PlantUML — Jerarquía de usuario
Wave 1 · 12 figuras
UML estructural
La estructura estática del sistema: clases por dominio, componentes, paquetes del monorepo y nodos de despliegue.
Documentos de esta wave
-
Fig. 5 · B.1
Clases: vista general
Descargar PNG — Clases: vista generalDescargar SVG — Clases: vista generalDescargar fuente PlantUML — Clases: vista general
-
-
-
-
-
-
-
Fig. 2 · B.8
Componentes
Descargar PNG — ComponentesDescargar SVG — ComponentesDescargar fuente PlantUML — Componentes
-
-
Fig. 3 · B.10
Despliegue: vista general
Descargar PNG — Despliegue: vista generalDescargar SVG — Despliegue: vista generalDescargar fuente PlantUML — Despliegue: vista general
-
-
Wave 2 · 31 figuras
UML conductual
La dinámica del sistema: casos de uso por grupo de actores, secuencias de los flujos críticos, actividades de los procesos de negocio y máquinas de estado de las entidades con ciclo de vida.
Casos de uso 5
-
Fig. 1 · B.13
Casos de uso: vista general
Descargar PNG — Casos de uso: vista generalDescargar SVG — Casos de uso: vista generalDescargar fuente PlantUML — Casos de uso: vista general
-
-
B.15
Casos de uso: administración y soporte
Descargar PNG — Casos de uso: administración y soporteDescargar SVG — Casos de uso: administración y soporteDescargar fuente PlantUML — Casos de uso: administración y soporte
-
B.16
Casos de uso: finanzas, marketing y RRHH
Descargar PNG — Casos de uso: finanzas, marketing y RRHHDescargar SVG — Casos de uso: finanzas, marketing y RRHHDescargar fuente PlantUML — Casos de uso: finanzas, marketing y RRHH
-
Secuencia 9
-
B.18
Secuencia: el cliente solicita una orden
Descargar PNG — Secuencia: el cliente solicita una ordenDescargar SVG — Secuencia: el cliente solicita una ordenDescargar fuente PlantUML — Secuencia: el cliente solicita una orden
-
-
B.20
Secuencia: el prestador acepta un trabajo
Descargar PNG — Secuencia: el prestador acepta un trabajoDescargar SVG — Secuencia: el prestador acepta un trabajoDescargar fuente PlantUML — Secuencia: el prestador acepta un trabajo
-
-
-
-
-
B.25
Secuencia: escalamiento de ticket L1–L2–L3
Descargar PNG — Secuencia: escalamiento de ticket L1–L2–L3Descargar SVG — Secuencia: escalamiento de ticket L1–L2–L3Descargar fuente PlantUML — Secuencia: escalamiento de ticket L1–L2–L3
-
Actividad 6
-
B.27
Actividad: asignación automática de la orden
Descargar PNG — Actividad: asignación automática de la ordenDescargar SVG — Actividad: asignación automática de la ordenDescargar fuente PlantUML — Actividad: asignación automática de la orden
-
B.28
Actividad: procesamiento de pago y facturación
Descargar PNG — Actividad: procesamiento de pago y facturaciónDescargar SVG — Actividad: procesamiento de pago y facturaciónDescargar fuente PlantUML — Actividad: procesamiento de pago y facturación
-
-
B.30
Actividad: aprobación de reembolso con SoD
Descargar PNG — Actividad: aprobación de reembolso con SoDDescargar SVG — Actividad: aprobación de reembolso con SoDDescargar fuente PlantUML — Actividad: aprobación de reembolso con SoD
-
B.31
Actividad: ciclo de ticket ITSM con SLA
Descargar PNG — Actividad: ciclo de ticket ITSM con SLADescargar SVG — Actividad: ciclo de ticket ITSM con SLADescargar fuente PlantUML — Actividad: ciclo de ticket ITSM con SLA
-
Máquinas de estado 11
-
Fig. 6 · B.33
Estados: orden de servicio
Descargar PNG — Estados: orden de servicioDescargar SVG — Estados: orden de servicioDescargar fuente PlantUML — Estados: orden de servicio
-
-
-
-
-
-
-
-
-
-
Wave 3 · 9 figuras
UX/UI
Arquitectura de información, mapas de sitio del panel web y de las dos apps móviles, y los cinco flujos de usuario críticos.
Documentos de esta wave
-
-
-
-
-
Fig. 8
Flujo de usuario: cliente nuevo
Descargar PNG — Flujo de usuario: cliente nuevoDescargar SVG — Flujo de usuario: cliente nuevoDescargar fuente PlantUML — Flujo de usuario: cliente nuevo
-
G.4
Flujo de usuario: el prestador acepta un trabajo
Descargar PNG — Flujo de usuario: el prestador acepta un trabajoDescargar SVG — Flujo de usuario: el prestador acepta un trabajoDescargar fuente PlantUML — Flujo de usuario: el prestador acepta un trabajo
-
-
G.6
Flujo de usuario: corte de pagos (finanzas)
Descargar PNG — Flujo de usuario: corte de pagos (finanzas)Descargar SVG — Flujo de usuario: corte de pagos (finanzas)Descargar fuente PlantUML — Flujo de usuario: corte de pagos (finanzas)
-
Wave 4 · 5 figuras
DevOps, QA y seguridad
Pipeline de CI/CD, estrategia de ramas en Git y en Neon, pirámide de pruebas y modelo de amenazas STRIDE.
Documentos de esta wave
-
-
Anexo D
Estrategia de ramas: Git
Descargar PNG — Estrategia de ramas: GitDescargar SVG — Estrategia de ramas: GitDescargar fuente PlantUML — Estrategia de ramas: Git
-
Anexo D
Estrategia de ramas: Neon
Descargar PNG — Estrategia de ramas: NeonDescargar SVG — Estrategia de ramas: NeonDescargar fuente PlantUML — Estrategia de ramas: Neon
-
-
Fig. 11
Modelo de amenazas STRIDE
Descargar PNG — Modelo de amenazas STRIDEDescargar SVG — Modelo de amenazas STRIDEDescargar fuente PlantUML — Modelo de amenazas STRIDE
El paquete completo, con PNG, SVG, fuentes PlantUML y los documentos Markdown de cada wave, pesa 3,5 MB. Algunas fuentes incluyen la hoja de estilo compartida _style.iuml de su carpeta, que también viene en el .zip.
05 · Documentos
El caso práctico y su documentación
Caso práctico (PDF)
El trabajo escrito completo: marco teórico, resolución de los seis problemas del caso, conclusiones, referencias y anexos. Versión pública: se omitieron el nombre y el folio del sustentante.
Documentación complementaria
Los tres documentos de la Wave 5, convertidos a HTML para leerlos en el navegador.
- Wave 5 Diccionario de datos Cada tabla del modelo relacional: columnas con tipo, nulabilidad, valor por defecto y significado; restricciones, índices y políticas RLS. Leer en HTML →
- Wave 5 Análisis de normalización 1NF, 2NF, 3NF y BCNF con ejemplos tomados del esquema, más las desnormalizaciones deliberadas y su justificación. Leer en HTML →
- Wave 5 Matriz de trazabilidad Cada requerimiento cruzado con su caso de uso, componente, tablas, endpoint, pantalla, pruebas y estado de implementación. Leer en HTML →
Escritos de apoyo por wave
Los textos que acompañan a los diagramas, incluidos los doce wireframes de baja fidelidad.
Wave 1 · UML estructural
Wave 4 · DevOps, QA y seguridad
Paquete completo de diagramas. PNG, SVG y fuentes PlantUML de las 66 figuras, más los documentos Markdown y las notas de cada wave · 3,5 MB.
Descargar .zip