Relatório Técnico de Refatoração – Frontend Nefropapers

1. Resumo Executivo

O frontend atual do Nefropapers é funcional, mas está tecnologicamente defasado, com estrutura baseada em arquivos HTML e JS puros, sem modularização, componentização, ou uso de framework moderno. Isso gera alta dependência de scripts duplicados, baixo reaproveitamento de código, ausência de estado reativo e dificuldade de manutenção à medida que o sistema cresce.

Por que refatorar:

• Reduzir dívida técnica acumulada.
• Aumentar a produtividade da equipe.
• Possibilitar testes automatizados e CI/CD.
• Melhorar escalabilidade e legibilidade do código.
• Modernizar a stack para atrair novos desenvolvedores.

2. Diagnóstico com Evidências

Organização Monolítica e Sem Modularização

Exemplo:

const id = localStorage.getItem("id");
fetch(`https://nefropapersapi.onrender.com/testes/${id}`)
  .then((res) => res.json())
  .then((data) => {
    document.getElementById("nome-teste").innerHTML = data.nome;
  });

Problemas: Código diretamente no DOM, acoplado ao localStorage, sem fallback ou tratamento de erros.

Lógica Repetida em Múltiplos Arquivos

fetch(`https://nefropapersapi.onrender.com/usuarios/${id}`)
  .then(res => res.json())
  .then(user => {
    document.getElementById("nome-usuario").innerText = user.nome;
  });

Problemas: Padrão repetido em vários arquivos, sem abstração.

Ausência de Proteções (Segurança)

Tokens e dados sensíveis são manipulados diretamente no localStorage, expostos a XSS e vulnerabilidades de sessão.

Estilo e Responsividade

Ausência de estrutura responsiva moderna, componentes reutilizáveis ou controle de estado.

3. Propostas de Refatoração Técnicas

• Adotar React ou Vue: com Tailwind, React Query, Vite.
• Criar Estrutura Modular: com components/, pages/, services/ etc.
• Centralizar Lógica de API: Axios + interceptadores.
• Gerenciar Estado com React Query: evita fetch manual.
• Validar e Proteger Sessões: Zod para schemas, AuthContext para tokens.

Exemplo de refatoração:

// Antes:
fetch('https://api...')
  .then(res => res.json())
  .then(data => document.getElementById("x").innerHTML = data.y);

// Depois (React):
const {{ data }} = useQuery(['teste', id], () => api.getTeste(id));
return <h1>{{data.nome}}</h1>;

4. Plano de Execução

1. Criar nova base com Vite + Tailwind + ESLint.
2. Configurar React Router e React Query.
3. Migrar por páginas prioritárias.
4. Implementar testes e validações.

5. Conclusão

A refatoração do frontend do Nefropapers é necessária para garantir evolução, atrair desenvolvedores, melhorar manutenção e segurança. A stack atual dificulta testes, escalabilidade e manutenção contínua. Adotar React, modularização e validação segura é um passo fundamental.