SplitBill: Less Math, More Memories

Inspiration

It all started during a weekend getaway with three friends. We had an amazing time, but the trip ended with a two-hour ordeal on the final night. We sat in a circle, surrounded by crumpled receipts for petrol, dinners, and entrance fees, trying to figure out "who owed whom."

The math was a nightmare. Some people shared an appetizer while others didn't; some paid for the tolls while others covered the hotel. The outcome to calculate shared expenses manually was lengthy, complex, and honestly, a mood killer. We realized then that a simple "divide by N" approach wasn't enough—we needed a tool that handled itemized splitting with precision.

What it does

SplitBill is a full-stack web application designed to bring transparency and speed to group finances. It allows users to create bills, add itemized costs (like specific dishes or travel expenses), and assign those costs to specific friends. The application automatically handles the complex math, providing an interactive dashboard with a "Grand Summary" that shows exactly how much you owe or are owed per person. It is fully mobile-responsive, ensuring that friends can settle up right at the dinner table.

How we built it

Together with Richie Goh Rui Xin, I built SplitBill using a modern full-stack architecture:

  • Backend: We used Spring Boot for its robustness and MySQL to handle complex relational data, such as many-to-many friendships and participation in specific bill items.

  • Frontend: We utilized React with Vite and Tailwind CSS to create a sleek, fast UI optimized for devices as narrow as 360px.

  • Authentication: We integrated Clerk to handle secure user management and JWT-based authentication.

Challenges we ran into

  1. The Logic of the "Split": Mapping how a single item on a bill can be shared by a dynamic number of people required careful database design and complex JPA mappings to ensure data integrity.

  2. CORS and Production Hurdles: Transitioning from localhost to a live Vercel deployment presented significant CORS challenges. We had to carefully configure allowed origins to support both our local development environments and the production URL.

  3. Real-time Sync: Ensuring the "Grand Summary" updated accurately for all involved participants whenever a new bill was created required a solid understanding of transactional service layers.

  4. Project Management & Version Control: Collaborating in a shared repository meant dealing with frequent merge conflicts, especially when we were both refining the same configuration files or core entities. We had to establish a disciplined workflow of feature branching and constant communication to ensure our contributions merged smoothly without losing progress.

Accomplishments that we're proud of

We are particularly proud of achieving a seamless integration between Clerk and our Spring Boot backend, resulting in a secure, production-ready authentication flow. Additionally, creating a UI that remains functional and aesthetic on mobile devices while displaying complex tabular data was a significant design win for us.

What we learned

Beyond the technical stack, this project taught us:

  • The Power of User-Centric Design: We learned that a tool is only useful if it's faster than a calculator, leading us to focus on reducing clicks during bill creation.

  • Security Orchestration: Mastering JWT-based security gave us a deep appreciation for modern data protection.

  • Full-Stack Ownership: Managing every layer—from the database schema to the CSS watermark in the footer—was an intensive lesson in end-to-end ownership for both Richie and myself.

What's next for SplitBill

We plan to implement OCR (Optical Character Recognition) to allow users to scan physical receipts directly into the app. We also intend to add multi-currency support for international trips and integrate a notification system to remind friends when it's time to settle their balances. We also plan to implement payment gateway so that friends can settle their bills directly through the app.

Built With

Share this project:

Updates