Beat the Street | A mobile app and a web portal for street games

Street games solution

Beat The Street

Our client, Intelligent Health Ltd., is a well-established public benefit organisation which provides children street games. Their main aim is to activate them and, therefore, take care of their physical condition.

Street games solution
Industry: Wellness & Fitness
Company size: 51-200 Employees
Region: United Kingdom
Service: Web & Mobile App, Front-end, Backend
Project duration: since IX 2020
Team: 6 experts
Technologies: React, React Native, Gatsby, AWS
React
React native
Gatsby
AWS

Main goal

Intelligent Health Ltd. entrusted us with two projects at once. We were to build a new mobile app that aimed to make street games digital and more pleasant. It was an innovation as children were using magnetic cards before.

The second project was a web app for administrative purposes. The client required a centralised place for managing street games and schools that participate with them, defining localisations, ordering magnetic cards, and so on.

Phone and Laptop Clay Mockup (12)

Client's needs

The client needed a mobile app that would provide children with maps to find the localisation of the checking points and verify whether they had reached them. If so, the app should assign some points to the user (that was an additional way to gather points as children might also use magnetic cards).

The app should have localisation tracking to make that possible. As the company promote a healthy lifestyle, the app should verify the means of transportation and prevent moving by car (walking, riding a bike or skateboarding were only allowed).

Because the users were children, the client needed parental accounts. Parents should create their accounts and then add children with their card numbers. The client needed to check who owns what kids, which cards and how many points they’ve collected.

We built the administrative web app from scratch. Although the overall goal was clear, every particular functionality was discussed and added during the development process. The core features were displaying and planning the localisation of the checking points (searching for them should be available), games management, and the most visited city areas. The admin panel should allow monitoring of how many users there are in every game, how many points they collected and manage their cards (e.g. lost ones).

The admin panel should also provide the lead management feature and partners’ accounts so they can log in and gain access to their street game. Partners should be able to manage their game, users and points assigned.

The need for a better-performing website appeared during the administration portal development process.

(...) working with them has been a pleasure.

Richard Ganpatsingh
CTO, IntelligentHealth

Challenges

The ultimate challenge was the scale of the project. Thousands of users were actively using the app every summer, so building a smoothly working app was demanding.

The final challenge was to map functionality on mobile devices. We had to ensure that the localisation services would work as planned and will detect the user if they reached the checking point. It should also collect necessary data only.

Another challenge was a point counting system. Points were collected by physical devices that sent them to the app (where they were processed). Devices could be discharged or have no Internet connection, so they will be able to send the data when it is active again, and we should address that.

Our solution

We built the mobile app based on designs we’d received from the client. We used Mapbox to make maps feature. We took care that the localisation service collected the information required solely by the game itself and not more than strictly necessary.

Initially, we chose AWS Amplify to provide and manage the infrastructure, but during the project, we re-coded it into CDK. In the beginning, the mobile app was made as an MVP to verify whether it was possible to build all features needed. We chose Amplify to develop the solution in no time, but as the app grew, the needs changed, so now, when optimisation is crucial, we use CDK.

AWS SQS manages the points (Simple Queues Service) to make sure they will be counted properly (won’t vanish or won’t be doubled).

We used DynamoDB, an excellent solution for managing vast amounts of data.

Process & Cooperation

In the case of the mobile app, we started with an MVP to verify whether we could provide all localisation functionalities. When that happened, we began to build the entire app using our client’s designs and added additional features.

The administrative web platform development started from building wireframes. We’ve defined the functionality hand in hand with our client. Initially, we made the core features, and we’re still adding new ones as the client determines their needs.

The website development wasn’t planned but appeared necessary as we built the admin panel to improve the performance.

We’re still working to improve the app and add new functionalities.

Phone and Laptop Clay Mockup (12)

(…) working with them has been a pleasure. The working relationship and level of trust we’ve built up are outstanding. Moreover, the team’s ethical approach to their business, honesty, and transparency are second to none. TeaCode has been super responsive to what we want to do and has a vested interest in our goals; they’ve very quickly become part of our team.

Richard Ganpatsingh
CTO, IntelligentHealth