TeamUp – Clon de ClickUp

TeamUp es una aplicación full-stack de gestión de trabajo basada en el diseño y las principales funcionalidades de ClickUp, una de las herramientas más populares para administrar tareas de forma colaborativa.

Replica el aspecto visual y las principales dinámicas colaborativas de la plataforma, a la vez que implementa un sistema de permisos jerárquicos simplificado pero sustancial, relaciones entre entidades anidadas, notificaciones en tiempo real y asignación de tareas.

Objetivo

Quería reconstruir una aplicación reconocible desde cero y reproducir no solo la interfaz, sino también parte de la complejidad detrás del trabajo colaborativo basado en roles.

Lo interesante de ClickUp era la combinación de un enfoque de tablero Kanban con la gestión tradicional de tareas, con el reto añadido de secciones anidadas y roles granulares. Escogí algunas de sus funcionalidades más icónicas y creé un producto funcional con ellas.

Funcionalidades

Sistema de roles

Los usuarios pueden invitar a otras personas a su Espacio de trabajo, asignándoles un rol común para todo el Espacio de trabajo o permisos distintos para entidades concretas. Estos permisos pueden modificarse más adelante mediante una interfaz accesible, que gestiona la herencia. Los roles restringen ciertas acciones, como la capacidad de editar o eliminar secciones o invitar a otros usuarios.

Una explicación más detallada de este sistema está disponible en español e inglés en la sección de la aplicación llamada Roles & Permissions - Docs.

Estructura jerárquica

La aplicación cuenta con una estructura jerárquica para organizar las tareas. Hay cinco tipos principales de entidades en esta aplicación:

• - Espacios de trabajo: Son las secciones de nivel superior. Pueden contener varios Espacios. Sirven para separar áreas completamente independientes (por ejemplo, diferentes empresas, vida personal y trabajo...). Los datos no son transferibles entre espacios de trabajo.
• - Espacios: Estas secciones ayudan a dividir un Espacio de trabajo según las diferentes ramas que puede tener un tema, como distintos equipos trabajando en una empresa.
• - Carpetas: Las Carpetas ayudan a agrupar listas, algo útil para proyectos o subdivisiones dentro de un equipo.
• - Listas: Las Listas agrupan Tareas. Pueden estar dentro de Carpetas o directamente dentro de Espacios. Son útiles para divisiones dentro de un proyecto. Cada Lista tiene sus propios estados, que pueden ser de tipo Not Started (sin comenzar), Active (activo) o Done (terminado), con nombres y colores personalizables.
• - Tareas: Las Tareas están siempre dentro de listas. Tienen un nombre y un estado elegido entre las opciones definidas para su Lista. También pueden tener otros atributos, como una fecha límite o una persona asignada. A través de la vista completa, los usuarios también pueden añadir una descripción con opciones de formato.

Vista de un espacio con tareas agrupadas por Lista.

Vistas de tablero y lista

Los usuarios pueden elegir ver las Tareas en tableros Kanban o en listas clásicas. Estas vistas están disponibles en Espacios, Carpetas y Listas. Cada vista permite organizar Tareas por estado, prioridad, fecha límite y persona asignada.

Personal List, My Work y Assigned to me

La aplicación también incluye una Lista personal para cada usuario y las secciones My Work (Mi trabajo) y Assigned to me (Asignado a mí), lo que ayuda a los usuarios a trabajar con tareas de múltiples listas sin tener que navegar manualmente por toda la jerarquía.

Colaboración

Los usuarios pueden invitar a colaboradores, recibir notificaciones y gestionar el acceso al Espacio de trabajo mediante flujos en tiempo real con Socket.IO.

Aspectos técnicos destacados

Frontend

La aplicación está construida con una estructura core / features / shared, separando el shell de la aplicación y las responsabilidades transversales del código específico de cada funcionalidad y de los elementos reutilizables de la UI.

El estado se gestiona mediante servicios, manteniendo la lógica de Espacio de trabajo, usuario, membresía, carga y notificaciones fuera de los componentes individuales, mientras que la validez de las rutas y la renovación de tokens se centralizan mediante route guards e interceptores.

El servicio de Espacio de trabajo es la fuente de la mayor parte de los datos utilizados en la aplicación, y guarda una representación en el cliente de los datos de esta entidad, con sus secciones anidadas (Espacios, Carpetas, Listas y Tareas) expuestas también como lookup maps. La aplicación también usa un servicio de agrupación de Tareas para transformar los datos en un lugar centralizado para las distintas vistas de Tablero y Lista.

TeamUp también cuenta con otras funcionalidades técnicas para hacer que la experiencia de usuario sea más fluida, como actualizaciones optimistas con rollback.

Backend

El backend está estructurado en las capas de controladores, servicios y repositorios:

• - Los controladores se limitan a gestionar las peticiones y respuestas, manteniendo las reglas de negocio centralizadas en los servicios con los que se comunican.
• - Los servicios son principalmente responsables de la autorización, la validación de datos y la comunicación con los repositorios, con responsabilidades definidas principalmente alrededor de las distintas entidades de la aplicación, además de otros que gestionan la emisión de sockets y la autenticación.
• - Los repositorios usan SQL sin un ORM, lo que hace que las consultas complejas sean más predecibles que usando abstracciones. Esto incluye construir a nivel de consulta la estructura de datos anidados del Espacio de trabajo, con filtrado basado en permisos antes de que los resultados lleguen al código de la aplicación.

Además, hay middleware responsable de la autenticación estándar y de socket, la limitación de tráfico y la gestión de errores.

Retos

Uno de los mayores retos fue la implementación de una estructura jerárquica con varios niveles. La interacción entre ellos, especialmente con listas que pueden incluirse tanto dentro de carpetas como directamente dentro de espacios, me obligó a planificar cuidadosamente el flujo de datos y eventos entre distintos componentes. Opté por una single source of truth para los datos del Espacio de trabajo mediante un servicio de Angular.

Otro de los principales obstáculos al desarrollar esta aplicación fue la implementación de un sistema de roles. Añadió un nivel sustancial de complejidad, ya que era crucial aplicar el sistema tanto en el backend, mediante varias comprobaciones para cada posible operación, como en el frontend, limitando lo que el usuario puede hacer según su rol específico.

La interacción entre estas dos funcionalidades también planteó algunas dificultades. Fue necesario crear consultas de base de datos que preservasen la estructura anidada, filtrando al mismo tiempo el resultado para incluir solo las entidades a las que el usuario tiene acceso. En el cliente, esta interacción fue especialmente visible en el menú Invite to Workspace, que requirió diseñar un sistema donde el usuario pudiera entender fácilmente la herencia de roles y, al mismo tiempo, impidiera acciones no autorizadas.

Pruébala

La aplicación se puede probar. Al requerir autenticación, hay dos opciones para hacer que la experiencia de prueba sea lo más sencilla posible:

• - A través de un usuario de prueba existente: Hay disponible un usuario con un Espacio de trabajo ya creado para ver rápidamente lo que ofrece la aplicación. Las credenciales de dicho usuario se autocompletan al pulsar Use demo account en la página de inicio de sesión.
• - Creando un usuario rápidamente: Los visitantes también pueden crear un usuario de prueba usando un botón para generar credenciales en la ventana de registro. Registrarse no requiere correo electrónico. Puedes crear uno o varios usuarios, en caso de que quieras probar las funcionalidades de colaboración.