Skip to content

Aplicação em React para gerenciar uma pequena hamburgueria que está em fase de expansão!

Notifications You must be signed in to change notification settings

crismantovani/hamburgueria-ipe

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 

Repository files navigation

Hamburgueria Ipê

⚛️ 🍴 📱 💹 🚀

Original, minimalista e clean

Hamburgueria Ipê é uma aplicação para tablets baseada em ReactJS, JSX e CSS3.

🗣️ User Experience (UX)

  • Exaustivamente testado para atingir a melhor experiência do usuário

🎨 Design original

  • Identidade visual agradável e de fácil identificação das features

🧩 Componentização

  • A aplicação está toda componentizada para fácil manutenção do código

🗂️ Documentação

  • Todo o processo está bem documentado para melhor entendimento

📊 Data Science

  • Possibilidade de levantar dados para o desenvolvimento do negócio

🌍 Acesse a aplicação


Você pode acessar a aplicação clicando aqui e utilizar um dos logins de teste abaixo:

# Salão Cozinha
🆔 [email protected] [email protected]
🔑 123456 123456

📑 Índice


1. O Projeto

O desafio Burguer Queen proposto pela Laboratória, é de desenvolver uma interface para uma hamburgueria 24hrs que está em expansão. Premissas:

  • Manter a interface e o estado sincronizados com React
  • Ser um SPA (Single Page App)
  • Ser responsivo em tablets
  • Definir a estrutura de pastas e arquivos
  • Usar JavaScript (ES6+) para a lógica do projeto

🚀 Voltar ao topo

2. A aplicação

Gif
A Hamburgueria Ipê lançou o serviço de 24 horas e foi muito bem aceito pelos clientes. Agora, a prioridade é continuar crescendo sem perder a qualidade.

Para isso, o atendimento deve ser simples e rápido, a cozinha deve ser eficiente e o negócio deve ser gerenciado com base em dados reais e relatórios fáceis de entender.

🚀 Voltar ao topo

3. Histórias de usuários

A Hamburgueria Ipê nos forneceu as histórias de usuários:

✍️ História de usuário #1

História de Usuário 1

✍️ História de usuário #2

História de Usuário 2

✍️ História de usuário #3

História de Usuário 3

✍️ História de usuário #4

História de Usuário 4

3.2 Funcionalidades

Com base nas histórias dos usuários, definimos algumas funcionalidades para a aplicação:
HU #1 ✔️ HU #2 ✔️ HU #3 ✔️ HU #4 ✔️
Criar login e senha Anotar nome do cliente e a mesa Ver os pedidos em ordem Ver a lista de pedidos prontos para servir
Registar usuário conforme setor (cozinha ou salão) Adicionar e/ou excluir produtos aos pedidos Marcar pedido como 'PRONTO' para ser servido Marque os pedidos que foram entregues
Fazer login na tela correta Ver resumo e o valor total do pedido Ver o tempo que levou para preparar o pedido
Enviar o pedido para a cozinha

🚀 Voltar ao topo

4. Planejamento

🖍️ Todo o conceito do projeto envolveu uma enorme valorização da experiência do usuário e suas necessidades. Também planejamos e estudamos as opções disponíveis antes de apresentar a solução para a Hamburgueria Ipê.

4.2 Organização

Gif

📝 Para conseguir entregar todas as funcionalidades do projeto, organizamos todo o fluxo de desenvolvimento do projeto pelo método Kanban no Trello.

Dessa forma, definimos:

🌱 MVP

🤙 Critérios mínimos de aceitação

🏷️ Padronizações do código (Code Style)

⚒️ Divisão de tarefas

🔐 Para merge no repositório (main), somente após code review para revisão em pares e aprovação da reviewer

🤝 Daily Scrum

Trello

🔎 Clique na imagem para ampliar

4.3 Fluxograma

🧭 Com as histórias de usuário, conseguimos entender as necessidades da Hamburgueria Ipê e montar o fluxo da aplicação

Fluxograma

🔎 Clique na imagem para ampliar

4.4 User Experience

🤩 Durante o processo de criação, fizemos diversas entrevistas com usuários para ter uma base mais sólda sobre o que eles esperavam e compreender melhor suas necessidades.

Começamos a desenvolver o wireframe de média fidelidade no Figma e atender as necessidades do usuário entregando uma boa experiência.

⚠️ As entrevistas foram realizadas por vídeo conferência devido a pandemia do Coronavírus.

4.5 Wireframe de média fidelidade

Gif

🔰 Com as respostas dos usuários, conseguimos desenvolver e testar o protótipo de média fidelidade, que pode ser acessado clicando aqui.

Wireframe - Login Vazio   Wireframe - Cadastro

Wireframe - Mesas do Salão   Wireframe - Pedidos

