Side project - My Next Bus
I've been reading a lot of excellent writing from Amy Hoy and Justin Jackson who all have talked about building things as an MVP, side projects and "scratching one's own itch" as a good source of inspiration (well worth subscribing to both their newsletters - solid gold advice).
I've been looking for a small side project where I can play with design and level up my JavaScript skills a bit, and after hunting around for ideas realised that a big source of frustration was my daily commute - specifically leaving the office and not knowing which was the best bus stop to walk to to catch a bus home from (I have about 3, some of which have some buses, some of which have others).
All the good bus time apps focus on London, and the local Brighton one is frankly pretty awful to use. I just wanted something that would tell me what my best bet was at-a-glance, and then allow me to dig in further if I needed.
My first thought went immediately to design, but I had to slow down, and just figure out the basics - things like was this possible? and where would I get the data from? I decided to just focus on the basics, and if I made something use it for a bit, before making anything fancy.
In true MVP style I came up with a list of questions to answer:
Once I found a bus data source (with a small free limit) and figured out what the lattitude/longitude of my bus stops was to then look up the ATOC Codes for each stop (special bus codes which I needed for API querying), I got a basic HTML proof of concept working - no frameworks, just an index.html file pulling in a single vanilla script.js file.
After using it for a few days, buoyed on by this, I worked up the styling with a basic logo, and started adding features.
I then thought of making this a full screen iOS web app, using the meta tags to hide the chrome <meta name="apple-mobile-web-app-capable" content="yes">, and using CSS was able to add some controls to show one or the other of the two lists.
Finally I wanted to make a 'best bet' style feature, to take into account wherever I was (the office, home, out at the pub), and take my location, and estimate, based on walking times to all the stops I use, given when the buses were running, what was the best stop to walk to.
Bus stops had a latitude and longitude, and I could get my current location from geo-coordinates on my phone. I found a formula for converting this into an 'as the crow-flies' point-to-point distance in kilometres. Taking an average walking pace, and bumping it up a bit, I wrote some code to calculate how many minutes it would take to walk this distance, and using this and moment.js I was able to add this time to the time to the next bus in a nice relative format, and figure out whether I could a) get to the bus stop in time and b) what the best next bus was to get.
I also was able to use local storage on the phone to store the bus API key, as didn't want to hardcode this in the code. This was done with a drop down settings form, that saved to local browser storage.
I've been using this for about a week and feel that it's working well as a proof of concept. Next steps are to make it a progressive web app so it works better when the signal drops out, and cache the times locally to reduce API calls somehow. I've added in a facility to refresh an individual stop, which reduces API cost without having to refresh the whole page.
Because I'm using a free tier for the API (with a low limit) and it's also hardcoded to my favourite bus stops, I'm not making this publicly accessible, but if I can build some kind of stop picker into this, then there's no reason I couldn't share this out and build a proper little web app that others could use. Let me know if this is something that you would a) like and b) whether you would consider paying for something like this (per month?), and I can do the maths to see whether API costs make this feasible.
All in all I would highly recommend taking on a mini project like this, as within the space of a few evenings, I've learned a ton about optimising SVG icons, ES6 JavaScript and vanilla JS in general, improving scrolling performance on mobile, and a whole host of other things.
Start small, and make the most basic thing you find useful, then build on that, use it in the real world and iterate on it, and before you know it you will have something useful. Good luck!
2019 update
I improved the best bet to include leaving time, and made it bigger, as after a few months of use it's pretty much all I use. I also removed google fonts and replaced it with a system font stack for speed. Because I had to manually figure out my most used bus stops codes, I haven't opened this up to others yet, as would have to implement a stop finder.
