The owner of this site wanted to explore a new concept for a fantasy sports league centered on MMA competitions. The idea revolved around players accumulating points in correlation to a fighter's odds, which adds a unique element of challenge and calculation to the decision process.
The initial challenge was designing a clean UI that could display large amounts of statistics in relatively little space. The website also required a way to create and display events on the landing page and algorithms that calculate point changes and update leaderboard standings.
I started the design process by laying out the main building blocks of the landing page interface. The fight card component needed to be as compact as possible, so I included only key information such as fighter demographics and player bids. I organized this information into a vertical two column layout that allows flexible expansion as players are added to the league.
Next up, I designed an admin interface with components that manipulate the league's main data structures: seasons, cards, fights, and bids. I also built functions that allow admins to manage league users and send out emails about upcoming events using a SendGrid API.
Users can create and edit their fighter picks and bid amounts using a visual interface developed in React. Real-time algorithms calculate and display potential points gains to provide a sense of strategy. Users can also view their current season stats and recall past bids to help inform their game choices.
During live events, admins update fight outcomes and triggers automated scripts that calculate player point changes. The website landing page updates in real-time, which allows users to instantly see how each fight outcome impacts overall standings.
