Skip to main content
JabssDev
Contact
esen
Back to projects
Shipped February 2026 — March 2026 Solo developer

Next Marvel Movie

PWA with a countdown to the next MCU release, trailer, trivia, and an easter egg — installable as a native app.

View live site View repository
Screenshot of the Next Marvel Movie site: Spider-Man feature with the release countdown and poster
  • Astro
  • React
  • TypeScript
  • Tailwind CSS
  • PWA (Service Worker)

Problem

I wanted a small side project that would force me to learn Astro 5 (Content Layer, View Transitions, islands), real PWA (Service Worker, manifest, install), and multi-locale i18n — without fighting a huge dataset. A countdown to the next Marvel movie was a perfect domain: few data points, high UI visibility, and an audience for whom an installable widget makes sense.

The current countdown targets Spider-Man: Brand New Day (July).

Approach

Astro as the meta-framework, shipping nearly-static HTML. Interactive components (the per-second countdown, trailer modal, locale switch, easter egg) are React islands hydrated with client:visible or client:idle depending on urgency. Tailwind for fast visual iteration.

PWA with a Service Worker for offline-first caching of the shell + assets, plus a manifest so the OS treats the app as installable. Astro’s native i18n routing (ES/EN/中文) without an extra library.

Decisions

  1. Astro over Next.js: the app is ~95% static. The countdown computes client-side; movie data is fixed until the next release. Astro ships 0kb of JS by default and only hydrates the islands it needs; Next would have forced the whole React bundle even when most of the DOM is non-interactive.

  2. Hand-rolled Service Worker (vs vite-plugin-pwa wholesale): the domain is small and fine-grained control over caching policy (network-first for metadata, cache-first for shell assets) was simpler to write directly than to configure through a Workbox plugin. Trade-off: fewer features (no auto-update prompts), but less magic.

  3. i18n in 3 locales (ES/EN/中文): Marvel has a global fanbase; the Chinese cinema market is the world’s second largest. Simplified Chinese covers that segment without complicating routing. Astro supports i18n natively with namespaces — no i18next needed.

Result

  • Installable as a PWA on desktop and mobile, works offline after the first visit.
  • Trilingual with Accept-Language detection and a persistent manual switch.
  • Lighthouse 95+ on Performance, Best Practices, and SEO (the static nature + 0kb JS default makes it nearly free).
  • Lessons migrated directly into jabss.dev: View Transitions with ClientRouter, anti-FART pattern for dark themes, PWA-readiness.