Proyecto técnico personal · Publicado
Plataforma de gestión
Demostración SaaS independiente que conecta operaciones, personas y analítica en once módulos, con recorrido invitado y un espacio OAuth aislado por organización.
Resumen del caso
Contexto
Proyecto técnico personal creado como demostración neutral de análisis funcional, arquitectura de datos y entrega de producto.
Objetivo
Construir un entorno reproducible para explorar requisitos, permisos, trazabilidad, analítica y entrega continua con datos exclusivamente sintéticos.
Mi contribución
Definición funcional, modelado de procesos y permisos, arquitectura, desarrollo full stack, generación de datos sintéticos, pruebas, documentación y despliegue.
Problema y alcance
Un entorno de gestión conectado, sin depender de datos reales.
Las herramientas internas suelen separar personas, proyectos, tareas, incidencias y datos de gestión. El reto era demostrar cómo reunir esos procesos sin utilizar información ni sistemas de una empresa real.
Una demo pública en versión v1.3.2, navegable sin registro o con Google OAuth, con once módulos conectados y una base técnica documentada y verificable.
Modelo operativo
Once módulos alrededor del mismo espacio de trabajo.
- 01
Inicio
Prioridades, agenda y actividad reciente.
- 02
Vacaciones
Solicitudes, aprobaciones y calendario.
- 03
Proyectos
Estado, progreso, equipo y seguimiento.
- 04
Tareas
Kanban, lista, bandeja y dependencias.
- 05
Incidencias
Prioridad, atención y trazabilidad.
- 06
Tesorería
Movimientos y conciliación agregada.
- 07
Nóminas
Ciclos y participantes sin importes individuales.
- 08
Personal
Directorio, equipos y organigrama.
- 09
Novedades
Hitos y comunicación del escenario.
- 10
Configuración
Espacio, permisos y restauración.
- 11
Analítica
KPIs, filtros y comparación entre periodos.
Diagrama 01 · Arquitectura
Dos recorridos, un mismo producto
La modalidad invitada funciona en el navegador. Google OAuth añade persistencia en Supabase con aislamiento por organización.
Recorrido invitado
Exploración pública sin cuenta y sin llamadas a Supabase.
- 01Escenario sintético determinista
- 02Validación de contratos con Zod
- 03Estado local en sessionStorage
- 04Once módulos interactivos
Espacio con Google OAuth
Persistencia aislada por identidad y organización.
- 01OAuth con PKCE
- 02Next.js y Server Actions
- 03Supabase Auth y PostgreSQL
- 04Permisos, RLS y auditoría
Alternativa textual: el recorrido invitado genera y valida un escenario sintético, lo conserva en sessionStorage y abre los once módulos. El recorrido OAuth autentica con PKCE, procesa la aplicación en Next.js y utiliza Supabase, PostgreSQL, permisos, RLS y auditoría.
Evidencia interactiva
La demo se puede recorrer sin registro.
Demo técnica
Datos sintéticos · entorno independiente
Datos, permisos y seguridad
Controles desde el diseño
- RLS en las tablas expuestas y autorización acotada por organización.
- Validación con Zod y comprobación de permisos en servidor.
- Funciones privadas con privilegios mínimos y search_path seguro.
- Storage privado para avatares y ausencia de claves secretas en el navegador.
- CSP, política de referencia y autorización exacta del origen del iframe.
Stack
- TypeScript
- SQL
- Next.js
- React
- Supabase
- PostgreSQL
- Tailwind CSS
- OAuth
- RLS
- Playwright
- GitHub Actions
- Vercel
Proyecto técnico personal e independiente. Todos los registros son ficticios y deterministas; no contiene código, datos, pantallas, marcas ni procedimientos internos de terceros.
Diagrama 02 · Proceso de entrega
Entrega incremental con controles antes de producción
- 01
Rama y alcance
Requisitos, restricciones y cambios trazables.
- 02
Implementación
Módulos, contratos, migraciones y datos sintéticos.
- 03
Validación
Lint, tipos, tests, base de datos, Playwright y Axe.
- 04
Preview
Revisión funcional, responsive, accesible y de seguridad.
- 05
Producción
Merge revisado, promoción y smoke test.
Alternativa textual: el proceso parte de una rama con alcance definido, continúa con implementación y validación automatizada, se revisa en Preview y termina con la promoción del cambio revisado a producción y una prueba rápida.
Validación
Evidencia en cada capa.
- Contratos
- TypeScript, Zod y pruebas unitarias con Bun.
- Navegador
- Playwright, Axe, teclado y matriz responsive.
- Base de datos
- Migraciones, pgTAP, RLS, aislamiento y lint SQL.
- Entrega
- GitHub Actions, Vercel Preview y producción.
- Privacidad
- Validadores de datos públicos y secretos.
Límites
Qué demuestra y qué no.
- No está conectada a sistemas bancarios, de nómina, personal o gestión reales.
- El modo invitado conserva el estado únicamente durante la sesión de la pestaña.
- El modo OAuth es una demostración técnica; cada identidad recibe un espacio ficticio aislado.
- Las integraciones son neutrales y simuladas, sin credenciales ni cargas útiles de terceros.
Fuentes técnicas