FairSplit

Splitting bills with friends made simple and transparent.

FairSplit is a web application designed to simplify the process of dividing shared expenses among groups. Whether you're splitting rent, sharing groceries, or settling expenses from a group trip, FairSplit automatically calculates who owes what to whom, eliminating the need for manual calculations and reducing conflicts over money.

Overview

FairSplit is a modern, responsive web application that enables users to:

• Create expense groups (rooms) with multiple participants
• Record shared expenses and assign them to specific payers
• Distribute costs fairly among group members
• Automatically calculate settlement amounts using an optimized algorithm
• View a clear summary of who owes whom and how much
• Persist all data locally in the browser without requiring a backend server

The application uses an intelligent settlement algorithm that minimizes the number of transactions needed to resolve all debts, making the settlement process as efficient as possible.

Key Features

Expense Management

• Create and manage multiple expense groups with custom names
• Add, edit, and delete expenses within groups
• Assign expense payers and distribute costs among participants
• View detailed activity history for each group

Smart Settlement Calculation

• Automatic computation of net balances for each participant
• Optimized algorithm that simplifies transactions to minimize the number of payments required
• Groups payments by payee for clarity
• Example: If three people owe money to one person, the system identifies this pattern and reduces unnecessary cross-payments

User Experience

• Intuitive landing page for user identification and group selection
• Responsive design supporting both desktop and mobile devices
• Smooth animations and transitions using Framer Motion
• Material Design interface with customizable themes
• Real-time updates as expenses are modified

Data Persistence

• Local storage-based persistence without requiring server infrastructure
• Data survives browser sessions and page refreshes
• No internet connection required for core functionality (offline-capable)

Technology Stack

Frontend Framework

• Next.js 15.1.11 - React framework with server-side rendering and API routes
• React 19.2.3 - UI component library
• React DOM 19.2.3 - DOM rendering

Styling and UI

• Material-UI (MUI) 6.4.7 - Enterprise-grade component library
• Emotion 11.14 - CSS-in-JS styling solution
• Framer Motion 12.5.0 - Animation library for declarative motion effects

State Management

• Zustand 5.0.3 - Lightweight state management library
• Local Storage API - Browser-based data persistence

Development Tools

• ESLint 9 - Code quality and consistency
• Google Fonts - Optimized typography

Project Structure

src/
├── app/                          # Next.js app directory and pages
│   ├── page.js                   # Landing page (/)
│   ├── home/                     # Home page (/home)
│   ├── room/[id]/                # Room detail view (/room/[id])
│   ├── nueva-actividad/          # Expense creation (/nueva-actividad)
│   ├── resumenPagos/             # Payment summary (/resumenPagos)
│   ├── ver-acciones/             # Activity history (/ver-acciones)
│   └── layout.js                 # Root layout with providers
├── components/                   # Reusable React components
│   ├── Room.js                   # Room card component
│   ├── RoomView.jsx              # Desktop room detail view
│   ├── RoomViewMobile.jsx        # Mobile room detail view
│   ├── CreateRoomModal.jsx       # Room creation modal
│   ├── Activity.js               # Activity/expense component
│   └── ...                       # Additional UI components
├── functions/                    # Utility functions
│   ├── getDebtsUsers.js          # Core settlement calculation algorithm
│   ├── getRandomUserIcon.js      # User avatar generation
│   └── getRandomRoomColor.js     # Room color assignment
├── themes/                       # MUI theme configuration
├── providers/                    # React context providers
└── lib/                          # Library utilities

public/
├── assets/
│   ├── images/                   # Application imagery
│   ├── icons/                    # SVG icons
│   └── fonts/                    # Custom fonts

Getting Started

Prerequisites

• Node.js 18 or higher
• npm, yarn, or similar package manager

Installation

1. Clone the repository:

git clone [repository-url]
cd fair-split

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

The application will automatically reload as you make changes to the code.

Build for Production

npm run build
npm run start

How It Works

User Flow

1. Landing Page: User enters their name and either creates a new expense group or joins an existing one
2. Home Screen: User can view all their expense groups and create new ones (limited to 4 groups)
3. Room Detail: User views all expenses in a group and can add, edit, or delete expenses
4. Settlement: User views the calculated settlement summary showing who owes whom

Settlement Algorithm

The application uses a greedy algorithm to calculate the minimum number of transactions required to settle all debts:

1. Calculate the net balance for each participant (total paid minus total owed)
2. Identify who owes money (negative balance) and who is owed money (positive balance)
3. Match debtors with creditors to minimize the number of transactions
4. Aggregate payments by creditor for clarity

Future Enhancements

AI-Powered Features

Expense Categorization

• Implement automatic expense categorization using natural language processing
• ML model to suggest category based on expense description
• Analytics dashboard showing spending patterns by category
• Insights like "dining expenses average 30% of total"

Smart Expense Splitting

• AI-powered intelligent splitting suggestions based on historical patterns
• Detect common expense types (utilities, rent, groceries) and suggest appropriate split methods
• Recommend equitable splits based on group dynamics and past behavior

Financial Insights and Recommendations

• Generate spending summaries and trends
• Identify potential issues (one person consistently overpaying, imbalanced contributions)
• Suggest optimization strategies to reduce settlement complexity
• Monthly or periodic reconciliation reports with AI commentary

Duplicate and Fraud Detection

• ML model to detect potential duplicate expense entries
• Anomaly detection for unusual transactions or patterns
• Warnings for transactions outside normal group behavior

Conversational Expense Entry

• Voice-to-text expense creation
• Natural language processing to extract expense details from user input
• Chat-like interface for adding expenses conversationally

Predictive Analytics

• Forecast future expenses based on historical data
• Estimate upcoming settlement amounts
• Budget recommendations for group activities

Multi-Language Support with Translation

• Implement automatic expense description translation using AI
• Support for multilingual groups

Technical Enhancements

• Backend integration with Firebase or similar for cloud synchronization
• User authentication and account management
• Real-time collaboration features
• Expense export (PDF, CSV formats)
• Mobile app versions (React Native)
• Payment gateway integration for automated settlements
• Dark/light theme toggle
• Advanced filtering and search capabilities

Configuration

The application uses:

• MUI Theme: Customizable color scheme and component styling in src/themes/theme.js
• Font Configuration: Optimized fonts loaded via Next.js in src/app/layout.js
• ESLint: Code quality rules in eslint.config.mjs

Browser Support

• Modern browsers supporting ES2020+
• Chrome, Firefox, Safari, and Edge
• Mobile browsers on iOS and Android

License

This project is available under the MIT License.

Contributing

Contributions are welcome. Please ensure code follows the ESLint configuration and maintains the current code style and structure.