Up Bank Explorer

up-bank-explorer.andrewnguyenism.com

The Up Bank Explorer uses the official Up API to show you:

• Your accounts, and their balances
• Your spending broken down by category, time period (TODO: time period comparison)

Why does this exist?

I used Pocketbook for a while to get insights into my spending habits as my previous banks didn't offer this information in a way that app did.

Since moving to Up, I've been using the built-in insights and categories in the app to keep track on a monthly basis. However, I wanted to view a similar breakdown for the year which was only available as the "UpYear in review" - not quite like what I got with Pocketbook.

So think of this as a Pocketbook-like UI for your Up transaction data.

How do I use it myself?

This is an entirely client-side application, so if you want to run this locally you can!

1. Clone the repo
2. Install dependencies:

# yarn
yarn install

# npm
npm install

3. Start the app:

# yarn
yarn start

# npm
npm run start

Technology Used

This a Next.js project, bootstraped with the with-typescript-eslint-jest-app template. That provides:

• Typescript
• Linting with ESLint
• Formatting with Prettier
• Linting, typechecking and formatting on by default using husky for commit hooks
• Testing with Jest and react-testing-library

I added SWR to handle data fetching from the Up API.