const #Cioccolato Store
#Cioccolato Store
A aplicação permite que os usuários explorem o cardápio, escolham produtos com diferentes opções de personalização, e finalizem suas compras com pagamento via QR Code Pix. O projeto conta com um site para apresentação da loja e uma página de menu/cardápio onde os usuários podem: navegar entre as categorias de produtos; escolher um produto e personalizá-lo com sabor, recheio, massa, cobertura e adicionais; adicionar produtos ao carrinho, revisar o pedido e realizar o checkout; gerar um QR Code para pagamento via Pix; enviar o pedido finalizado para o WhatsApp da loja.
Funcionalidades
- Exploração e Navegação no Cardápio.
- Navegação entre categorias de produtos.
- Exibição de informações detalhadas de cada produto.
- Personalização de Produtos: Seleção de sabor, recheio, massa, cobertura e adicionais.
- Carrinho de Compras: Adição de produtos ao carrinho, com possibilidade de revisão do pedido.
- Checkout e Pagamento: Formulário para dados do usuário e endereço.
- Geração automática de QR Code Pix para pagamento.
- Envio para WhatsApp: O pedido, contendo descrição minuciosa de cada item, cópia do qrcode-PIX, valor total e forma de pagamento, fazem parte da mensagem do pedido, que é enviada para o WhatsApp da loja.
Tecnologias Utilizadas
- React + Next.js: estrutura principal da aplicação.
- Tailwind CSS: estilização rápida e responsiva.
- TypeScript: segurança e consistência de código.
- ShadCN UI: biblioteca de componentes UI altamente customizável.
- Lucide Icon: biblioteca de ícones flexível.
- Next Themes: alternância entre temas claro e escuro.
- Pix-utils: utilitário para gerar QR Codes Pix para pagamento.
- qrcode.react: biblioteca para geração de QR Codes.
- React Copy Clipboard: cópia de dados para a área de transferência (ex. chave Pix).
- Zod: validação e formatação de dados dos formulários.
- React Hook Form: gerencia e valida os dados de formulários.
- Zustand: gerenciador de estado global leve e intuitivo.
- LocalStorage: persistência de dados no navegador.