Board (Idea Board)

Quadro de ideias estilo “post-it” com Spring Boot + WebSocket (STOMP) e uma UI simples em HTML/CSS/JS.

Stack

• Java: 21
• Spring Boot: 4.x
• Web: Spring WebMVC
• Realtime: Spring WebSocket + STOMP
• Banco: PostgreSQL (via Spring Data JPA)
• Frontend: arquivos estáticos em src/main/resources/static/ (JS em módulos ES)

Como rodar

1) Requisitos

• JDK 21 instalado
• PostgreSQL rodando e acessível

2) Configurar o banco

Configure as propriedades do datasource no application.properties/application.yml (ex.: spring.datasource.url, spring.datasource.username, spring.datasource.password).

Dica: procure por spring.datasource em src/main/resources/.

3) Subir a aplicação (Windows)

Na raiz do projeto:

.\mvnw.cmd spring-boot:run

Se preferir gerar o jar:

.\mvnw.cmd clean package
java -jar .\target\board-0.0.1-SNAPSHOT.jar

Usar a aplicação

• UI: http://localhost:8080/
• API (REST): base em GET/POST/PUT/DELETE /ideas
• WebSocket (STOMP):
  • broker URL: ws://<host>/sync-board
  • topic: /topic/ideas

Estrutura do frontend (módulos)

Arquivos em src/main/resources/static/js/:

• main.js: entrypoint (wire do formulário + load)
• board.js: render/drag das notas e refresh()
• api.js: chamadas REST para /ideas
• websocket.js: conexão STOMP e subscribe em /topic/ideas
• utils.js: helpers (el, clamp, safeJson)
• config.js: constantes (ex.: API_BASE) index.html carrega o app com:

<script type="module" src="/js/main.js"></script>

Teste rápido

• Abrir http://localhost:8080/ em 2 abas
• Criar/editar/deletar uma ideia em uma aba
• Confirmar atualização automática na outra (via WebSocket)