Skip to content

Quinto projeto do bootcamp da Laboratória; desenvolvimento de uma interface para gerenciar uma hamburgueria (telas do garçom, chefe e administrador). A aplicação foi desenvolvida com React e consumo de API. Desenvolvido em collab com @Stellazen

Notifications You must be signed in to change notification settings

AlineGuiseline/burger-queen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Burger Queen

Quinto projeto criado durante o bootcamp da Laboratória. O projeto é uma plataforma de apoio a hamburguerias onde as principais funcionalidades consistem em:

  1. Garçom tem a possibilidade de criar pedidos personalizados de acordo com o cardápio disponibilizado por administradores.
  2. Cozinha recebe em tempo real os pedidos que garçom retira no salão e podem marcar os pedidos como prontos para entrega.
  3. Administradores podem alterar produtos disponíveis no cardápio, além de gerenciar os acessos de demais colaboradores.

🔗Clique aqui para acessar

Usuário Senha
[email protected] senha123
[email protected] senha123
[email protected] senha123

Índice

1. Histórias de usuários
2. Rodando o arquivo localmente
3. Primeira tela do garçom: Cardápio
4. Segunda tela do garçom: Pedidos prontos para envio
5. Tela do chefe de cozinha
6. Primeira tela do administrador: Produtos
7. Segunda tela do administrador: Funcionários
8. Mensagens de erros
9. Considerações técnicas
10. Contatos

1. Histórias de usuários

O projeto foi guiado seguindo 06 histórias de usuários, sendo elas:

  1. Garçom/Garçonete deve poder entrar no sistema, caso o admin já lhe tenha dado as credenciais.
  2. Garçom/Garçonete deve ser capaz de anotar o pedido do cliente.
  3. Chefe de cozinha deve ver os pedidos.
  4. Garçom/Garçonete deve ver os pedidos prontos para servir.
  5. Administrador(a) de loja deve administrar seus funcionários.
  6. Administrador(a) de loja deve administrar os produtos.

2. Rodando o arquivo localmente

A API responsável pelos dados da hamburgueria estão hospedados no Vercel, mas, caso você prefira rodá-la localmente, sugiro que siga os passos abaixo:

  1. Faça o clone do mock da API no seu computador
  2. Abra o arquivo no VS Code
  3. Abra o terminal e digite npm install
  4. Ainda no terminal, execute o mock com o comando npm start
  5. Será aberta uma porta (possivelmente 8080)
  6. Retorne ao arquivo burger-queen, que contém o código do projeto em si
  7. Abra a pasta src e, depois disso, a subpasta api
  8. Abra os arquivos orders, products e users e, dentro de cada um deles, substitua o link da variável API_URL por 'http://localhost:número-da-porta'
    ex.: const API_URL = 'http://localhost:8080'
  9. Salve as alterações feitas e rode o projeto, também no terminal, com o comando npm start Importante: Nâo se esqueça de manter a API rodando durante todo o tempo de uso do site Burger Queen (recomendamos que rode a API antes de rodar o site, para evitar qualquer tipo de conflito)

3. Primeira tela do garçom: Cardápio

Para otimizar o espaço e não cansar a mente atarefada do garçom com excesso de informação, a primeira visão de sua tela é dos filtros de produtos disponíveis para consumo, junto do espaço para calcular os valores e, efetivamente, fazer o pedido. Ao clicar em cada filtro, as opções correspondentes aparecerão e, ao clicar no botão de mais(+) em cada uma delas, os pedidos serão adicionados ao resumo na lateral direita. É possível fazer o controle da quantidade tanto pelo botão de mais(+) do cardápio quanto pelos botões de mais(+) e menos(-) do resumo. Após inserir o nome do cliente, o pedido é enviado à cozinha e o resumo é zerado novamente.

Desktop

4. Segunda tela do garçom: Pedidos prontos para envio

Ao alternar para a aba de "Pedidos prontos", o garçom pode ver os pedidos que foram marcados como "prontos para envio" pelo chef de cozinha, bem como há quanto tempo eles foram feitos, e pode marcá-los como "enviados", sinalizando que eles já foram entregues à mesa - ao fazer isso, o pedido desaparece da página, também para evitar o excesso de informações.

Desktop

5. Tela do chefe de cozinha

Ao entrar em sua tela, o chefe de cozinha pode ver todos os pedidos que foram feitos pelo garçom, podendo ver, também, há quanto tempo eles foram feitos, e pode marcá-los como "prontos para envio", sinalizando que já foram preparados - ao fazer isso, o pedido desaparece da página.

Desktop

6. Primeira tela do administrador: Produtos

Ao entrar em sua tela, o administrador depara-se com 2 botões: Produtos e Funcionários. Selecionando a opção "Produtos", é possível ver todos os produtos disponíveis à hamburgeria, sendo possível editá-los, excluí-los e também cadastrar novos produtos.

Desktop

7. Segunda tela do administrador: Funcionários

Retornando à tela principal e escolhendo a opção "Funcionários", vemos todos os funcionários contratados pela hamburgueria e também podemos editá-los, excluí-los e cadastrar novos.

Desktop

8. Mensagens de erros

Há mensagens de erros em 3 telas, sendo elas:

  • Tela de login: caso o usuário use um e-mail ou senha incorretos, seu login será barrado e uma mensagem de erro aparecerá acima do botão "Entrar".
  • Tela do garçom: caso o garçom tente fazer um pedido sem inserir o nome do cliente ou sem adicionar nenhum pedido, uma mensagem de erro aparecerá no topo da tela.
  • Telas do administrador: caso o administrador tente cadastrar um novo produto ou funcionário sem inserir nenhuma informação ou deixando algum campo em branco, uma mensagem de erro aparecerá no topo da tela.

Desktop

9. Considerações técnicas

Linguagens/bibliotecas utilizadas: JavaScript | React | HTML5 | CSS3

Programas/Plataformas utilizadas: VSCode (codificação) | Figma (protótipos das páginas) | Trello (planejamento) | Vercel (hospedagem do projeto e da API) | Insomnia (auxílio às rotas) | fetch (requisições HTTP) | Testing Library (testagem das funções)

10. Contatos

Aline Guiseline 💙

LinkedIn

Stella Zen 💙

LinkedIn

About

Quinto projeto do bootcamp da Laboratória; desenvolvimento de uma interface para gerenciar uma hamburgueria (telas do garçom, chefe e administrador). A aplicação foi desenvolvida com React e consumo de API. Desenvolvido em collab com @Stellazen

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published