App Concept
Identifying an Existing Problem
Most of the financial tools that exist focus too much on analysing existing expenses and telling you where you are spending too much.
However, we've all thought "I'll save this amount of money this month" and then get hit by a 'surprise' bill like utilities or annual subscriptions that we forgot about. Hence, a tool that helps you foresee the upcoming bills could stand out.
Core Features
To make this happen, I identified some Core Features, including:
- Cashflow Calendar
- Billpocalypse Forecast
- Spendable Income / Saving Dashboard
Why Vibe Coding with AI
I work in Customer Success in SaaS; that gives me a solid background in understanding the customer experience and identifying problems and patterns.
However, I lack any technical skills relating to coding, therefore, using AI is a necessity.
As my purpose is to learn, I didn't necessarily need to develop a full app including databases, storage, security... that would have been overwhelming! Hence, I chose "Lovable", which is great for building UI and protoypes.
The Process of Building the Prototype
Planning Features
The first thing was to identify what features I wanted, which I wrote earlier for the App Concept.
After identifying those features, I wrote a prompt within Claude (the LLM) to 'discuss' and help me build a plan. Apart from defining better the core features, it also helped suggesting extra features for the future, unlocking the potential.
Researching Market
The next step, with the help of Claude again, was to start performing some market research. We identified a few competitors, which I tried to register and look at their product.
I came across two barriers:
- Subscription was required
- Linking to a credit card or bank account was required
Although I could not explore much, I did notice one thing: they all asked me for my goal, and that was good to add to my plan.
With that, we identified gap opportunities and defined what would help this app stand out:
- Bill forecasting
- Focus on paycheck-to-paycheck users
- Privacy (not required to link accounts)
Project Planning
Before actually implementing the ideas, I had to create a space within ClickUp where I would be able to track what I wanted to do.
Below is a screenshot of the 'current' status of things, where:
- I am tracking Core Features
- For Each Core Feature, I have a list of Enhancement and Bugs
- Each item has a status (e.g. backlog, in scope, in development, testing... etc.)
- A custom "Importance"/Priority field is added to identify what is critical
With the structure set (which was adapted after every few iterations), it was time to start.
Prompting Lovable
Lovable comes with 30 free credits per month, up to 5 per day.
I decided to spend 2 days (10 prompts), so I tried to be detailed.
My first prompt was based on what Claude and I had discussed, and it immediately build the overall layout and the basic features, like the Cashflow Timeline.
However, there were several issues with the UI, such as + Add buttons not working.
Therefore, for prompts 2-4 I focused on:
- Fixing issuse of non-working UI
- Converting the Frequency selector for adding flexibility (for irregular bills)
- Adding new UX features, like calendar drill-down
- Ensured flexibility of all basic functionality (edit existing bills, overriding actual amounts of income/bills for the day).
Billpocalypse Forecast
In the next two prompts, I then focused on adding the "Bill Shock Prevention", which I initially named "Billpocalypse" - although the AI renamed it against my will.
This has two features, shown in the image below:
- Identify the next large cluster of non-monthly bills to warn you ahead of time
- Provide a breakdown of all bills due for every month, particularly highlighting any large bills
I was extremely pleased with this! This is exactly the core feature I had set in mind.
Telling people to save is futile unless you show them why they need to save: you're going to get hit by a big bill.
Spendable & Saveable Dashboards
In my 7th to 9th prompts, I focused on revamping the UI, due to the added features, alongside providing better information on spendable income and how much to set aside.
This goes hand-in-hand with the Billpocalypse Forecast. In the screenshot below, the app identifies that every month has an invisible cost of €328 which are erlated to irregular bills, such as utilities and insurance.
Rather than seeing these as large one-time bills that happen infrequently, one can allocate a monthly cost and transfer that money into a specific account to pay bills.
Gross Income Feature
In my last prompt, I decided to add a new mode where a user can input Gross Income and expected deductions like Tax.
This is useful for self-employed individuals who do not have a 'net income', but rather pay taxes after a period of time (e.g. every quarter or annual). Hence, their deductions are a type of bill which can be dependent of the income, which is generally more flexible and less predictable.
Next Steps
I primarily achieved the goal of building the prototype. There are several fixes and improvements that can be made.
My first step was to create a youtube channel, and this post, to start documenting my process. I hope that this will connect me with other vibe coders who would be able to lean me into the right direction.
With that, here are a few ideas of where I could go:
- Continue refining the prototype on Lovable
- Re-create the protoype on Bolt or v0 to get a different experience and new ideas
- Build a separate prototype, for experience of project planning
- Move the protoype to a backend tech (like Cursor) where I could refine the backend and build into something... actual
What do you think I should do as a newcomer to the coding space?