Para acessar a aplicação, clique Aqui 🚀.
Login: Salão | |
---|---|
E-mail: [email protected] | |
Senha: 252512 |
Login: Cozinha | |
---|---|
E-mail: [email protected] | |
Senha: 252512 |
- 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
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.
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.
As cores do layout foram pensados no conforto dos usuários ao utilizar a aplicação.
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.
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.
- 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
- Escolher a opção do complemento em um único item;
- Excluir pedidos;
- Editar pedidos;
- Editar nome e função do cadastro.
Projeto realizado para o Bootcamp da LABORATÓRIA.