f.stockinger

Subscription Management

I completed part one of the subscription functionality, allowing the user to add monthly or yearly recurring transactions. Even though subscriptions seem easy to implement on the surface, they bring about unique challenges, for example:

• What if a user edits the amount of a subscription: Should the new amount be used for calculations from this day onward only, or do we need to change past payments as well, because he wants to correct an incorrect amount?
• What if a user deletes a subscription: How can the subscription be included in statistics transparently enough, that the user understands statistics take into account subscription payments due before deleting the subscription?

I find this particularly hard to bring off, because it combines technical and UX challenges into a big one that is difficult to get right.

For part two of the subscription system I plan on implementing versioning: Each version and its amount is only valid for a certain time span. Editing a subscription creates a new version and versions can be edited afterwards. I am already regretting I added subscriptions in the first place but they are important for budgeting so there does not seem to be an easy way around it.

Mobile App

I decided to stop working on the web-based finance manager and rewrite it as a mobile app. After thinking more about my users, I realized most want to track expenses on the go (right when they spend money). Opening a website on mobile adds too much friction for quick expense logging.

Tech Stack

• React Native with Expo - de-facto standard for modern React Native, well documented and easy to get started with
• SQLite (on-device) - simple, no backend needed, and keeps all data local which is good for privacy

What i did

• Navigation between screens with custom tab bar
• Dashboard screen showing the users total balance and statistics about average monthly income and expenses
• New Transaction Screen + Edit Transaction Screen
• Transaction History Screen, grouped by month, with multi-selection

Note: Most of this was done outside of time tracking. I had already logged 34 hours on the web version, so starting fresh at zero felt misleading - 3.5 hours on the rewrite doesn’t reflect the actual work that went into this. The web version wasn’t wasted effort either; I picked up a lot around backend authentication, using APIs in React with state management, and React in general, most of which carries over to React Native.

I’ve been restructuring the backend and after 9 hours it’s still not completely done!

As the project grew, handlers were getting bloated with business logic and database calls mixed together, making everything harder to maintain. I decided to refactor the architecture to make the codebase cleaner and more scalable.

What I worked on:

• Introduced a service layer to separate business logic from handlers
• Made all API responses follow a consistent structure
• Replaced standard logging with zap for structured logging
• Added middleware for logging, tracking each log with a request id to know what logs belong together
• Replaced subscriptions with recurring transactions
• Improved database constraints and validation - most data is now validated by the dbms
• Cleaned up routing structure

This was a real pain 😅 but I learned my lesson - next time I’m doing this from the start! I had to touch almost every file and couldn’t reuse a lot of the code and had to re-write many parts from scratch.

There are still some minor issues and I also want to further improve my error handling by making API errors more descriptive, but the foundation is way cleaner now!

Subscription Management and Categories

New Features:

• categorize incomes and expenses with custom categories
• create subscriptions (monthly / yearly) and see what you spend per month
• a widget with a pie chart on the dashboard shows how the monthly expenses come together
• moved the create income / expense from separate pages to dialogs for better UX

I spent the last 3.5 hours on:

• making the interface responsive across different screen sizes
• adding a chart showing the user’s balance over time
• creating an “All Transactions” page listing past transactions
• modifying the loading of transactions to only fetch a small batch of transactions at a time, to prevent querying really old and unnecessary transactions from the database

My plan is to next add support for categorizing expenses and incomes with custom labels.

This took longer than i thought it would - I connected frontend and backend together.

• Login and signup are now functional through the ui
• Incomes and expenses can be created in the web app
• The dashboard now displays the balance of a user

I learned lots of new things about React contexts and custom hooks and refactored some of the “old” frontend code.

Last devlog, I created a minimal UI. Since then I got started working on the backend of the Personal Finance Manager. My language of choice is Go since I really enjoy its syntax and the way errors are handled.
Here is the progress I made:

• Added a project structure for the backend
• Set up login, signup, and transaction API routes
• Added Postgres to the project
• Added a users and transactions table with queries for interacting with them
• Added sqlc (it’s amazing) to turn my SQL statements into type-safe Go code
• Added authentication with JWT
• Containerized the project with docker compose

I learned a ton of new things on authentication and am excited for what’s next!

After some hiccups, I made the initial commit on my Personal Finance Manager project adding

• the basic project structure (TS + React + Shadcn + Tailwind)
• navigation (React Router) with a sidebar
• a page for adding expenses

I also made some progress on the dashboard page. I’m planning to finish a minimal UI first, then finally add the backend and functionality.