Resumo

Sistema web de gerenciamento de usuários com dashboard interativo, desenvolvido com Java (Spring Boot) no backend e JavaScript no frontend. A aplicação permite realizar operações CRUD completas (criar, listar, editar e deletar usuários), além de oferecer métricas em tempo real como total de usuários e distribuição por cargos.

O projeto simula um ambiente real de produção, com frontend hospedado na Vercel consumindo uma API REST hospedada no Render, demonstrando integração entre serviços, organização de código e boas práticas de desenvolvimento full stack.

Links

Vercel: https://dash-board-java.vercel.app/

Render: https://dashboard-java.onrender.com/users

Estrutura de pastas

DASHBOARD_JAVA/

├── .mvn/

├── mvnw

├── src/

│ ├── main/

│ │ ├── java/com/dashboard/backend/

│ │ │ ├── backendApplication.java

│ │ │ ├── CorsConfig.java

│ │ │ ├── GlobalExceptionHandler.java

│ │ │ ├── User.java

│ │ │ ├── UserController.java

│ │ │ ├── UserDTO.java

│ │ │ └── UserRepository.java

│ │ └── resources/

│ └── test/

├── target/

├── .gitattributes

├── .gitignore

├── HELP.md

├── mvnw.cmd

├── pom.xml

├── frontend/

│ ├── assets/

│ │ ├── header_logo

│ │ ├── back.gif

│ │ └── Elipse.png

│ ├── css/

│ │ ├── criacao.css

│ │ ├── dashboard.css

│ │ └── index.css

│ ├── js/

│ │ ├── criacao.js

│ │ ├── dashboard.js

│ │ ├── home.js

│ │ └── index.js

│ ├── criacao.html

│ ├── dashboard.html

│ └── index.html

└── Dockerfile

Stack Utilizada

Backend

• Java
• Spring Boot
• Maven
• JPA / Hibernate

Frontend

• HTML5
• CSS3
• JavaScript

Banco de Dados

• SQL (PostgreSQL / SQL)

Funcionalidades do Sistema

• Criar usuário
• Listar usuários
• Editar usuário
• Deletar usuário
• Filtrar por nome ou cargo
• Dashboard com métricas:
  • Total de usuários
  • Usuários com cargo
  • Front-end
  • Back-end

Rotas da API

Base URL:

https://dashboard-java.onrender.com

Usuários

Método	Rota	Descrição
GET	/users	Lista todos usuários
GET	/users/search	Filtra por nome/cargo
POST	/users	Cria usuário
PUT	/users/{id}	Atualiza usuário
DELETE	/users/{id}	Remove usuário

Lógica do Backend

Controller - Recebe requisições HTTP e retorna respostas

Service - Contém regras de negócio

Repository - Comunicação com banco (JPA)

Model (Entity)

Estrutura do Banco de Dados

Tabela: users

Campo	Tipo	Descrição
id	Long	Identificador
nome	String	Nome do usuário
email	String	Email
cargo	String	Cargo (front/back/etc)

Fluxo da Aplicação

1. Front faz requisição (fetch)
2. API recebe (Controller)
3. Service processa
4. Repository acessa banco
5. Retorna JSON
6. Front renderiza na tela

Integração Front ↔ Back

Centralizada no api.js

constBASE_URL="https://dashboard-java.onrender.com";
constAPI=`${BASE_URL}/users`;

Funções:

• getUsers()
• createUser()
• updateUser()
• deleteUser()

Lógica do Frontend

index.js

• Consome API
• Calcula métricas
• Atualiza cards

dashboard.js

• Lista usuários
• Filtro dinâmico
• Ações CRUD

criacao.js

• Criação e edição de usuário

Tratamento de Erros

Backend

• Validação de dados
• Status HTTP corretos (200, 404, 500)

Frontend

try {
  ...
}catch (erro) {
console.error("Erro:",erro);
}

Métodos HTTP Utilizados

Método	Uso
GET	Buscar dados
POST	Criar
PUT	Atualizar
DELETE	Remover

Como Rodar Localmente

Backend

cd backend
./mvnw spring-boot:run

ou

mvn spring-boot:run

Acessar:

http://localhost:8080/users

Frontend

Abrir:

index.html

OU usar Live Server

Deploy

Backend

• Render
• Build via Docker

Frontend

• Vercel
• Deploy automático via GitHub

Possíveis Melhorias

• Autenticação (JWT)
• Paginação
• Validação mais robusta
• UI com framework (React)
• Loading states
• Toasts de feedback
• Testes automatizados

Versão do projeto

Versão do Projeto

• Versão atual: v1.0
• Status: Produção
• Data do ultimo deploy: 24 de Abril 2026