Introduction

As a competitive player of Marvel Rivals, I noticed a significant gap in the user experience: the in-game scoreboard provides micro-stats (damage/healing) but offers zero insight into Macro Strategy.

Players were drafting blindly, not knowing if their team had enough Hitscan to counter Pharah-clones, or if their Ultimate Economy was faster than the enemy's.

So, I spent my weekends building Rivals Victory to solve this.

The Tech Stack 🛠️

I wanted the application to be instant. No loading spinners, no heavy hydration delays.

• Core: Astro (Static Site Generation for 100/100 Lighthouse scores).

• Interactivity: React (Islands Architecture). I only load JavaScript for the interactive calculators; the rest is pure HTML/CSS.

• Styling: Tailwind CSS.

• Data: Custom JSON dataset.

The "Ultimate Economy" Problem

The most complex feature to engineer was the Ultimate Economy Calculator.

I had to map out the base cost of every hero's ultimate ability (e.g., Hulk at 600 vs. Adam Warlock at 5000) and create a "Tempo Score."

// Simplified logic for calculating team tempo
const teamTempo = heroes.reduce((acc, hero) => {
  return acc + (BASE_TIME / hero.ult_cost);
}, 0);

By visualizing this data, players can now see exactly when their team hits a "Power Spike" and force fights accordingly.

Open Sourcing the Data 🔓

I believe game data should be accessible. Instead of locking the data behind the app, I decided to open-source the structured JSON data for the community.

If you are building a Discord bot or an analysis tool, you can use my dataset freely:

• GitHub Repo: rivalsvictory-assets

• Mechanic Tags: Stun, Flight, Hitscan, Shield, etc.

What's Next?

I'm currently working on adding Matchup Specific Tips and a Map Synergy Guide.

If you want to check out the tool or critique my code/design, visit RivalsVictory.com.

Thanks for reading! 🎮