I built this for myself as a way to track my spending. I know companies like Monzo, Revolut, Emma and Yolt (among others) offer comprehensive products that use open banking technologies to show your spending, but I wanted to build a simpler, 'dumber' web app that was a straightforward CRUD app, and all my data lived on a database that I controlled.
- The web app: Spending Tracker
- Github repo: spending-tracker
My use case
Here are the things I wanted from my personal spending tracker app:
- I should be able to record a transaction within 10 seconds
- I should be able to record a transaction with just my thumb (without having to enter amounts or use 2 hands)
- I should be able to choose merchants I spend with often (instead of having to enter their names in)
- I wanted to be able to add a category quickly (to be able to see my spending by category later)
- I should be able to set a budget for a calendar month, and see it tick down as I add expenses (letting me see how much money I had left before the end of the month at any given time)
The minimum viable UI
Here's the user interface I ended up with (screenshot above). This was a result of a few iterations. I'm happy enough with this right now that I haven't added any new features in a while (sidenote: lockdown in the UK caused by the pandemic resulted in a lot more online spending, which broke my habit of updating the app right away. I hope to get back to using this as my go-to tracker).
The tech stack
- React for the front-end framework
- styled-components for styling
- Firebase auth for authentication
- Firebase database for real-time database
- Heroku for hosting
A quick note aboute state management
I'm using React's context API to manage state, as this is a pet project, and I don't plan on adding lots of features or components that will need a more robust state management solution like Redux.