Marvel Rivals Matchmaker

Do you wish to find others to play with or simply tired of getting stuck with DPS instalockers and being forced to play tank or support?

Comment 2

🧠 Inspiration

I love Marvel Rivals, but sometimes I don't always have teammates to play with whether it is due to rank differences of just the busy days everyone has. Often times teaming up with random players is often chaotic — especially when teammates instalock DPS and refuse to use voice chat. I wanted to make a tool that helps players find teams that actually work together, not fall apart in the first minute. So we built Marvel Rivals Matchmaker to connect players based on preferences like region, role balance, voice chat, and rank.

⚙️ What it does

Marvel Rivals Matchmaker lets players filter and browse existing teams by key factors:

Region Game Type (Competitive or Casual) Rank Voice Chat availability Max Players

Players can find and join teams that suit their style, so they spend less time in bad lobbies and more time actually winning matches.

👨‍🔧How I built it

I built the frontend using React and styled it with custom CSS. Team data is pulled from a JSON file, and filters are applied in real-time using useState and useEffect hooks. I also used React Router for routing between pages and created reusable components like TeamCard and TeamFilters.

😡Challenges I ran into

  1. Time constraint was the biggest challenge I ran into.
  2. Building this project by myself made me soon realize that I didn't have enough time to perfect it how I would like.
  3. Due to my inexperience backend knowledge most of the project is front-end.

Accomplishments that we're proud of

  1. Successfully built a working filter system with React
  2. Created a functional, themed interface for a real game community
  3. I got better at thinking how to structure components and manage props/state
  4. Designed the UI to be clean and intuitive while being reactive.

Got it working in a way that’s actually useful for players

What I learned

  1. This was my first rendering creating JSON file data and rendering it in the UI.
  2. I learned how to debug a big react application by checking what each component is really receiving
  3. This was my first time trying out CSS animations, i used it to create the falling stars in the homepage

What's next for Marvel Rivals Matchmaker

There are many things I plan on adding after this hackathon. I would eventually like to deploy and be able to share it to others that share the same problem as me.

  1. Allow users to submit their own teams directly through the app

  2. Add support for authentication and team chat integration

  3. Add a role selector (Tank, Support, DPS) for even better matchmaking

  4. Integrate with a live backend for real-time team updates

  5. Make the UI mobile-responsive for on-the-go matchmaking

  6. Create or find an API to display Marvel Rival Players stats (ex: KDA, Win Rate, Match History).

☄️Theme

Combination of Entertainment and Accessibility

👽Tracks I am applying for

  1. Best Beginner Project
  2. Best Game Project
  3. Best UI/UX
  4. Organizers Favorite

Built With

Share this project:

Updates