Weekly Devlog #4 - More Trams updates, React Native and Dashboards

Mon Feb 12 2024

This week I continued the updates to the Manchester Trams project by updating the Android app and started learning React Native.

Manchester Trams app update

If you read last week's edition, you'll have seen that I implemented a new journey planner feature into the API that saw over 9K records entered into the database. This time around, I was implementing the new APIs into the app for everyone to use.

I had three areas in the app that needed changes or new things adding;

  • Update the Journey Planner logic to use the new API
  • Update the Journey Planner UI to reflect the new data return for each journey
  • Add a popular destinations tab to each Station
  • Add a "Directions" button to the Station page to autofill the Journey Planner page

Not particularly difficult, however I did have to change some API logic around to ensure the app would tell Users which station they had to change trams at otherwise everyone would end up in the wrong place.

After an evenings work, I managed to push out all the new changes to the App and API and tweeted out the changes

Learning React Native

Additionally, I started learning React Native this week. If you didn't know already, all my (3) Android apps are built with Ionic and Vue. Whilst this a good solution for building apps it does have its limitations, such as small community support for packages. This prompted me to start learning React Native, which in comparison has a huge community following and some major companies around the world using it.

With a few short Youtube Videos consumed, and a dive through various documentation, I got a simple App setup and running with Tailwind and Tabs Navigation. My plan with this app is to use it as a boilerplate for my upcoming app ideas, this way I won't have to setup everything each time I want to create something new.

Playing around with OpenLayers

Finally this week, I spent an evening playing with OpenLayers to display analytics data over Tram stations around Manchester. Behind the scenes of the Trams app, I use Mixpanel to track events such as which stations are being searched (in a privacy-friendly way) but I rarely actually look at the dashboard so I decided to bring the data in-house to the Admin Panel running alongside the API.

Originally my plan was to just show the daily stats of which station had been searched the most overlaid on a map of the city. However, I got a bit too ambitious and decided I wanted to use SSE to stream live searches to the map which is the point where a lot of the code broke. In good news, though, I got this neat looking map setup in the dashboard.

That's all for this week folks! Happy coding! 🧙‍♂️

Table of Contents