🍔

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
• 2. Sobre o Tema
• 3. Experiência dos Usuários
• 4. Layout
• 5. Objetivos de Aprendizagem
• 6. Começando o Projeto
• 7. Melhorias Futuras
• 8. Autoras

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