
Site de Restaurante
React
Firebase
TailwindCSS
Voltar ao Portfólio
É impossível ver a demo, pois se trata de um sistema de uso interno. As informações do projeto estão detalhadas abaixo.
Sobre o Projeto
Sistema onde os clientes acessam um QR Code na mesa e fazem o pedido direto pelo celular, sem precisar chamar o garçom.
Fluxo do Cliente
- O cliente escaneia um QR Code único da mesa.
- O site abre com o cardápio digital correspondente àquela mesa.
- Ele escolhe os produtos (ex: prato principal, bebida, sobremesa).
- Clica em “Finalizar Pedido”.
- O pedido vai automaticamente para a cozinha e para o painel dos garçons.
Funcionalidades do Cliente
- Visualização de cardápio com filtros por categoria.
- Imagens dos pratos e descrição com preço.
- Botão “+” para adicionar ao carrinho.
- Tela de resumo do pedido, com valor total e tempo estimado.
- Após pedido feito, o cliente vê um status em tempo real: “Em preparo” → “A caminho”.
Funcionalidades do Painel do Restaurante
- Painel do administrador (ex: /admin): Cadastrar, editar e excluir produtos, Ver todos os pedidos por mesa em tempo real, Marcar pedidos como “Entregue”.
- Tela da cozinha: Lista de pedidos em ordem cronológica, Cada pedido mostra os itens, observações e número da mesa, Botão de “Concluir Pedido”.
Login
- Apenas os funcionários têm login com Firebase Auth (e-mail/senha).
- Clientes acessam anonimamente via QR Code.
Estrutura no Firebase
- Firestore:
`mesas/{id}/pedidos/{pedidoId}`
→ Cada pedido separado por mesa - Firestore:
`produtos/{produtoId}`
→ Cardápio dinâmico - Authentication: Login de administrador e equipe
- Cloud Functions (opcional): Envio de notificações para telas da cozinha quando um pedido for feito
Visual
- Interface com cores do restaurante (vermelho, bege, madeira ou conforme marca).
- Design minimalista e rápido com TailwindCSS.
- Responsivo: funciona bem em celulares.