A web application from scratch for a new player in esports world

Mapping API terrain — the stage for a successful project

We conducted research, given the multitude of API options available. They varied in cost and data offerings, including historical event data (e.g., past-year match details) and real-time updates.

Our task (at this point) was to assess these APIs thoroughly, helping the client to find the most cost-effective solutions with comprehensive data sourcing. We also figured out the next steps regarding the POC and MVP.

The client came to us with a wireframe design for the website, a concise technical description, and a list of APIs we could utilize to gather event-related data.
{{margarita-d}}

Visual representation of the process through architectural diagrams

This diagram gives us an overview of the system’s structure, showing the front-end, back-end, micro-service for statistical analysis, database layers, and 3rd-party APIs. The front-end is implemented as a website and uses the back-end’s public API via HTTPS.

The back-end is the system’s core, including a public API for front-end data access, a data fetcher for third-party data, and a private API for statistical analysis using a Python script. All of these parts are closely connected to a PostgreSQL database, which stores and retrieves system data.

In the second diagram, we have a detailed sequence outlining the data-fetching process. It starts with the system requesting gaming data from third-party services like PandaScore and CloudBet. This data is then processed by the E-Sport Node.js back-end, which interacts with a PostgreSQL database to store game details and betting information.

A Python script handles probability calculations and database updates. The diagram highlights the sequence of actions and data flow through secure REST API calls.

Here, you see how a user interacts with the system. The user opens a webpage in their browser, and the front-end (built with Next.js) loads static resources.

The front-end requests live data like scores, bets, and probabilities from the back-end, which fetches this data from the PostgreSQL database and sends it back to the front-end for display. This process ensures the user always sees the latest information.

Architectural diagrams map the path to a smooth coexistence between our front-end and back-end solutions.
{{sergey-diniovskiy}}

Front- and back-end solutions, guided by a well-stocked toolkit

Our team transformed every element into a functional product with the help of innovative tools. At the end of the day, we chose the right technologies, which made development easier and ensured that the product would perform well.

We used Next.js, Redux Toolkit, and React Query for front-end, along with Nest.js, PostgreSQL, and TypeORM for back-end. Additionally, our developers relied on Python to successfully integrate the client’s unique algorithms.

The idea involved integrating microservices into the platform and using mathematical data processing to display predictive information to the end-user.
{{sergey-diniovskiy}}

Powering the platform with third-party integrations

To provide comprehensive access to real-time esports and sports-related data, we utilized Pandascore API and Goalserve Sports Data API. This enriched the platform with on-trend info, enhancing user engagement and overall interaction with the platform.

By integrating Pandascore into the web application, we helped our client easily add the latest updates from the dynamic esports world. At the same time, Goalserve enabled users to access real-time scores, player and team statistics, and match schedules.

Integration of Pandascore and Goalserve APIs transformed the platform into a go-to source for the latest esports insights and live sports statistics.
{{sergey-diniovskiy}}

Paving the way for a successful product launch

The client created a Digital Ocean account, which our developer then set up along with a release pipeline. Given the unique features of the application, including diverse workloads and security factors, we presented a plan to host the app across multiple locations.

This strategy involved three pivotal stages: front-end, back-end, and parser. Once the launch was underway, we moved forward with configuring servers on the client’s side for each specific stage.

The release went without disruptions, thanks to our step-by-step preparations.
{{sergey-diniovskiy}}

Constant task testing and bug fixing within 10 sprints

Our release went smoothly, without major problems or difficulties. All because we involved a tester early on, months before the release date.

We tested tasks as they were completed and then conducted a final check-up. Our team resolved all the discovered bugs in 10 sprints.

{{slider-1}}

Regular testing reduced the risk of unexpected challenges arising during the project’s later stages, helping us adhere to timelines and budgets.
{{margarita-d}}