🌮 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.
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
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.
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.
Clone o projeto via HTTPS
git clone https://github.com/matheusqueirozds/ifuture.gitEntre no diretório do projeto
cd ifutureInstale 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-componentsInicie o servidor
npm run start
