A world-class expense splitting and debt minimization platform.
The "SettleUP" platform is built with a commitment to accessibility (WCAG 2.2 AA standards).
- Keyboard Navigation: All interactive elements (buttons, inputs, group cards) are fully accessible via
Taband include clear visual focus indicators. - Color Contrast: All text and interactive elements maintain a contrast ratio of at least 4.5:1 against their backgrounds in both dark and light modes.
- ARIA Labels: Interactive components like
ThemeToggleandCustomButtonuse appropriate ARIA labels for screen reader support. - Tabular Numbers: Financial data uses
tabular-numsfor consistent vertical alignment, aiding readability for users with cognitive or visual impairments. - Motion Controls: All animations are optimized for 60fps and respect
prefers-reduced-motionsettings where applicable.
- React 18+: Modern functional components with hooks.
- Tailwind CSS v4: Utility-first styling with custom theme variables.
- Framer Motion: Fluid UI transitions and micro-interactions.
- Lucide React: Consistent, high-quality iconography.
- Firebase: Secure authentication and real-time database.
- Glassmorphism: 24px backdrop blur with subtle borders.
- Bento Grid: Responsive layout for dashboard and details.
- Typography: Inter Variable font for maximum legibility.
Managing shared expenses in groups (trips, roommates, events) often leads to confusion and unnecessary transactions.
People typically:
- forget who paid for what
- struggle to track balances
- make multiple redundant payments
SettleUp solves this by:
- tracking all expenses in a structured way
- calculating exact balances for each user
- minimizing the number of transactions required to settle debts
- Secure user login & signup using Firebase Authentication
- Protected routes for authorized access
- Create and manage groups
- Add members to groups
- View all groups a user is part of
-
Add expenses with:
- amount
- payer
- participants
- description
-
Real-time updates using Firestore
- Automatically computes how much each user owes or should receive
- Handles multiple expenses and participants
- Minimizes the number of transactions required to settle balances
- Uses a greedy algorithm to match largest debtor with largest creditor
Example:
Before: A → B ₹100 B → C ₹100
After: A → C ₹100
All expenses are stored in Firestore under:
groups/{groupId}/expenses
- Each expense is split equally
- Net balance is computed per user
-
Users are divided into:
- creditors (positive balance)
- debtors (negative balance)
-
Largest debtor is matched with largest creditor
-
Transactions are generated until all balances become zero
-
Frontend: React (Vite)
-
State Management: Context API
-
Backend: Firebase
- Authentication
- Firestore Database
-
Routing: React Router
-
Styling: Tailwind CSS
/src
/components
/pages
/context
/services
/hooks
/utils
- Functional Components
- useState, useEffect
- Context API (global state)
- Custom Hooks (useGroups, useExpenses)
- useMemo (performance optimization)
- Controlled Components
- Routing (React Router)
git clone https://github.com/your-username/settleup.git
cd settleup
npm install
npm run devCreate a .env file and add your Firebase config:
VITE_API_KEY=your_key
VITE_AUTH_DOMAIN=your_domain
VITE_PROJECT_ID=your_project_id
- Split by percentage or custom amounts
- Group invitations via email
- Expense categories & analytics
- Mobile responsiveness improvements
Add your demo video link here
Add your deployed link (Vercel / Netlify)
Your Name
This project focuses on solving a real-world problem using clean architecture and efficient algorithms, rather than just building UI.
It demonstrates:
- system design thinking
- optimization techniques
- real-world problem solving