Frontend

Visão Geral

O frontend da aplicação foi desenvolvido com Next.js, aproveitando suas funcionalidades de Server-Side Rendering (SSR) e Static Site Generation (SSG) para melhor performance e SEO. A interface do usuário é construída com React e estilizada com TailwindCSS em conjunto com a biblioteca de componentes shadcn/ui, garantindo consistência visual, rapidez no desenvolvimento e uma experiência moderna e responsiva.

Tecnologias Utilizadas

• Next.js: Framework React utilizado para criação das páginas, rotas e otimizações de performance.
• React: Biblioteca para construção da interface do usuário.
• TailwindCSS + tailwind-merge + tailwindcss-animate: Framework utilitário para estilização, com suporte a animações e composição de classes.
• shadcn/ui (Radix UI + Lucide Icons): Conjunto de componentes acessíveis e prontos para uso, como diálogos, formulários e ícones.
• Axios: Cliente HTTP para comunicação com o backend.
• Framer Motion: Biblioteca para animações fluidas e interativas.
• Recharts: Gráficos para visualização de dados.
• React Day Picker + date-fns: Manipulação e seleção de datas.
• React Dropzone + @files-ui/react: Upload de arquivos e manipulação de inputs.
• File Saver: Download de arquivos direto pelo navegador.

Páginas

• Login (/): Tela para autenticação de usuários.
• Cadastro (/): Registro de novos usuários na plataforma.
• Home (/home): Página principal com acesso centralizado às funcionalidades do sistema.
• Tabelas (/home): Exibição de entidades do laboratório (bolsistas, professores, documentos).
• Inserção (/home): Formulário para adicionar novas entidades.
• Dashboard Processo Seletivo (/home): Exibição dos processos seletivos ativos e finalizados.
• Detalhes do Processo Seletivo (/home): Lista de participantes e submissões, com possibilidade de apagar dados sensíveis após finalização.
• Detalhes do Projeto (/home): Mostra os integrantes do projeto, com opção de inserir ou remover membros.
• Detalhes de Entidade (/home): Exibição detalhada de uma entidade.
• Edição de Entidade (/home): Formulário para edição, restrito a administradores.
• Processo Seletivo (/processoseletivo): Tela para submissão de candidaturas pelos participantes.

CI/CD

O pipeline de Integração Contínua (CI) e Entrega Contínua (CD) do frontend garante qualidade e estabilidade a cada commit ou pull request:

• Execução de testes automatizados (ex.: Jest, Cypress).
• Validação de lint com ESLint.
• Checagem de build com Next.js para prevenir erros de configuração ou dependências.

Esse processo assegura que a aplicação seja confiável, seguindo padrões de código e pronta para deploy em produção.

Scripts Principais (package.json)

• pnpm dev → Inicia o servidor de desenvolvimento Next.js.
• pnpm build → Gera o build otimizado para produção.
• pnpm start → Inicia a aplicação em modo de produção.
• pnpm lint → Roda o ESLint para verificação de estilo e boas práticas.
• pnpm prod → Cria a imagem Docker e roda o container localmente.

Estrutura de Qualidade e Usabilidade

• UI consistente: shadcn/ui + TailwindCSS garantem padronização visual.
• Acessibilidade: Radix UI assegura que os componentes sigam boas práticas de acessibilidade.
• Responsividade: Layouts otimizados para diferentes dispositivos.
• Experiência do Usuário: Animações com Framer Motion e feedback visual imediato.