Dados utilizados
- Notas do próprio usuário, gravadas no localStorage do navegador.
Case de projeto
Gestor de Notas
Aplicativo de notas rápidas que guarda tudo no navegador, sem conta e sem servidor.
Problema
Anotar algo rápido não deveria exigir conta, servidor ou instalação.
Dados salvos no navegador podem ficar ilegíveis ou bloqueados sem aviso.
Solução
Arquitetura resumida
- Notas do próprio usuário, gravadas no localStorage do navegador.
Decisões técnicas
- Lógica pura em notes.js, acesso ao armazenamento em storage.js e camada de DOM em app.js.
- Persistência versionada com migração da versão 1 para a 2 e cópia de segurança de dados ilegíveis.
- Com armazenamento bloqueado ou cheio, as notas ficam em memória e a interface avisa.
Resultado
- Limite de notas
- 500
- Repositório privado / src/js/notes.js / versão 2.0.2
- Cobertura mínima exigida
- 80%
- Repositório privado / configuração do Vitest no README / versão 2.0.2
Um aplicativo pequeno tratado com o rigor de produto: dados versionados, falhas previstas e acessibilidade testada.
- JavaScript sem framework
- Tolerância a falhas de armazenamento
- Migração de esquema
- Acessibilidade testada
Aprendizados e limitações
- As notas ficam em um navegador e perfil; não há sincronização.
- Não há busca, corpo de nota nem tags.
- A interface está só em português.
Mais sobre o projeto
Detalhes completos do case, colapsados para leitura opcional.
Descrição completa
Gestor de Notas é um aplicativo de anotações rápidas que guarda tudo no navegador, sem conta e sem servidor.
Cada nota tem um título validado; a edição acontece na própria lista e a exclusão pede confirmação em um diálogo.
Os dados são versionados: uma migração leva a versão 1 para a 2 e guarda uma cópia de dados ilegíveis.
Se o armazenamento estiver bloqueado ou cheio, as notas ficam em memória e a interface avisa o usuário.
HTML, CSS e JavaScript com módulos ES, testes unitários em Vitest e de ponta a ponta em Playwright com axe, publicação estática na Vercel.
Funcionalidades e destaques
- Criar notas com título validado.
- Editar na própria lista, com Enter para salvar e Esc para cancelar.
- Excluir com confirmação em diálogo que nomeia a nota.
- Limite de 500 notas.
- Anúncios para leitor de tela.
- Migra dados salvos da versão 1 para a 2 sem perder notas.
- Mantém as notas em memória quando o armazenamento falha e avisa o usuário.
- Confirma a exclusão em um diálogo modal que nomeia a nota.
- Aplica CSP estrita e Permissions-Policy na publicação.
Arquitetura técnica e dados
Arquitetura técnica
Como o case foi pensado como produto
Aplicativo de notas rápidas que guarda tudo no navegador, sem conta e sem servidor.
JavaScriptLinguagemHTMLPlataforma webCSSPlataforma webVitestFrameworkPlaywrightFrameworkVercelDeploy
Principais componentes
- Criar notas com título validado.
- Editar na própria lista, com Enter para salvar e Esc para cancelar.
- Excluir com confirmação em diálogo que nomeia a nota.
- Limite de 500 notas.
- Anúncios para leitor de tela.
Decisões técnicas
- JavaScript sem framework
- Tolerância a falhas de armazenamento
- Migração de esquema
- Acessibilidade testada
Trade-offs
- As notas ficam em um navegador e perfil; não há sincronização.
- Não há busca, corpo de nota nem tags.
- A interface está só em português.
Como executar
- O repositório é privado; os passos abaixo valem para quem tem acesso.
- npm ci
- npm run dev e abra http://127.0.0.1:4173 (abrir o index.html direto do disco não funciona).
Mídia adicional
Créditos
Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech
Próximo projetoAPI de Chatbot com IA
API de chat em FastAPI com respostas em streaming, histórico em SQLite e três provedores de IA intercambiáveis.
Ver case completo