Carioca Lanches - Premium App
Uma aplicação web completa com sistema de pedidos inteligente via WhatsApp, quiz interativo de recomendação de produtos e experiência de usuário premium. A aplicação foi construída com React, React Router, TypeScript e Tailwind CSS, focando em uma experiência premium com animações sofisticadas, integração WhatsApp e sistema de recomendação inteligente.
Contratado diretamente pelo proprietário para desenvolvimento Full Stack da presença digital completa da marca. O desafio era trazer identidade visual moderna e presença online profissional para uma lanchonete tradicional, tornando-a mais competitiva no mercado digital e facilitando a interação dos clientes com a marca. O sistema permite que clientes naveguem pelo cardápio, recebam recomendações personalizadas e finalizem pedidos de forma fluida, tudo integrado diretamente ao WhatsApp do estabelecimento.
Demonstração interativa
Visão Mobile
Interface mobile responsiva
Apresentação do Projeto
Documento de apresentação (Pitch)
Principais Funcionalidades
- Cardápio Digital Interativo: Todos os produtos com filtros por categoria, imagens otimizadas e informações detalhadas.
- Quiz de Recomendações: Sistema de 3 perguntas que identifica o perfil do cliente e sugere o lanche ideal.
- Carrinho Inteligente: Adicionar/remover itens, ajustar quantidades, calcular total com taxa de entrega.
- Carrinho Persistente: Gerenciamento e persistência, permitindo “Repetir Último Pedido” realizado pelo cliente automaticamente.
- Checkout Completo: Formulário de endereço, escolha de pagamento e observações, com envio automático para WhatsApp.
- Integração WhatsApp: Checkout automatizado que formata pedidos completos (itens, endereço, pagamento) e redireciona para WhatsApp Business.
- Recomendação Diária: Algoritmo que seleciona um produto especial por dia com persistência diária, criando senso de exclusividade e urgência.
- Seções Institucionais: Depoimentos, FAQ, Serviços, Informações de contato.
- Formulário de Contato: Integração com serviço de email para mensagens diretas.
- Design Premium: Interface moderna com animações que marcam presença, gradientes sofisticados e microinterações que elevam a experiência do usuário.
- Responsividade Total: Design adaptativo para mobile, tablet e desktop.
Arquitetura & Stack
| Categoria | Tecnologia | Propósito |
|---|---|---|
| Framework Principal | React Router v7 | Framework full-stack com SSR e roteamento moderno. |
| Linguagem | TypeScript | Tipagem estática para segurança e manutenibilidade. |
| Estilização | Tailwind CSS v4 | CSS utility-first para desenvolvimento rápido e consistente. |
| Animações | Framer Motion | Animações contextuais, transições suaves e feedback visual. |
| Estado Global | Zustand | Gerenciamento de estado leve e performático para carrinho. |
| Integração Email | EmailJS | Envio de mensagens via formulário de contato. |
| Ícones | Lucide React | Biblioteca de ícones moderna e consistente. |
| QR Code | QRCode React | Geração de QR codes para compartilhamento. |
| Testes | Vitest + Testing Library | Testes unitários e de integração. |
| E2E Testing | Playwright | Testes end-to-end para validação completa. |
| Linting & Formatting | Biome | Linter e formatter rápido e moderno. |
| Analytics | Vercel Analytics | Rastreamento de comportamento do usuário. |
| Hospedagem | Vercel | CI/CD e CDN global para performance. |
Destaques Técnicos
🧠 Quiz Inteligente
Sistema de recomendação baseado em perfil do cliente. O quiz de 3 perguntas identifica preferências e sugere o lanche ideal, aumentando conversão e ticket médio.
🛒 Carrinho Persistente
Gerenciamento e persistência de estado, permitindo “Repetir Último Pedido” realizado pelo cliente automaticamente. O carrinho mantém os dados mesmo após fechar o navegador.
📱 Integração WhatsApp
Checkout automatizado que formata pedidos completos (itens, endereço, pagamento) e redireciona para WhatsApp Business, facilitando a comunicação direta com o estabelecimento.
🎨 Design Premium
Interface moderna com animações que marcam presença, gradientes sofisticados (cream, gold, dark) e microinterações que elevam a experiência do usuário. Design system completo com paleta de cores personalizada e tipografia profissional.
🎯 SEO Otimizado
Meta tags dinâmicas, Open Graph e Twitter Cards para compartilhamento social otimizado, garantindo melhor visibilidade nas redes sociais.
🎯 GEO/AIO Otimizado
Meta tags atualizadas para a IA encontrar e responder aos clientes sobre seu negócio, melhorando a descoberta através de assistentes de IA.
⚡ Performance
Lazy loading, otimização de imagens e animações performáticas garantindo carregamento rápido e experiência fluida.
📊 Analytics Integrado
Vercel Analytics para rastreamento de comportamento do usuário, permitindo insights sobre uso e conversão.
Diferencial da Entrega
Embora contratado para criar uma presença online premium, entreguei uma solução completa de negócio digital, indo muito além do escopo inicial:
✅ Estratégia de Produto
Implementação de quiz de recomendação para aumentar conversão e ticket médio, agregando valor comercial real ao projeto.
✅ Experiência do Usuário
Design system completo com paleta de cores personalizada (cream, gold, dark), tipografia profissional e componentes reutilizáveis, garantindo consistência visual em toda a aplicação.
✅ Arquitetura Escalável
Estrutura modular com separação clara de contextos e responsabilidades, componentes reutilizáveis e types TypeScript rigorosos, facilitando manutenção e evolução.
✅ Interatividade Avançada
Animações contextuais, transições suaves e feedback visual em todas as interações do usuário, criando uma experiência envolvente e profissional.
✅ Otimização de Conversão
Sistema de “Recomendação do Dia” com persistência diária, criando senso de exclusividade e urgência, aumentando engajamento e vendas.
✅ Acessibilidade
Estrutura semântica HTML5, landmarks ARIA e navegação otimizada para leitores de tela, garantindo acesso inclusivo a todos os usuários.
Informações do Projeto
- Localização: Esperança, Brasil 🇧🇷
- Investimento: Valor personalizado conforme escopo e requisitos do projeto
- Link: https://carioca-lanches.vercel.app/
- Tipo: Contrato direto com proprietário
- Escopo: Desenvolvimento Full Stack completo