NG
2023
Split-It - Expense Management Web App

Split-It - Expense Management Web App

JavaScriptHTML5CSS3FirebaseFirestoreTailwind CSSWeb App

Modern web application for managing and splitting expenses within groups. Built with vanilla JavaScript and Firebase, featuring real-time expense tracking, smart splitting algorithms, and comprehensive reporting for friends, flatmates, and roommates.

Overview

Split-It is a modern web application designed to simplify expense management for groups. Whether you're splitting bills with friends, managing household expenses with flatmates, or tracking shared costs with roommates, Split-It provides an intuitive interface to track transactions, automatically calculate balances, and generate settlement reports.

Key Features

The application offers comprehensive expense management capabilities:

  • User Authentication: Secure signup and login using Firebase Authentication with email/password
  • Group Management: Create and manage multiple expense groups with member invitations
  • Transaction Tracking: Add, edit, and delete expense transactions with detailed descriptions
  • Smart Expense Splitting: Automatically split expenses equally among selected group members
  • Real-time Reports: View detailed reports showing individual balances and settlement suggestions
  • Statistics Dashboard: Track total spending, personal spending, and transaction counts across all groups
  • Member Management: Add new members to existing groups via email invitations
  • Responsive Design: Modern UI built with Tailwind CSS that works seamlessly on desktop and mobile devices

Technical Implementation

Built with modern web technologies and Firebase backend services:

  • Frontend: Pure JavaScript (ES6+) with HTML5 and CSS3 for a lightweight, fast application
  • UI Framework: Tailwind CSS for responsive, modern design with utility-first styling
  • Backend Services: Firebase platform integration:
    • Firebase Authentication for secure user management (Email/Password provider)
    • Cloud Firestore for real-time NoSQL database with subcollections
    • Firebase Hosting for deployment and custom domain configuration
  • Architecture: Multi-page application with modular JavaScript files for authentication, group management, and transaction logic
  • Data Structure: Optimized Firestore schema with user collections, group documents, and transaction subcollections
  • Algorithm: Custom expense splitting algorithm that calculates balances and generates settlement suggestions
  • Security: Firebase security rules ensuring users can only access their own groups and transactions

Expense Splitting Algorithm

The application implements a sophisticated expense splitting algorithm with O(n) complexity for balance calculations:

Core Splitting Logic:

  • When a user adds an expense, they pay the full amount upfront
  • The expense is divided equally among selected participants
  • Balance calculation handles two scenarios:
    • Payer involved: Payer receives credit of price × (countUsers - 1) / countUsers (e.g., ₹300 split 3 ways → ₹200 credit)
    • Payer not involved: Payer receives full credit of price (e.g., ₹200 paid for others → ₹200 credit)
  • Each participant's balance decreases by their share (price / countUsers)

Expense Splitting Pseudocode:

FUNCTION ADD_EXPENSE(payerIndex, price, userlist, description)
    // Count participants
    countUsers = COUNT_TRUE(userlist)
    IF countUsers == 0 THEN RETURN ERROR
    
    splitAmount = price / countUsers
    
    // Update balances
    FOR i = 0 TO report.length - 1 DO
        IF i == payerIndex THEN
            IF userlist[i] == TRUE THEN
                // Payer involved: credit = price - their share
                report[i] += price * (countUsers - 1) / countUsers
            ELSE
                // Payer not involved: full credit
                report[i] += price
            END IF
        ELSE
            IF userlist[i] == TRUE THEN
                // Participant owes their share
                report[i] -= splitAmount
            END IF
        END IF
    END FOR
    
    SAVE_TRANSACTION(payerIndex, price, userlist, description)
    UPDATE_GROUP_REPORT(report)
END FUNCTION

Settlement Algorithm:

  • Implements a greedy algorithm to find minimum transactions needed to settle all debts
  • Sorts users by balance (debtors first, creditors last)
  • Iteratively matches largest debtor with largest creditor
  • Complexity: O(n²) worst case, typically O(n log n) due to sorting
  • Ensures money conservation invariant: sum of all balances always equals zero

Settlement Algorithm Pseudocode:

FUNCTION CALCULATE_SETTLEMENTS(report, usernames)
    // Create [balance, index] pairs and sort by balance
    tempList = []
    FOR i = 0 TO report.length - 1 DO
        tempList.append([report[i], i])
    END FOR
    SORT tempList BY balance ASCENDING
    
    settlements = []
    
    WHILE tempList is not empty DO
        debtor = tempList[0]      // Most negative (owes most)
        creditor = tempList[last] // Most positive (owed most)
        
        IF ABS(debtor[0]) < 0.01 AND ABS(creditor[0]) < 0.01 THEN
            BREAK
        END IF
        
        debtAmount = ABS(debtor[0])
        creditAmount = creditor[0]
        
        IF debtAmount > creditAmount THEN
            settlementAmount = creditAmount
            debtor[0] += settlementAmount
            creditor[0] = 0
            REMOVE creditor FROM tempList
        ELSE
            settlementAmount = debtAmount
            debtor[0] = 0
            creditor[0] -= settlementAmount
            REMOVE debtor FROM tempList
        END IF
        
        settlements.append({
            from: usernames[debtor[1]],
            to: usernames[creditor[1]],
            amount: settlementAmount
        })
        
        SORT tempList BY balance ASCENDING
    END WHILE
    
    RETURN settlements
END FUNCTION

Transaction Management:

  • Editing: Reverses old transaction balances, then applies new calculations
  • Deleting: Reverses all balance changes from the deleted transaction
  • Maintains data integrity and accurate balance tracking across all operations

Screenshots

Split-It Screenshot 1Split-It Screenshot 2Split-It Screenshot 3
Always open to connect

Want to connect or collaborate?.