RamenGO é uma aplicação fullstack desenvolvida utilizando as tecnologias:
-
Backend:
- Java 21
- Maven
- Spring Boot
- Spring Data JPA
- Spring Security
- Banco de dados H2
-
Frontend:
- Javascritp
- HTML 5
- CSS 3
- Vite
- [IN] O cliente faz a requisição para obter a listagem de molhos.
- [OUT] O sistema informa a lista de molhos disponíveis.
Informações complementares:
- Na hora de fazer a requisição, o cliente deve informar, no cabeçalho de sua requisição, a chave x-api-key. Caso não informe, o acesso será negado à API.
- [IN] O cliente faz a requisição para obter a listagem de proteínas.
- [OUT] O sistema informa a lista de proteínas disponíveis.
Informações complementares:
- Na hora de fazer a requisição, o cliente deve informar, no cabeçalho de sua requisição, a chave x-api-key. Caso não informe, o acesso será negado à API.
- [IN] Cliente faz a requisição (contendo em seu corpo o id do molho e o id da proteína) solicitando um pedido.
- [OUT] Sistema informa o id do pedido, nome do ramen e imagem a ser exibida.
Informações complementares:
- Na hora de fazer a requisição, o cliente deve informar, no cabeçalho de sua requisição, a chave x-api-key. Caso não informe, o acesso será negado à API.
- Se o corpo da requisição não contiver o id do molho ou o id da proteína, o sistema informa uma exceção personalizada.
- Na hora de processar o pedido, são buscados no banco de dados o molho e a proteína solicitados pelo cliente. Então, é feita uma requisição a uma API externa a fim de obter os dados necessários para o retorno e salvamento do pedido no banco de dados. Além de salvar a resposta do pedido, é salva também a requisição do pedido. Se feita com sucesso (ou seja, a requisição feita para obter os dados do pedido foi devidamente concluída e processada com sucesso), a requisição do pedido é salva com o status de COMPLETE. Mas, se a requisição para obter os dados do pedido não for concluída, a requisição do pedido é salva como INCOMPLETE.
A estrutura de arquivos do frontend é organizada da seguinte forma:
frontend/
├── assets/
├── css/
│ ├── home/
│ │ ├── cards/
│ │ │ └── cards.css
│ │ ├── header/
│ │ │ └── header.css
│ │ ├── placeorder/
│ │ │ └── placeorder.css
│ │ ├── success/
│ │ │ └── success.css
│ ├── reset/
│ │ └── reset.css
│ ├── utils/
│ │ ├── button.css
│ │ ├── colors.css
│ │ ├── container.css
│ │ ├── font.css
│ │ ├── loading.css
│ │ ├── shadow.css
│ │ ├── spacing.css
│ │ └── style.css
├── js/
│ ├── CardsList/
│ │ └── CardsList.js
│ ├── PlaceOrder/
│ │ └── PlaceOrder.js
│ ├── utils/
│ │ ├── CustomFetch.js
│ │ ├── debounce.js
│ │ ├── formatter.js
│ │ └── loadingStructure.js
│ └── main.js
├── node_modules/
├── public/
│ └── index.html
├── .gitignore
├── package-lock.json
├── package.json
- Classes Utilitárias em CSS: Diversas classes utilitárias para estilização rápida e eficiente.
- Debounce: Implementação de debounce para melhorar o desempenho ao reajustar os cards em relação ao tamanho da tela.
- Componentes Reutilizáveis: Componentes feitos em JavaScript para facilitar o desenvolvimento de interfaces modulares.
Antes de tentar rodar o projeto, é necessário que vc tenha em sua máquina: Java 21, Maven, Intellij e NodeJs
- Clone o repositório:
git clone https://github.com/LucasFrancoBN/ramengo.git- Navegue até o diretório do backend:
cd ramenGO/backend- Abra o intellij no diretório.
- Configure o projeto como um projeto Maven.
- No intellij, vá em
src > main > com.rvbrasil.ramengo.ramengo > RamengoApplicatione rode o projeto
- Navegue até o diretório do frontend:
cd ramenGO/frontend- Instale as dependências:
npm install- Execute o projeto:
npm run dev