🔎 Clique nas imagens para ampliar

🚀 Voltar ao topo

5. Identidade Visual

🖌️ O conceito da identidade visual da hamburgueria envolve as cores do Brasil e da árvore símbolo Ipê Amarelo e sua flor:

Árvore Ipê Amarelo

5.2 Paleta de Cores

👩‍🎨 A paleta de cores foi desenvolvida com tons de verde e amarelo presentes na bandeira do Brasil e da flor Ipê, e, alguns tons terrosos como da árvore

Fizemos entrevistas com os usuários para alcançarmos tons que entregassem a melhor e mais agradável visualização.

Paleta de Cores

🔎 Clique na imagem para ampliar

5.3 Tipografia

✒️ Testamos e escolhemos duas fontes para serem utilizadas na aplicação e em todos os meios de comunicação, como banners, posts em redes sociais, cartazes, etc.

Tipografia principal

A fonte Playfair Display é utilizada no logo e em títulos de páginas

Tipografia Principal

Tipografia de apoio

A fonte Work Sans é utilizada em todo o corpo da aplicação

Tipografia de Apoio

5.4 Logotipo

💎 Após a definição da paleta de cores e tipografia, desenvolvemos o logotipo da hamburgueria para ser original, clean e harmônico com todo o visual da aplicação.

