0
Watch
1
Star
1
Fork
114
Issue
ThalitaNeves95
ThalitaNeves95
pushedAt 2 days ago

ThalitaNeves95/SAP006-burger-queen-api-client

🍔

Retro Burger

Para acessar a aplicação, clique Aqui 🚀.

Login: Salão
E-mail: [email protected]
Senha: 252512
Login: Cozinha
E-mail: [email protected]
Senha: 252512

📑 Índice

1. 🌍SOBRE O PROJETO OK

O projeto Burguer Queen, foi criado dentro do bootcamp da Laboratória, com o intuito de estudarmos e colocarmos em prática o conteúdo do objetivos de aprendizagem. O tema do projeto era construir uma aplicação para um restaurante utilizando um tablet.

A interface deveria mostrar os dois menus (café da manhã e restante do dia), cada um com todos os seus produtos. O usuário deveria poder escolher que produtos adicionar e a interface deve mostrar o resumo do pedido com o custo total.

2. 💡 SOBRE O TEMA OK

Um pequeno restaurante de hambúrgueres, que está crescendo, necessita uma interface em que se possa realizar pedidos utilizando um tablet, e enviá-los para a cozinha para que sejam preparados de forma ordenada e eficiente.

Este projeto tem duas áreas: interface (cliente) e API (servidor). Nosso cliente nos pediu para desenvolver uma interface que se integre com a API que outra equipe de desenvolvedoras está trabalhando simultaneamente.

O projeto foi desenvolvido utilizando Vanilla JavaScript, HTML5, CSS3, React e uma API Externa e foi realizado em 5 semanas.

3. 💺 EXPERIÊNCIA DOS USUÁRIOS

Histórias de Usuários:

4. 🎨 LAYOUT OK

As cores do layout foram pensados no conforto dos usuários ao utilizar a aplicação.

Paleta de Cores:

Fizemos um fluxograma para verificar quais seriam os passos do funcionário, desde quando entra na aplicação, realiza pedidos e verifica histórico de pedidos.

Fluxograma:

🎯 Protótipos:

Os protótipos foram pensandos para facilitar a navegação e em trazer uma resposta rápida na busca por informações, realização de pedidos e busca por pedidos antigos.

Protótipos em alta fidelidade (Mobile First):

5. 📚 OBJETIVOS DE APRENDIZAGEM

  • Uso de HTML semântico
  • Uso de seletores de CSS
  • Empregar o modelo de caixa (box model): borda, margem, preenchimento
  • Uso de flexbox en CSS
  • Uso de CSS Grid Layout
  • Uso de media queries
  • Testes unitários
  • Testes assíncronos
  • Mocking
  • Uso ES modules
  • Uso de linter (ESLINT)
  • Uso de identificadores descritivos (Nomenclatura | Semântica)
  • Git: Instalação e configuração
  • Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)
  • Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)
  • GitHub: Criação de contas e repositórios, configuração de chave SSH
  • GitHub: Implantação com GitHub Pages
  • GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)
  • GitHub: Organização pelo Github (projects | issues | labels | milestones | releases)
  • Solicitações o requisições (request) e respostas (response).
  • Cabeçalhos (headers)
  • Corpo (body)
  • Verbos HTTP
  • Codigos de status de HTTP
  • Encodings e JSON
  • CORS (Cross-Origin Resource Sharing)
  • jsx
  • components
  • events
  • lists-and-keys
  • conditional-rendering
  • lifting-up-state
  • hooks
  • css-modules
  • routing
  • Desenhar a aplicação pensando e entendendo o usuário
  • Criar protótipos para obter feedback e iterar
  • Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
  • Planejar e executar testes de usabilidade

7. 🚧 MELHORIAS FUTURAS:

  • Escolher a opção do complemento em um único item;
  • Excluir pedidos;
  • Editar pedidos;
  • Editar nome e função do cadastro.

8. 👩‍💻 AUTORAS:

Projeto realizado para o Bootcamp da LABORATÓRIA.

Bianca Alves e Thalita Neves

ucloud ads