Viviane.
Voltar ao blog
Qualidade

Como estruturo projetos Fullstack com qualidade de código

ESLint, Prettier, Husky, CI/CD e convenções aplicadas no Portfolio Viviane e nos demais projetos.

6 min de leitura
  • TypeScript
  • ESLint
  • Prettier
  • CI/CD

Qualidade como produto

No Portfolio Viviane, tratei qualidade de código como requisito de negócio: recrutadores e tech leads avaliam não só o visual, mas também a engenharia por trás.

A mesma disciplina se aplica ao StockFlow, Ticket Sales e Finance App.

Stack de qualidade

Padronizei ferramentas em todos os repositórios para reduzir atrito cognitivo entre projetos.

  • TypeScript strict mode
  • ESLint flat config + Prettier
  • Husky + lint-staged + Commitlint
  • GitHub Actions: lint, type-check e build

Estrutura de pastas

No portfólio, separei dados (src/data), UI (components) e rotas (app). Case studies e artigos do blog vivem em arquivos tipados — sem conteúdo hardcoded em componentes.

text
src/
├── app/           # Rotas Next.js
├── components/    # UI reutilizável
├── data/          # Conteúdo tipado
├── lib/           # SEO, utils
└── types/         # Contratos TypeScript

CI que bloqueia regressão

O pipeline falha se package-lock estiver dessincronizado, se lint quebrar ou se o build não passar. Isso já evitou deploys quebrados no GitHub.

Dependabot mantém dependências atualizadas semanalmente.

Próximos passos

Expandir cobertura de testes e2e no StockFlow e documentar ADRs (Architecture Decision Records) no blog — este artigo é o primeiro passo dessa estratégia de autoridade técnica.