Demo request
Skip to main content
Enonic Enonic

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.

Introduction

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.

Challenge

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

Solution

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.

Progressive Web Apps (much like native apps) consist of a front-end and back-end. For the front-end, after researching available frameworks, the team concluded on using Angular 2 - a popular Javascript framework made by Google. To communicate with the server, the team wanted to explore a new technology called GraphQL, which supposedly would give front-end developer greater flexibility in fetching data from the server. Finally, Enonic XP was the perfect fit for the project:

  • Modern platform based on open source
  • Comes with out-of-the-box apps for social login
  • Embedded data storage with powerful search
  • Runs serverside Javascript (the language of PWAs)
  • 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.

Result

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!

Technical overview

The project made use of the following technologies

"This project has shown us what modern web technology is capable of. Progressive Web Apps is a paradigm shift for both mobile and web. Enonic XP as an end-to-end platform handle all our back-end requirements without having to wrestle with 5-6 different systems."
Thomas Sigdestad - Office League Manager