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!