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.

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.

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.

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.

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.

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.

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