Produto digital · Cardápio e pedidos online
Batata com Granulado
Cardápio digital e aplicação de pedidos para uma marca de delivery de batatas recheadas e doces, construída com SvelteKit e Svelte 5. O cliente navega pelo cardápio, personaliza cada item e envia um pedido completo e já calculado pelo WhatsApp.
- Período
- 2026
- Papel
- Desenvolvimento
Contexto
Pedidos de comida ficam complexos rapidamente: combos com trocas, itens que exigem um sabor, adicionais pagos, observações e entrega ou retirada. A aplicação torna simples montar esse tipo de pedido no celular, e ele chega estruturado e com o valor correto.
Abordagem
O cardápio como dados tipados
Produtos, categorias, adicionais e combos ficam em um catálogo tipado. Um combo é descrito como partes fixas e partes trocáveis, cada uma com o item padrão e as opções permitidas no lugar dele.
Personalização de combos com preço justo
Trocar um item dentro do combo acrescenta apenas a diferença de preço entre a opção escolhida e a padrão; escolher algo mais barato nunca vira desconto.
Um único carrinho reativo
Uma store construída com runes do Svelte 5 ($state e $derived) concentra os itens do carrinho, as quantidades, o subtotal, a taxa de entrega e o total. Adicionar um item com a mesma configuração soma à linha existente em vez de duplicá-la.
Uma ficha de produto guiada
Sabores obrigatórios são validados antes de adicionar, levando o foco para a escolha que falta; adicionais e uma observação de até 120 caracteres são opcionais. Se a ficha for fechada antes de adicionar, a configuração fica guardada como rascunho.
Feedback em cada etapa
Os cards confirmam quando um item é adicionado, as mudanças são anunciadas para leitores de tela, esvaziar o carrinho pede confirmação e o checkout confirma quando o pedido foi enviado.
Checkout pelo WhatsApp
Entrega ou retirada, validação de nome e endereço e forma de pagamento. O pedido é transformado em uma mensagem estruturada de WhatsApp com itens, composição dos combos, trocas, adicionais, observações e totais.
Qualidade
- Imagens responsivas: fotos dos produtos em versões de 360, 720 e tamanho original via srcset, banner principal servido em três larguras com prioridade alta de carregamento e lazy loading abaixo da dobra.
- Subconjuntos de fontes WOFF2 hospedados no próprio projeto (latin e latin-ext), com preload no head do documento.
- Fichas de produto construídas com o elemento dialog nativo e adaptadas ao teclado do celular com a API VisualViewport, mantendo o campo em foco visível.
- As animações respeitam prefers-reduced-motion.
Stack
- SvelteKit
- Svelte 5
- TypeScript
- Vite
