Este é um projeto de front-end que cria um cardápio online interativo para uma hamburgueria fictícia chamada "Dev Burguer". A aplicação permite que os usuários visualizem os produtos, adicionem itens ao carrinho e finalizem o pedido, que é enviado diretamente para o WhatsApp do estabelecimento.
- Menu Dinâmico: Exibição clara dos produtos, separados por categorias (hambúrgueres e bebidas).
- Carrinho de Compras: Os usuários podem adicionar ou remover itens do carrinho. O sistema atualiza a quantidade e o valor total automaticamente.
- Validação de Endereço: Campo de endereço é obrigatório para finalizar o pedido.
- Verificação de Horário: O sistema verifica se o restaurante está aberto antes de permitir que o usuário finalize o pedido.
- Integração com WhatsApp: Ao finalizar, o pedido é formatado e enviado para o número de WhatsApp do restaurante.
- Notificações: Feedback visual para o usuário (por exemplo, quando o restaurante está fechado) usando a biblioteca Toastify.js.
- Design Responsivo: A interface se adapta a diferentes tamanhos de tela, de dispositivos móveis a desktops.
- HTML5
- CSS3
- JavaScript (Vanilla)
- Tailwind CSS: Framework CSS para estilização rápida e moderna.
- Font Awesome: Biblioteca de ícones.
- Toastify.js: Para a exibição de notificações "toast".
- Node.js: Utilizado para o gerenciamento das dependências de desenvolvimento.
Para executar o projeto localmente, siga os passos abaixo:
-
Clone o repositório:
git clone https://github.com/seu-usuario/cardapioDev.git
-
Acesse o diretório do projeto:
cd cardapioDev -
Instale as dependências de desenvolvimento (Tailwind CSS):
npm install
-
Inicie o compilador do Tailwind CSS em modo "watch": Este comando irá observar as alterações nos arquivos
htmlejse compilará o CSS automaticamente.npm run dev
-
Abra o arquivo
index.htmlno seu navegador. Você pode abri-lo diretamente no navegador ou usar uma extensão como o Live Server no VS Code para ter recarregamento automático a cada alteração.