Office League – Table Football Goes Digital
Foosball players from all over the globe can easily create and run leagues and matches with a progressive web app from Enonic.
Office League is a progressive web app for keeping track of goals and rankings in your local office foosball league.
It is an open source enthusiast driven project available freely 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.
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 Office League would be public and open to anyone added further to the complexity.
Some of the requirements for the app included:
- Social login (Google/GitHub)
- 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 had to work well on mobile devices. However, the team had little experience with native apps compared to web technologies.
Then the team 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.
PWAs (much like native apps) consist of a front-end and back-end. For the front-end the team concluded on using Angular 2, a popular JavaScript framework by Google.
To communicate with the server, the team used GraphQL, which gave front-end developer greater flexibility in fetching data from the server.
Finally, the Enonic platform 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.
