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

time icon
2024
2022
arrow scroll icon
scroll

The top player in the French transportation market owing to the power of vehicle-generated open data.

LinkByCar is a SaaS startup that created a tool to collect, process, and aggregate data from vehicles. With the use of AI technology, it can predict the behavior of any vehicle — all to ensure you safely get to your destination.

The company cooperates with popular car manufacturers, including Stellantis, Mercedes, and BMW. With an extensive network already in a place, they have serious potential to expand across all of Europe.

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.

Industry
Other industries
Link to Industry
Services
Product development
Link to Service
Web development
Link to Service
UX/UI design
Link to Service
Timeline
7 months
  • 48,000+
    vehicles LinkByCar gathers data from
  • 75+
    types of data collected by vehicles
  • 18
    car brands they collaborate with
challenge

Insurance company managers and automotive corporations typically face challenges with complex software. That’s why the process of collecting data from vehicles can be a bit of a headache.

Real-time vehicle tracking, predicting potential problems, and accident reconstruction — all of these had to be considered in the product design. A perfect software offers everything in one place, simplifying things for those who aren’t fluent in the language of technology.

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.

It was a fully fresh perspective in every sense.

The research showed that competitors’ websites somewhat lagged behind the latest trends, which didn’t align with the technological and innovative nature of this business.

Hence, we aimed to convey the client’s digital orientation through a practical and rigorous branding approach, complemented by bright accents.

15 logo sketches
2 days spent on research
sdfsdfds
For a brand to speak with one voice, it needs a brand book to set the tone.

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

Diagram 1: High-level system overview

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.

Diagram 2: Data fetching sequence

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.

Diagram 3: Front-end/back-end interaction diagram

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.

7 major technologies used
2 weeks spent on dev research
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.

2 third-party integrations
4 days spent on API research
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}}
3 weeks
3 weeks
4 weeks
No items found.
No items found.
No items found.

Halo Lab provided brand analysis services that helped us with better understanding our market type, niche, customers, and competitors. They designed our whole SaaS platform, leveraging both UI and UX expertise. Furthermore, they used React to help us build a customer-facing dashboard that connects to our existing backends.

Have a similar project or idea? Let's discuss the details.
Get expert estimation
Get expert estimation
expert postexpert photo

Ready to discuss
your project with us?

Please, enter a valid email
By sending this form I confirm that I have read and accept the Privacy Policy

Thank you!
We will contact you ASAP!

error imageclose icon
Hmm...something went wrong. Please try again 🙏
SEND AGAIN
SEND AGAIN
error icon
clutch icon

Our clients say

The site developed by Halo Lab projected a very premium experience, successfully delivering the client’s messaging to customers. Despite external challenges, the team’s performance was exceptional.
Aaron Nwabuoku avatar
Aaron Nwabuoku
Founder, ChatKitty
Thanks to Halo Lab's work, the client scored 95 points on the PageSpeed insights test and increased their CR by 7.5%. They frequently communicated via Slack and Google Meet, ensuring an effective workflow.
Viktor Rovkach avatar
Viktor Rovkach
Brand Manager at felyx
The client is thrilled with the new site and excited to deploy it soon. Halo Lab manages tasks well and communicates regularly to ensure both sides are always on the same page and all of the client’s needs are addressed promptly.
Rahil Sachak Patwa avatar
Rahil Sachak Patwa
Founder, TutorChase

Logo creation

Sketches

A truly iconic logo is a trail of drafts

We explored different sketches during the design process. Initially, our designers considered wordmarks that convey a sense of technology, innovation, or modernity. We also experimented with minimalist symbols to accompany the wordmark. Ultimately, our team chose a wordmark featuring the infinity symbol and a symbol formed from C and A, creating an infinity loop.

Sketches

A truly iconic logo is a trail of drafts

We explored different sketches during the design process. Initially, our designers considered wordmarks that convey a sense of technology, innovation, or modernity. We also experimented with minimalist symbols to accompany the wordmark. Ultimately, our team chose a wordmark featuring the infinity symbol and a symbol formed from C and A, creating an infinity loop.

Being a data scientist, our client had written Python code to perform mathematical calculations. So, one of our key goals was to leverage the right technologies to correctly integrate this code into the platform.
{{margarita-d}}

Logo creation

From demo to strategy: unpacking our app & MVP scope

Demo application

To spotlight specific games, we showcased our findings through a POC application, a page with a live feed for demo matches. The app effectively illustrated the integration of live and historical data from distinct APIs. Alongside this, our team provided a cost breakdown for the chosen APIs, assisting the client in making more informed decisions.

Strategic MVP scope

Next, Halo Lab experts streamlined the interface to focus solely on the Match Winner bet type. This decision allowed us to expand functionality and engage additional partners, at the same time optimizing resource allocation.

Logo creation

Client-side and behind-the-scenes development process

Next.js

We opted for Next.js for its exceptional server-side rendering capabilities, ensuring enhanced performance and improved online visibility. This enabled us to deliver dynamic and responsive web pages, resulting in a better user experience.

Nest.js

Nest.js, a robust Node.js framework, served as a solid foundation for building scalable and maintainable server-side applications. Its modular architecture and extensive ecosystem empowered our team to efficiently develop the back-end infrastructure of the platform.

Redux Toolkit

To handle complex data management, we implemented Redux Toolkit. This tool provided a predictable state container and simplified the control of application insights throughout the platform.

React Query

React Query played a crucial role in handling data fetching and caching, enabling us to effortlessly update content on the client’s side. Its simplicity and declarative approach streamlined data management and improved the overall user experience.

PostgreSQL & TypeORM

For smooth database management, we also leveraged PostgreSQL, a powerful and scalable open-source relational database. By combining it with TypeORM, a widely used Object-Relational Mapping library, our developers achieved smooth integration between the application and the database.

Python

We’ve leveraged Python to execute complex mathematical calculations related to probabilities, as well as analyze data using logarithmic and linear regression techniques. While it was possible to implement these features in Node.js, Python generally offered higher speed due to its superior handling of multithreading.

Being a data scientist, our client had written Python code to perform mathematical calculations. So, one of our key goals was to leverage the right technologies to correctly integrate this code into the platform.
{{margarita-d}}

Logo creation