Projeto 4Food

📄 Sobre

Projeto final do curso de Front-End da Labenu. A ideia foi desenvolver um aplicativo parecido com o Ifood, onde o usuário faz os pedidos, acessa o carrinho de compras, finaliza a compra, altera seus dados e verifica o tempo de espera do pedido.

🔗 Link para acessar

• iFuture

📲 Apresentação do aplicativo

🛠 Tecnologias

• ReactJS
• API
• Material UI
• Axios
• React-toastify
• React-Router-Dom
• Metodologias Ágeis

📋 Planejamento

• Foi utitilizado o Kanban como metodologia ágil.

• Aplicações com múltiplas rotas utilizando React Router; Autenticação; Uso de bibliotecas de UI; Formulários com Validação; Hooks useState e useEffect.

• API utilizada para realizar este projeto : LabeFoods

Páginas 4food:

• Área pessoal de Login e Cadastro.
• Home com restaurantes e tipos de comidas.
• Pedido e Confirmação com detalhes do pedido.
• Perfil com dados do cliente.
• Meu Carrinho com informações dos pedidos, quantidade de itens, formas de pagamentos e valores.

🎨 Estilizações

• Paleta de Cores

🔠 Fonts:

Text Style

• Roboto, Regular, 16px
• Letter spacing: -0.4px

Text Style 2

• SFProText, Regular, 12px

Text Style 3

• Roboto, Regular, 16px
• Center, Letter spacing: -0.4px

🧩 Wireframe

💻 Funcionalidades

Fluxo de Login/Cadastro:

• O usuário deve ser capaz de criar uma conta, cadastrando seus dados pessoais e seu endereço.
• Caso insira alguma informação incorreta ou deixe de inserir alguma informação obrigatória, o usuário deve receber uma mensagem de erro clara.
• Após finalizar o cadastro, o usuário deve ser redirecionado para a tela de lista de restaurantes.

Busca e Seleção de Restaurantes:

• O usuário deve ser capaz de visualizar uma lista com todos os restaurantes.
• O usuário deve ser capaz de buscar um restaurante por nome.
• O usuário deve ser capaz de filtrar os restaurantes por categoria.
• O usuário deve ser capaz de clicar no card de um restaurante para visualizar a tela com seu cardápio.

Cardápio do Restaurante:

• O usuário deve ser capaz de visualizar as informações do restaurante (foto, nome, tipo, tempo de entrega, frete, endereço).
• O usuário deve ser capaz de visualizar os pratos do restaurante, divididos em categorias (exemplo: principais, sobremesas, entradas, etc).
• O usuário deve ser capaz de visualizar as informações de cada prato (foto, nome, descrição, preço).
• O usuário deve ser capaz de adicionar pratos no carrinho e selecionar a quantidade de cada prato.
• O usuário deve ser capaz de remover itens do carrinho.

Perfil, Editar Perfil e Histórico de Pedidos:

• O usuário deve ser capaz de visualizar e editar seus dados pessoais e endereço
• Ao editar as informações, caso insira alguma informação incorreta ou deixe de inserir alguma informação obrigatória, o usuário deve receber uma mensagem de erro clara.
• O usuário deve ser capaz de visualizar o seu histórico de pedidos concluídos (após o tempo de entrega do estabelecimento, o seu pedido aparece nessa lista?).

Carrinho e Finalizar Compra

• O usuário deve ser capaz de visualizar a lista de itens que adicionou ao carrinho. Caso não tenha adicionado nenhum item, deverá ver uma mensagem de "Carrinho Vazio".
• O usuário deve visualizar, no topo da tela, o endereço de entrega
• O usuário deve visualizar o preço total da compra, que deve ser corretamente calculado de acordo com o preço e quantidade de cada item adicionado.
• O usuário deve ser capaz de selecionar uma forma de pagamento dentre as opções de cartão e dinheiro.
• O usuário deve ser capaz de concluir um pedido e, ao fazê-lo, deve ver um banner de "Pedido em Andamento" com os dados do pedido (esse banner fica ativo durante X minutos, sendo X o tempo de entrega do restaurante).

🚧 Em desenvolvimento

Versão para desktop. (Aplicação foi desenvolvida para Mobile first)

💾️ Como baixar/testar o projeto

• Antes de começar, você irá precisar instalar o Git, NodeJS + Visual Studio Code.

$ node -v
v12.19.0

$ npm -v
6.14.5

• Para configurar, no GitBash digite os seguinte códigos:

$ git clone "https://github.com/future4code/maryam-labe-food6"

#Entrar no diretório
$ cd ./maryam-labe-food6

#Abrir projeto no VsCode ou com seu prompt de comando de preferência
code . ||  cd ./maryam-labe-food6 (Passo acima) 

#Com o terminal aberto rodar o comando
$ npm install (para instalar as dependências necessárias)
$ npm install axios
$ npm install styled-components
$ npm install react-router-dom
$ npm install @material-ui/core @material-ui/icons
$ npm install --save react-toastify

#Agora só rodar o projeto com o comando
$ npm run start

#Pronto projeto abrirá em seu navegador padrão
Agora é só testar em seu navegador!

👩‍💻 Desenvolvedores

Geisylania Lopes	Leonardo Souza Gomes	Lucas Homero Pimentel	Murilo Terenciani Carolino	Sarah Romanhol Falconiere

👋🏽 Entre em contato!

Voltar para o topo