Building a scalable, resilient website for the Davis Cup Finals

The Davis Cup Finals competition is a new twist on the classic Davis Cup tennis competition meant to revolutionize the world of tennis, lead by Kosmos - a company lead by ambitious business leaders and public faces such as Gerard Piqué (Barcelona Football Club), Hiroshi Mikitani (Founder and CEO of Rakuten) or Mike Evans (Special Advisor of the Major League Baseball franchise).

They chose Codegram as their technological partner from the very beginning, having earned their trust in previous projects such as Golden Manager, a company that was also founded by Gerard Piqué.

As their allies, we were in charge of building a brand new website for the competition, as well as a robust, scalable API to be consumed by their website and their native Android / iOS mobile application being built by one of their partners, Rakuten.

From the get-go, this project posed many challenges: We were to set up an architecture that was scalable from the very beginning – nobody could possibly predict if or when traffic spikes were to occur.

If the need for unpredictable scalability wasn't enough, there were also severe time constraints: the project time-to-market was critical, while we needed to be quick to react during its development – scope changes could occur at any time, something to be expected of such an ambitious project.

Step 1: A scalable, global website

As time was pressing, we chose a solution that was particularly suitable: A Cloud CMS such as Prismic. These kind of solutions allow a site's content structure to be defined on the go, without the need for any kind of implementation (it's served as a SaaS).

Thanks to this technology, we were able to design and build the website in parallel to Kosmos' content editors, optimizing time-to-market, while remaining flexible to structural changes that naturally happened as we kept going. As a side benefit, using a hosted CMS also allowed us to focus our energy on what really matters instead of having to build a content editor from scratch.

This approach is called the JAMStack. You can read more on our blogpost about it.

"Thanks to the software solution provided by Codegram, we were able to do quick iterations while on production with no downtime or issues of any kind."

Step 2: An API to serve all devices

A couple months before the competition, a new challenge emerged: The need for building a mobile application that would serve real-time results, as well as include all the current content on the website. For that, Kosmos was counting on one of their partners – Rakuten Aquafadas –, but they needed a single information repository that would encompass all their content, plus new features like real-time results, a live schedule, and more.

Again, we needed to work fast. Normally, the de-facto solution for this would be what's called a REST API (a collection of documents that expose the underlying data of a system) but that would require a high amount of coordination regarding the shape of the data to expose, which would require time we didn't have. Instead, we decided to implement a solution using GraphQL, a modern yet mature technology built by Facebook, which allowed us to develop the API and the mobile application at the same time, saving a lot of time in coordination efforts and, much like with the website, allowed each team to focus on what's relevant.

The whole website is served through a Content Delivery Network, making it deployable to a global scale.

A success story

Thanks to an audacious choice of technologies, we were able to meet the Davis Cup Finals tight deadlines, while remaining flexible and allowing the Kosmos team to be able to steer the wheel when needed and adapting to the changing conditions, instead of committing to months-long, unrealistic project planning.

Company type

  • Sports, Startups

Solution

  • Cost-Efficient Scalability
  • Cloud CMS
  • Service Integrations

Outcome

A scalable, resilient website that can withstand unpredicably high amounts of traffic.

Location

Barcelona, Spain

Technologies

  • Vue.js
  • JAMStack
  • Serverless
  • GraphQL

Got a project in mind?

Challenge us. We want to work with you to create something great.