MMA Fantasy Sports League

A concept exploration for a MMA fantasy sports league. Project features an admin dashboard with auto calculating point outcomes and leaderboard changes. Users can sign up for leagues and submit bids for each event.
Tech Used
React
MongoDB
Express
Node.js
Jest
JWT
Sass
Netlify
Heroku
MongoDB Atlas
Figma
Source Code
APIFrontend

Exploring a New Take on Fantasy Sports

Project Overview

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.

Mapping out a Plan

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.

Optimizing Efficient Design

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.

Creating the Fun

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.

Giving Users Control

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.

Going Live

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.

Interested in Working Together?

Let Me Know

Copyright 2020

Brandon Corey Web Development

Designed & Built in KCMO