Monzo Calendar

Overview

This side project was developed after I gained an interest in learning how to use Vue.js and the Monzo Banking API.

Monzo screenshot

The web app (built with those tools) lets you log into your Monzo bank account and load this month’s transactions into a calendar. Your current balance is displayed at the top. You can then add future transactions you know are going to take place in the coming month. For example, if you know when your commute is, your bills, when you get paid, which night of the week you get take-away etc.

Your “Planned balance” is shown at the top, as well as your Profit/Loss (in green or red). The app helps you plan your next month out, using your existing transactions as a guide. As the month progresses, your planned transactions will be replaced with the actual ones that took place.

Tools Used

I wanted to use tools for this project I’ve never used before. This included:

  • Vue.js as the rendering framework.
  • Monzo REST API as a data source.
  • Parcel as a no-nonsense build tool.
  • Bulma as a quick-start, decent-looking CSS framework.

I was very impressed with Vue.js and Parcel specifically, and hope to use them again in future projects.

Open Source

You can find the project on GitHub at robcrocombe/monzo-calendar. You can also try out a live demo here. Keep in mind, the Monzo API is in early development and the demo may not work if breaking changes have been made.