Airsoft Tracker WebApp

Messing around with Firebase

Some Background

One of my pasttimes is playing a game similar to paintball, sort of like real life videogames. However, unlike videogames, there's no scoreboard to compare with previous games or even your friends.

My solution to this was to develop a website that my friends and I could access via phone so we could have a little bit of friendly competition.

The app needed to fit on a single page, count kills and deaths, attribute that a user, and be able to submit the data to a database. It also had to be clearly visible in the dark without ruining my night vision.

Iterations of the UI in Sketch

Using Sketch, I made some mockups based on a pencil drawing I drew up. I subsequently wrote up the HTML and JavaScript, and from there began work on adding Firebase support so I could push and pull data during a game.

I wanted a no-frills application, so I refrained from any fancy styling, and went for function over form. The selector dropdown is large so that it is easily visible even when you're wearing goggles. The kill button is large so that it's the most likely to be pressed button if you're trying to log points on the fly, while the death/respawn button is much narrower, as the user will have more time to add this value when they're walking back to base. Game data is all visible at the bottom so there is no confusion when you finally decide to submit your score to the database.

Check out the demo below - it's taking data from a duplicate database, so you can mess around with the information without worry!