A beautiful, responsive web application for managing and splitting shared expenses among groups of friends, family, or colleagues. Built with React, TypeScript, and Tailwind CSS.
- Quick Sign Up/Login: Simple email-based authentication
- Guest Access: Try the app without creating an account
- Profile Management: Update your display name and email
- Create Groups: Set up expense groups for trips, events, or shared living
- Invite System: Share 6-character invite codes to add members
- Visual Member Display: See all group participants at a glance
- Multiple Groups: Manage unlimited expense groups simultaneously
- Add Expenses: Record purchases with description, amount, date, and payer
- Flexible Splitting: Choose between equal splits or custom amounts
- Edit & Delete: Full CRUD operations for expense management
- Visual Expense History: Clean timeline view of all group expenses
- Real-time Balances: Automatic calculation of who owes what
- Settlement Suggestions: Optimized payment recommendations to minimize transactions
- Visual Indicators: Color-coded balance displays (green for owed, orange for owing)
- Summary Statistics: Total expenses, creditors, and debtors overview
- Mobile-First Design: Optimized for smartphones and tablets
- Responsive Layout: Seamless experience across all screen sizes
- Smooth Animations: Polished micro-interactions and transitions
- Intuitive Navigation: Bottom navigation on mobile, sidebar on desktop
- Local Storage: All data stored securely in your browser
- Export/Import: Backup and restore your data as JSON files
- Data Statistics: View usage statistics and app metrics
- Node.js (version 16 or higher)
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd splitwise-app
-
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173to view the application
npm run buildThe built files will be in the dist directory, ready for deployment.
- Sign Up or Continue as Guest: Create an account or try the app without registration
- Create Your First Group: Set up a group for your shared expenses
- Invite Members: Share the 6-character invite code with friends
- Start Adding Expenses: Record shared purchases and split them fairly
- Add Expense: Click the "+" button to record a new expense
- Choose Payer: Select who paid for the expense
- Select Participants: Choose who should split the cost
- Split Options: Use equal split or set custom amounts
- Save: The expense is automatically added and balances updated
- Navigate to Balances: See who owes money and who should receive it
- Settlement Suggestions: Follow the optimized payment recommendations
- Track Progress: Monitor as debts are settled over time
- Export Data: Download your data for backup (Settings → Export Data)
- Import Data: Restore from a previous backup (Settings → Import Data)
- Clear Data: Reset the app completely if needed (Settings → Danger Zone)
- Frontend: React 18 with TypeScript
- Styling: Tailwind CSS with custom design system
- Icons: Lucide React icon library
- Build Tool: Vite for fast development and building
- State Management: React Context API with useReducer
- Data Persistence: Browser localStorage with JSON serialization
- Component-Based: Modular React components for maintainability
- Context Pattern: Centralized state management for app data
- Custom Hooks: Reusable logic for common operations
- Utility Functions: Pure functions for calculations and formatting
- TypeScript: Full type safety throughout the application
- Balance Calculation: Tracks payments and splits to determine net balances
- Settlement Optimization: Minimizes the number of transactions needed to settle all debts
- Equal Splitting: Handles rounding to ensure total splits equal the expense amount
The app uses a sophisticated balance calculation system:
- Track Payments: Record who paid for each expense
- Calculate Shares: Determine each person's portion of expenses
- Net Balances: Subtract shares from payments to get net position
- Settlement Optimization: Use a greedy algorithm to minimize transactions
interface Expense {
id: string;
groupId: string;
description: string;
amount: number;
paidBy: string;
date: string;
participants: ExpenseParticipant[];
createdAt: string;
updatedAt: string;
}- Initial release with core functionality
- Group management and expense tracking
- Balance calculations and settlement suggestions
- Mobile-responsive design
Made with ❤️ for splitting expenses fairly and keeping friendships intact!