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

Page updates, footer and an improved layout

Added some pictures

I added proper pictures of the team, as well as the roles and a picture of the robot on the robot page

Added a footer

I made the footer, it has a link to every page and also external sites

Fundraising section

There is now a section on the home page for fundraising, with an embedded element to the team’s gofundme

Improved layout

I changed the layout of the home page, so that the about, robot, and fundraising sections are in a column rather than a row. They change to be in rows again on small screens though. I think this makes the site look less generic

Current work

I am currently working on improving the mobile experience of the site, such as adding a menu to the navbar and improving the footer layout

Contact Us Form

I built a form on the website to send email to the team! I am using Cloudflare Functions (free & serverless) as the backend, which receives the name, email address and message from the sender via an API, validates it, and then sends it via a noreply address to the contactus address using Resend. The senders address is included in the ‘reply to’ header so the team member just needs to reply to the email.

I had to learn how to use Cloudflare Functions for this, and re-learn some web API concepts from my earlier projects.
Overall I’m very happy with the usability of the system!

I kinda forgot to devlog for a while, so this is a big one..

Link element

This was my first astro component, it is for links so I didn’t have to style each one individually. You can specify a colour theme, if it opens in a new tab, etc.

Navbar

I created a navbar with some links for different pages (not all created yet) this was my second component, since I can now easliy add it to each page. Im pretty pleased with how this turned out, since I figured out the tailwind styling myself.

Meet the Team page

I created a second page for the site, for team members. I used a grid of member cards (another component), and I like the look of it. It went through quite a few revisions until I got the look that I wanted.

First devlog! I started work on a team website for my First Tech Challenge team. I’m using the Astro web framework, Tailwind CSS and Cloudflare pages for hosting. this devlog I was learning tailwind and making some sections, and a cool header. the dev site is hosted at sitedev.botonauts.uk

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!