Expense Splitter Calculator

The Inspiration 💡

We've all been there - standing awkwardly after a group dinner, trying to figure out who owes what while someone frantically calculates tips and splits on their phone. Last month, during a weekend trip with friends, we spent more time arguing over receipts than enjoying our vacation. That's when I realized we needed a dead-simple solution that could handle complex group expenses without the drama.

What I Learned 🎓

Building this project taught me the surprising complexity behind "simple" math. Creating an optimal settlement algorithm that minimizes transactions between people was more challenging than expected - it's essentially a debt consolidation problem that required careful balance calculations and transaction optimization.

I also discovered the importance of intuitive UX design when dealing with money. People get anxious about financial calculations, so every button, every input field, and every result display needed to feel trustworthy and transparent.

How I Built It 🛠️

The entire app was built using React with modern hooks for state management, styled with Tailwind CSS for that sleek, contemporary look. Here's the core settlement algorithm:

// Calculate optimal settlements
const calculateSettlements = (balances) => {
 const creditors = Object.entries(balances).filter(([_, amount]) => amount > 0);
 const debtors = Object.entries(balances).filter(([_, amount]) => amount < 0);

 // Minimize transactions by matching largest debts with largest credits
 return optimizeTransactions(creditors, debtors);
};

## Challenges faced
The biggest challenge was handling edge cases - what happens when someone pays for everything? How do you handle partial participants in expenses? The math gets complex fast when you're trying to minimize the number of transactions while keeping everything fair.
UI/UX challenges were equally tricky. How do you make financial calculations feel approachable and not intimidating? I went through multiple design iterations, eventually settling on a friendly, gradient-heavy design with clear visual hierarchy.
The final hurdle was mobile responsiveness. Since most people would use this on their phones while out with friends, every interaction had to be thumb-friendly and work perfectly on small screens.

## The Result
What started as a weekend frustration became a polished web app that turns messy group expenses into crystal-clear settlements. No more splitting friendships over split bills!
Try https://steady-meerkat-b7f596.netlify.app/ and see how it transforms your group money management.

Built With

• node.js
• react
• typescript