Este projeto consiste no desenvolvimento de uma aplicação web em React para gerenciamento de blocos de anotações pessoais.
A interface consome uma API REST própria desenvolvida em Java + Spring Boot, permitindo que cada usuário autenticado crie, visualize, edite e exclua suas próprias anotações de forma segura.
O sistema possui:
- Tela de login com autenticação JWT
- CRUD completo de blocos de anotações
- Filtro de busca por texto
- Modo escuro para acessibilidade
- Validação de inputs em formulários
- Navegação entre telas com React Router
- Requisições HTTP com Axios
- Gerenciamento de estado com Context API
- Desenvolver interface funcional consumindo API REST
- Utilizar componentes funcionais com Hooks (useState, useEffect, useContext)
- Aplicar React Router para navegação entre telas
- Realizar requisições GET, POST, PUT e DELETE com Axios
- Implementar filtro de busca na listagem de blocos
- Validar inputs de formulários
- Implementar modo escuro para acessibilidade
- Utilizar props para comunicação entre componentes
- Versionar o projeto com Git e GitHub
|
React 18 · JavaScript · CSS · HTML |
Java 17 · Spring Boot · PostgreSQL |
Git · GitHub · VS Code |
src
├── components
│ ├── Header.jsx ← Barra de navegação com toggle dark mode
│ ├── BlocoCard.jsx ← Card de exibição de um bloco
│ ├── BlocoForm.jsx ← Formulário de criação/edição
│ ├── FiltroBloco.jsx ← Input de busca/filtro
│ └── PrivateRoute.jsx ← Proteção de rotas autenticadas
├── context
│ └── AuthContext.jsx ← Contexto de autenticação (useContext)
├── pages
│ ├── Login.jsx ← Tela de login
│ ├── Cadastro.jsx ← Tela de cadastro
│ ├── Home.jsx ← Listagem de blocos + filtro
│ ├── NovoBlocoPage.jsx ← Tela de criação de bloco
│ └── EditarBlocoPage.jsx ← Tela de edição de bloco
├── services
│ └── api.js ← Configuração do Axios + interceptors
├── styles
│ └── global.css ← Estilos globais + variáveis dark mode
├── App.jsx ← Rotas e estrutura principal
└── main.jsx ← Ponto de entrada da aplicação:
🗄️ Banco de Dados — PostgreSQL O projeto utiliza PostgreSQL como banco de dados relacional. Abaixo está a definição das tabelas principais:
sql CREATE TABLE usuario ( id_usuario SERIAL PRIMARY KEY, login VARCHAR(100) NOT NULL UNIQUE, senha_usuario VARCHAR(255) NOT NULL, role VARCHAR(20) CHECK (role IN ('USER', 'ADMIN')), idioma VARCHAR(50) NOT NULL );
CREATE TABLE bloco ( id_bloco SERIAL PRIMARY KEY, texto VARCHAR(100) NOT NULL, id_usuario INTEGER NOT NULL, cor VARCHAR(100) NOT NULL, CONSTRAINT fk_bloco_usuario FOREIGN KEY (id_usuario) REFERENCES usuario(id_usuario) ON DELETE CASCADE );
CREATE INDEX idx_bloco_usuario ON bloco(id_usuario);
Autenticação do usuário com validação de campos e armazenamento do token JWT.
Criação de novo usuário com validação de login e senha mínima de 6 caracteres.
Lista todos os blocos do usuário logado com campo de filtro por texto em tempo real.
Formulário para criação de bloco com validação de texto (máx. 100 caracteres).
Formulário pré-preenchido para atualização de bloco existente.
| Rota | Componente | Acesso |
|---|---|---|
/ |
Login.jsx | Público |
/cadastro |
Cadastro.jsx | Público |
/home |
Home.jsx | Autenticado |
/novo |
NovoBlocoPage.jsx | Autenticado |
/editar/:id |
EditarBlocoPage.jsx | Autenticado |
| Método | Endpoint | Descrição |
|---|---|---|
| POST | /usuarios/login |
Login — recebe token JWT |
| POST | /usuarios/cadastro |
Cadastro de usuário |
| GET | /blocos |
Lista blocos do usuário logado |
| POST | /blocos |
Cria novo bloco |
| PUT | /blocos/{id} |
Atualiza bloco |
| DELETE | /blocos/{id} |
Remove bloco |
POST /usuarios/login
{
"login": "joao@email.com",
"senha": "123456"
}Resposta:
{
"token": "eyJhbGciOiJIUzI1NiJ9...",
"tipo": "Bearer",
"idUsuario": 1,
"login": "joao@email.com"
}POST /blocos
Authorization: Bearer SEU_TOKEN
{
"texto": "Minha anotação aqui"
}| Hook | Onde | Para quê |
|---|---|---|
useState |
Todas as telas | Controle de estado local (form, lista, dark mode) |
useEffect |
Home | Buscar blocos da API ao carregar a tela |
useContext |
Componentes | Acessar token e dados do usuário autenticado |
useNavigate |
Login, Formulários | Redirecionar após ações |
useParams |
EditarBlocoPage | Capturar o ID do bloco pela URL |
A aplicação possui alternância de tema claro/escuro implementada com variáveis CSS e estado global via Context:
/* Variáveis de tema */
:root {
--bg: #ffffff;
--text: #1a2340;
--card: #f8f5f0;
}
[data-theme="dark"] {
--bg: #1a2340;
--text: #f8f5f0;
--card: #2d3a5c;
}| Campo | Validação |
|---|---|
| Login | Obrigatório, mínimo 3 caracteres |
| Senha | Obrigatória, mínimo 6 caracteres |
| Texto do bloco | Obrigatório, máximo 100 caracteres |
O token é armazenado no localStorage e enviado automaticamente em todas as requisições via interceptor do Axios:
// services/api.js
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});git clone https://github.com/jfxrias/anotacoes-reactcd anotacoes-react
npm installnpm run devAcesse: http://localhost:5173
A API REST precisa estar rodando localmente na porta 8080. A API foi disponibilizada no próprio repositório.
{
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.0.0",
"axios": "^1.6.0"
},
"devDependencies": {
"vite": "^5.0.0"
}
}- React 18 com componentes funcionais
- Hooks: useState, useEffect, useContext, useNavigate, useParams
- React Router v6 (rotas públicas e protegidas)
- Context API para autenticação global
- Axios com interceptors para JWT
- Requisições GET, POST, PUT e DELETE
- Filtro de lista em tempo real
- Validação de formulários
- Modo escuro com variáveis CSS
- Props para comunicação entre componentes
- Consumo de API REST própria
- Versionamento com Git e GitHub
 João Farias |
 João Pedro Mazzotti |
 Emily Neves |
 Davi Portugal |
-
Aplicação React funcional consumindo API REST própria.
-
Autenticação JWT implementada com Context API.
-
Modo escuro para acessibilidade.
-
Filtro de busca em tempo real.
-
Validação de inputs em todos os formulários.
-
Versionado com Git e GitHub.