New Personal Expenses App

December 2023 | Creating a new expenses tracker just for me

I want my expenses tracker's frontend to have two components on the main page:

  • Month summary showing a breakdown of expenses by category.
  • New expense form with tip calculator + cost splitter for the times I eat out with friends. It can get pretty complicated:
    • Get the bill
    • Calculate the tip and total amount payable
    • One person pays the total bill
    • Everyone else calculates how much they pay (amount and tip)
Tip calculation example

When I go out with friends, we do NOT split the tip equally. We divide it based on the cost of our dish.

If I go out with one friend and the total bill is $100 + 20%, the tip amount is $20 making the total $120. While it's easy for me and my friend to pay $10 each, it can be quite unfair for my friend if they a bought a $10 dish, and have to pay $10 for the tip.

We calculate it this way:

Total: $100
Tip at 20%: $20
Total with tip: $120

Without tip: 
  Friend amount: $10
  My amount: $90

With tip:
  Friend amount: $10 + (10/100 * 20) = $10 + $2 = $12
  My amount: $90 + (90/100 * 20) = $90 + $18 = $108

Version 1

A few comments about this layout:

I'm using a log scale for the horizontal bar chart. Some categories (education, school fees) will always have a much higher total amount per month. Having one super long bar makes it difficult to compare spendings across categories.

This is what the graph looks like with a regular scale:

Another issue with the layout, specifically the new expense form, is that it's too crowded. While I usually prefer being more clear and verbose when it comes to long, complex forms, this expense tracker is just for me, and I do not need all the labels.

Version 2

Removing the labels makes the form a lot simpler to me. It's completely okay if others don't immediately understand what all the fields are for because I am the only user.

I'm really happy with the "summary receipt" at the bottom. I added a slight rotation and gradient to try and make it look more like a physical receipt.