Criei um PWA para organizar meus links e snippets porque o Notion era lento demais para isso
E aí, pessoal do TabNews! 🚀
Hoje quero compartilhar um projeto pessoal que nasceu de uma "dor" antiga e da vontade de experimentar uma tecnologia nova: o Clipboard Master (foi difícil pensar num nome, inclusive ainda não gostei, esse é o nome do protótipo).
O Problema: Onde guardar aquele link genial?
A cena é clássica: você está navegando e encontra um artigo incrível, um snippet de código que vai salvar sua vida no futuro, ou um template de e-mail que usa toda semana. Onde você guarda isso?
Por muito tempo, meu reflexo era jogar tudo no Notion. O problema? Com o tempo, ele se tornou lento, pesado e complexo demais para uma tarefa que deveria ser ágil: salvar algo rapidamente e, mais importante, encontrar com facilidade depois. Eu não precisava de um banco de dados relacional complexo, só de um "gaveteiro digital" inteligente. Um bloco de notas simples também não resolvia, pois a busca e a organização seriam precárias.
A Solução: Clipboard Master, um PWA Offline-First
Cansado dessa lentidão, decidi criar minha própria solução: um PWA (Progressive Web App) focado em ser exatamente o oposto: rápido, leve e direto ao ponto.
A ideia é simples:
- Salvar conteúdo útil: Links, textos, snippets de código, o que for.
- Busca Rápida: Encontrar o que preciso sem demora.
- Totalmente Offline: Todos os dados ficam armazenados localmente no seu navegador. Sem depender de internet, sem login, sem lentidão de rede.
- Instalável: Por ser um PWA, você pode "instalar" no seu desktop ou celular e ter a experiência de um app nativo, a um clique de distância.
- Portabilidade: Seus dados são seus. A qualquer momento, você pode exportar tudo para um arquivo JSON ou importar de volta. Simples assim.
A desculpa perfeita para aprender algo novo: PGlite
Além de resolver minha própria dor, eu queria um pretexto para testar o PGlite. Para quem não conhece, é uma versão do PostgreSQL que roda 100% no navegador via WebAssembly (WASM).
Sim, você leu certo. Um banco de dados Postgres inteiro, com toda a sua robustez, funcionando do lado do cliente. Eu poderia ter usado localStorage ou IndexedDB? Sim. Mas a oportunidade de unir o útil ao agradável e aprender algo novo falou mais alto. Foi a chance perfeita de testar os limites do que é possível fazer hoje diretamente no browser.
O Visual: Apenas um bootstrap 5 com um pequeno upgrade
Para o front-end, minha escolha foi o bom e velho Bootstrap 5. No entanto, eu queria um visual que não gritasse "sou um site feito com Bootstrap". Por isso, mantive a estrutura HTML e as classes padrão, mas personalizei completamente a aparência com um arquivo custom.css.
O objetivo era criar uma identidade visual mais moderna e elegante, alterando cores, sombras, bordas e tipografia. É uma abordagem que gosto bastante como alternativa ao Tailwind CSS, pois me dá a base sólida de um framework consagrado com total liberdade criativa no CSS.
O projeto ainda está em evolução, mas já resolveu 100% do meu problema inicial. Foi uma jornada divertida de aprendizado, unindo a necessidade de uma ferramenta pessoal com a curiosidade sobre novas tecnologias.
O que acharam da ideia e da stack utilizada? Alguém mais sofre com esse problema de "organização de conteúdo"? Adoraria ler os comentários de vocês!