Carregando projeto...


webapp · Projeto Próprio
O Taskmate nasceu de uma necessidade pessoal: um gerenciador de tarefas próximo do ideal para o meu dia a dia, sem a estrutura complexa das ferramentas completas e sem mensalidade. É um app instalável (PWA) construído em React 19 e Vite, local-first: o documento vive no IndexedDB do próprio navegador em formato Automerge (CRDT) e, se o usuário quiser usar em mais de um dispositivo, sincroniza por um único arquivo no seu Google Drive. Sem tabela de usuários, sem senha, sem backend. Além do app, o projeto tem página de produto própria em /produto/, textos legais e hospedagem estática no Firebase Hosting.
A História do Projeto
O Desafio
Criei o Taskmate para uso pessoal. O gerenciador de tarefas mais próximo do ideal para mim era o Todoist, mas ele é pago, e pensei em construir um só meu, sem estrutura complexa. As ferramentas simples achatam tudo em listas soltas e não separam contexto de frente de trabalho; as completas cobram configuração antes de qualquer valor. Eu precisava de duas coisas: tirar algo da cabeça em menos de cinco segundos, sem escolher onde guardar, e, uma ou duas vezes por dia, ver tudo cruzando grupos para decidir o que é de hoje. Misturo trabalho de cliente e vida pessoal no mesmo dia, e sucesso, para mim, é confiar que nada se perdeu.
A Solução
A solução foi uma hierarquia de três níveis, grupos, listas e atividades, que serve à triagem e nunca é pré-requisito da captura: uma tecla abre o campo e a tarefa cai na Entrada. Do lado técnico, escolhi local-first. O documento fica no dispositivo e a sincronização é opcional, por um único arquivo no Google Drive do próprio usuário, então o app é completo sem sync, não precisa de servidor nem de conta e o usuário é dono dos seus dados. O tom é calmo e discreto: cor é estado e não enfeite, ação reversível não pede confirmação e oferece desfazer, e estado vazio ensina o próximo gesto em uma frase.
O Processo
Comecei bem simples, no dia 17 de agosto de 2026, e fui evoluindo conforme o uso, já que uso o app no meu dia a dia para acompanhar tarefas e me planejar. Nas semanas seguintes vieram o quadro por grupo, o calendário, a linguagem natural para prazo e repetição, checklist, data de início e etiquetas no modelo de tarefa, as Notas com editor rich text (o meu react-html-content-editor), a página Insights como assistente de triagem, o compartilhamento do celular como entrada de captura e a renomeação de Trellis para Taskmate, com migração de banco, localStorage e do arquivo no Drive. O design tem contrato escrito (PRODUCT.md e DESIGN.md), o contraste é verificado numericamente por script e as decisões de sincronização nasceram dos testes, não da leitura de documentação. Em setembro o projeto ganhou página de produto, termos e privacidade, hospedados no Firebase Hosting.
Os Resultados
O Taskmate está no ar, é usado diariamente por mim e passou de 70 commits e da versão 0.18. Funciona sem conta, sem servidor e sem internet, e é instalável como PWA. A página do produto marca 100 em performance e boas práticas no Lighthouse, 96 em acessibilidade e 92 em SEO. O repositório é público, com 12 cenários de convergência de sync, 47 checagens de contraste, 23 fluxos E2E e 10 checagens offline. Ainda não tenho métricas de uso além do meu próprio, então não publico números de adoção.
Lighthouse · página do produto
Performance
100 / 100Acessibilidade
96 / 100Boas Práticas
100 / 100SEO
92 / 10012
Cenários de Convergência de Sync
47
Checagens de Contraste
23
Fluxos E2E
Principais Funcionalidades
Captura Rápida
Uma tecla abre o campo, a tarefa cai na Entrada e prazo, prioridade e repetição saem da própria frase em português.
Grupos, Listas e Atividades
Três níveis em árvore na lateral: grupos separam contextos de vida, listas dividem as frentes e atividades são o trabalho.
Hoje, Próximos 7 Dias e Calendário
Visões que cruzam todos os grupos para a triagem diária, com calendário em mês, semana e dia e botões para adiar tarefas atrasadas.
Quadro por Grupo
Cada lista de um grupo vira uma coluna e cada atividade um cartão, com largura total opcional.
Notas e Etiquetas
Captura livre com etiquetas e autocomplete, corpo em rich text e checklist nas tarefas. Do celular, o compartilhamento pergunta se é tarefa ou nota.
Local-First com Sync Opcional
Dados no navegador, funcionamento offline como PWA instalável e sincronização por um arquivo no Google Drive do usuário, com exportação em Markdown.
Desfazer em vez de Confirmar
Concluir e excluir não pedem confirmação e oferecem desfazer, inclusive para listas e grupos inteiros, graças aos tombstones.
Acessível por Padrão
Teclado completo, foco visível, movimento reduzido, modo de texto maior, temas claro e escuro, e nada comunicado só por cor.
Página de Produto com Demonstração em Scroll
A página /produto/ mostra o app funcionando enquanto o visitante rola: capturar, organizar, decidir o dia e ver o calendário, com opção de rolar sozinho. Dá para entender o Taskmate sem criar conta nem instalar nada.
Capturas de Tela
Página do produto em /produto/ — a promessa é calma: sem conta, sem servidor, funciona até sem internet
Captura em linguagem natural — prazo, prioridade e repetição saem da própria frase, e o app destaca o que reconheceu antes de gravar
A visão Hoje cruza todos os grupos — é o momento de triagem, quando o usuário quer decidir o dia sem abrir uma pasta por vez
Quadro de um grupo: cada lista vira uma coluna e cada atividade um cartão, com prazo, prioridade e atraso sempre em texto e ícone, nunca só em cor
Calendário em mês, semana e dia, mostrando as tarefas de todos os grupos — a cor do grupo é só uma pista discreta de orientação
Tema escuro com o mesmo sistema de cor em OKLCH, com contraste verificado numericamente para WCAG 2.2 AA
O app no celular — instalável como PWA, com ações da tarefa em menu no toque e menu de compartilhamento do sistema como entrada de captura
A página do produto em mobile, com a mesma hierarquia do desktop reorganizada em coluna única
Stack
React 19 · TypeScript · Vite 6 · Automerge 3 · IndexedDB · vite-plugin-pwa (Service Worker) · Google Identity Services · Google Drive API · react-html-content-editor · fractional-indexing · DOMPurify · Lucide · Playwright · Firebase Hosting
Produto Próprio · Local-First · PWA · Offline · CRDT · Automerge · Google Drive · Produtividade · Linguagem Natural · Acessibilidade · Sem Backend · Em Constante Melhoria