I built a tactical tool for Marvel Rivals using Astro, React, and Open Data

#react #showdev #sideprojects #webdev

Hello developers and gamers! 👋

I've been playing a lot of Marvel Rivals lately. It's an incredible hero shooter, but as a competitive player (and a dev), I felt something was missing.

The in-game scoreboard tells you damage and healing, but it doesn't tell you the Macro Strategy.

"Does our team have enough shield break?"

"Who has the fastest Ultimate to force the first fight?"

"When is our team's power spike compared to the enemy?"

So, I decided to build a tool to solve this.

Meet Rivals Victory.

🛠️ The Tech Stack
I wanted the site to be blazing fast but highly interactive. Here is the stack I chose:

Framework: Astro (for static site generation and perfect SEO).

Interactivity: React (using "Islands Architecture" for the calculators).

Styling: Tailwind CSS.

Data: JSON (Custom curated dataset).

Deployment: Cloudflare Pages.

💡 Key Features

Ultimate Economy Calculator This was the hardest part to model. In high-level play, "Ultimate Economy" dictates the flow of the match.

I built a React component that takes a team composition and calculates their Average Tempo.

Hulk (600 cost): Extremely fast tempo. Forces fights early.

Adam Warlock (5000 cost): Very slow. Win condition, but needs stalling.

By visualizing this delta, players can see if they should play aggressively or defensively.

The Mechanic Finder (Drafting Tool) Instead of filtering by generic roles (Vanguard/Duelist), I created a tagging system based on Utility.

I structured the data to answer specific tactical questions:

"We need Hitscan to counter Iron Man."

"We need Stun to stop Venom."

🔓 Open Sourcing the Data
While building this, I realized there wasn't a clean, developer-friendly API for Marvel Rivals data. Most wikis are full of ads and hard to scrape.

So, I decided to open-source my dataset.

I created a separate GitHub repository hosting the clean JSON data for heroes, ultimate costs, and mechanic tags. You can use it freely for your own discord bots, analysis tools, or apps.

🔗 GitHub Repo: marvel-rivals-data (Please verify your actual repo link)

Here is a snippet of the data structure (heroes.json):

JSON

{
"id": "hulk",
"name": "Hulk",
"role": "Vanguard",
"ult_cost": 600,
"economy_type": "Tempo Driver",
"mechanics": ["Stun", "Leap", "Shield Break"],
"stats": {
"hp": 900,
"difficulty": 2
}
}
You can fetch it directly via jsDelivr CDN: https://cdn.jsdelivr.net/gh/rivalsvictory-assets/rivalsvictory-assets@main/data/heroes.json

🚀 What's Next?
This project started as a personal tool to help me draft better in Ranked, but it's growing into a full tactical database.

I'm currently working on:

Matchup specific tips (e.g., "How to play Punisher vs Storm").

Map-specific synergy guides.

If you are a gamer or a dev interested in game data, I'd love your feedback!

Live Site: https://rivalsvictory.com

GitHub Data: Get the JSON here

Thanks for reading! Happy coding and gaming. 🎮