← Volver a los casos
SaaS multi-tenant · Web · Full stack

SaaS white-label de filas y turnos virtuales

El público saca turno desde el móvil y sigue su posición en vivo. Cada organización atiende, prioriza y mide su operación con su propia marca.

Período
2026 · ~1 mes
Equipo
Pequeño
Mi rol
Desarrollador principal
Foco
60% front · 40% back

Proyectos bajo acuerdo de confidencialidad. Los nombres de clientes, el código y las capturas no se muestran; los títulos son descriptivos.

Contexto

Producto nuevo, desarrollado desde cero: una plataforma SaaS multi-tenant y white-label para gestionar filas virtuales en cualquier organización que atiende público.

Cada organización tiene sus sucursales, servicios y empleados, y una experiencia con su propia marca. El producto incluye la app pública para sacar turno, el panel de atención para empleados, la administración de cada organización y un backoffice para el operador de la plataforma.

Problema

Evitar las filas físicas. El público saca turno desde el móvil, sigue su posición en tiempo real y recibe un aviso cuando lo llaman.

El reto técnico estaba en tres frentes: actualizar en tiempo real la posición de los turnos y los paneles de atención, aislar los datos de cada organización y modelar una configuración jerárquica (organización → sucursal → servicio) con distintas reglas de priorización.

Qué hice

  • Inicialicé el frontend y construí el design system y el kit de componentes, con tema claro/oscuro y branding white-label configurable.
  • Flujo del público: sacar turno, verificación por código enviado por email, posición en vivo, recuperar el turno, valoración y notificaciones push opcionales.
  • Panel de atención: llamar al siguiente, pausar, transferir y reordenar turnos con drag & drop, además de la pantalla de llamados.
  • Administración de la organización: sucursales con horarios, servicios, empleados, configuración operativa y priorización jerárquica.
  • Backoffice de la plataforma: organizaciones, planes, cuentas y logs de auditoría.
  • Backend: autenticación con JWT, cuentas y roles, auditoría, modelo de configuración jerárquica y operaciones de atención (pausa, transferencia, reordenamiento, llamado asíncrono).
  • Internacionalización español/inglés, dashboards con gráficos y mapa de sucursales cercanas.
  • Infraestructura local con Docker Compose y documentación del proceso.

Decisiones

  • Propuse Server-Sent Events en lugar de WebSockets para el tiempo real: la comunicación es casi toda del servidor al cliente, y SSE es más simple de operar.
  • Organicé el frontend por features y armé el design system desde el inicio.
  • Definí cómo se aplica la metodología AI-DLC (desarrollo asistido por IA) en el proyecto, desde los requerimientos hasta la entrega.

Desafíos resueltos

  • Proteger el acceso a los turnos con verificación por email y código, sin que el público necesite una cuenta.
  • Mantener sincronizadas en tiempo real la vista del público y la del empleado.
  • Diseñar la herencia de configuración entre organización, sucursal y servicio.

Arquitectura

Monorepo con un frontend SPA y una API REST monolítica en Spring Boot, con Server-Sent Events para el tiempo real y tareas programadas en segundo plano.

Stack

Frontend
  • React 19
  • TypeScript
  • Vite
  • TanStack Query
  • TanStack Router
  • Zustand
  • shadcn/ui
  • Tailwind CSS
  • i18next
  • Recharts
  • Leaflet
  • GSAP
  • OpenAPI client
Backend
  • Java 21
  • Spring Boot
  • Spring Security
  • Data JPA
  • Quartz
  • JWT
  • Flyway
  • Web Push
  • OpenAPI / Swagger
Bases de datos
  • PostgreSQL
  • Redis
Infra y cloud
  • Docker Compose
  • Nginx
  • GitHub Actions
Testing
  • JUnit
  • Testcontainers
  • Vitest
  • Testing Library
  • Playwright

Tests

Tests unitarios y de integración en el backend (JUnit, Testcontainers, tests basados en propiedades), tests de componentes en el frontend (Vitest + Testing Library) y tests end-to-end con Playwright, todos ejecutados en CI.

Resultado

Se llegó a un MVP funcional de punta a punta.

Aprendizajes

Backend con Spring Boot y Java moderno, tiempo real con SSE, arquitectura multi-tenant, diseño de un design system propio y desarrollo asistido por IA con AI-DLC.