Money Mirror — Project Story

💡 Inspiration

Most people know they should track their expenses. But here's the thing — even those who do are barely scratching the surface. They open a spreadsheet, log a number, and close it. No reflection. No "aha" moment. Just a list of transactions staring back at them.

I noticed two problems that kept showing up together:

1. Generic tracking apps don't teach you anything. They record your spending but never explain what it means for you — your habits, your patterns, your financial health relative to where you are in life.
2. The UI makes you not want to come back. If an app feels like a chore to open, it becomes one. Most expense trackers look like they were designed for accountants, not people trying to learn.

That gap — between logging money and understanding it — is where Money Mirror was born.

---

🪞 What It Does

Money Mirror is a personal finance app built around one idea: your own spending is the best financial teacher you have.

• Easy expense tracking — log spending quickly, with smart organisation by category
• Personalised insights — see patterns in your habits over time, not just raw numbers
• Benchmark comparisons — compare your spending to the average person of your age and income bracket, so you know where you stand
• Financial literacy, built in — instead of generic money tips, the app surfaces lessons that are directly tied to your transactions
• Points & rewards — earn points for healthy financial habits, making the experience engaging enough to actually stick with

The goal isn't just awareness. It's education through reflection — turning everyday spending decisions into a personal finance curriculum.

---

🛠️ How I Built It

Money Mirror was built entirely with core web technologies:

• HTML — structure and layout of all screens
• CSS — custom UI components and visual design, built from scratch to feel modern and inviting
• JavaScript — app logic, data handling, insight generation, and interactivity

Every component was hand-crafted to make sure the experience felt intentional — because the whole point of the app is that you want to look at it.

The comparison engine uses simple statistical benchmarks. For a user with income $I$ and age $A$, their spending in category $c$ is compared against a reference value $\mu_{c}(A, I)$:

$$ \Delta_c = \frac{S_c - \mu_c(A,\, I)}{\mu_c(A,\, I)} \times 100 $$

Where $S_c$ is the user's actual spending in category $c$, and $\Delta_c$ is the percentage deviation from the average. A positive $\Delta_c$ means you're spending more than your peers; negative means you're under.

This single number powers a lot of the personalised insight cards in the app.

---

🚧 Challenges

The hardest part was building the UI components from scratch.

It's one thing to have a vision for how an app should feel — clean, modern, something you actually want to open every day. It's another to implement it with raw HTML and CSS, without a component library to lean on.

Getting interactive elements like charts, insight cards, and the points system to look and behave correctly across different states took far more iteration than expected. Small details — hover states, spacing, typography hierarchy, smooth transitions — each one seems minor, but together they're the difference between an app that feels polished and one that feels like a prototype.

That challenge also became the biggest learning: UI is product. If people don't enjoy the experience of looking at their finances, they won't. The design is the feature.

---

📚 What I Learned

• Financial literacy isn't about more information — it's about personal relevance
• Building UI from scratch deepens your understanding of every design decision
• Gamification (points, streaks, rewards) isn't gimmicky when it's tied to real behaviour change
• The most powerful insight you can give someone about money is a comparison to people like them — not to an abstract ideal

---

Financial literacy shouldn't feel hard. Money Mirror makes it personal — learn about money through the spending decisions you already make every day.

Built With

• claude
• css3
• html5
• javascript
• vercel