WishBoard
2026O WishBoard é uma ferramenta web pessoal para organizar uma lista de desejos de produtos. A pessoa reúne num só lugar os itens que quer comprar ❀ cada um vira um card com imagem, categoria e preço ❀ e o app mostra em tempo real quantos itens há e o custo total. Pode ser usado sozinho, com os dados salvos no próprio navegador, ou numa conta compartilhada que sincroniza a lista entre dispositivos.
Funcionalidades
O usuário adiciona produtos informando link, título, descrição, imagem, categoria e preço. Ao colar o link, o app busca automaticamente o título, a descrição e a imagem da página. O preço também pode ser preenchido a partir de uma imagem: basta colar, arrastar ou selecionar um print, que o sistema lê o valor por OCR ❀ inclusive naquele formato de preço com os centavos pequenos que as lojas usam. As categorias são personalizáveis (criar, renomear e excluir), há filtro por categoria, e o resumo mostra a contagem de itens e o valor total, com a opção de incluir ou excluir cada item do cálculo. Ainda dá para reordenar os itens arrastando, editar, excluir, e exportar/importar toda a lista em JSON para backup. O login é híbrido: contas locais (individuais, no navegador) ou uma conta compartilhada na nuvem, sincronizada em tempo real. O visual tem tema escuro e layout responsivo.
Tecnologias e ferramentas
O site em si é feito em HTML, CSS e JavaScript puro, sem framework e sem etapa de build. A parte de nuvem usa o Supabase, que fornece o banco de dados PostgreSQL, a autenticação por e-mail e senha e a sincronização em tempo real, com regras de segurança (Row Level Security) protegendo os dados. A leitura de preço por imagem usa a biblioteca Tesseract.js (OCR no próprio navegador), com a Canvas API para tratar a imagem antes da leitura; as senhas das contas locais são guardadas com hash SHA-256 pela Web Crypto API. Os metadados dos produtos vêm da Microlink API (leitura de Open Graph), e o modo individual guarda os dados no localStorage. O versionamento é feito com Git e GitHub, e o site é hospedado no GitHub Pages.
Como foi desenvolvido
O projeto foi construído com o apoio da IA, usando o Claude pelo chat integrado ao VS Code ❀ que gerou e ajustou a maior parte do código ❀ enquanto alguns detalhes de HTML e CSS foram ajustados manualmente ao longo do caminho.
Como funciona
O site é estático e roda inteiramente no navegador. No modo local, os dados ficam no localStorage separados por usuário. No modo compartilhado, o login passa pelo Supabase e a lista fica numa única linha na nuvem (itens e categorias em JSON), sincronizada ao vivo entre os aparelhos de quem tem acesso.
Acesse em rebecahumasi-bit.github.io/wish-board.