Listo
Gestor de tareas local-first con estado reactivo y persistencia en el navegador
2025
Contexto
Listo es un gestor de tareas local-first creado como ejercicio de Angular. El proyecto explora cómo estructurar una aplicación frontend con datos persistentes, múltiples filtros y una interfaz accesible sin depender de autenticación ni de un backend.
Identidad visual de Listo.
Problema técnico
La interfaz necesita mantener las tareas pendientes y completadas sincronizadas con la búsqueda y la fecha seleccionada. La implementación inicial aplicaba cada nuevo filtro sobre un resultado ya filtrado, haciendo que algunos elementos desaparecieran después de varios cambios de búsqueda o fecha.
La solución combina la colección persistida, el término de búsqueda y la fecha seleccionada con RxJS. Cada evento recalcula el resultado desde la fuente original y conserva una única fuente de verdad. Las listas de tareas pendientes y completadas se derivan del mismo flujo compartido.
Arquitectura y datos
La aplicación utiliza componentes standalone de Angular y separa modelos, persistencia, servicios y funcionalidades. Dexie proporciona una capa tipada sobre IndexedDB, mientras liveQuery publica los cambios locales de forma reactiva. Los servicios encapsulan las operaciones de tareas y etiquetas, y combineLatest junto con shareReplay coordinan el estado presentado por la interfaz.
Los datos permanecen en el dispositivo del usuario. Esta decisión reduce la infraestructura necesaria y favorece la privacidad y el uso local, con la limitación consciente de no ofrecer sincronización entre dispositivos.
Interfaz y accesibilidad
El diseño se adapta desde una ventana centrada en el escritorio hasta una experiencia de pantalla completa en dispositivos pequeños. Los controles tienen nombres accesibles, foco visible y áreas de interacción adecuadas. Las acciones no dependen exclusivamente del hover y las transiciones respetan la preferencia de movimiento reducido.
Interfaz principal con navegación por fecha, búsqueda y separación entre tareas pendientes y completadas.
Calidad y evolución
El proyecto fue migrado progresivamente de Angular 19 a Angular 22, incluyendo Angular Material, el sistema de build moderno, SSR y prerenderizado. La suite de pruebas también migró de Karma y Jasmine a Vitest, eliminando la necesidad de tener un navegador instalado en el entorno de integración continua.
Las pruebas cubren los servicios, la publicación del estado de búsqueda y fecha y las regresiones en la combinación de filtros. El build de producción genera los bundles del navegador, el servidor SSR y la ruta inicial prerenderizada.
Límites del proyecto
Listo se presenta como un estudio de ingeniería y no como un producto comercial. La autenticación, la colaboración, las notificaciones y la sincronización remota están fuera de su alcance. Las próximas evoluciones posibles incluyen pruebas end-to-end y una estrategia opcional de sincronización que preserve su enfoque local-first.