Cardapio online
Dev Burguer
Sobre o projeto
Cardápio digital para lanchonete
Um cardápio online interativo para a lanchonete fictícia DEV Burguer, onde os clientes podem visualizar o menu, adicionar itens ao carrinho e finalizar pedidos diretamente pelo WhatsApp.
Este projeto foi desenvolvido acompanhando um tutorial no YouTube,
com o objetivo de criar uma solução prática para pequenos negócios
do ramo alimentício.
Implementei funcionalidades como carrinho de compras dinâmico,
validação de horário de funcionamento e integração com WhatsApp para
envio de pedidos.
Ferramentas Usadas
Figma (para o design)
HTML, CSS, Javascript, Tailwind Css
Cronograma
2 dias (Fevereiro-2025)
Recursos & Experiência
- Carrinho de compras: Adição, remoção e atualização dinâmica dos itens selecionados..
- Cardápio digital completo: Exibição de produtos com imagens, descrições e preços.
- Verificação de horário: Sistema que checa se a lanchonete está aberta ou fechada com base no horário atual.
- Integração com WhatsApp: Envio automático do pedido completo diretamente para o WhatsApp do estabelecimento.
Desafio e Aprendizado
Desafios
- Implementar a lógica de atualização dinâmica do carrinho mantendo a consistência dos dados.
- Criar um sistema de validação de endereço que garanta informações completas antes do envio do pedido.
O que aprendi
- Aprimorei minhas habilidades em TailwindCSS para criar interfaces adaptáveis a diferentes dispositivos.
- Aprendi a integrar sistemas web com aplicações de mensagens para criar fluxos de pedido completos.
Material Base
O layout e os assets visuais foram disponibilizados previamente, com acesso ao Figma e imagens fornecidas.
O Projeto Final
O resultado é uma aplicação limpa, intuitiva e funcional, com foco na usabilidade e na experiência do usuário em diferentes dispositivos e modos de visualização.
.png)
Desktop
Na versão desktop, o sistema prioriza navegação rápida entre categorias e facilidade para adicionar itens ao carrinho com um clique. Um indicador de horário informa a disponibilidade do serviço, e o contador de itens mantém o usuário atualizado sem interromper a navegação. O carrinho permite gerenciar produtos, ajustar quantidades e calcular automaticamente o total. O campo de endereço é centralizado para facilitar o fechamento do pedido, e a integração com o WhatsApp permite enviar o carrinho diretamente ao estabelecimento.
Mobile - Home
Na experiência mobile, priorizamos a velocidade de carregamento e a facilidade de navegação com uma mão. O menu vertical permite explorar todas as opções com movimentos naturais de rolagem, enquanto os botões de adição ao carrinho estão posicionados estrategicamente para acesso fácil com o polegar. A verificação de horário de funcionamento impede tentativas de pedido fora do expediente, poupando tempo do cliente e do estabelecimento.
Mobile - Modal do Carrinho
O carrinho mobile mantém todas as funcionalidades da versão desktop em um formato otimizado para telas menores. O sistema de validação de endereço assegura que informações completas sejam fornecidas antes de finalizar o pedido, reduzindo erros de entrega. A integração com WhatsApp foi especialmente otimizada para dispositivos móveis, permitindo uma transição perfeita entre o cardápio e o aplicativo de mensagens sem perda de dados do pedido.