Fantasy Team App for Swedish Hockey Fans
Fantasy SHL is a digital platform designed to enhance engagement with the Swedish Hockey League (SHL). Using Laravel, VueJS, and Websockets, it lets users create and manage fantasy teams, reflecting real-world game performances. Beyond basic team management, users can participate in both official and custom leagues. Within weeks of its debut, the app witnessed over 20,000 sign-ups, showcasing its immediate appeal.
Overview
Fantasy SHL is a web application developed for Pregame AB to promote the SHL, the top tier of professional ice hockey in Sweden. The application is officially supported by the SHL and aims to increase user engagement and grow the SHL fanbase.
It allows users to manage their own fantasy teams made up of SHL players from different clubs. Users, as fantasy team managers, can also join and compete in multiple fantasy leagues. Fantasy points are awarded to individual players based on their performance in the real game.
The performance stats are sourced from the official scores maintained by Statnet in continuously updated XML files. The sum of the points earned by the players in the team forms the total fantasy points of a team.
In addition to the application used by the hockey fans, there is also an admin panel and a socket application. The admin panel is used for managing available players, game rounds, fantasy point weightages for the different game stats, etc. The socket server application pushes real-time point updates to online users during live games.
LiteBreeze developed the entire system primarily with the Laravel framework and VueJS. The socket server was set up using Soketi and PusherJS. Websockets were used for real-time point updates on the front end. The UI screen designs shared on Figma were converted by our in-house designer into HTML and Vue components.
We have put in 5000+ hours for the project development, testing, and delivery.
Key features
Fantasy teams
All registered users get a seed fund of 100 Mkr with which they can purchase 15 players from the available pool of all players in the SHL. Players can be added to specific positions on two lineups and on the bench based on their regular playing positions. Points of the benched players are only counted when corresponding lineup players haven’t scored any points in a full game round.
Fantasy leagues
Fantasy leagues are basically groups of fantasy teams competing with each other for a championship. All fantasy teams by default join the official fantasy leagues. Users can also create custom public and private leagues, and invite their friends and other users to join. Users can always see a listing of all the leagues they are a part of, including their rank and the top teams in the league.
Fantasy points
Users can access the Points page to get a live view of their team and the fantasy points earned by each of their players and lineups. The merits section displays the top 3 finishes of the user in the completed leagues. This page is also publicly accessible, allowing users to share their points page with other users or on Social Media platforms.
XML feeds
Information about Game schedules, active players in SHL, live and delayed stats during games were all maintained by Statnet in XML files. The application had to fetch and parse multiple XML files periodically to get the required info from the official source.
News articles
A CMS package was built using the Laravel Blog package to allow Admin users to create HTML supported news content. The aim is to share important information and updates with the users. The created news articles are displayed on the home page and news page.
Admin panel
The admin users can update player images, prices, enable/disable players, manage game round start and end times, create news articles, set the fantasy point weightages for different stats, etc, from the admin panel application.
Technologies used
Laravel 9 was used to build the admin panel, which dealt with managing the application settings, fetching and parsing XML feeds periodically, and pushing live event updates to the socket server using Pusher channels.
The WebSocket server for relaying the live event updates to the frontend application was set up using the Soketi WebSockets server package.
Laravel 9 was also used to build an API server, and also serve the static pages on the frontend. VueJS has been used to provide an SPA-like rich user experience to the dynamic pages. The Laravel Echo and Pusher JS libraries were used for managing websocket connections with the Socket server.
MySQL 8 on Amazon Aurora was used as the primary data store for the application. Redis on AWS Elasticache was used for shared session storage and caching. Amazon S3 has been used to store application & user assets.
ElasticSearch hosted on Elastic Cloud was used as the secondary data store. Its bulk data update feature helped with the live score and rank updates of numerous fantasy teams in one go. Its fast and powerful aggregation features helped us meet the high traffic needs of the Points and Leagues pages.
The whole infrastructure for the application was defined and managed using Terraform, which is an infrastructure as code (IaaS) software tool. This helped with easier and faster management of multiple environments( testing, staging, and production).
The applications were deployed on the AWS Elastic Container Service, configured for horizontal scaling based on the application load.
CI/CD was implemented using Bitbucket pipelines. Jira was used as the project management tool.
Challenges & Learnings
Game round locking
This process required multiple DB operations for a single user. With a user base of around, 20000 for the first game round, we were looking at about 400,000 DB operations for the task, which could result in out of memory issues and the task timing out.
To work around this challenge, we used batch processing and Laravel’s Lazy Collections to keep memory usage low.
Live point updates
Fantasy points are calculated and awarded to players based on the live data processed from the XML feed. These score updates get reflected in various areas like: individual player points, total team points of each applicable Fantasy team, and the total points and rank of those fantasy teams in all the Fantasy Leagues they joined.
We handled this using the advanced and complex aggregation methods in Elasticsearch.
Custom XML parser
We had to extract the live game statistics from XML files in regular short intervals in order to obtain player activity from an ongoing game. Using conventional methods posed the risk of memory exhaustion and time-out as these files grew larger as the game and season progressed. Also, multiple games being played at the same time added to the data processing complexity.
We developed a custom memory-optimized XML parser in PHP using generator functions to ensure efficient feed processing.
Short turnaround time
The project was initially planned to be launched for the next season. However, later the client decided to release it for the current season itself. Initial project discussions started late May. The project was to be launched by early September, in time for the season start. Completing and delivering this project in ~three months was a demanding endeavor.
We handled this by having multiple backend, frontend, and design resources(~ 9 member team) working parallely in two-week sprints, following the Agile Scrum methodology.
What’s next?
The development has been paused now as the season is underway. More updates and newer development is planned before the start of the next season.
- Improved real-time updates and notifications – To increase the user engagement with the application.
- Better user experience – For features like Player Transfers, Team selection, App navigation, etc.
- Event history – Increase the logging of game events, team changes, player history, etc. for more transparency.
- Extend to other hockey leagues – To the second division league(Hockey Allsvenskan).
- Expand to other sports – Since fantasy team applications are a proven concept to increase user engagement with a sport, there are also plans to extend it to games other than hockey.
