matheusqueirozds / ifuture

🌮 Projeto desenvolvido em React JS, simulando um aplicativo de delivery, baseado no Ifood.

Labefood

🌮 Projeto desenvolvido em React JS, simulando um aplicativo de delivery, baseado no Ifood.

Clique aqui para acessar o deploy do projeto

Apoie os meus estudos, adquirindo os produtos da minha loja, feita para programadores! Clique aqui para conferir.

---

🎓 Autores

Daniel da Silva	Douglas Williams	Matheus Queiroz	Roberta Vieira	Victoria Moreira

---

🎨 Documentação de cores

Cor	Hexadecimal
lipstick	#e8222e

---

✅ Funcionalidades

Além do design das telas estar dentro do modelo proposto, o usuário pode:

• Criar uma conta, cadastrando seus dados pessoais e seu endereço
• Receber uma mensagem de erro clara, caso haja alguma informação divergente do solicitado.
• Ser redirecionado para a tela de lista de restaurantes, após finalizar o cadastro
• Visualizar uma lista com todos os restaurantes
• Buscar um restaurante por nome
• Filtrar os restaurantes por categoria
• Clicar no card de um restaurante para visualizar a tela com seu cardápio
• Visualizar as informações do restaurante (foto, nome, tipo, tempo de entrega, frete, endereço)
• Visualizar seus dados pessoais e endereço
• Editar seus dados pessoais e endereço

---

🚫 Roadmap

Para concluir o projeto ainda falta permitir que o usuário:

• Visualize os pratos do restaurante, divididos em categorias (exemplo: principais, sobremesas, entradas, etc)
• Visualize as informações de cada prato (foto, nome, descrição, preço)
• Adicione pratos no carrinho e selecionar a quantidade de cada prato
• Remova itens do carrinho
• Visualize a lista de itens que adicionou ao carrinho. Caso não tenha adicionado nenhum item, vê uma mensagem de "Carrinho Vazio"
• Visualize, no topo da tela, o endereço de entrega
• Visualize o preço total da compra, que é corretamente calculado de acordo com o preço e quantidade de cada item adicionado
• Selecione uma forma de pagamento dentre as opções de cartão e dinheiro
• Conclua um pedido e, ao fazê-lo, vê 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)
• Visualize o seu histórico de pedidos concluídos, ou seja, após o tempo de entrega do estabelecimento, o seu pedido aparece nessa lista.

---

🎯 Aprendizados

Com esse projeto, aprofundamos os conhecimentos adquiridos no React JS. Começamos vendo os hooks mais utilizados - useState e useEffect. Depois, vimos como implementar as funcionalidades mais comuns em aplicações de Frontend: formulários, autenticação, routers e estilizações.

---

🔄 Rodando o projeto localmente

Clone o projeto via HTTPS

  git clone https://github.com/matheusqueirozds/ifuture.git

Entre no diretório do projeto

  cd ifuture

Instale todas as dependências abaixo:

  npm i axios

  npm i @mui/material @emotion/react @emotion/styled

  npm i react-icons

  npm i react-router-dom

  npm i styled-components

Inicie o servidor

  npm run start

---

🔳 Screenshots

Home	Página de login	Cadastro usuário	Cadastro endereço

Feed	Restaurante	Carrinho	Perfil