📊 Dashboards Educacionais & Analytics

Uma plataforma completa e moderna para visualização de dados educacionais e analytics. Este projeto oferece dashboards interativos que permitem a análise detalhada de métricas acadêmicas, desempenho de estudantes e estatísticas de cursos, integrando um frontend altamente responsivo com uma API backend robusta.

📋 Índice

• Arquitetura Técnica
• Tecnologias Utilizadas
• Pré-requisitos
• Instalação e Configuração
• Ambiente de Desenvolvimento
• Estrutura do Projeto
• Exemplos de Uso
• Documentação da API
• Testes
• Performance e Métricas
• Contribuição
• Licença
• Autores

---

🏗 Arquitetura Técnica

O projeto segue uma arquitetura baseada em microsserviços e SPA (Single Page Application), orquestrada via Docker.

Diagrama de Componentes

graph TD
    Client[Browser / Client] -->|HTTP/REST| Nginx[Nginx Web Server]
    Nginx -->|Serves Static Files| Frontend[Frontend React/Vite]
    Client -->|API Requests| Backend[Spring Boot API]
    Backend -->|JPA/Hibernate| Database[(MySQL Database)]
    
    subgraph Docker Network [edtech-network]
        Nginx
        Backend
        Database
    end

Loading

Fluxo de Dados (Exemplo: Login)

sequenceDiagram
    participant U as Usuário
    participant F as Frontend
    participant B as Backend
    participant D as Banco de Dados

    U->>F: Insere Credenciais
    F->>B: POST /api/v1/auth/login
    B->>D: Consulta Usuário
    D-->>B: Retorna Dados
    B->>B: Valida Senha e Gera JWT
    B-->>F: Retorna Token JWT
    F->>F: Salva Token (Store/Local)
    F-->>U: Redireciona para Dashboard

Loading

---

💻 Tecnologias Utilizadas

Frontend

Tecnologia	Versão	Descrição
React	18.x	Biblioteca para construção de interfaces
Vite	5.x	Ferramenta de build super rápida
TypeScript	5.x	Tipagem estática para JavaScript
Tailwind CSS	3.x	Framework de CSS utilitário
Lucide React	^0.x	Biblioteca de ícones
Zustand	^4.x	Gerenciamento de estado global

Backend

Tecnologia	Versão	Descrição
Java	21	Linguagem de programação
Spring Boot	3.x	Framework principal
Spring Security	6.x	Autenticação e autorização (JWT)
Spring Data JPA	3.x	Persistência de dados e ORM
Flyway	^9.x	Migrações de banco de dados
Lombok	^1.x	Redução de boilerplate

Infraestrutura & Banco de Dados

Tecnologia	Versão	Descrição
MySQL	8.4	Banco de dados relacional
Docker	Latest	Containerização da aplicação
Docker Compose	Latest	Orquestração de containers
Nginx	Alpine	Servidor web para o frontend

---

⚙️ Pré-requisitos

Para executar o projeto localmente, você precisará ter instalado:

• Docker e Docker Compose
• Node.js (v20+) - Para desenvolvimento frontend local
• Java JDK 21 - Para desenvolvimento backend local
• Maven - Opcional, o backend inclui o wrapper do Maven

---

🚀 Instalação e Configuração

A maneira mais fácil e recomendada de executar a aplicação completa é usando Docker.

1. Clone o repositório:

   git clone https://github.com/seu-usuario/dashboards-educacionais-analytics.git
   cd dashboards-educacionais-analytics

2. Suba os containers usando o Docker Compose:

   docker-compose up -d --build

3. Acesse as aplicações:

   • Frontend: http://localhost:80
   • Backend API: http://localhost:8080
   • Swagger UI (Docs da API): http://localhost:8080/swagger-ui.html

4. Para parar os containers:

   docker-compose down

---

🛠 Ambiente de Desenvolvimento

Se você deseja rodar as aplicações sem Docker para desenvolvimento:

Backend (Spring Boot)

cd backend
# Crie um banco de dados local MySQL ou use o container do banco:
# docker-compose up -d db

