Inspiration

The whole idea for Buno started when we were reading a research paper, "The Budgeting App Trap: When Spending Information Backfires". After reading it, we came to an understanding of an enormous flaw in current budgeting apps.

Most apps assume that the more precise your data is, the better choices you'll make. But the research showed something totally counterintuitive: when people see an exact, real-time remaining balance near the end of the month, they view it as "permission" to spend every last dollar. That exactness strips away any psychological safety cushion.

This gave birth to Buno. Instead of tallying how much money is left, Buno is designed to guide users through deliberate ambiguity regarding how much of their budget remains.

Note: We had tried building Buno for an earlier hackathon, but found that we couldn't fulfill the quality we wanted to achieve for the idea we had in mind. Therefore, we recreated it differently in this hackathon, keeping the philosophy the same and presenting it better this time.

What it does

Buno is built on the philosophy of deliberate ambiguity—not giving the user exact data on how much of their budget is left, but rather showing remaining budget through visual representation.

This visual representation is our web app's key innovation: the Budget Bar. Instead of providing rigid data on how much budget is left, it provides an estimated range depicted with a video-game-like health bar built using GSAP animations, accompanied by intuitive status levels: Safe, Cautious, and Danger to signal when spending needs attention.

Beyond this, our web app offers:

Spending Insights: The web app offers two distinct features here:
A month-over-month comparison graph that helps users compare their budget performance against the previous month.
A category-wise breakdown of where most of the budget is spent, enabling users to pinpoint where money is draining fastest.
Logged Transactions: Through the Monthly Transactions tab, the app tracks activity seamlessly, whether pulled from bank transactions or logged manually via cash entries and incoming credits.

How we built it

When we started building Buno, we based our process on the structured workflow provided by the Devpost Skillpack. The skill pack was responsible for driving the project from initial spec to launch across six vertical slices with structured regression checkpoints and architectural mapping.

Through the skill pack, we built Buno using a modern web stack designed for responsiveness and fluid visual feedback:

Frontend & Styling: Built using TypeScript, Next.js 16, and styled with Tailwind CSS.
Animations: Integrated GSAP to deliver smooth, video-game-inspired "health bar" animations that visually depict budget depletion.
Testing: Relied on Node’s native test runner for zero-dependency regression testing.

Challenges we ran into

Free-Tier Constraints with AI: When vibecoding with AI, there is a serious limitation for people who want to build apps without spending money. While many platforms offered a free tier, they provided only a low amount of tokens to work with.
Limitations of Control in Vibecoding: The control over a model will never be equivalent to the control you have when coding manually. When AI cannot achieve the exact intricacies you want, you are often better off learning how to manually edit those parts yourself.
Cognitive Debt: This was highlighted quite well in the introduction video for this hackathon, but we found it an inevitable issue—especially when vibecoding during our lowest-energy periods, pushing through just to get work done without truly understanding the code being created.

Accomplishments that we're proud of

Successfully taking Buno from a mere concept to a fully functional web application.
Understanding a much better workflow for vibecoding that we can use in future hackathons.
Achieving smooth, responsive GSAP animations that brought a level of polish and life to our website that we hadn't built before.

What we learned

What we learned closely mirrors the accomplishments we are proud of. Adopting a significantly better workflow for vibecoding was game-changing, enabling us to address issues systematically and build constructively. Combining that with mastering smooth, responsive GSAP animations to bring life to our website greatly broadened our technical knowledge.