Listo
Gerenciador de tarefas local-first com estado reativo e persistência no navegador
2025
Contexto
Listo é um gerenciador de tarefas local-first criado como exercício de Angular. O projeto explora como organizar uma aplicação frontend com dados persistentes, múltiplos filtros e uma interface acessível sem depender de autenticação ou backend.
Identidade visual do Listo.
Problema técnico
A interface precisa manter tarefas pendentes e concluídas sincronizadas com a busca e a data selecionada. A implementação inicial aplicava novos filtros sobre resultados já filtrados, fazendo itens desaparecerem após mudanças sucessivas de busca ou data.
A solução combina a coleção persistida, o termo de busca e a data selecionada com RxJS. Cada evento recalcula o resultado a partir da fonte original, preservando uma única fonte de verdade. As listas pendente e concluída são derivações desse mesmo fluxo compartilhado.
Arquitetura e dados
A aplicação usa componentes standalone do Angular e separa modelos, persistência, serviços e funcionalidades. O Dexie fornece uma camada tipada sobre o IndexedDB e liveQuery publica alterações locais de forma reativa. Os serviços encapsulam as operações de tarefas e etiquetas, enquanto combineLatest e shareReplay coordenam o estado apresentado pela interface.
Os dados permanecem no dispositivo do usuário. Essa decisão reduz a infraestrutura necessária e favorece privacidade e uso local, com a limitação consciente de não oferecer sincronização entre dispositivos.
Interface e acessibilidade
O layout se adapta de uma janela centralizada no desktop para uma experiência em tela cheia em dispositivos menores. Os controles possuem nomes acessíveis, foco visível e áreas de interação adequadas. A exibição das ações não depende somente de hover, e as transições respeitam a preferência por movimento reduzido.
Interface principal com navegação por data, busca e separação entre tarefas pendentes e concluídas.
Qualidade e evolução
O projeto foi migrado incrementalmente do Angular 19 para o Angular 22, incluindo Angular Material, o novo builder, SSR e prerenderização. A suíte também foi migrada de Karma e Jasmine para Vitest, removendo a dependência de um navegador instalado no ambiente de integração.
Os testes cobrem serviços, publicação do estado de busca e data e regressões na combinação dos filtros. O build de produção gera os bundles do navegador, o servidor SSR e a rota inicial prerenderizada.
Limites do projeto
Listo é apresentado como estudo de engenharia, não como produto comercial. Autenticação, colaboração, notificações e sincronização remota estão fora do escopo. As próximas evoluções possíveis são testes end-to-end e uma estratégia opcional de sincronização que preserve a proposta local-first.