Tube Trotter

Record your London Underground station visits, because why not?

I spend quite a bit of my time living and working in London and traveling on the underground and for whatever reason I have ended up quite liking the tube network especially the different underground stations and history behind them, it might have something to do with being obsessed with the DLR (another part of the TfL network) as a child.

For better or worse this liking has rubbed off on my girlfriend Rosa and last year we came up with the idea of an app called Tube Trotter to record which stations you have visited. It's quite possible she is just humoring me but I am rather happy pretending she likes them as well.

Getting started

The app is incredibly simple, at its heart it's a todo list that allows you to check off each station. The first version of Tube Trotter was built in AngularJS, it was almost fully functional but I ended up getting stuck when I tried to programmatically generate tube maps for each of the lines.

Finishing it

Fast forward to the present day and over the Christmas break I decided to revisit the project. I have started to dislike angular especially the old v1 it was built in so I decided to use the project as an excuse to use Vue.js again. I have worked with Vue for my home automation project but it has been a while, thankfully it's a really easy framework to get going with. The backend is Laravel so it was nice to use Laravel and the bundled Vue front end in as close to an out the box way as you can get.

Offline

I ended up with a functional version finished within a day but it's taken a few weeks to refine and finish the project, especially the offline support. Offline is something I have experimented with before but I have always finished with the conclusion that service workers were nowhere near ready to use, thankfully I found where I had been going wrong and have ended up with a very usable system.

The web app is designed to be used without logging in, with your station data being kept in local storage, if you do choose to login this then gets synced to the server. Taking this approach makes managing offline a lot easier as the app works without a server connection meaning all you need to do is cache the assets to make it work offline.

Dealing with the online/offline/crap connection that comes with using the london underground WiFi has been tricky but because it doesn't need an active connection the biggest problem is knowing when to sync to the server and which data to overwrite, the servers or the clients.

There are a handful of things left to look at with this project (station info, maps, gamification, etc...) but the current version fulfills the initial aims of the project, being able to simply and easily record which underground stations you have visited.

Check it out at https://tubetrotter.com