GLC
Site de Restaurante

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.