MyTennis: Online Platform for all Swiss players
MyTennis is the web platform of the Swiss Tennis Association for licensed players and other interested parties. Registered users can find all the information about players, tournaments, current results, Interclub championships, and clubs.
Dream Production has been supporting Swiss Tennis since 2015. The platform has now been relaunched for the second time, implemented on a completely new decoupled architecture. The Progressive Web App, based on the React.js framework, provides around 130,000 users – including 60,000 licensed players – with a modern and high-performance user experience.
Extensive Information on Tennis Operations
The platform consolidates all relevant information and presents it in a tailored manner:
- Current information on licensed players: latest results, rankings and ranking history, and personal statistics
- Current rankings for various categories, age groups, and regions
- Tournament search, registration, and deregistration with single sign-on, tournament draws, schedules, and results
- Club map, club search with club details, and information on Interclub teams
- All information on Interclub, Junior Interclub, and Team Challenge with current schedules, information on group matches, draws, and results
- Overview of assigned tournaments for officials and referees
High User Experience Thanks to Sophisticated Features
- The login works via a single sign-on solution and connection to Azure Active Directory B2C, allowing access to various Swiss Tennis platforms with the same credentials.
- Paid premium subscription offering push notifications about activities and rankings of favorite players, clubs, and tournaments, a personal dashboard, and detailed player statistics.
- Additional subscription for monthly ranking updates, also via push notification.
Decoupled Platform with React and Microservices
Since various systems and databases need to interact on one platform, it was clear that the platform had to be implemented in a decoupled architecture with the following components:
- React Frontend: To implement the app as a Progressive Web App, the entire frontend application was built using React.js, the JavaScript framework from Facebook.
- GraphQL Middleware: Hasura.io was used to provide extensive data from various databases with different access permissions in modern APIs. Hasura allows structured output of data from various sources and databases to applications via GraphQL and controls access permissions.
- New Microservices: Various new microservices were implemented with the Symfony web framework, such as subscription management and (push) notifications.
- Extended Java-based Applications: Existing Java-based applications from Swiss Tennis were extended with a new JSON interface to interact with the new frontend application.
Single-Sign-On
To ensure that MyTennis users can interact on all the other platforms – existing and future – with the same user account, integrating single sign-on (SSO) was essential. An SSO solution was also necessary to control all permissions on the various APIs via JSON Web Tokens, containing the necessary roles and permissions. Microsoft’s Azure AD B2C was chosen as the identity provider.
The existing 130,000 users were migrated to Azure AD B2C, avoiding the need for new registrations and simplifying the platform transition process as much as possible.
Operation in the Azure Cloud
Due to the decoupled architecture with various applications and microservices, it made sense to set up the entire architecture and hosting in the Azure Cloud. The platform and individual components must withstand high traffic and load, especially during peaks like Interclub times.
A Kubernetes-based architecture in the Azure Cloud was chosen to ensure high performance and stability, high availability, and flexible resource provisioning for all applications.
Schematic Representation of the System Architecture
