Skip to content
/EquiPay
Productivity / CareeriOS · Android

EquiPay

Split Smart, Settle Easy

Case Study
Users
7+
Screens
React Native 0.84TypeScriptZustandSQLite (WAL)React NavigationReact Native ReanimatedReact Native SVGMaterial Design Icons

App Demo

Watch the app in action

About the Project

EquiPay is a premium expense-splitting mobile app built with React Native 0.84, TypeScript, and a fully offline SQLite backend. It simplifies group expense management by letting users create groups, log shared expenses with flexible split modes, and automatically calculate optimised settlement paths using a Min Cash Flow algorithm — reducing the number of transactions needed to settle all debts by up to 70%.

The architecture follows a clean feature-layered pattern with unidirectional data flow: screens → Zustand stores → DB helpers → SQLite. A singleton connection manager with WAL mode powers the data layer, and a useDatabase initialisation hook gates navigation render until the DB is ready. Collision-resistant, human-readable IDs are generated on-device using a custom timestamp + base36 scheme.

The app ships with three split modes (equal, unequal, percentage) with a real-time split preview that validates that the total matches the expense amount. A circular SVG debt graph visualises pairwise debts across group members with animated directional arrows whose thickness scales with debt magnitude. Users can switch active perspective to view the app as any member — every balance, settlement, and list updates accordingly.

Built around a dark-only premium theme with centralised design tokens (colors, spacing, typography, radii), native-feel animations via react-native-reanimated, full safe-area handling, and empty states across every list. Demo data is seeded on first launch for a frictionless first-run experience.

Key Highlights

Min Cash Flow algorithm reduces settlement transactions by up to 70%
Fully offline-first — no backend server, 100% local SQLite persistence
Interactive circular SVG debt graph with animated directional arrows
Three split modes: equal, unequal amounts, and percentage with live preview
Multi-user perspective switching — view the app as any member
Singleton DB connection with WAL mode and Promise-based API
Zustand stores per domain (users, groups, expenses) with caching
Dark-mode premium UI with centralised design token system

Technical Breakdown

Feature areas & implementation details

Architecture & Data Layer
Feature-layered architecture: UI → Zustand stores → DB helpers → SQLite
Singleton SQLite connection with WAL mode and Promise-based API
6 tables: users, groups_, group_members, expenses, splits, settlements
18 typed DB helpers with CHECK constraints and UNIQUE indices
useDatabase hook gates navigation render until DB is initialised
Custom timestamp + base36 ID generator — collision-resistant and readable
Min Cash Flow Engine
Greedy O(n²) Min Cash Flow algorithm to minimise settlement transactions
Nets each member's balance, then iteratively matches max creditor with max debtor
Reduces naive O(n²) settlements to ~O(n) in most group compositions
Pairwise debt calculation builds debtor→creditor Map for graph edges
Live recalculation after every new expense, split, or marked settlement
Expense Tracking
Three split modes — equal (auto), unequal (custom amounts), percentage
Real-time split preview validating total matches expense amount
Payer selection via avatar chips with up to 6 visible at once
Participant checkboxes with per-person share calculation
Atomic expense + splits creation in a single transaction
On-the-fly user creation during group setup flow
Settlement & Visualisation
Settlement screen lists optimised From → Amount → To cards
Mark-as-settled with ConfirmModal and live balance recalculation
Circular SVG graph with animated arrows proportional to debt size
Color-coded balance legend (green owed, red owing, gray settled)
Multi-user perspective switching from Profile screen
UX & Design System
Dark-only premium theme with lime-green CTA accent
Centralised design tokens — colors, spacing, radii, typography
Native-feel animations via react-native-reanimated (spring, fade, slide)
Full safe-area handling, empty states, and input validation across every screen
Demo data seeded on first launch for frictionless first-run experience

Other Projects

View All →
Arkmantra
Ayurvedic Cosmetics E-Commerce Storefront & Admin

A highly hardened, full-featured D2C storefront and admin control panel designed...

Soul33 – The Beacon
Spirituality, Meditation & Mindfulness Platform

A cross-platform spiritual wellness app live on iOS & Android with Free, Seeker ...

Yoke Yoga
Social Wellness, Live Yoga & Learning Platform

Production yoga social platform — TikTok-style Reels, ZEGOCLOUD live streaming +...