Laticínios Popoio

Contexto

O Laticínios Popoio é um empório tradicional da Mooca, em São Paulo, com mais de 40 anos de história. O site apresenta a loja, mostra o catálogo e recebe pedidos pelo WhatsApp, que já era o canal de atendimento dos clientes. A loja também tem um painel administrativo para manter o catálogo.

O desafio

O empório vende por peso (300 g de queijo, por exemplo) e por unidade, e atende por WhatsApp, sem pagamento online. O site precisava calcular o pedido corretamente nos dois modos, montar uma mensagem de pedido completa e à prova de adulteração, e dar à própria loja um jeito seguro de atualizar produtos, preços e fotos sem mexer em código.

O que foi construído

• Carrinho com persistência no navegador (Zustand) e dois modos de venda: por peso, com opções de 100 g a 1 kg e quantidade personalizada em gramas ou quilos, com preço por quilo proporcional; e por unidade.
• Checkout pelo WhatsApp: gera a mensagem com itens, subtotal, frete, dados do cliente, entrega ou retirada, forma de pagamento e troco. O total é recalculado a partir dos preços do catálogo, não do carrinho salvo no navegador, então um carrinho editado à mão não altera o valor do pedido.
• Entrega com regras de frete (taxa fixa, frete grátis acima de um valor e pedido mínimo) e preenchimento de endereço pelo CEP, via uma rota própria que consulta o ViaCEP e guarda o resultado em cache.
• Ficha técnica dos produtos: ingredientes, alérgenos, conservação e tabela nutricional no padrão da ANVISA, com preenchimento assistido pelo código de barras, consultando o Open Food Facts por uma rota protegida.
• Painel administrativo com login (Supabase Auth): dashboard que destaca produtos que precisam de atenção, cadastro e edição de produtos e categorias, e upload de foto que é reduzida e convertida para WebP no navegador antes de ir para o Supabase Storage.
• Catálogo no Postgres com cache no Next.js e revalidação por tag, de modo que uma edição no painel aparece na vitrine sem novo deploy. Há também um endpoint protegido por segredo para limpar o cache depois de alterações feitas direto no banco.
• SEO local e páginas institucionais: sitemap, robots, dados estruturados schema.org do tipo GroceryStore (endereço, coordenadas e horários), indicador de loja aberta ou fechada, e páginas de Sobre, Dúvidas frequentes, Prazo de entrega, Trocas e devoluções e Privacidade.
• Segurança: Content Security Policy restritiva, HSTS, bloqueio de iframes e Permissions-Policy. Nas ações do painel a sessão é verificada no servidor a cada chamada, e não só no redirecionamento de tela.

Destaque: Painel admin com Supabase Auth · cache com revalidação sob demanda · SEO local (schema.org)

Tecnologias e papel de cada uma

Next.js

App Router com páginas estáticas, Server Actions do painel e rotas de API para CEP, código de barras e revalidação.

Supabase

Postgres para produtos e categorias, Auth para o painel e Storage para as fotos, com @supabase/ssr.

Zustand

Estado do carrinho, persistido no localStorage.

Tailwind CSS

Interface da vitrine e do painel, com componentes shadcn/ui sobre Base UI.

Framer Motion

Micro-interações da vitrine.