Logo
Tipo
Aplicación web
Contexto
TFG
Año
2026

Aplicación web de gestión de tareas que permite organizar distintos ámbitos mediante listas y desglosar tareas complejas en subtareas.

Tecnologías

  • Next.js
  • React
  • Tailwind CSS
  • Motion
  • MongoDB
  • Git
  • Docker
  • Figma
  • Vercel
Vista de Taskly mostrando una lista personal de tareas

El problema de organizarlo todo

Cuando el proyecto final de DAW empezó a crecer, también lo hizo la cantidad de cosas que tenía que mantener bajo control: vida personal, prácticas, lista de compra, mantener control de suscripciones mensuales...

No quería limitarme a apuntar tareas en una lista interminable: necesitaba separar los distintos ámbitos de mi vida y poder dividir las tareas grandes en pasos más pequeños.

Así que decidí construir mi propia herramienta de organización. Una aplicación que se adaptara a mi forma de trabajar, en vez de obligarme a encajarla en un flujo que no terminaba de sentir como mío.

Comienzo de Taskly

Taskly nació como mi proyecto final de DAW. Antes de escribir código, definí el recorrido de la aplicación y diseñé la interfaz en Figma. Desde el principio tuve claro que la pantalla principal tenía que ser directa: una zona para cambiar de lista y otra para consultar y gestionar sus tareas.

La interfaz principal de Taskly en modo claroLa interfaz principal de Taskly en modo claro

No quería hacer otra aplicación de tareas llena de elementos que compitieran entre sí. Preferí construir una base sencilla, con una jerarquía visual clara y suficiente flexibilidad para que cada persona pudiera organizar sus propios ámbitos: desde lo personal hasta el trabajo, los estudios o cualquier proyecto.

Mi responsabilidad

Al ser un proyecto que trabajé de principio a fin, me encargué de definir la experiencia, diseñar la interfaz, elegir las tecnologías y desarrollar la aplicación. También implementé la persistencia de datos para que las listas y tareas se mantuvieran disponibles entre sesiones.

Para construirlo utilicé Next.js con React, Tailwind CSS, Motion y MongoDB, apoyándome en Git y Docker para las partes obvias en un desarrollo.

Cómo funciona

El usuario puede crear distintas listas para separar sus ámbitos y, dentro de cada una, añadir tareas. Cada tarea puede tener una fecha y una hora, un nivel de urgencia y una configuración de recurrencia para aquellas cosas que se repiten con el tiempo.

Cuando una tarea es demasiado grande para resolverla de una vez, se puede dividir en subtareas. De esta forma, el progreso no depende únicamente de marcar una tarea como terminada, sino que también permite ver cómo va avanzando cada parte.

La landing page de Taskly en modo oscuroLa landing page de Taskly en modo oscuro

La aplicación está pensada para que pasar de una vista general de la lista al detalle de una tarea sea algo natural. La información importante aparece en primer plano y el resto queda en segundo plano hasta que hace falta.

Inspiraciones

La interfaz de Taskly está inspirada en la línea de diseño de Payload CMS. Me interesaba especialmente su forma de construir interfaces densas sin hacerlas pesadas, utilizando una paleta principalmente monocromática y dejando que la jerarquía, el espaciado y el contraste hicieran el trabajo.

Por eso decidí prescindir de sombras y bordes redondeados excesivos. El resultado busca sentirse más como una herramienta de trabajo que como una aplicación recargada de elementos decorativos.

Resultado

El resultado es Taskly, una aplicación web responsive para organizar listas, tareas y subtareas desde un mismo lugar. Más allá de las tecnologías utilizadas, este proyecto me sirvió para recorrer todo el proceso: detectar una necesidad, convertirla en una experiencia, diseñarla y terminar construyendo un producto funcional.

Siguiente proyecto / 02

Better Aules