---
title: "MarvelOrder.com | Sam Carlton"
source: "https://samcarlton.com/portfolio/marvelorder/"
---

# MarvelOrder.com

June 2026

> I’ve been wanting a way to keep track of all the Marvel movies and shows, since there’s so much going on and they frequently swap positions for different releases.

MarvelOrder.com is an open-source, interactive version of the Marvel films and series, ordered chronologically and by release so you can see the latest correct dates. Mark what you’ve already watched, and the data refreshes automatically as the slate changes.

## Links

-   **Site:** [marvelorder.com](https://marvelorder.com/)
-   **GitHub:** [ThatGuySam/marvelorder](https://github.com/ThatGuySam/marvelorder)

## Highlights

-   **Two orderings** — in-universe timeline and release order, so you can see how the order shifts over time.
-   **Watch tracking** — mark titles watched; the state persists locally in your browser.
-   **Always current** — a daily TMDb refresh plus timeline imports keep the list accurate without manual edits.
-   **Open and editable** — every title links back to GitHub for community edits.

## How It’s Built

-   **Frontend** — Astro with React islands, Preact, and Vue support, Tailwind CSS, DaisyUI, lazysizes, and LocalForage for watch state.
-   **Content model** — Markdown-backed title pages, generated lists, an automatic table of contents, and per-title GitHub edit links.
-   **Data automation** — TMDb pull scripts, MCU timeline imports, fandom timeline scripts, and scheduled daily data checks.
-   **Search & media** — Algolia DocSearch, Wink NLP, Sharp image handling, and generated sitemaps.
-   **Hosting & tooling** — Netlify behind Cloudflare, a Bun engine, Node, TypeScript, Vitest, Biome, and Wrangler.

## Screenshots

![MarvelOrder.com desktop timeline showing Marvel releases with poster art](/project-screenshots/marvelorder/marvelorder-desktop.png)

Desktop timeline view of upcoming and released Marvel titles.

![MarvelOrder.com mobile timeline page](/project-screenshots/marvelorder/marvelorder-mobile.png)

Mobile view of the same release-order experience.