CASO DE ESTUDIO · PRODUCTIVIDAD
Gestor de tareas
Un espacio kanban donde el equipo ve los cambios de los demás en el momento en que ocurren: sin recargar, sin conflictos.
- ROL
- Líder de frontend
- DURACIÓN
- 8 semanas
- EQUIPO
- 3 personas
- PLATAFORMA
- App web
IDENTIDAD DE PRODUCTO
Flowboard
Haced avanzar el trabajo, juntos.
01 · RESUMEN
Resumen del proyecto
TIEMPO DE DESARROLLO
8 semanas
Del prototipo al despliegue en el equipo
TAMAÑO DEL EQUIPO
3 personas
Líder de frontend, backend, diseño
LOGRO CLAVE
Sync en < 100 ms
Los cambios aparecen al instante para todos
EL PROBLEMA
El equipo gestionaba los sprints entre una pizarra, una hoja de cálculo y hilos de chat. Las tarjetas se movían en un sitio y no en los demás, así que nadie se fiaba del tablero.
EL ENFOQUE
Flowboard mantiene una única fuente de verdad en Supabase y emite cada cambio por canales en tiempo real, con actualizaciones optimistas para que arrastrar y soltar sea instantáneo.
< 100 ms
para sincronizar un movimiento con todo el equipo
5 h
ahorradas por sprint en reuniones de seguimiento
0
ediciones en conflicto en tableros compartidos
02 · FUNCIONALIDADES
Qué hace
Tableros en tiempo real
Cada movimiento, edición y comentario se sincroniza al momento con todo el equipo.
Arrastrar y soltar
Las actualizaciones optimistas hacen los movimientos instantáneos, con reversión si algo falla.
Presencia en vivo
Ve quién está viendo y editando cada tarjeta en este momento.
Archivos compartidos
Adjunta archivos con vista previa en el panel de la tarea.
Informes de sprint
Velocidad y burndown, exportables a CSV.
Invitaciones por enlace
Invita al equipo por email sin contraseñas que gestionar.
03 · PROCESO
Cómo se hizo
SEMANA 1
Descubrir
Mapeé cómo trabajaba realmente el equipo en los sprints y dónde se perdía el estado de las tareas.
- Mapa del flujo
- Alcance del MVP
SEMANA 2
Diseñar
Vistas de tablero, lista y cronograma, más el panel de tarea.
- Prototipo en Figma
- Librería de componentes
SEMANA 3–7
Construir
App en Next.js, esquema de Supabase con seguridad a nivel de fila y canales en tiempo real.
- App web
- Capa en tiempo real
SEMANA 8
Lanzar
Despliegue a mitad de sprint en el equipo y después en dos equipos asociados.
- Despliegue en el equipo
- 3 equipos en producción
04 · STACK TÉCNICO
Tecnologías
FRONTEND
- Next.js
- TypeScript
- Tailwind CSS
TIEMPO REAL
- Supabase Realtime
- Presence
- Broadcast
DATOS
- PostgreSQL
- Row-level security
- Storage
HERRAMIENTAS
- dnd-kit
- Zod
- Playwright
ARQUITECTURA
App Flowboard
Next.js + dnd-kit
Supabase
Auth, RLS, tiempo real
PostgreSQL
Tableros, tareas
Canales realtime
Broadcast, presencia
Storage
Archivos adjuntos
05 · APRENDIZAJES
Retos y aprendizajes
Arrastres en conflicto
RETO
Dos personas arrastrando la misma tarjeta desordenaban el tablero.
RESULTADO
Claves de orden fraccionales con posiciones confirmadas por el servidor resolvieron los conflictos limpiamente.
Proteger los tableros compartidos
RETO
Había quien seguía pudiendo cargar tareas de tableros de los que le habían quitado.
RESULTADO
La seguridad a nivel de fila de Postgres limitó cada consulta a los miembros del tablero.
¿Te interesa este proyecto?
Te enseño encantado el código, las decisiones que hay detrás o cómo podría funcionar algo parecido para tu equipo.