Building a mobile app for a rally with cars.

The main, map page

Over the last three years (thanks corona) I have worked on app for a car rally I organized. The trip consisted of thirteen people spread over four participating teams with each team driving one car. The core concept was to be able to guide the cars to their destinations without them knowing (or be able to know) where they would go next. Eventually other possibilities emerged where teams should be able to solve puzzles in order to 'find' a new destination. The concept behind this rally was to create a race in which teams would finish several stages that would be timed. Each stage consisted of driving and solving some puzzles. Finally the time that it took to finish the leg was timed which led to a score for each team.

Thus the app had four pages:

  • Map
  • Code
  • Log
  • Admin 

I added a 'code' page in which teams could simply add a code that would either show them the next phase of the route or give them some bonus minutes.

The app was used over the last 10 days in 'production' and turned out to be a success. Building my first app ever was a bit of a struggle and I thought I would share some lessons I learned.

The most important thing was that I was unable to fully rely on frontend geofences. While performance on emulators was spotless I have not been able to get geofences to work flawlessly. I found that newer phones worked better than older ones. While the app was open geofences triggered in about 90 percent of the cases. To remedy this I included push messaging to be able to remotely send teams to a new location. Additionally I created the manual button to enable teams to trigger the geofence through the backend.

Challenges

  • Consistent performance of location services over multiple devices and android versions
  • Flutter and Dart as they were a new language and a new framework. Specifically because of the whole widget tree concept.
  • State management.

Lessons learned

  • If you want to organize something like this and make it easy for yourself, make sure you stick to (very) similar devices.
  • Do not assume that emulator performance will perfectly align with real world usage. In this respect web development is fundamentally different from app development
  • Changing a color scheme and font, can really improve the perception of something.
  • Organizing a rally and building an app for that are both hard things 😋

Repositories

The code page we used
A typical 'phase' in the app. In which the black team needs to reach the marked geofence, in this example without being able to use the map. 

For now that's it. Feel free to contact me with any questions regarding this app.

In order to build this app i've used:

Frontend: Flutter for android with:

  • Websockets for communicating locations
  • Rest for individual reques

Backend, docker setup with:

  • NodeJS (w. sequelize orm) 
  • Postgres