Sistema web para gerenciamento de horários acadêmicos da UFFS (Universidade Federal da Fronteira Sul).
O App Horários é uma aplicação frontend desenvolvida para facilitar o gerenciamento e visualização de horários de aulas, componentes curriculares (CCRs), cursos, professores e ofertas de disciplinas na UFFS. O sistema conta com autenticação de usuários e controle de permissões granular para diferentes níveis de acesso.
- Autenticação de Usuários: Sistema de login com JWT e refresh token
- Controle de Permissões: Gerenciamento baseado em grupos e permissões individuais
- Gestão de Horários: Criação, edição e visualização de horários de aulas
- Componentes Curriculares (CCRs): Gerenciamento de disciplinas e ementas
- Cursos: Administração de cursos e suas ofertas
- Docentes: Cadastro e gerenciamento de professores
- Ofertas: Controle de ofertas de disciplinas por semestre
- Tema Claro/Escuro: Interface adaptável às preferências do usuário
- Design Responsivo: Interface otimizada para diferentes tamanhos de tela
- React 18 - Biblioteca JavaScript para construção de interfaces
- Vite - Build tool e bundler de nova geração
- React Router 7 - Roteamento da aplicação
- Material-UI (MUI) 5 - Biblioteca de componentes React
- MUI X Data Grid - Tabelas avançadas com funcionalidades de edição
- Material Icons - Ícones do Material Design
- React Beautiful DnD - Drag and drop para React
- Axios - Cliente HTTP com interceptors
- React Context API - Gerenciamento de estado global
- Yarn - Gerenciador de pacotes
app-horarios-front/
├── public/ # Arquivos estáticos
├── src/
│ ├── auth/ # Configuração de autenticação
│ │ ├── axios.js # Instância do Axios com interceptors
│ │ └── publicAxios.js # Instância do Axios para rotas públicas
│ ├── components/ # Componentes React
│ │ ├── App.jsx # Componente principal
│ │ ├── CCRs.jsx # Gestão de componentes curriculares
│ │ ├── Cursos.jsx # Gestão de cursos
│ │ ├── Horarios.jsx # Gestão de horários
│ │ ├── HorariosView.jsx # Visualização pública de horários
│ │ ├── Login.jsx # Página de login
│ │ ├── Navbar.jsx # Barra de navegação
│ │ ├── Ofertas.jsx # Gestão de ofertas
│ │ └── Professores.jsx # Gestão de docentes
│ ├── contexts/ # Contextos React
│ │ ├── AuthContext.jsx # Contexto de autenticação
│ │ ├── PermissionContext.jsx # Contexto de permissões
│ │ └── ProtectedRoute.jsx # HOC para rotas protegidas
│ ├── enums/ # Enumeradores
│ │ └── permissoes.js # Definições de permissões do sistema
│ ├── hooks/ # Custom Hooks
│ │ └── usePermissions.js # Hook para verificação de permissões
│ ├── services/ # Serviços de comunicação com API
│ │ ├── authService.js # Serviço de autenticação
│ │ └── permissoesService.js # Serviço de permissões
│ ├── utils/ # Utilitários
│ │ └── columnPermissions.js # Gerenciamento de permissões de colunas
│ ├── catchall.tsx # Rota catch-all
│ ├── entry.client.tsx # Entrada do cliente
│ ├── root.tsx # Componente raiz
│ └── routes.ts # Configuração de rotas
├── package.json # Dependências e scripts
├── vite.config.js # Configuração do Vite
└── react-router.config.ts # Configuração do React Router
Antes de começar, certifique-se de ter instalado:
- Node.js (versão 16 ou superior)
- Yarn (gerenciador de pacotes)
- Backend do App Horários rodando (veja app-horarios-api)
- Clone o repositório:
git clone https://github.com/ccuffs/app-horarios-front.git
cd app-horarios/app-horarios-front- Instale as dependências:
yarn install- Configure as variáveis de ambiente:
Crie um arquivo
.envna raiz do projeto:
VITE_APP_API_URL=url_da_apiExecute o servidor de desenvolvimento:
yarn startA aplicação estará disponível em http://localhost:5173
Gere a build otimizada:
yarn buildOs arquivos serão gerados na pasta build/
Para testar a build localmente:
yarn serveO sistema utiliza autenticação baseada em JWT (JSON Web Tokens) com as seguintes características:
- Login: Autenticação via email/usuário e senha
- Token de Acesso: Armazenado no localStorage
- Refresh Token: Renovação automática de token quando expira
- Interceptors: Requisições HTTP incluem automaticamente o token de autenticação
- Rotas Protegidas: Verificação de autenticação e permissões antes de renderizar componentes
O controle de acesso é baseado em:
- Grupos de Usuários: Usuários podem pertencer a múltiplos grupos
- Permissões Granulares: Controle fino sobre cada funcionalidade
- Hierarquia de Permissões:
- Visualizar próprios dados
- Visualizar todos os dados
- Criar/Editar/Excluir
Principais categorias de permissões:
HORARIOS: Gestão de horáriosCCR: Gestão de componentes curricularesOFERTAS_CURSO: Gestão de ofertasDOCENTES: Gestão de docentes
O sistema suporta temas claro e escuro com:
- Alternância via switch na interface
- Persistência da preferência do usuário
- Cores personalizadas do Material-UI
- Transições suaves entre temas
yarn testyarn start- Inicia o servidor de desenvolvimentoyarn build- Gera build de produçãoyarn serve- Serve a build de produção localmenteyarn dev- Inicia em modo de desenvolvimento com React Router Dev
Contribuições são bem-vindas! Por favor:
- Faça um fork do projeto
- Crie uma branch para sua feature (
git checkout -b feature/MinhaFeature) - Commit suas mudanças (
git commit -m 'Adiciona MinhaFeature') - Push para a branch (
git push origin feature/MinhaFeature) - Abra um Pull Request
Este projeto está sob a licença especificada no arquivo LICENSE.
- Backend - App Horários API
- Universidade Federal da Fronteira Sul
- Material-UI Documentation
- React Documentation
- Vite Documentation
Desenvolvido pela comunidade CCUFFS e contribuidores.
Para dúvidas ou problemas, abra uma issue no GitHub.
Feito para a UFFS