O logo lembra uma mesa de madeira e a cor predominante é marrom (RGB #7F381A), inspirado no tronco da árvore. Ao centro, está a flor Ipê que dá nome a hamburgueria, rodeada pelas palavras 'Hamburgueria' e 'Ipê', em tom amarelo-creme (RGB #F8E7C9).


Desenvolvemos quatro versões para serem aplicadas em fundos de cores distintas:



⚠️Utilização do logotipo

🟢 Deve ser usado respeitando a paleta de cores, formas e tamanhos, para ter consistência no uso e desenvolver o reconhecimento da marca pelo público.

🚫 O logo deve ser usado respeitando a identidade visual, mantendo os padrões de cores Pantone ou CMYK para impressos no geral e RGB para aplicações digitais.

🚀 Voltar ao topo

6. User Interface (e mais um pouco de UX)

Gif

⚖️ Desde o começo do projeto, a experiência do usuário sempre foi uma de nossas prioridades. Nessa fase do era o momento de equilibrar UX & UI (User Interface) ainda mais. Dessa forma, aumentamos consideravelmente as chances de entregar uma aplicação de visual agradável e extremamente funcional!

Principais objetivos de UI

✔️ Leitura clara de todos os textos

✔️ Consistência e padrões para não confundir os usuários

✔️ Design minimalista

✔️ Eficiência

✔️ Navegação intuitiva

✔️ Reconhecer ícones, formas, imagens e funcionalidades ao invés de lembrar após várias utilizações

✔️ Responsivo em tablets

✔️ Liberdade e controle do usuário

✔️ Feedbacks instântaneos para todas as ações (erros, confirmações, etc.)

✔️ Prevenção de erros (prever as ações de descuido do usuário)


🗣️ As primeiras conversas com os usuários foram um norte para chegarmos até essa fase. Mas era necessário ouvi-los mais algumas vezes para elevar a UX para outro nível!

Voltamos ao Figma , criamos um wireframe de média fidelidade, que pode ser acessado clicando aqui, e usamos ele para uma nova série de entrevistas.

Wireframe Alta - Beta   Wireframe Alta - Beta 2

🔎 Clique nas imagens para ampliar

6.2 Feedback & Melhorias

GIF

🔄 O feedback que recebemos dos usuários foi muito positivo no geral. A interface visual foi absolutamente elogiada pela beleza, cores agradáveis e em sintonia, além da facilidade para leitura de todos os textos.

Ainda assim, durante as entrevistas e testes, percebemos que o botão "Adicionar Item" prejudicava a experiência, pois tornava a navegação confusa e improdutiva, exigindo que eles dedicassem uma quantidade razoável de tempo para utilizar a aplicação.

Removemos o botão e optamos por mudar a cor de fundo para tentar facilitar a navegação por meio de cores:

Wireframe Alta - Pedidos - BG com Cor Alterada

Os usuários continuaram confusos 🙃

Oferecemos uma nova solução: Transformar as fotos dos itens em radio buttons.

Quando o atendente clica em cada botão ou foto, o item muda de cor e é automaticamente adicionado a coluna de itens que monta o pedido.

Versão final dos pedidos - GIF

Essa solução agradou aos usuários e tornou a tarefa de montar pedido mais eficiente.

🔄 Outra funcionalidade que precisou de uma pequena melhoria, foi a coluna que armazena os itens selecionados pelo atendente. Alguns usuários tiveram dificuldade de entender claramente como funcionava. Na nova versão, deixamos ela mais clean:

Versão Antiga - Coluna Pedidos   Versão Nova - Coluna Pedidos

🔎 Clique nas imagens para ampliar

As soluções foram aplicadas e a versão final do wireframe foi bem aceita pelos usuários.

Wireframe Alta - Login   Wireframe Alta - Cadastro

Wireframe Alta - Mesas do Salão   Wireframe Alta - Pedidos

🔎 Clique nas imagens para ampliar

🚀 Voltar ao topo

7. Desenvolvimento

🛠️ Com toda a identidade visual definida, UX & UI plenamente satisfatórios, começamos a desenvolver a interface da Hamburgueria Ipê. Os principais objetivos foram definidos logo de início:

🧾 A aplicação foi desenvolvida como SPA (single-page application), para que o usuário tenha a experiência similar à de um aplicativo para desktop.

📱 Como o ambiente é uma hamburgueria, a aplicação é 100% responsiva para tablets utilizados na vertical.

🧩 Utilizamos React JS para componentizar todo o site. Isso mantém a aplicação com alto desempenho e também permite que os componentes sejam reutilizados, gerando um código de fácil manutenção por qualquer desenvolvedor.

✨ Instalamos o ESLint na aplicação para manter o código padronizado e pronto para ser testado.

7.2 Interface Final

💫 Depois de três sprints, apresentamos a interface final da aplicação e todas as suas funcionalidades:

Salão Cozinha
Gif da Cozinha Gif da Cozinha

iPad

App Final - Estático

🔎 Clique nas imagens para ampliar

Toda a aplicação foi aprovada 100% pelo cliente e seus usuários.

7.3 Valor do produto (R.O.I)

💲 Para que a Hamburgueria Ipê continue crescendo e pensando em futuras expansões, implementamos uma feature para auxiliar no R.O.I (Return Over Investment).

Os pedidos ficam armazenados na API após finalizados. Isso abre a possibilidade da equipe de back-end utilizar esses dados para uma análise profunda de dados como:

💡 Eficiência da cozinha e do salão

💡 Melhor controle de estoque

💡 Planejar novas filiais

💡 Estratégia para promoções mais eficientes

💡 Comportamento do cliente

Entre diversos outros benefícios que a análise de dados pode oferecer!

7.4 Próximos passos

🧙‍♀️ A aplicação está completa e funcional, mas sempre é possível melhorar no futuro.

Nossas metas para o futuro são:

  • Retornar mensagens de erro para cada ação do usuário
  • Aplicar loading em todas as páginas necessárias
  • Melhoras gerais na API
  • Favicon
  • Calcular automaticamente o tempo de preparo dos pedidos
  • Responsividade para desktop e mobile
  • 70% de cobertura em testes

⚠️ Essa lista pode aumentar a qualquer momento :D

🚀 Voltar ao topo

8. Tecnologias

Hamburgueria Ipê utiliza as seguintes ferramentas:

Code:

ReactJS HTML5 CSS3 JSX NodeJS Vercel

Planejamento:

Trello Figma Canva

📦 Fique à vontade para rodar o projeto localmente. É bem simples!

1 - Clone o repositório para seu local

Clone

2 - Instale o Node.JS

3 - Abra o terminal e instale o NPM

npm install

4 - Entre na pasta raiz do projeto e digite:

npm start

🖥️ Os ambientes suportados são:

Edge Icon Firefox Icon Chrome Icon Safari Icon Opera Icon
IE / Edge Firefox Chrome Safari Opera
Versão 89 + Versão 89 + Versão 89 + 13 ou 14 + 74 +

Enjoy 👊

🚀 Voltar ao topo

9. Desenvolvedoras

👩‍💻 Hamburgueria Ipê foi orgulhosamente desenvolvido em 4 semanas, por Akemi Mitsueda e Cris Mantovani, alunas da SAP005 do bootcamp da Laboratória.

Se você ficou com alguma dúvida, tem sugestões ou quer apenas nos conhecer melhor, por favor, entre em contato :)

Akemi Mitsueda Cris Mantovani
Akemi Akemi
GitHub - Akemi LinkedIn - Akemi GitHub - Cris LinkedIn - Cris

10. Licença

© 2021 - Alguns direitos reservados

🔴 NUNCA use de forma comercial!

🟡 SEMPRE que for compartilhar essa aplicação, dê os créditos!

🟢 NÃO altere e nem crie derivados dessa aplicação se for para uso público!

Quer pedir uma exceção? Entre em contato antes!

Mais detalhes da licença clicando aqui.

🚀 Voltar ao topo

About

Aplicação em React para gerenciar uma pequena hamburgueria que está em fase de expansão!

Topics

Resources

Stars

Watchers

Forks

Languages

  • JavaScript 82.6%
  • CSS 17.1%
  • HTML 0.3%