glaubermag.dev.br — Projet Zéro

Problème

J'avais besoin d'une surface de hiring senior et d'une marque personnelle technique : un site qui montre de la vraie ingénierie — multilingue, accessible, indexable et opérable — sans landing générique ni métriques business inventées.

Solution et impact

SPA React 19 + Vite avec i18next (pt-BR, en-US, es-ES, fr-FR), motion selon la préférence utilisateur, PWA, prerender Puppeteer pour du HTML statique sur les routes critiques, et déploiement containerisé (Docker + nginx) sur Coolify. L'impact, c'est l'artefact lui-même : open source, CI verte et décisions documentées dans ce case.

Architecture et compromis

Compromis central : SPA + prerender plutôt que Next.js — moins de surface framework et un hébergement simple via nginx statique, au prix d'orchestrer hydrateRoot et des routes pré-rendues au build. i18n à URL unique (changement de langue côté client) simplifie canonicals et cookies de préférence, mais exige une discipline de parity des locales et du contenu hydraté. La PWA avec service worker reste dans un flux d'update ; l'objectif est une résilience offline légère, pas une app store.

Exploitation et observabilité

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

Focus sur les Core Web Vitals (surtout LCP et INP), sans scores fabriqués : images WebP avec srcset quand c'est utile, sections home chargées à la demande, code splitting par route (lazy + Suspense), hydrateRoot après le HTML pré-rendu, et tooling Lighthouse dans le dépôt pour attraper les régressions. Le motion respecte prefers-reduced-motion.

Qualité

Vitest en unitaire, Playwright en smoke e2e, et CI lint/test/e2e/build. Accessibilité pragmatique : contraste du thème, skip-link, focus trap sur les overlays et copy pour lecteurs d'écran sur les états de chargement. SEO/AEO avec JSON-LD, FAQ, llms.txt et meta canonique — aligné sur ce que le site publie réellement.

Ce que je ferais autrement

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.

Décisions documentées (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