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
To make a better guest experience I was asked create some new html templates to be used in our app’s message center (powered by Urban Airship). Although this used technologies I already knew, there was a ton of specialized learning to understand how all the pieces fit together.
Some key callouts were: understanding how the html entities needed to be prepared/attributed in the template creation process so that the UA CMS sees them as editable fields, exploring how the UA webview creates a JS bridge and passes a UA object to be used by template at run-time, and how the template itself reaches out to UA for user specific data with the help of data passed in the CMS process.