glaubermag.dev.br — Projeto Zero

Problema

Precisava de uma superfície de hiring sênior e marca pessoal técnica: um site que demonstrasse engenharia de verdade — multilíngue, acessível, indexável e operável — sem depender de landing genérica nem de métricas de negócio inventadas.

Solução e impacto

SPA em React 19 + Vite com i18next (pt-BR, en-US, es-ES, fr-FR), motion sob preferência do usuário, PWA, prerender com Puppeteer para HTML estático nas rotas críticas, e deploy containerizado (Docker + nginx) no Coolify. O impacto é o próprio artefato: código aberto, CI verde e decisões documentadas neste case.

Arquitetura e trade-offs

Trade-off central: SPA + prerender em vez de Next.js — menos superfície de framework e hospedagem simples via nginx estático, ao custo de orquestrar hydrateRoot e rotas pré-renderizadas no build. i18n em URL única (troca de idioma no cliente) simplifica canônicos e cookies de preferência, mas exige disciplina de parity de locales e de conteúdo hidratado. PWA com service worker fica opt-in ao fluxo de update; o objetivo é resiliência offline leve, não app store.

Operação e observabilidade

GET /health com JSON `{"status":"ok"}`; monitoramento externo (Cloudflare Health Checks ou Better Stack). Lighthouse script no repositório para auditar regressões de performance. Plausible analytics opt-in — sem cookies de rastreamento por padrão.

Performance

Foco em Core Web Vitals (especialmente LCP e INP), sem scores fabricados: imagens WebP com srcset onde faz sentido, seções da home carregadas sob demanda, code splitting por rota (lazy + Suspense), hydrateRoot após o HTML prerenderizado e tooling Lighthouse no repositório para auditar regressões. Motion respeita prefers-reduced-motion.

Qualidade

Vitest na unidade, Playwright no smoke e2e, e CI com lint/test/e2e/build. Acessibilidade pragmática: contraste do tema, skip-link, focus trap em overlays e copy para leitores de tela nos estados de loading. SEO/AEO com JSON-LD, FAQ, llms.txt e meta canônica — alinhado ao que o site realmente publica.

O que eu faria diferente

Eu documentaria mais cedo as decisões como ADRs públicos (agora em /adr/) e manteria o foco em trade-offs documentados nos cases. O desenho SPA+prerender continua certo para este perfil de site estático multilíngue.

Decisões documentadas (ADR)

• ADR 002: SPA + prerender vs Next.js

  nginx estático e controle do build; custo de orquestrar prerender e hydrateRoot.

Stack

• React 19
• Vite
• i18next
• Framer Motion
• Puppeteer
• Docker
• nginx
• GitHub Actions
• Vitest
• Playwright
• PWA