Nineteen years of continuity. Three universes. One destination.
A focused, interactive watch-order tracker that helps you figure out what actually matters before Avengers: Doomsday — without forcing you through hundreds of hours of unrelated content.
All Roads to Doomsday is a lightweight, browser-based watch-order tracker built specifically for preparing for Avengers: Doomsday.
Instead of dumping the entire MCU, every Marvel television series, every X-Men movie, and every remotely connected project into one massive list, Doomsday takes a more useful approach:
Identify the stories that matter, put them in chronological order, explain why they matter, and let you track your progress.
The watch order intentionally combines:
- MCU films
- X-Men films
- Disney+ series and specials
- Multiverse-related stories
- Characters and storylines connected to the upcoming film
Everything is interleaved into a single chronological journey rather than being separated into "MCU", "X-Men", and "TV" lists.
The result is a practical road to Doomsday rather than a 300-hour homework assignment.
Preparing for a giant crossover movie can be frustrating.
There are hundreds of hours of Marvel content, but not all of it contributes meaningfully to the story you're about to watch.
Doomsday is designed around one simple question:
"What should I actually watch before Avengers: Doomsday?"
Every title is assigned a priority based on its relevance to the movie:
| Tier | Meaning |
|---|---|
| 🔴 Required | Directly connected through confirmed characters, major storylines, or essential plot mechanics |
| 🔵 Recommended | Strong contextual value or highly likely relevance |
| ⚪ Extra | Has a meaningful connection, but can be skipped without losing the core story |
This lets you choose between a focused preparation route and a complete deep dive.
Titles are presented in chronological order across multiple Marvel universes and formats.
The list currently spans the relevant stories from the early X-Men era through the latest MCU releases leading toward Avengers: Doomsday.
Each entry contains:
- Title
- Release year
- Runtime
- Priority tier
- A short explanation of why it matters
- A direct JustWatch search link
This makes the list useful both as a watch guide and as a reference for understanding why a particular title is included.
Doomsday provides three filters:
Only the highest-priority titles.
This is the fastest route for someone who wants the essential setup without spending weeks catching up.
Required titles plus stories that provide important context or are strongly connected.
The complete curated Doomsday watchlist, including lower-priority material.
The filter also dynamically updates:
- Total titles
- Total runtime
- Progress percentage
- Remaining watch time
- Recommended daily viewing pace
Every title can be checked off as you watch it.
Your progress is automatically saved locally in the browser, so refreshing or returning to the page does not erase your checklist.
The application uses browser storage when available and falls back to localStorage.
Your normal watch progress stays on your device.
There is:
- No account system
- No login
- No database
- No backend required
- No personal profile
The repository explicitly keeps normal checklist progress local to the device.
The progress panel shows:
- Titles completed
- Total titles in the selected tier
- Runtime completed
- Total runtime
- Completion percentage
- Remaining watch time
- Approximate minutes per day required to finish before Doomsday
The daily pace is calculated dynamically using the current date and the target release date.
So the tracker stays useful as the release gets closer.
The app continuously calculates the time remaining until:
December 18, 2026 — Avengers: Doomsday
The countdown is generated from the current date rather than being hard-coded, meaning it remains accurate after deployment.
Every title includes a watch icon that opens a JustWatch search for that title.
This means you don't have to manually search for where each movie or series is available.
Note: The current implementation uses JustWatch's US search endpoint. Availability can therefore differ depending on your region.
You can generate a shareable snapshot of your current progress.
The shared snapshot can contain:
- Selected watch tier
- Number of completed titles
- Completed runtime
- Titles you've watched
- Timestamp of the snapshot
The app supports a self-contained share link, meaning the progress can be encoded directly into the URL and opened elsewhere without requiring the recipient to have an account.
Where supported, the application can also generate a short share code.
Friends can open a shared link or enter a share code to see:
- Their completion percentage
- Number of watched titles
- Runtime completed
- Their selected tier
- Titles they have already watched
This makes it easy to share your progress without creating accounts or maintaining a traditional social system.
Doomsday can generate a downloadable PDF version of your current watchlist.
The generated PDF includes:
- Selected tier
- Watch progress
- Runtime completed
- Runtime remaining
- Countdown information
- Phase-by-phase title list
- Checked/unchecked state
The PDF is generated entirely in the browser using jsPDF.
No server-side document generation is required.
The UI is intentionally designed to feel like a Marvel event rather than a generic checklist.
The visual language includes:
- Dark cinematic background
- Gold accent color
- Red/blue comic-style shadows
- Halftone background texture
- Comic-inspired typography
- Animated introduction
- Animated progress bar
- Priority badges
- Expandable timeline sections
The interface also respects prefers-reduced-motion, disabling major animations for users who request reduced motion.
Internally, the watchlist is structured by phases.
For example:
Origins · 2000–2012
├── X-Men
├── X2: X-Men United
├── X-Men: The Last Stand
└── Iron Man
...
Phase 5 · 2023–2025
├── Ant-Man and the Wasp: Quantumania
├── Loki: Season 2
├── Deadpool & Wolverine
├── Captain America: Brave New World
├── Daredevil: Born Again
├── Thunderbolts*
└── The Fantastic Four: First Steps
Phase 6 · 2026
└── Spider-Man: Brand New Day
↓
AVENGERS: DOOMSDAY
Dec 18, 2026
The actual watchlist is stored directly inside the application's JavaScript data structure, making it easy to update as new information becomes available.
Doomsday intentionally avoids a complicated stack.
┌─────────────────────┐
│ Browser │
└──────────┬──────────┘
│
┌────────────▼────────────┐
│ index.html │
│ │
│ HTML + CSS + JavaScript│
└───────┬───────┬─────────┘
│ │
┌─────────────┘ └──────────────┐
│ │
┌────────▼────────┐ ┌────────▼────────┐
│ Browser Storage │ │ External Services│
│ │ │ │
│ localStorage │ │ JustWatch │
│ / supported │ │ jsPDF CDN │
│ storage │ │ │
└────────────────┘ └─────────────────┘
There is currently no application server or database.
That keeps the project:
- Fast
- Cheap to host
- Easy to maintain
- Easy to fork
- Easy to deploy
- Privacy-friendly
The project is deliberately minimal.
doomsday/
│
├── index.html # Complete web application
└── README.md # Project documentation
The index.html currently contains the application's:
- Markup
- Styling
- Watchlist dataset
- Progress logic
- Filtering logic
- Countdown logic
- Sharing system
- PDF generation logic
- UI interactions
This makes the project extremely easy to deploy as a static website.
No build system is required.
Clone the repository:
git clone https://github.com/51riu5/doomsday.git
cd doomsdayThen open:
index.html
in your browser.
For a more realistic browser environment:
python -m http.server 8000Then open:
http://localhost:8000
Because the project is a static HTML application, it can be deployed to essentially any static hosting provider.
Examples:
- GitHub Pages
- Vercel
- Netlify
- Cloudflare Pages
- Firebase Hosting
- Any traditional web server
There is no build command and no backend deployment step.
| Technology | Purpose |
|---|---|
| HTML5 | Application structure |
| CSS3 | Layout, responsive design, animations, comic-inspired styling |
| Vanilla JavaScript | Application logic and state management |
| Browser Storage | Persisting watch progress |
| JustWatch | Where-to-watch search links |
| jsPDF | Client-side PDF generation |
| Google Fonts | Typography |
No React, Vue, Angular, Node backend, database, or external API server is required.
Privacy is one of the project's core design principles.
Normal watch progress is stored locally in the browser.
The application does not require:
- Password
- Account creation
- Personal information
- User profiles
A share action is explicitly opt-in.
Nothing needs to be shared until you choose to generate a share link or code.
The share snapshot contains watchlist-related information rather than unrelated browser or device data.
The next major feature update is planned for:
The update focuses on making the tracker less passive and much more useful as a real watch-planning tool.
Sometimes you join the watchlist halfway through.
Instead of checking off dozens of completed titles one by one, Mark All Before will let you catch up instantly.
Select a title and mark every earlier title in the chronological route as watched.
✅ Iron Man
✅ Iron Man 2
✅ The Avengers
✅ Captain America: The Winter Soldier
▶ Guardians of the Galaxy
⬜ Avengers: Age of Ultron
⬜ ...
Instead of manually checking the first four entries:
Mark All Before → Guardians of the Galaxy
and the tracker catches your progress up automatically.
This is especially useful when:
- You've already watched most of Marvel
- You're joining the tracker late
- You're rebuilding your progress
- You're switching from another watchlist
The tracker will identify the next unwatched title in your current route and visually highlight it.
Instead of asking:
"What am I supposed to watch now?"
the tracker will answer it for you.
The highlighted title will become your current checkpoint in the journey.
✅ X-Men
✅ X2
✅ X-Men: The Last Stand
↓
⭐ UP NEXT
Iron Man
↓
⬜ Iron Man 2
⬜ Thor
⬜ The Avengers
The highlight will work alongside the selected tier, so the next recommendation changes naturally as you move through the list.
Planning your watchlist becomes much easier when the schedule can follow you outside the website.
The upcoming calendar feature will allow remaining titles to be turned into .ics calendar events.
You will be able to take your remaining watch plan and add it to compatible calendar applications such as:
- Google Calendar
- Apple Calendar
- Outlook
- Other applications supporting the iCalendar format
The goal is simple:
Turn a giant watchlist into an actual schedule.
For example:
Thursday
────────────────────────
Iron Man
20:00 – 22:06
Friday
────────────────────────
The Incredible Hulk
20:00 – 21:52
Saturday
────────────────────────
Iron Man 2
20:00 – 22:04
The generated calendar data will use the standard .ics format so the schedule can move beyond the website itself.
Sharing progress is useful.
Comparing progress is better.
The upcoming Compare vs Friend feature will build on the existing sharing system to show the difference between two watchlists.
Instead of simply seeing:
"Your friend watched 17 of 34 titles."
you will be able to understand where your watchlists differ.
YOU FRIEND
────────────────────────────────────────────
X-Men ✅ ✅
X2 ✅ ✅
Iron Man ✅ ❌
The Avengers ❌ ✅
Loki S1 ❌ ✅
Deadpool & Wolverine ✅ ✅
The comparison can then surface useful differences such as:
Titles you've completed that your friend hasn't.
Titles they've completed that you haven't.
Everything you have in common.
You: 24 / 34
Friend: 27 / 34
Different: 7 titles
Common: 20 titles
The idea is to turn the share feature into a lightweight watch-together / catch-up tool without introducing accounts or a social backend.
Doomsday is intentionally moving toward something more useful than a static MCU checklist.
The long-term goal is a personal watch-planning system built around:
DISCOVER
│
▼
WHAT MATTERS?
│
▼
WATCH ORDER
│
▼
YOUR PROGRESS
│
▼
UP NEXT
│
▼
PLAN YOUR TIME
│
▼
COMPARE WITH
FRIENDS
│
▼
DOOMSDAY
The focus is on removing friction at every step.
Doomsday follows a few simple principles.
A bigger watchlist isn't automatically a better watchlist.
Every inclusion should have a reason.
No login, no dashboard-heavy architecture, no unnecessary backend.
The default experience keeps progress local.
The tracker should eventually answer:
"What do I watch next?"
without making the user search for it.
The August 13 update is only the next step.
Potential future directions include:
- Smarter watch schedules
- Better regional streaming availability
- Custom watchlists
- Watch-session planning
- Friend watch rooms
- Group progress
- Shareable progress cards
- More detailed timeline explanations
- Release-date change handling
- Additional Marvel universe connections
- Mobile-first improvements
- Smarter catch-up recommendations
The watchlist itself can also evolve as new cast announcements, story information, and official confirmations change the relevance of individual titles.
Contributions are welcome.
Because the project is intentionally simple, most changes can be made directly in index.html.
Useful contributions include:
- Correcting watch-order information
- Updating runtimes
- Improving explanations
- Adding newly relevant titles
- Improving accessibility
- Fixing responsive UI issues
- Improving performance
- Refining the sharing system
- Improving the upcoming planning features
Before changing a title's priority, make sure there is a clear story, character, or confirmed connection justifying the change.
This project is a fan-made planning and tracking tool.
It is not affiliated with, endorsed by, or sponsored by Marvel Studios, Disney, or the creators of Avengers: Doomsday.
Movie and series availability varies by region and service.
The watchlist is based on currently available information and may change as additional casting, story, release, or continuity information becomes available.
All of this leads to one thing:
Three universes. One collision. One watchlist.
Every road leads somewhere.
If Doomsday helped you figure out what to watch before Avengers: Doomsday, consider giving the repository a ⭐.
Repository: https://github.com/51riu5/doomsday