A web application from scratch for a new player in esports world
![web app from Scratch for NeonCheese by Halo Lab](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/65f95066d5369228f3172b5e_hero-bg.avif)
Your ticket to successful predictions, backed by AI expertise — say goodbye to guesswork and hello to esports success.
A platform for esports enthusiasts to track the performance of their favorite teams in CS:GO, Dota 2, and LoL. Here, users can engage with games and explore detailed players’ profiles, following their progress.
Due to the power of unique algorithms, data analytics, and real-time updates, the platform keeps fans informed about the latest match statistics, player performances, and tournament results.
- Information Technology
- Data and Analytics
![creating a platform to track the performance of favorite teams](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a164_66a3cbfacc06b8872e9f913b_6602a6e9f2655c0c0625117c_workspace.webp)
Challenge
Many gaming enthusiasts closely monitor the world of esports. But they lack a platform that brings together various features to track the performance of their favorite teams.
To fulfill these needs, the client’s product had to be it all. Which means it must enable users to: delve into their beloved games, explore team profiles, and follow the progress of top players in the most convenient way.
![workflow plan for NeonCheese web app](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a128_66a3cbfacc06b8872e9f910e_65f951be6c15b3605fa46265_img2.webp)
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a12c_66a3cbfacc06b8872e9f90ff_65fac6d73402ea3097db17ef_workflow%252520plan%252520tab.webp)
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a12f_66a3cbfacc06b8872e9f90f9_65fac6e12f16176466384268_workflow%252520plan%252520mob.webp)
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.
![research the API landscape in the discovery phase](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a155_66a3cbfacc06b8872e9f9124_65f955b6bc2f337800a62eb8_img3.webp)
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.
![creation the diagram with high-level system overview](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a161_66a3cbfacc06b8872e9f9128_65f957d5ace7cccc8586c213_img4.webp)
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.
![the diagram with detailed sequence outlining the data-fetching process](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a170_66a3cbfacc06b8872e9f9156_65f958198f4dd6a5cb1df562_img5.webp)
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.
![front-end / back-end interaction diagram](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a15e_66a3cbfacc06b8872e9f9131_65f9586744f26fca52a46e23_img6.webp)
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.
![research the technologies that ensure the products perform well](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a167_66a3cbfacc06b8872e9f9143_65f959c25e10bae29dc51f1d_img10.webp)
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 API and Goalserve Sports Data API in web application](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a16d_66a3cbfacc06b8872e9f9147_65f95acfbb1ebf95ab8fbc97_img7.webp)
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.
![pre-release checklist: presentation of a plan to host the app](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a141_66a3cbfacc06b8872e9f914a_65f95b1f4a3a623c367585b4_img8.webp)
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}}
![web development of the NeonCheese’s web application by Halo Lab](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a16a_66a3cbfbcc06b8872e9f917d_6668260d6b658c8d91f79aca_img9.webp)
Working on the esports project showcased the impact of starting strong with in-depth research and precise planning. By getting our team and client on the same page early on, we set a clear path for success. Collaboration, constant feedback, and iterative testing improved our process and delivered a high-quality web application launch.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a176_66a7abcd84a6bd343c3a629c_66a7abbd6ea34b6c01feba73_feedback%252520(1).webp)
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66bc9ce37cdfbf290954a158_66a7abcd84a6bd343c3a629f_66a7abc61f8cbaee89b52ead_author%252520(3).webp)
Thank you!
We will contact you ASAP!
![error image](https://cdn.prod.website-files.com/63f38a8c92397a024fcb9ae8/6466312f14415ae38f7bb897_error__img.webp)