glaubermag.dev.br — Project Zero

Problem

I needed a senior hiring surface and personal technical brand: a site that showed real engineering — multilingual, accessible, indexable, and operable — without a generic landing page or invented business metrics.

Solution & impact

A React 19 + Vite SPA with i18next (pt-BR, en-US, es-ES, fr-FR), motion gated by user preference, PWA, Puppeteer prerender for static HTML on critical routes, and containerized deploy (Docker + nginx) on Coolify. The impact is the artifact itself: open source, green CI, and decisions documented in this case.

Architecture & trade-offs

Central trade-off: SPA + prerender instead of Next.js — smaller framework surface and simple static nginx hosting, at the cost of orchestrating hydrateRoot and pre-rendered routes at build time. Single-URL i18n (client language switch) simplifies canonicals and preference cookies, but demands locale parity discipline and careful hydrated content. PWA service worker stays in an update-prompt flow; the goal is light offline resilience, not an app-store product.

Operations & observability

GET /health returns JSON `{"status":"ok"}`; external monitoring (Cloudflare Health Checks or Better Stack). Lighthouse script in the repo to catch performance regressions. Plausible analytics opt-in — no tracking cookies by default.

Performance

Focus on Core Web Vitals (especially LCP and INP), with no fabricated scores: WebP images with srcset where it helps, home sections loaded on demand, route-level code splitting (lazy + Suspense), hydrateRoot after prerendered HTML, and Lighthouse tooling in the repo to catch regressions. Motion respects prefers-reduced-motion.

Quality

Vitest for unit tests, Playwright for smoke e2e, and CI covering lint/test/e2e/build. Pragmatic accessibility: theme contrast, skip-link, focus trap in overlays, and screen-reader copy for loading states. SEO/AEO with JSON-LD, FAQ, llms.txt, and canonical meta — matching what the site actually publishes.

What I'd do differently

I would document decisions as public ADRs earlier (now at /adr/). The SPA+prerender design remains right for this multilingual static site profile.

Documented decisions (ADR)

• ADR 002: SPA + prerender vs Next.js

  Static nginx and build control; cost of orchestrating prerender and hydrateRoot.

Stack

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