ClaudeAI: Building a Smart Budget Tracker
The Problem
Every two weeks when my boyfriends paycheck hits, he goes through the same set of steps: opens his calculator app, types in $1,180, subtracts his expenses one by one, and then he tries to figure out how much he can put toward savings goals. It's tedious, error-prone, and very frustrating for him as someone who has ADHD.
I have tired to help previously by suggesting apps and other ways to help him but the problem I found with a lot of these is there is setup required, its not personal and a lot of the time they give more options then are needed for him. I kept thinking there had to be a better way. I have been working on becoming more AI-native, and this felt like the perfect problem to tackle. Something that would hopefully help my boyfriend and be interesting and quick to design.
So I opened Claude and typed "help me build a bi-weekly budget tracker." From here I discovered how helpful, quick and insightful vibe coding can be.
What I Built
Michael's Budget Tracker is a responsive React web app that helps you plan your bi-weekly budget with smart automation.
Link to Project
Here's what makes it personalised and different.
Smart Auto-Budget Feature
My favourite part is the intelligent budget recommendation system. When toggled on, the app automatically distributes your remaining money across savings goals - but here's the important bit: if he manually changes any goal, it stays locked at your number and only the other goals adjust. This was important for me to add as it helps him to not forget to put money into specific savings but also takes away the trouble of having to calculate it.
For example: If he sets his taxes to $50 instead of the default $35, the app takes note of that and redistributes the remaining budget among credit card payments, couple savings, and general savings. Everything updates in real-time as he types. It is incredibly time efficient for him.
Mobile-First Design
I designed this knowing he’d be using it on his phone while at work or sitting at the couch or in bed. Claude respected my wishes and designed a Single-column layout with responsive grids, big touch targets. As well as this I added in some nice colours, wording iconography, everything I could to make it friendly and personalised so that he would enjoy using it.
Image Export Instead of PDF
I originally wanted PDF downloads so that my boyfriend could store and keep track of the previous budgets he had made, but I ran into technical issues with Claude. So instead I switched to download PNG. This in all honesty was a better solution as on android phones it is much easier for him to search through his photo gallery than the files app.
How AI Changed My Design Process
It is much faster, irritative, helpful and allows me to stay in my design flow the whole time.
It eliminated the need for me to wait for developers to create something for me. A HUGE time saver.
I got to tell Claude what I wanted and it build it almost instinataniously.
Me: "I need a bi-weekly budget tracker with income, expenses, and savings goals." Claude builds it
Me: "Can you add a smart budget feature that auto-distributes remaining money?" Claude implements the algorithm
Me: "Actually, if I manually change the taxes amount, don't override it - adjust the other goals instead." Claude updates the logic
Me: "This needs to work on phones too." Claude makes it responsive
Me: "The PDF thing isn't working, can we save as image instead?" Claude pivots the entire export feature
Smart budget feature
The smart budget was the hardest part to get right. The app tracks which financial goals you've manually edited and the auto ones. It works like this.
Calculate how much money you have after expenses
Lock in any amounts you've manually changed or added.
Take what's left and distribute it smartly: 50% to general savings, 25% to credit card, 25% to couple savings.
The whole thing recalculates instantly. Every time you change income, expenses, or any goal, it recalculates. I didn't write any of this code myself, I told Claude what I wanted and It made It work
Challenges and How I Solved Them
Getting the real-time updates right
My first version would recalculate when you changed income or expenses, but not when you edited individual goals. I had to more clearly state what I wanted. Basically telling the app "hey, watch these values and recalculate whenever they change."
The local Storage situation
I wanted to save budget history so you could track multiple pay periods, but local Storage doesn't work in Claude's environment. I tried multiple times to get it to work and eventually I just removed the history feature entirely and focused on making the image export.
Keeping manual edits intact
This was the trickiest UX challenge. How do you show that the app is "smart" and helpful, but also let users override it without feeling like they're fighting the system? The solution was tracking which fields the user had touched - those become locked, everything else auto-adjusts.
What I Learned
AI is a design tool, not just a development tool I spent the whole project making design decisions. Where should this button go? How should this feature work? What happens in this edge case? The AI handled translating those decisions into working code.
Iteration is incredibly fast In a traditional workflow, each change might take days. With AI, I could try something, see it immediately, decide I didn't like it, and try something else. All in minutes. I probably went through 15-20 iterations in the time it would've taken to do 2 traditionally.
You still need to understand UX fundamentals The AI doesn't know if your feature makes sense or if your layout is confusing. You still need design thinking, user empathy, and the ability to spot problems. AI just removes the implementation bottleneck.
Real users reveal hidden insights Using this app for my boyfriends actual budget every two weeks showed me issues I never would've caught in a prototype. Like realizing I needed the Additional Items section because sometimes he has one-off expenses.
Simpler is often better Every time I removed a feature or simplified something, the app got better. The history tracking, the chart I originally added, various bells and whistles - cutting them made the core experience clearer and gave my boyfriend exactly what he needed without the extra ‘fluff’.
The Results
My boyfriend actually uses this every pay check. It saves him time and stress knowing that he can just input how much he is paid, his expenses and the rest is calculated correctly for him.
What's Next
I've been thinking about adding a comparison feature to see current vs. previous budgets but I had trouble getting this to work due to the lack of local storage and the only option being uploading the previous budget which my user told me they would not do, so I need to explore this further.
But honestly, the app works really well as-is. Like I said it gives him exactly what he wanted which when designing something for one person is the end goal. I can always update it down the line as it is not that hard to do. For Other Designers