Final devlog: Green terminal theme, Docker, and a public demo

So I kinda forgot to devlog in between these things, so first:

I made the site look way cooler with a green/black hacker terminal asthetic! I also used more JetBrains Mono and added some slight animation.

You can now deploy CashDive in a docker container! this means that it is easy for people to run this at home on any dedicated computer, like a raspberry pi or PC.

I am running the docker container on my own server and made it publically available here: https://cashdive-demo.thlab.dev/

I also updated the github readme with some instructions ready to ship.

Implemented transaction notes feature

In the last devlog I made a box for adding notes to a transaction.

Now I created a backend for it & frontend logic to make it work!

I added some more API endpoints, to get a note and set/update a note, and a transactions summary endpoint which is like the transactions endpoint but doesn’t give the unused information and says whether a transaction has a note or not (not the note itself). This allows the list of transactions to show a note icon on the transactions in the list. you can then click on them to view/edit the note.

Transaction detail popup

I added a popup for transaction details, it had a space to add notes (I haven’t built the backend for this yet, so it is purely decorative) but I think it looks pretty good!

Significant UI improvements

This devlog was basically just me messing about with tailwind classes until it looked good. i took some inspiration from the Hack Club Bank transactions page as well, which was helpful as a reference.

New features include:

• JetBrains Mono & Inter font
• Date formatting
• Transaction description and account name formatting (no more full upper case)
• Table layout for transactions
• Account balance shown on home page (this needed a new API endpoint)
• Mobile UI styling
• Pending transaction badge
• Skeleton loader for transaction page

Added currency formatting and loading screens for home page

So I made a function that turns the currency value into a formatted string, and shows a ‘+’ on income in the transaction list and no sign on expenditure.

Then I made a loading wheel for the home page - you don’t really see this because it is only shown when it is checking if you are authenticated with your bank.

I improved the design for the ‘not connected’ screen, and I stole the design for the link from one of my other projects because it looks pretty cool.

And finally I made a skeleton loader for the accounts page, which is shown while the accounts are loading. The areas where the data would be are replaced by pulsing grey boxes, which is a modern approach to showing loading data.

Overall I think these changes made the site look more professional!

Added pagintation to account page

I split the long transaction list into pages, with controls at the bottom for navigation and a dropdown for the page size.

I had to learn about useEffect() and useState() and other react stuff, since this is the first time I have done react/nextjs specific programming, rather than just essentially writing TypeScript and HTML.

I tweaked the API to have a page and page_size parameter, which gets sent in the SQL query to the database, to just return the transactions needed.

I also made the tsx page fully client side, so I had to remove the async functionality and add the frontend origin (localhost:3000) to the CORS middleware allowed origins in the FastAPI backend.

One problem is that the entire transaction history is updated freqently, rather than just recent ones, so I need to figure out how to solve this problem without leaving stale pending transactions around.

Web UI & Account page

Added account page for viewing transactions

I added a page for specific accounts so you can see the transactions and balance.

Added styling to site

I added some styling to the main page and the new account page

This devlog took a while because I was focussing on other projects, but im gonna finish this project now. Also the styling took a while to get right and nextjs/react is hard

Anyway next I am going to split up the transactions into pages, so it doesn’t take ages to load and result in a massive page

I was gone for a while, but now I started working on a frontend website for the project! I am using next.js and it uses the API I created for data. It automatically checks the authentication status and then prompts you to login with your bank if required, then it redirects to the home page. Next I will add more functionality to the site and add proper styling.

I made an API for cashdive! I made an authentication flow with TrueLayer, so there is no need for manual auth code input. All the basic info is available from my API, including accounts, balances, and transactions.

The database is now used to cache the data, so the API is not reached every time. The default expiry is 3 minutes, so new data will be fetched from the API after that.

I made several improvements to the database, it now stores all the data including accounts, balances, and transactions, and pending transactions are shown & updated. When data is fetched from the API, the database is automatically updated. Authentication is improved by automatically refreshing the token after its expiry time. I made a lot of progress this devlog but it’s all backend stuff, so there’s not much to show, but here are the new tables in the DB:

I added a PostgreSQL database! The code I wrote can create a transactions table, add transactions from the API to the table, and fetch them from the database again.

I made a lot of behind-the-scenes changes, including separating the API, auth, and interface into different files, adding token renewal support (so you only need to log in once every 90 days) and added some dataclasses so the data from the API is in a standard form across the whole app. The video shows that if the API token is not valid, it can generate a new one with the refresh token.

I made a basic terminal interface for viewing bank account information, using the TrueLayer API. I used their mock bank account credentials to test my program!