O foodExplorer é uma aplicação web fictícia para gerenciamento de restaurantes e solicitação de direta pelo cliente. A aplicação é totalmente responsiva para a utilização através dos mais diversos dispositivos! Após o cadastro na plataforma o usuário terá as permissões necessárias para criar cada pedido e acompanhar seu status. Como parte do desafio foi desenvolvida uma seção para os favoritos na página Home e uma página exclusiva para listagem de favoritos. A funcionalidade de carrinho e pagamento constam como opcional e serão desenvolvidos posteriormente. A aplicação é 100% funcional e o usuário pode navegar por diversas páginas e utilizar a barra lateral com controle dinâmico de aparência para navegação. Além disso, o avatar do usuário é disponibilizado no cabeçalho, permitindo que este atualize seus dados. O Administrador terá a capacidade de criar/editar/remover os pratos da forma que desejar.
Foi desenvolvida a logo marca do restaurante fictício com o auxílio de inteligencia artificial, mais precisamente, o DALL-E, da empresa de tecnologia OpenAI. Esta imagem acompanha tanto o administrador quanto o usuário comum por toda a navegação criando a identidade e associando a imagem da empresa para fidelização do cliente.
Neste repositório são encontrados os arquivos referentes ao FrontEnd em ReactJS e ao BackEnd em Node.js desenvolvidos para a resolução do desafio. Como forma de avançar ainda mais nos conhecimento sobre desenvolvimento de sistemas, utilizando bibliotecas e ferramentas atuais e demandadas pelo mercado, esta API utiliza a biblioteca MUI Material que permite ganho de produtividade e UI de excelência. Além disso, é apresentada um exemplo de tour de página e foi utilizado o swiper para dinamismo da página. Uma outra milha ainda foi percorrida, a aplicação foi desenvolvida utilizando o TypeScript.
O BackEnd em Node.js foi semelhantemente desenvolvido para a resolução do desafio. Como forma de avançar ainda mais nos conhecimento sobre desenvolvimento de sistemas, utilizando bibliotecas e ferramentas atuais e demandadas pelo mercado, esta API utiliza o ORM Prisma para acesso do banco de dado em SQLite. Além disso, uma prévia de como poderia ser implementado em mySQL também se encontra disponível, ficando como trabalho futuro a transição para um sistema mais robusto e amplamente utilizado, o qual deverá ser provisionado através do Docker para acesso localmente e possivelmente em alguma plataforma cloud. Uma outra milha ainda foi percorrida, a API foi desenvolvida utilizando o TypeScript.
O layout com todas as páginas obrigatórias e opcionais foi disponibilizada no figma por meio DESSE LINK.
Foi desenvolvido um projeto de execução das atividades no Notion, pode-se verificar através DESSE LINK.
As seguintes tecnologias foram empregadas na criação deste projeto:
- Node.js
- ReactJS
- Javascript
- Typescript
- MUI Material
- Styled Components
- Icons Material
- Formik
- Yup
- Swiper
- DALL-E
- Express
- Nodemon
- SQLite
- Prisma
- BCryptjs
- JSON Web Token
- Multer
- CORS
- Axios
Clone o projeto para o local desejado em seu computador.
git clone https://github.com/jakunzler/foodExplorer-backend# No BackEnd insira uma porta e as demais variáveis de ambiente no arquivo .env vazio
PORT=
SECRET_KEY_JWT=
TOKEN_EXPIRES_IN=
RESET_CODE_EXPIRES_IN=
# Navegue até o diretório do BackEnd
$ cd foodExplorer-backend
# Instale as dependências necessárias
$ yarn
# Ative as migrações do gerenciador de banco de dados
$ yarn prisma migrate dev
# Agora inicie o servidor do BackEnd
$ yarn dev_
Clone o projeto para o local desejado em seu computador.
git clone https://github.com/jakunzler/foodExplorer-frontend# Navegue até o diretório do FrontEnd
$ cd foodExplorer-frontend
# Instale as dependências necessárias
$ yarn
# Agora inicie o servidor do FrontEnd
$ yarn devfoodExplorer-backend/
├── node_modules/
│ └── ...
├── src/
│ ├── assets/
│ │ └── ...
│ ├── config/
│ │ └── ...
│ ├── db/
│ │ └── ...
│ ├── exceptions/
│ │ └── ...
│ ├── models/
│ │ └── ...
│ ├── modules/
│ │ └── ...
│ ├── providers/
│ │ └── ...
│ ├── routes/
│ │ └── ...
│ ├── tests/
│ │ └── ...
│ ├── utils/
│ │ └── ...
│ ├── index.ts
├── tmp/
│ ├── uploads/
│ │ └── ...
│ ├── .gitkeep
├── vitest/
│ └── ...
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── docker-compose.yml
├── Dockerfile
├── package.json
├── prettier.config.js
├── README.md
├── tsconfig.json
├── vite.config.ts
└── yarn.lockfoodExplorer-frontend/
├── node_modules/
│ └── ...
├── public/
├── src/
│ ├── assets/
│ │ └── ...
│ ├── components/
│ │ └── ...
│ ├── hooks/
│ │ └── ...
│ ├── pages/
│ │ └── ...
│ ├── routes/
│ │ └── ...
│ ├── service/
│ │ └── ...
│ ├── styles/
│ │ └── ...
│ ├── utils/
│ │ └── ...
│ ├── main.tsx
├── .eslintrc.cjs
├── .gitignore
├── .index.html
├── package.json
├── README.md
├── tsconfig.json
├── vite.config.ts
└── yarn.lockA aplicação foodExplorer possui duas personas principais: o admin e o usuário, mas foi previsto um terceiro usuário como suporte que tem acesso semelhante ao administrador. É possível criar um novo usuário ou testar a aplicação usando as seguintes informações de login:
Admin:
- E-mail: admin@email.com
- Senha: 123456
O admin tem acesso privilegiado e pode gerenciar o cardápio, adicionando, editando e removendo pratos, além de executar outras tarefas administrativas.
Usuário:
- E-mail: user@email.com
- Senha: 123456
O usuário tem acesso restrito às funcionalidades da aplicação, podendo visualizar o cardápio, filtrar pratos, ver detalhes de pratos específicos, favoritar pratos e adicionar pratos ao carrinho.
Este projeto está sob a licença MIT.
Feito com 💜 by Jonas Augusto Kunzler 👋🏾