# Execute a aplicação
./mvnw spring-boot:run

Frontend (React + Vite)

cd Dashboards-Educacionais-Analytics
# Instale as dependências
npm install

# Inicie o servidor de desenvolvimento
npm run dev

O frontend estará disponível em http://localhost:5173. O CORS já está configurado no backend para permitir requisições locais (portas 5173-5176).

---

📁 Estrutura do Projeto

Dashboards Educacionais & Analytics/
├── docker-compose.yml       # Orquestração dos containers (DB, Backend, Frontend)
├── backend/                 # Aplicação Spring Boot
│   ├── src/main/java/       # Código fonte Java
│   │   └── com/edtech/...   # Domínios: auth, analytics, course, student
│   ├── src/main/resources/  # Configurações (application.yml, db/migration)
│   ├── Dockerfile           # Configuração de build Multi-stage (Maven -> JRE)
│   └── pom.xml              # Dependências do Maven
└── Dashboards-Educacionais-Analytics/ # Aplicação React + Vite
    ├── src/                 # Código fonte Frontend
    │   ├── components/      # Componentes UI reutilizáveis e Layout
    │   ├── features/        # Módulos principais (Dashboard, Alunos, etc.)
    │   ├── services/        # Integração com API
    │   └── store/           # Gerenciamento de estado (Zustand)
    ├── Dockerfile           # Configuração de build Multi-stage (Node -> Nginx)
    ├── nginx.conf           # Configuração do Nginx para roteamento SPA
    └── package.json         # Dependências do NPM

---

📸 Exemplos de Uso

(Adicione as capturas de tela reais do seu projeto aqui)

Visão Geral do Dashboard	Análise de Desempenho
Métricas gerais, total de alunos e tendências de matrículas.	Gráficos detalhados sobre notas, engajamento e conclusão de cursos.

---

📖 Documentação da API

A API foi documentada utilizando o OpenAPI 3.0 (Swagger).

Quando o backend estiver rodando, você pode acessar a documentação interativa em:

• Swagger UI: http://localhost:8080/swagger-ui.html
• OpenAPI JSON: http://localhost:8080/v3/api-docs

Principais Endpoints:

• POST /api/v1/auth/login - Autenticação
• GET /api/v1/analytics/dashboard - Métricas principais
• GET /api/v1/students - Listagem e busca de alunos
• GET /api/v1/courses - Catálogo de cursos

---

🧪 Testes

Backend

O backend possui testes unitários e de integração utilizando JUnit 5 e Mockito. Para rodar os testes:

cd backend
./mvnw test

Frontend

Testes podem ser executados via Vitest (se configurado):

cd Dashboards-Educacionais-Analytics
npm run test

---

⚡ Performance e Métricas

• Docker Multi-stage Builds: As imagens finais são extremamente enxutas. O backend utiliza eclipse-temurin:21-jre-alpine e o frontend utiliza nginx:alpine, resultando em um deploy leve e rápido.
• Nginx SPA Routing: Configurado especificamente para lidar com rotas React (fallback para index.html), garantindo carregamento rápido e suporte a navegação direta.
• Lazy Loading (Frontend): Divisão de código otimizada pelo Vite para carregar apenas os módulos necessários.
• Migrações (Backend): Flyway garante que o banco de dados esteja sempre na versão correta antes da aplicação iniciar, prevenindo erros de schema.

---

🤝 Contribuição

Contribuições são sempre bem-vindas! Siga os passos abaixo:

1. Faça um Fork do projeto
2. Crie sua Feature Branch (git checkout -b feature/AmazingFeature)
3. Faça o Commit de suas mudanças (git commit -m 'Add some AmazingFeature')
4. Faça o Push para a Branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

Guidelines:

• Mantenha o padrão de código existente.
• Adicione testes para novas funcionalidades.
• Atualize a documentação conforme necessário.

---

📄 Licença

Este projeto é licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

---

✍️ Autores

• Seu Nome - Desenvolvimento Fullstack - Seu GitHub - Seu LinkedIn

Se você gostou deste projeto, por favor, deixe uma ⭐️ no repositório!