Office League - Table football goes digital
A team of skilled developers and table football enthusiasts wanted to take it to the next level. The result is an amazing Progressive Web App that enables "Foosball" players from all over the the globe to create leauges of their own, invite opponents, and play to rule the rankings.
Office League is an open source enthusiast driven project. It is also available as a free service hosted in the Enonic Cloud on https://officeleague.rocks - for anyone to join in on the fun. The app is used on a daily basis by organizations such as Redhat, Salesforce, and even Enonic. The most active leagues have 1000+ played games at the time of writing.
With limited resources, little time, and complex requirements - the team had little room for error and needed to use tools that would get them to the goal fast and efficiently.
The team had previously built a prototype, but the fact that the "Office League" would be public and open to anyone added further to the complexity. Here are some of the requirements for the app:
- Social login (google + facebook)
- Support for creating and managing leagues
- System for inviting new players to your league
- Live game feed - watch other games that are in action
- Score prediction (based on player statistics)
- Fully responsive
- Support for running offline (playing in basements and areas with bad network)
- Ability to scale the solution as traffic grows
- Support for editorial content
A core element of the solution is recording the games while playing, so it must work well on mobile devices. However, the team had little experience with native apps compared to web technologies. The team recently discovered Progressive Web Apps (PWA). New web standards and browser capabilities enable developers to create web-based applications that work and feel like native apps.
- Modern platform based on open source
- Comes with out-of-the-box apps for social login
- Embedded data storage with powerful search
- Embedded headless CMS for editorial content
- Matching the developers skillset
Within few weeks, most of the back-end and API's were in place, and not surprisingly, most of the remaining time was spent building, tweaking and styling the application front-end.
Within days of launching, Office League was in daily use internationally. At the time of writing, hundreds of teams and leagues have been created. New developers have joined the open source project and the team was already planning new functionality and expanding to other sports as well.
"The only issue we really had to worry with was to make sure the app would work fine on iOS" says Glenn Ricaud - office league developer. This is perhaps a surprise, but iOS and Safari are at the moment lagging behind their rivals at Google. However, as Apple has now started adding PWA support to Safari. This means iOS users will soon be able to enjoy the more advanced capabilities in Office League too. Examples are installation, fullscreen mode and offline support.
The Office League team invites everyone with a foosball table nearby to sign up and create their league on: https://officeleague.rocks
If you don't have a table yet, now there is a good reason to get one!
The project made use of the following technologies
- Enonic XP powers the entire back-end, including CMS, and the web-app
- GraphQL library as foundation for the custom API - available on Enonic Market
- Auth0 app to enable social logins - available on Enonic Market
- Angular 2 front end framework
- Office League project on GitHub
- Office League application - available on Enonic Market
- Hosted on Enonic Cloud