Trip Bill Splitter

• 

  Database

• 

  Login/Register

• 

  Adding new bill

• 

  Dashbord

Inspiration

The inspiration came from real-life situations—group dinners, college trips, and shared purchases—where calculating who owes what often led to confusion, errors, or even disputes. Existing apps were either too complicated or lacked features like currency conversion and group-based tracking. I wanted a solution that felt intuitive, was accessible to all, and handled everything automatically.

What it does

The Smart Bill Splitter is a web-based application designed to simplify the often tedious process of splitting expenses among friends, family, or colleagues. Whether it's a dinner bill, trip costs, or shared subscriptions, this tool ensures fairness, transparency, and ease of use.

How we built it

Frontend: Built with React and TypeScript for strong type safety and scalable component-based architecture. Backend/Database: Used Supabase, a powerful backend-as-a-service, to manage authentication, real-time data syncing, and storage. Core Features: Create or join bill rooms using unique links Add expenses with custom or equal splits Real-time updates across users in the same room Multi-currency support User-friendly and responsive UI for all devices

Challenges we ran into

Real-time collaboration: Ensuring that all users see consistent updates instantly was tricky. Handling Supabase subscriptions and avoiding race conditions took careful planning. Edge case handling: Users joining late, leaving mid-way, or changing their shares posed a lot of logic challenges. Currency conversion: Integrating reliable currency APIs and caching exchange rates efficiently without affecting performance. Group data sync: Ensuring users are correctly associated with their respective rooms, even across sessions, required secure and optimized queries.

Accomplishments that we're proud of

Built a fully functional, real-time expense splitter with smooth UX and accurate calculations. Successfully implemented group rooms using Supabase with persistent state sharing. Developed a responsive and mobile-friendly UI that works great on all screen sizes. Achieved clean, type-safe architecture using modern React + TypeScript best practices. Integrated multi-currency support, making it ready for global use

What we learned

Deepened our understanding of Supabase’s real-time and authentication APIs. Learned to design scalable state architecture using React Context and Hooks. Gained experience in handling concurrency issues and live updates in collaborative apps. Mastered TypeScript integration in full-stack applications. Understood the importance of edge case testing and planning for all user behaviors.

What's next for trip bill splitter

Role-based access control for admins and participants Analytics dashboard showing spending patterns per trip/group PDF/CSV export of bills and settlements In-app chat or comment threads on each expense Offline support with syncing when back online Payment gateway integration for direct settlement

Built With

• postgresql
• react
• supabase
• supabase-auth
• tailwind-css
• typescript
• vite