Aplicação web para estudantes universitários visualizarem a grade curricular do seu curso em formato de fluxograma interativo.
- Fluxograma por semestre — disciplinas organizadas em colunas por período, com cards coloridos indicando o status de cada uma
- Código de cores por status
- Verde — disciplina cursada
- Azul — disciplina cursável (pré-requisitos satisfeitos)
- Cinza — disciplina bloqueada (pré-requisitos pendentes)
- Linhas de pré-requisito — setas SVG desenhadas entre disciplinas dependentes e seus pré-requisitos
- Destaque no hover — ao passar o mouse sobre uma disciplina, toda a cadeia de pré-requisitos (diretos e indiretos) é destacada
- Marcar / desmarcar disciplinas — clicar em uma disciplina cursável a marca como cursada; clicar em uma cursada a desmarca, propagando recursivamente a invalidação de dependentes
- Barra de progresso — exibe a carga horária cursada sobre o total do curso em porcentagem, atualizada automaticamente
- Persistência local — progresso salvo no
localStoragepor curso; restaurado automaticamente ao reabrir o navegador - Suporte a múltiplos cursos — novos cursos são adicionados apenas inserindo um arquivo JSON
Acesse diretamente em grad-fluxo.vercel.app — sem instalação.
Pré-requisitos: Node.js 18+
# Clone o repositório
git clone https://github.com/sfDavi/GradFluxo.git
cd GradFluxo
# Instale as dependências
npm install
# Inicie o servidor de desenvolvimento
npm run devAcesse http://localhost:5173 no navegador.
npm run build # Build de produção
npm run preview # Servir o build localmente
npm run lint # Verificar o código com ESLint- Crie um arquivo JSON em
public/cursos/seguindo o modelo abaixo - Adicione o nome do arquivo ao array em
public/cursos/index.json - O curso aparecerá automaticamente na tela de seleção
{
"codigoCurso": "ABCDE",
"nomeCurso": "Curso de Exemplo",
"numeroSemestres": 8,
"cargaHorariaTotal": 3200,
"cargaHorariaNucleoComum": 960,
"cargaHorariaNucleoLivre": 320,
"cargaHorariaNucleoEspecifico": 1600,
"cargaHorariaNucleoOptativo": 320,
"disciplinas": [
{
"codigoDisciplina": "CC001",
"nomeDisciplina": "Disciplina 1",
"semestre": 1,
"cargaHoraria": 64,
"nucleo": "comum",
"prerequisitos": []
},
{
"codigoDisciplina": "CC002",
"nomeDisciplina": "Disciplina 2",
"semestre": 1,
"cargaHoraria": 64,
"nucleo": "especifico",
"prerequisitos": ["CC001"]
}
]
}Valores válidos para nucleo: "comum", "especifico", "livre", "optativo"
GradFluxo/
├── public/
│ └── cursos/
│ ├── index.json # Lista de arquivos de curso
│ ├── bcc-17.json # Ciência da Computação (grade 2017)
│ ├── bcc-24.json # Ciência da Computação (grade 2024)
│ ├── bes-ufg-24.json # Engenharia de Software - UFG (grade 2024)
│ └── ia-2020.json # Inteligência Artificial (grade 2020)
└── src/
├── types/
│ └── index.ts # Tipos TypeScript (Curso, Disciplina, Status, Nucleo)
├── utils/
│ ├── loadCursos.ts # Carrega os JSONs de cursos via fetch
│ └── calcularStatus.ts # Calcula status de cada disciplina
├── components/
│ ├── CourseSelection.tsx # Tela de seleção de curso
│ └── FlowchartView.tsx # Fluxograma principal com SVG, hover e progresso
├── App.tsx # Roteamento entre as duas telas
├── App.css # Estilos dos componentes
└── index.css # Estilos globais
| Tecnologia | Uso |
|---|---|
| React 19 | Interface e gerenciamento de estado |
| TypeScript 5.9 | Tipagem estática |
| Vite 7 | Build e servidor de desenvolvimento |
| SVG nativo | Linhas de pré-requisito (sem bibliotecas externas) |
| localStorage | Persistência do progresso no navegador |
A função calcularStatus percorre todas as disciplinas e determina o status com base no conjunto de disciplinas já cursadas:
- Se a disciplina está no conjunto de cursadas → cursada
- Se todos os pré-requisitos estão cursados (ou não há pré-requisitos) → cursável
- Caso contrário → não cursável
Ao desmarcar uma disciplina cursada, um BFS percorre o grafo de dependentes e remove do conjunto de cursadas todas as disciplinas que dependem (direta ou indiretamente) da desmarcada.
MIT