By
@jeremy
A full finance software for my school as in germany its common practice to host a big party at the end for student of grade 12th and 13th and for that students gather funds and manage them and this software was made to make it easer to manage these funds
AbiVault is a finance management web app built with Next.js, TypeScript, Tailwind CSS, Supabase, and Clerk.
I built it because my school needed a better way to manage the money around our Abitur. Students organize things like the Abiball, parties, fundraising, and merchandise themselves, which means we also have to keep track of income, expenses, budgets, and the current balance.
AbiVault is mainly made for Abitur committees and student finance teams. It gives multiple students access to the same financial data and makes it easier to keep everything organized without relying on several spreadsheets, documents, and group chats.
The main goal is to make managing Abitur finances simpler, more organized, and more transparent for everyone involved.
This phase about cleaning UI elements changing the language of the whole demo website to english and fully preparing it for the offical stardance submission as the offical private one was alredy online for a good while and had near to 0 bugs.
This isnt a feature newly added but I just wanted to mention that our system in theory supports cards through gocardless but that isnt setup so its not usable at the moment though the backend exists and for a while even Ui existed but I have removed that.
This wasnt so hard just pretty time consuming going over everything and translating every single text.
Pretty proud of myself as I managed to push out a full working apllication of course this isnt 100% selfcoded for example backend features but it is more then fine for what I was aiming to do and It works perfectly.
here is a link to the demo for everybody wanting to try it out. https://abi-vault-demo.vercel.app/
This phase was just about creating a demo website for the stardance people. Creating One new tab and cleaning up the final UI.
I finished with fully creating the full application privatly and fixing all bugs Ui and backend and also created one new tab which was interseting.
I made a second copy of my repo removed all clerk dependecies translated all the text from german into english and setup a second Supabase and vercel project this will be used without loging which allows for everybody to use and test it.
creating the readme, cleaning up a bit and its ready for ship
This phase was mostly about moving everything from development to production, using the actual domain, finalising the system, rewriting a bit of the structure and fixing bugs.
So I finalised the iPad UI and added multiple simple spinner animations and slide-in animations. I also worked a bit more on the blank states, what the placeholder text should say and how everything should look.
Right now I am still in the process of finalising the phone UI, as the blank states fucked it up a bit.
I rewrote 2 large sections.
As I realised in the last devlog that I couldn’t use a bank API, I needed to rewrite the logic of how the platform worked.
I decided to keep the cards and make them a visual representation of the physical cash.
I also decided to fully transition the system to being ledger-based, which was pretty obvious since we now don’t have an API.
For anybody asking, ledger-based basically just means that the system calculates the balances and tracks how everything is performing based on the values that users manually enter.
i also decided to create an invite system link so people cant just signup if they somehow find the software and it only works by getting a link from the Admin. For the Supervisor role its a 30 day link for up to 30 people and for admin its a onetime link for up to 7 days and 1 user.
I also decided to buy a domain, which I originally didn’t want to do as I thought Vercel was all I needed.
However, Clerk required a custom domain so I could move everything from development to production.
Also, for anybody asking, I will not reveal the name of the domain as this is a closed platform. That’s also why I made it as badly SEO-optimised as possible in the metadata.
And for anybody wondering, this domain cost me A WHOLE $0.07 a month.
Quite expensive if you ask me.
Clerk was quite the hassle because, as mentioned before, my plan was to just use Vercel, but Clerk essentially forced a custom domain onto me.
Another thing I didn’t know was that under my student plan I was only allowed 2 roles and wasn’t able to add another custom one.
This became a bottleneck as I originally had 3 roles in mind:
In the end I decided to scrap Admin and make it only Student and Supervisor.
This part was quite simple as most of it was already finished.
I mainly needed to work on the role permissions and also add a caching system because I noticed that some pages would load for 1–2 seconds every time.
That’s just bad UX, especially when it happens even during a simple tab switch.
The caching system now keeps already-loaded data available where possible instead of unnecessarily fetching everything again.
The next steps is now creating a demo version and a better opensoure version so people can use my software without depending on my vercel, supabase and etc. Or maybe I will host another workspace of this exact software for hackclub so people can try it what would be your advise for that?
This phase was mainly about the backend which i have to confess i had to use AI for as it was complicated with supabase clerk and just rotuing everything together.
My plan was to allow the use of real bank cards and getting all their information through a bank API, but i missed sth important either you handle all bank apis from all providers yourself or you get a service to do it. The problem is there is no free Opensource service which allows for this and to keep it a buck iam broke asf. So i scraped the Idea and made it only ledger based which means it gets calucalted automatically but you have to write down all transactions and etc.
This was quite hard as Supabase is hella confusing prob one of the most confusing UI i have ever seen
but after some back and forth with the Ai i was able to set it up though i still need to learn a bit as I really didnt undestand what i did there.
this was quite easy clerk really allows for easy synchronisation and it was quite easy to set up the 3 classes admin, supervisor, and student I also made it so the software is request only for the moment so i can send a request with a certain authorisatzion and the User creates their account. But will probally change that soon
I will probally either get a domain grant or just buy it from my own money and prepare to launch the website over nest. Its nearly finished and the onlz fixes are small UI mismatches, better animation adding things like skelleton loaders and etc.
This section was mainly about adding all other pages creating a fully nice looking functionial phone UI and just cleaning up the UI in general.
I created the rest of the pages and created place holders for them and now a whole system is in place the only thing left is writing real logic and conecting it to a server to get user auth.
This was the biggest phase of this Project i first started with scraping our already existing phone UI and started gathering references I decided to use klarna as they got quite the clean UI. I first started with adding the sidebar to the bottom to make it easier accsessible. I also needed quite A long time to make the UI look clean with adding animation for the modals and making them appear from underneath and not spawn in the middle of the screen
Now that the UI is kinda finished and school starts in 1 week the next step is creating a fully functional backend syncing the application with superbase and other services so I have a first working demo which I can continue working on during the school year.
This section was mainly about cleaning up the UI, making the different pages more synchron and creating a more structured UI system for the whole website.
I worked on making the design more consistent across the dashboard, transactions and receipts page. Before that many aspects were styled slightly different like the spacing, typography, buttons, dropdowns and card sizes. I started creating shared rules and components so the pages follow the same visual identity and feel more connected.
I created and implemented the full transactions page with filters, a filter modal, pagination, placeholder transactions and a structured transaction table. I also created the receipts page with placeholder receipts, status filters, pagination and a modal for adding new receipts. Both pages use the existing Abi Vault sidebar, topbar, colors and general design language.
I added more placeholder transactions to the dashboard so the transaction history feels more complete and does not leave as much empty space. I also added another spending category and adjusted the review section so the right side feels more balanced with the transaction history on the left.
A big part of this session was cleaning up the layout for both 1920px and 2560px screens. The layouts looked very different depending on the screen size because of adaptive heights and spacing. I adjusted the cards, rows, table containers and page spacing so the website stays inside the viewport and does not become scrollable on the supported resolutions.
The 2560px version was especially difficult because there was a lot of empty space, but simply scaling everything up did not look good. Instead I had to create separate wide-screen adjustments, add more rows and balance the different cards while keeping the 1920px layout unchanged.
This was a productive session but also quite difficult because many small CSS changes affected multiple pages. The UI now feels much more consistent and the Transactions and Receipts pages are much closer to the final design. I still need to refine some spacing differences between the pages and test everything more carefully, but the main structure is now in place and the beta version is getting closer. For anyone wondering about the phone UI I havent touched it in a while and decided to just create it at the end because its such a hedache
Abi Vault - Devlog 5
This section was mainly about refining the UI further and fixing some bugs regarding the CSS and how the website look on the phone.
I had some bugs with the dark mode becuase as you could see in the video of the last devlog the Clerk system wasnt adjustet as i forgot it. This took quite some while to sync it to ts and css variable but with some AI it was possible.
This was hell i genuinly couldnt manage fixing the Phone UI and even then i had to change so many different things because the phone ui is just different entirely and you need to hide so many differnt aspects and even replace symbols the most challenging part was reanging the dashboard so it really fits into a phone overview and after getting stuck for 30 minutes i just decided to ask AI and let it expain what was wrong
Also worked on the card customisation model cleaning up Ui and implementing restriction like max character limits, dates that arent expired and etc
pretty uncessful session and didnt code much by hand because it was so difficult also the progress is way to slow so iam going to pick up the pace to atleas have an beta ready at the end of august which is usable.
This Section was mainly about adding cool effects with Tailwind CSS and refining the UI further. I also used Figma to design the card and saved it as an SVG.
This was quite simple and fast. I used references from cards like the ones Klarna uses and designed the card from there. To give it a more metallic look, I used a linear gradient with three stops at a certain angle. The problem was that I worked in the Figma app instead of the browser, and the browser connection kept disconnecting and reconnecting. so i coudlnt track hackatime for it/
The cards are combined with SVG and TSX. The SVG is responsible for the background, including the gradient, border, and rounded corners. The card text is rendered separately in TSX and positioned above the SVG using a layered container. This allows the account name, number, card holder, expiry date, and color to change dynamically.
The visual effects include a subtle 3D tilt that reacts to the mouse position. The code calculates the mouse position relative to the card and converts it into tilt values for the X and Y axes. These values are saved as CSS variables and used by rotateX() and rotateY().
const relativeX =
(event.clientX - bounds.left) / bounds.width;
const relativeY =
(event.clientY - bounds.top) / bounds.height;
const rotateX = (0.5 - relativeY) * 8;
const rotateY = (relativeX - 0.5) * 8;
event.currentTarget.style.setProperty(
"--tilt-x",
`${rotateX}deg`
);
event.currentTarget.style.setProperty(
"--tilt-y",
`${rotateY}deg`
);
When the mouse leaves, the card resets to 0deg. It also has a diagonal light-sweep animation and slightly lifts on hover. The white card uses a separate metallic gradient and darker shine.
Cards are stored in React state, and cardIndex controls which card is visible. The modals allow cards to be added, edited, or deleted. Currently, cards reset after refreshing and will later be saved in a database connected to the Clerk user or class.
Iam pretty proud of myself of the result though I did have to use AI for how to create the Card logic so the text is interactive at first I thought about redrawing the SVG everytime as i did sth smiliar in my README but that didnt make sense, so i asked AI as for the darkmode i needed to watch some tuts and for the same for the tilt and a bit of AI for it
This section was more about battling my typscript skills and cleaning up the UI minimal also added the account system easily with clerk bless clear
This was quite simple in theory but I had some difficulties making it compatible for both phone and desktop because they should appear in different location and I didnt really know how to do it, but iam really thankfull i choose clerk because of that I dont have to code the account system by scratch and get a easy to use account system
Was pretty difficult but learn about utilizing hidden and tailwind css to hide certain ui elements on certain devices.
Today I focused on making the login system and a simple sidebar utilizing clerk shadcn.ui and lucid react components for the icons
I integrated Clerk’s prebuilt and components and customized their appearance to match Abi Manager’s clean black-and-white design. Access to the dashboard is protected so only authenticated users can view it.
This was quite difficult because i never advanced much with my HTMl skills and still havent really done semantic html which i will continue now on free code camp, at first i thought creating it myself was the play and I did and it was difficult but with some googling and AI I managed btu I realised that I wanted to make this fully compabtible with Ai so i decided to use the one from shadcn which already comes with a mobile function.
I also noticed while coding that I paster the for the buttons 8 times, so i used that moments to learn how to create reusable componenets
Pretty good session I am still having difficulties with tailwind as it just feels weird and looks weird to design in the code but its going good
in this section i did simple setup and mapped the features the app should have
I decided to build this project to finally explore modern web development. So far, I have only created simple websites without many features or animations, but I wanted to create something more modern.
Since I am approaching my final years of high school in Germany, we have something called an Abi Party, for which different committees have to collect and manage money. My aim is to create a simple website to track the finances with three account levels. Admin, Commite Members and students affected. The aim is to create a Next.js tailwind website which allows for adding bank account and seeing the money history though the bank Api uploading reciepts and more.
So i started with building the homepage and learning tailwind, tsx and next.js which was quite weird and took a good while but it wasnt that hard as its similar to html syntax with a js twist. I had difficulties with tailwind as I found myself writing a really long line but I found out you can reference tailwind and just add it in CSS without having everything in the Tsx. I also connected Clerk and set it up. The reason this took so long was because of learning all these new languages but the next post and features should be a lot faster.
Create the rough system with a tab system simple dashboard and login and signup screen when buttons pressed
