Saltar al contenido principal
JabssDev
Contacto
esen
Volver a proyectos
En producción febrero de 2026 — marzo de 2026 Solo developer

Next Marvel Movie

PWA con countdown a la próxima película del MCU, trailer, datos curiosos y un easter egg, instalable como app.

Ver sitio en vivo Ver repositorio
Captura de la web Next Marvel Movie: portada de Spider-Man con la cuenta regresiva al estreno y el póster
  • Astro
  • React
  • TypeScript
  • Tailwind CSS
  • PWA (Service Worker)

Problema

Quería un side project pequeño que me forzara a aprender Astro 5 (Content Layer, View Transitions, islands), PWA real (Service Worker, manifest, instalación), e i18n multi-idioma — todo sin pelearme con un dataset enorme. El countdown a la próxima película Marvel era el dominio perfecto: pocos datos, alta visibilidad de la UI, y un público al que un widget instalable le hace sentido.

La película actual del countdown es Spider-Man: Brand New Day (julio).

Aproximación

Astro como meta-framework para entregar HTML estático casi en su totalidad. Los componentes interactivos (countdown que se actualiza por segundo, trailer modal, switch de idioma, easter egg) son islands React hidratadas con client:visible o client:idle según urgencia. Tailwind para velocidad de iteración visual.

PWA con Service Worker para cacheo offline-first del shell + assets, manifest para que el sistema operativo trate la app como instalable. i18n nativo de Astro routing (ES/EN/中文) sin librería extra.

Decisiones

  1. Astro sobre Next.js: la app es ~95% estática. El countdown se calcula client-side, los datos de la película son fijos hasta el siguiente estreno. Astro entrega 0kb de JS por defecto y solo hidrata los islands necesarios; Next habría forzado a manejar el bundle de toda la app React aunque la mayoría del DOM no fuera interactivo.

  2. PWA con Service Worker propio (vs vite-plugin-pwa wholesale): el dominio es chico y el control fino del caching policy (network-first para metadata, cache-first para assets estáticos del shell) era más simple escribiéndolo directo que configurando un plugin de Workbox. Trade-off: menos features (no auto-update prompts), pero menos magia.

  3. i18n a 3 idiomas (ES/EN/中文): Marvel tiene fanbase global; el mercado chino de cinéfilos es el segundo más grande del mundo. ZH simplificado cubre ese segmento sin complicar el routing. Astro soporta i18n nativo con namespaces sin necesidad de i18next.

Resultado

  • App instalable como PWA en escritorio y mobile, funciona offline tras la primera visita.
  • Trilingüe con detección por Accept-Language y switch manual persistente.
  • Lighthouse 95+ en Performance, Best Practices y SEO (la naturaleza estática + 0kb JS por defecto lo hacen casi free).
  • Aprendizajes que migré directamente a jabss.dev: View Transitions con ClientRouter, anti-FART pattern para temas oscuros, PWA-readiness.