FinPet

An introduction to personal finance for college students! Learn how to budget, save, and invest while taking care of your very own pet bunny

Comment

Inspiration

We've all downloaded a budgeting app, opened it twice, and deleted it three weeks later. The problem isn't that people don't want to manage their money, but it's that there's no emotional feedback loop. Spreadsheets don't make you feel anything. Charts don't make you care. Therefore, we kept coming back to one question: what if your financial health felt personal?

That's where Biscuit came from. We remembered how we loved Tamagotchi pets as kids by checking on them constantly, and feeling genuine distress when they got sick. That emotional attachment drove daily behavior in a way that no notification or reminder ever could. We wanted to bring that same mechanic to personal finance. FinPet is a personal finance app where your financial health is reflected by a virtual pet named Biscuit. Spend too much this week? Biscuit looks stressed. Hit your savings goal? Biscuit is happy. Miss logging for a few days? Biscuit gets sick.

As college students ourselves, we often hear from friends that they want to start managing their money, but have no idea how to. Taxes, the stock market, and even the process of opening a savings account seem like a faraway mystery for many. With FinPet, we aim to offer an easy introduction to personal finance for young adults, making budgeting and investing skills accessible to all. The insight was simple: gamification works when the feedback loop is emotional, not just numerical.

What it does

FinPet is a web-based financial literacy companion with four interconnected modules:

Profile

Your financial home base. Your pet bunny lives here and is animated, mood-aware, and voice-enabled via the ElevenLabs Conversational AI widget. Her emotional state reflects your financial health.

Budget

A live budget tracker with categorized spending, visual progress bars, and a clean card-based layout that makes checking your finances feel less like filing taxes and more like checking your feed.

Goals

Savings goal tracking with progress visualization and milestone rewards in Carrot Points — the in-app currency that feeds back into Penny's happiness.

Learn

The centerpiece. Four full learning tracks:

Track Lessons Max Carrots
Budgeting 8 +480 🥕
Credit & Debt 6 +360 🥕
Investing 6 +480 🥕
Taxes 4 +320 🥕

Each lesson features real reading content, interactive calculators, and a knowledge-check quiz with instant feedback. Completion unlocks the next lesson and awards Carrot Points. As you complete various modules, FinPet will update with new lessons and tracks so that you never run out of things to learn!

How We Built It

Frontend: Vanilla HTML, CSS, and JavaScript with no framework, since we wanted full control over performance and animation.

Backend: Python + Flask, with a SQLite database tracking users, transactions, savings goals, streak data, and carrot points.

Voice AI: ElevenLabs Conversational AI widget, embedded directly into the profile page. We inject custom CSS into the shadow DOM to match FinPet's orange design system, replace the default avatar with Biscuit's gif, and override all branding text.

Design System: A warm cream-and-orange palette built on CSS custom properties, with Syne (display) and DM Sans (body) as the type pairing. Consistent card radius, shadow depth, and motion language across all pages.

Challenges we ran into

We started with a vague idea and an animated rabbit. By the end, we had 10 fully interactive lesson pages, 4 learning tracks, a carrot economy, and a voice AI companion. As students without an expert finance background ourselves, making sure each lesson was genuinely educational (and not just quiz-shaped filler, or worse, completely inaccurate) took research and writing time. Additionally, we wanted the entire website to feel fun and engaging, and not like a chore to use. We specifically picked the bunny's tone to be lighthearted, curious, and a little cheeky. Users of FinPet are here to both improve themselves and have fun!

Voice Activity Detection was the hardest technical problem. We spent hours trying to implement raw WebSocket audio streaming to ElevenLabs, capturing mic input, downsampling to 16kHz PCM16, sending base64 chunks, but VAD never reliably triggered agent responses. The issue was that ElevenLabs' VAD is tuned for their official SDK's audio pipeline, not raw WebSocket streams. We eventually switched to their embeddable widget and used shadow DOM injection for customization, which worked perfectly.

Accomplishments that we're proud of

As relative newbies to the hackathon world, we've learned a lot over these past 24 hours. In particular, we think the moment when we came up with the idea of FinPet itself was most exciting. FinPet is something we'd use ourselves, and we can't wait to share it with others.

What we learned

Emotional design is a technical discipline. The decision to use an animated rabbit instead of a dashboard widget isn't just aesthetic, but it changes how users relate to their own financial data.

Consistency is a force multiplier. Investing in a shared sidebar component, shared CSS variables, and a shared lesson template meant that once the first lesson was solid, each subsequent one took a fraction of the time. The taxes track (4 lessons) was built and styled in a single session because all the primitives already existed.

Pure JavaScript is underrated. No React, no bundler, no hydration waterfalls. Every page loads instantly. Every calculator responds in under a frame. The quiz engine is ~40 lines. Sometimes the best framework is no framework.

The Rule of 72 is genuinely surprising to people (including us!).

$$t_{double} = \frac{72}{r}$$

At 10% annual return: ~7.2 years to double. At a 0.5% savings account: 144 years. We built a calculator around it and watched testers do a double-take every time.

What's Next for FinPet

Plaid integration — automatic transaction import, so users don't have to log their purchases manually.

Biscuit evolution — your pet gains new forms and animations as your Wellness Score improves over time.

Social layer — compare Wellness Scores with friends and send each other carrot points.

Mobile app — the emotional feedback loop works even better with push notifications.

Built With

Share this project:

Updates