El problema
Mi equipo llevaba el trabajo en una hoja de cálculo compartida que se rompía con conflictos de edición y no daba visibilidad real de quién hacía qué. Quería un tablero tan rápido como una hoja de cálculo, pero que se actualizara en vivo para todos.
Rol e impacto
- Proyecto individual, full-stack.
- Reemplazó una hoja de cálculo compartida para un equipo de 6 personas.
- Sincronización de drag-and-drop en menos de un segundo entre clientes vía Supabase Realtime.
- 30 tests cubriendo el estado del tablero y las reglas de permisos.
Decisiones técnicas y desafíos
El tablero debía reflejar los movimientos de otros usuarios al instante, sin que el gesto de arrastre local saltara o se reiniciara a mitad de camino. Comparé aplicar las actualizaciones remotas directamente sobre el estado local contra encolarlas hasta que terminara el arrastre local.
Terminé encolando las actualizaciones remotas durante un arrastre local activo y aplicándolas justo después de soltar, porque aplicarlas a mitad de gesto causaba saltos visibles en conexiones más lentas.
Dos personas reordenando la misma columna al mismo tiempo podían producir posiciones de tarjeta en conflicto. Evalué last-write-wins contra un esquema de indexación fraccional.
Elegí indexación fraccional para el orden de las tarjetas, porque evita reescribir toda la columna y resuelve la mayoría de los movimientos concurrentes sin un "salto" visible.
Stack detallado
| Capa | Tecnología | Por qué |
|---|---|---|
| Frontend | Next.js 15, dnd-kit, Tailwind | dnd-kit da drag-and-drop accesible sin reinventarlo |
| Backend | Supabase (Postgres + Realtime, RLS) | Sincronización en vivo lista para usar, control de acceso con RLS |
| Testing | Vitest, React Testing Library | Cobertura del estado del tablero, permisos y lógica de reordenamiento |
Galería
Qué haría diferente
Agregaría soporte offline desde el día uno en vez de asumir una conexión estable. La implementación actual pierde los movimientos encolados si se corta la conexión a mitad de un arrastre, lo cual es una limitación real en wifis de oficina inestables.