faceoffantasy

Signup page. We randomized the images on the left :)
Login page. We randomized the images on the left :)
Home page. Still needs a lot of backend rendering
League boiler plate. Each item will be a team the user owns in a league
Displays leagues that you are in
Creates a league and sets the fantasy point values per stat
List of players to add/drop/trade
Player modal. Displays more in-depth stats. Fun fact: Pasta just scored a hattrick today
Our API backend

Inspiration

This project was inspired by ESPN and its fantasy hockey website. For those who don't know, fantasy hockey is when people assemble virtual sports teams composed of professional NHL players and compete against other people with teams (fantasy managers). The statistical performance of the athletes correlates to a higher team score, to determine winners and losers. As with all professional sports, fantasy hockey allows fantasy managers to trade, drop, add, and manage their team however they like.

We, the project developers, created a fantasy hockey league this year for us and a few other friends to bond over our shared love for hockey and sports. However, as the hockey regular season is wrapping up soon, and ESPN does not provide a playoff fantasy UI, we were sad that we would have to wait another year to start a fantasy team and that our lives would be bland in the meantime. This hackathon gave us the perfect opportunity to create something that could spice up our lives yet again, and allow us and many others to experience the joy of fantasy sports! Unlike many of the other hackathon projects we've created, we will actually use this one until the end of June at least, and perhaps even next year for the 2023/2024 regular and playoff season!

What it does

Faceoffantasy (Faceoff Fantasy) is meant to be an all-in-one fantasy hockey site, for both the regular season and playoffs. Users can join leagues created by other users, and play fantasy hockey with them by creating a custom team for each league. Users are also able to track the progress and stats of all NHL players, and customize their team however they like as the season progresses.

Some things that it can currently do:

log in
create leagues
join leagues using league code
create user
sort all NHL players by position, goals, assists, pim, etc. in both directions (and it's paginated!)

How we built it

The backend for this site was built using Django. We found a very good (free) NHL stats API, and created a backend to integrate player stats with team/league creation, as well as users and user authentication.

Our frontend uses a React JS framework.

Challenges we ran into

User authentication was a big challenge that we faced during this hackathon. Since we didn't decide to use Django's template user-authentication pages, we had to figure out a way to send tokens from the backend to the frontend and create the login/register/logout forms on the frontend.

We also ran into issues with styling the site, as none of us are particularly well-versed in CSS and styling in general.

Furthermore, apparently github pages doesn't support client-side rendering with React (and it's a pain to make it work). We spent two hours on that near the end of the hackathon to no avail.

Accomplishments that we're proud of

We are proud of how the site has come along. In particular, we are really proud of all of the different filters that the NHL player-list tab has, such as filtering by position, stats, and also by name. The player-list tab is also paginated, which is very cool.

Most of the work we did is backend so... the backend! It works like a charm.