O FoodExplorer é uma aplicação fullstack, utilizando as tecnologias aprendidas durante o curso Explorer, simulando um restaurante fictício de acordo com o layout disponibilizado no Figma.
O food explorer possui duas personas: o admin e o usuário;
O admin é a pessoa responsável pelo restaurante e tem o acesso para criar, visualizar, editar, apagar um prato e alterar os status de pedidos a qualquer momento. Cada prato deve conter uma imagem, nome, categoria, descrição, ingredientes e o seu preço. Ao clicar em adicionar ou editar prato será redirecionado para a página e ao finalizar receberá uma mensagem de sucesso e será redirecionado para a página principal.
O usuário irá visualizar todos os pratos cadastrados, adicionar ao carrinho, fazer um pedido, adicionar aos favoritos, acompanhar seu histórico de pedidos, atualizar seu perfil e quando clicar em um prato, será redirecionado para uma nova tela com informações mais detalhadas sobre ele.
Link para o deploy da aplicação
Link para Back-End
Antes de começar, você vai precisar ter instalado em sua máquina NodeJs , uma ferramenta de versionamento como o GIT . Além disto é recomendado um editor de código, por exemplo oVSCode .
Siga os seguintes passos para configurar e rodar a aplicação localmente:
-
Clone o repositório:
git clone https://github.com/larinhab/FoodExplorer_Back
-
Entre no diretório e instale as dependências:
npm install
-
Preencha as variáveis seguindo o .env.exemplo:
VITE_BASE_URL=http://localhost:2008
-
Rode o servidor local:
npm run dev
-
Caso não ocorra nenhum erro a seguinte mensagem será apresentada:
VITE v5.1.1 ready in 215 ms ➜ Local: http://localhost:5173 -
Para utilizar todo dos recursos acesse o localhost indicado pelo VITE:
http://localhost:5173
A aplicação possui duas formas de usúario:
-
Cliente: Acesse com as credencias: testecliente@gmail.com Senha: '123456'
- Mostrar todos os pratos
- Mostrar um prato especifico
- Pesquisar por um prato ou ingrediente
- Adicionar ao carrinho os pedidos
- Fazer um pedido
- Adicionar prato aos favoritos
- Acessar todos os favoritos
- Acessar página de pagamento
- Acessar status do pedido
- Atualizar informações de login
-
Administrador: Acesse com as credencias: testeadmin@gmail.com Senha: '654321'
- Mostrar todos os pratos
- Mostrar um prato especifico
- Pesquisar por um prato ou ingrediente
- Acessar todos os pedidos
- Acessar status do pedido
- Atualizar status de pedidos
- Atualizar informações da conta
- Acessar página com informações sobre o restaurante
- Cadastrar um novo prato
- Atualizar um prato
- Deletar um prato
O render possui um sistema que deixa o servidor hibernando então no primeiro acesso é normal ocorrer um delay na resposta que pode durar até 1 minuto, caso ocorra aguarde essa duração que logo após o funcionamento volta ao normal.
-
Assim que acessar a aplicação a tela para fazer login será apresentada com a opção de criação de conta para o primeiro acesso. Se todos os dados estiverem corretos é liberado o acesso.
-
Dentro da aplicação o usuário tem os seguintes acessos:
-
/Página Home que é apresentada após o login.-
/plates/:idPágina para visualização de um prato em detalhes, clicando no card que se encontra na Página inicial.-
/profilePágina Acessada por um botão localizado noHeaderque permite o usuário alterar os dados de sua conta.-
/favoritesPágina Acessada por um botão localizado noHeaderque exibe todos os pratos adicionados aos favoritos.-
/cartPágina Acessada por um botão localizado noHeaderque exibe os pratos adicionados no carrinho.-
/paymentPágina Acessada por um botão localizado na página de carrinho que gera uma solicitação e permite o usuário selecionar a forma de pagamento.
-
Além das páginas disponíveis para os usuários o administrador tem acesso a rotas especificas:
-
/newplatePágina Acessada por um botão localizado noHeaderque permite adicionar um novo prato.-
/editplate/:idPágina Acessada por um botão localizado no card do prato ná página Home.
-
✅ O usuário pode marcar um prato como favorito, basta clicar no coração que aparece em cada prato.
-
✅ O usuário pode excluir um prato do carrinho e o valor total do pedido é atualizado automaticamente.
-
✅ Ao clicar no botão meu pagamento, o usuário é redirecionado para uma tela onde irá ver o seu pedido, a soma e os métodos de pagamento.
-
✅ O usuário pode incluir itens no carrinho, clicando no botão incluir. Já a quantidade é controlada pelos botões “-” e “+”.
-
✅ Um projeto estruturado, com uma boa organização das pastas, e boa divisão dos componentes.
-
✅ Funções, variáveis, classes, arquivos, tabelas e todos os outros elementos do código tem nomes significativos, de acordo com as boas práticas no mercado.
-
✅ Aplicação é responsiva, de acordo com o conceito Mobile First seguindo o modelo do Figma;
- React: - React-swiper - React-icons - React router dom - React-lottie - React-Router-Dom - Vite - Styled-components - Axios - Javascript
Uso de Licença MIT: Essa licença permite o uso, modificação e distribuição do software sem restrições.
Feito com ❤️ por Lara 👋🏽 Entre em Contato