Marvel Contest of Champions Character Database

Marvel Contest of Champions is a free-to-play mobile arcade fighting game offered on the Apple App Store and Google Play Store, and is one of the App Store's highest grossing games on a year-to-year basis. The game was released in December of 2014, and for the past almost 9 years, I have been obsessed with the game. What makes the game so distinct and captivating is that there are over 250 unique characters with unique abilities, play-styles, and advantages/disadvantages, making each fight between 2 characters a unique experience that keeps the player engaged. Since there are so many characters in the game, is can be difficult to remember how each character works or how to play a certain character against another one, especially as more and more new characters are added to the game.

Despite being a self-proclaimed "veteran" of the game, I saw an opportunity to make my own quality-of-life within the game easier by creating a character database, where I would easily be able to pull up a characters specs and see the character's stats, abilities, and other information. Although I'm still working on the front-end for this passion project, I am excited to share how I created the database and explain its functionalities!

Understanding the Game's Core:

Think of Marvel Contest of Champions as an intricate jigsaw puzzle. Players select and upgrade various Marvel characters, diving deep into their strengths, rarities, and character types. The game complicates things by making fights with "nodes", where the AI-controlled opposition character gains extra abilities. Because of the complexity of each character and the inclusion of these nodes, there are often a few specific counters to each fight in the game, which means that for a player to be successful, they must understand how every character in the game works. As someone who had played the game for a very long time, I recognized the need for a robust web app that could harness this game's potential while providing players with unparalleled sorting and comparison abilities, making the user experience more enjoyable for rookies and veterans alike.

The Database Web App:

At its heart, the app is designed to be a companion tool. With players engaging in multiple battles, evaluating characters, and strategizing gameplays, there was an evident demand for a platform that allowed meticulous sorting based on diverse parameters like strength, abilities, and character type.

Unearthing Data - The Backbone

The majority of my data came from a publicly-available API which housed information on every character in the game and was updated monthly as new characters and character tune-ups were added. I used SQL databasing to sort the data and gain an understanding of how best to proceed with my web-app.

Designing a Robust Interface

With the data acquired and organized, the next step was building an intuitive interface that delivered a stellar user experience. I relied heavily on ReactJS to construct the front-end, with emphasis on the following elements:

Dynamic Search and Filter - The ability to search and filter characters by name, rarity, class, etc. was imperative. I implemented this using controlled form components in React.

Comparison View - Allowing side-by-side comparisons of characters was vital. The app displays selected characters and their stats/abilities in a clean, readable manner.

Responsive Design - Mobile-friendliness was mandatory. Using React Bootstrap and CSS media queries enabled optimal viewing on diverse screen sizes.

Character Pages - Each character has a unique page displaying their image, bio, stats, abilities, synergies, and counters. This provides a quick, comprehensive overview.

User Profiles - Users can create an account to save favorite characters and teams. JWT authentication enables secure access.

Dark Mode - An optional Dark Mode caters to user preference.

Minimalist Aesthetic - The interface remains uncluttered. Clean typography and ample white space improve readability.

The Result: A User-Centric Experience

The completed web app provides the ideal utility belt for navigating the complex world of Marvel Contest of Champions. Players can reference the tool for everything from choosing quest teams to exploring new characters and strategizing fights. With robust search functionality and in-depth profiles, it elevates the user experience to new heights.

For me, this project showcased ReactJS' capabilities in building sleek, responsive, and highly functional web apps. It was a thrill to create something to enrich a game I'm passionate about, and I'm excited to see how my app develops moving forward!