< Back to home

Spending calculator personal project

Project carousel image

This is a personal project I started with the aim of tracking my monthly spending since the last pay day. It needed to fulfill the following objectives:

  • Keep track of total spending per month and also grand total of all time.
  • Have most frequently used spending categories as well as a free text entry.
  • The ability to drill-down into these individual categories to see total spending on them.
  • Keep track of when I get paid every month (the 15th as a rule but this can change if it falls on a weekend).
  • Be available for others to sign-up and use.

To fulfil the above I went for the web app approach using Bootstrap for the first time to build the front end and using PHP/MySQL for the back. It uses custom written PHP functions to check the payment date. Colours of the total amount change from green/orange to red as the total monthly spending figure changes as a percentage of my wage.

The app works very well functionally but from a user experience point of view its terrible. This is largely down to the fact that the information it records is just too terrifying to face, thus an important lesson was learned here!

View the calculator


Wireframes:

Project wireframe

Key points

  • Built using Bootstrap 2
  • Mobile-first, responsive design
  • PHP and MySQL