Estudo de caso
Mesaora
Demonstração funcional de cardápio digital e acompanhamento de pedidos para restaurantes e pequenos deliveries.
Tecnologias
- React
- TypeScript
- Vite
- React Router
- Tailwind CSS
- Playwright
Contexto
O Mesaora é apresentado pela pizzaria fictícia Forno da Vila. O fluxo cobre explorar o cardápio, personalizar o item, revisar o carrinho, informar um endereço fictício, confirmar o pedido simulado e acompanhar os estados Preparando, A caminho e Entregue. Nenhum pedido ou pagamento real é processado: carrinho e pedidos ficam no localStorage do navegador.
Decisões
01Mobile-first com navegação inferior
A navegação principal (Início, Cardápio, Carrinho, Pedidos) fica na parte de baixo da tela, ao alcance do polegar.
02Fluxo completo, sem backend
A persistência local deixa a demonstração navegável sem cadastro nem servidor, e permite repetir um pedido concluído a partir do histórico.
03O fluxo e a acessibilidade são testados
Um teste e2e com Playwright percorre o pedido de ponta a ponta no desktop e no celular, e testes com axe-core verificam 5 rotas nos dois tamanhos de tela.
04Correções vindas da auditoria
Links de imagem duplicados, sem nome acessível, passaram a ficar ocultos para leitores de tela (o título ao lado leva ao mesmo destino). O react-router foi atualizado para a 7.18.4 para corrigir uma vulnerabilidade.
Resultados
- Lighthouse mobile (página inicial)
- 82 / 100 / 100 / 100
- Lighthouse mobile (cardápio)
- 87 / 100 / 100 / 100
- Testes e2e (fluxo e acessibilidade)
- 12
- Vulnerabilidades em produção (npm audit)
- 0
Lighthouse: desempenho / acessibilidade / boas práticas / SEO, em modo mobile, medidos localmente em 19/10/2026.
O que ainda falta
- O desempenho no Lighthouse mobile (82 e 87) ainda está abaixo de 90; não investiguei a causa.
- Pedidos e pagamentos são simulados; cardápio e valores são fictícios.
- O repositório ainda se chama plataforma-de-pedidos-online-, nome anterior do projeto.