🔗 Clique aqui para visualizar a aplicação no ar.
O FoodExplorer é um menu interativo de um restaurante fictício.
Trata-se de uma aplicação construída de ponta a ponta com front-end e back-end, utilizando as tecnologias aprendidas no programa Explorer da Rocketseat.
Possui duas personas: admin e usuário comum.
O admin é a pessoa responsável pelo restaurante. Pode criar, visualizar, editar e apagar um prato a qualquer momento. Cada prato contém uma imagem, um nome, uma categoria, uma breve descrição, os ingredientes e o seu preço. Ao clicar em adicionar prato, o admin recebe uma mensagem de sucesso e é redirecionado para a página principal.
O usuário pode visualizar todos os pratos cadastrados e, quando clica em um prato, é redirecionado para uma nova tela com informações mais detalhadas sobre ele.
Milhas extras:
- O usuário pode marcar ou desmarcar um prato como favorito;
- O usuário pode incluir itens no carrinho, e a quantidade é controlada pelos botões + e -;
- Ao clicar em "finalizar pedido" na página de pedidos, o pedido é concluído e entra para o histórico com o status de "preparando";
- O usuário pode ver seu histórico de pedido, com data, status e itens dos pedidos;
- O admin pode visualizar e controlar o status de cada pedido (pendente, preparando ou entregue);
- O layout possui versões dark & light.
O layout foi construindo seguindo o modelo abaixo:
- HTML
- CSS
- JavaScript
- React (front-end)
- Node (back-end)
1. Clone o repositório do projeto completo no seu computador:
$ git clone [email protected]:jessicaranft/FoodExplorer.git
2. Execute o back-end:
# Insira uma porta e gere um código hash para inserir no arquivo .env vazio:
AUTH_SECRET=
PORT=
# Navegue até o diretório do back-end:
$ cd api
# Instale as dependências necessárias:
$ npm install
# Inicie o servidor:
$ npm run dev
3. Execute o front-end:
# Navegue até o diretório do front-end:
$ cd frontend
# Instale as dependências necessárias:
$ npm install
# Inicie o servidor:
$ npm run dev
# Copie e cole o endereço fornecido no terminal na barra de endereço do seu navegador. O endereço usado na criação do projeto foi:
http://localhost:5173/
Clique neste link para acessar a aplicação no ar.
Você pode usar os dados abaixo para logar na conta de um usuário que já tem um histórico de pedidos e favoritos:
e-mail: [email protected]
senha: 123456
Ou use as credenciais abaixo para logar como administrador:
e-mail: [email protected]
senha: 12345
Fique à vontade também para criar seu próprio usuário comum e testar a aplicação fazendo novos pedidos.
This project is under the license MIT.
Made with ❤️ by Jessica Ranft.