Key Technologies: HTML, CSS, JavaScript, CSV, Chart.js
I really wanted a quick and secure way to get a breakdown of my spending without having to give up my banking details to a third-party. For the longest time I was using an excel spreadsheets and doing a lot of work manually to categorize transactions and compute totals. One day I decided to just build my own tool!
- Chase’s developer API is invite only, so used their csv data dump option
- Lots of pre-work happens before rendering the charts, data from csv is converted to objects, grouped by months, computed for totals/averages/etc., and then categorized by user inputted data
- The transaction list allows me to flag what category a transaction should fall under – under similar transaction will automatically be assigned that category unless explicitly overwritten.
- Using chart.js to render the charts – this framework is incredible and really easy to use
Below is a video of what I settled on for a v1. It does everything I need it to quickly, and makes understanding where I’m spending my money clear. Some future enhancements will include:
- Monitor Chase’s API to see if it opens up for normal developers
- Flag transactions that fall outside a specific variance (unexpected transactions)
- Show top 5-10 places I’m spending money, e.g. how much money am I spending at Chipotle!
- Add pagination for transactions list
- Show YOY information and trends
- Add ability to layer in a second account
- Refactor code to reduce redundancies in calculations