💸 SplitFlow

Split Bills · Track Debts · Flow Smoothly

SplitFlow is a modern expense-sharing platform designed for friends, roommates, travelers, couples, and teams.

Unlike traditional expense-sharing apps, SplitFlow introduces a unique Split ID system, allowing users to connect and collaborate without sharing phone numbers or personal contact information.

Built with React, TypeScript, Supabase, and Netlify, SplitFlow provides a secure, scalable, and intuitive experience for managing shared expenses and settlements.

🌐 Live Demo: https://splitflow-ai.netlify.app/

---

✨ Key Features

🔐 Secure Authentication

• Email & Password Authentication
• Supabase Auth Integration
• Protected Routes
• Persistent Sessions

🆔 Unique Split ID System

Every user receives a permanent Split ID.

Example:

SPL-X999VK

Users can:

• Search and connect using Split IDs
• Join groups without phone numbers
• Maintain privacy while collaborating

👥 Group Expense Management

Create and manage groups for:

• Trips
• Roommates
• Couples
• Events
• Teams

Features:

• Group Creation
• Member Management
• Expense Tracking
• Balance Monitoring

💰 Smart Expense Splitting

Support for multiple split strategies:

• Equal Split
• Percentage Split
• Custom Split
• Unequal Split

📄 Receipt & Document Uploads

Attach supporting documents directly to expenses.

Supported formats:

• PNG
• JPG
• JPEG
• PDF

📊 Interactive Dashboard

Real-time financial insights including:

• Total Receivable
• Total Owed
• Net Balance
• Spending Trends
• Group Activity

📱 QR Code Onboarding

Generate QR codes for:

• User Identification
• Quick Connections
• Faster Group Joining

---

🏗️ Architecture

flowchart TB

    User[👤 User]

    User --> Frontend[⚛️ React + Vite Frontend]

    Frontend --> Auth[🔐 Supabase Auth]
    Frontend --> Database[🗄️ PostgreSQL Database]
    Frontend --> Storage[📂 Supabase Storage]

    Auth --> RLS[🛡️ Row Level Security]
    Database --> RLS

    Database --> Groups[(Groups)]
    Database --> Expenses[(Expenses)]
    Database --> Settlements[(Settlements)]

    Storage --> Receipts[(Receipts)]

    Frontend --> Netlify[🌐 Netlify Hosting]

Loading

---

🛠️ Tech Stack

Frontend

• React
• TypeScript
• Vite
• Tailwind CSS
• Framer Motion
• Lucide Icons

Backend

• Supabase

Database

• PostgreSQL

Authentication

• Supabase Auth

Storage

• Supabase Storage

Hosting

• Netlify

---

🔐 Security

SplitFlow follows modern security best practices.

• Row Level Security (RLS)
• Supabase Security Policies
• Protected Routes
• JWT Authentication
• Environment Variable Protection
• File Upload Validation
• Secure Database Access

---

⚙️ Local Development

Clone Repository

git clone https://github.com/YOUR_USERNAME/splitflow.git
cd splitflow

Install Dependencies

npm install

Configure Environment Variables

Create a .env file:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Start Development Server

npm run dev

Application will run at:

http://localhost:5173

Production Build

npm run build

---

🚀 Deployment

SplitFlow is deployed using:

• Netlify
• Supabase
• PostgreSQL
• Supabase Storage

Build Configuration:

Build Command: npm run build
Publish Directory: dist

Environment Variables:

VITE_SUPABASE_URL
VITE_SUPABASE_ANON_KEY

---

📍 Upcoming Features

• AI Receipt Scanner
• Smart Debt Simplification
• Realtime Notifications
• Recurring Expenses
• Group Chat
• Travel Mode
• Multi-Currency Support
• Advanced Analytics
• AI Expense Assistant

---

---

Built using React, Supabase, TypeScript, and Netlify.