Split It

A family expense sharing app built with React Native, allowing family members to track and manage shared expenses. Inspired by SplitWise, but focused on family scenarios.

Important

This project is being developed with Claude 3.7 Sonnet and Claude 4.5 Sonnet in a vibe coding style, while also serving as a learning project for React Native and Tailwind CSS.

I'm a web developer without mobile development experience, so everything is still a big learning journey 💫

About the project

This is an MVP (Minimum Viable Product) for a shared expense management app. Split It allows you to register expenses in groups and track who paid for what.

Tech stack

• React Native with Expo (SDK 53)
• TypeScript for type safety
• Supabase (PostgreSQL) for backend
• NativeWind v4 (Tailwind CSS for React Native)
• React Navigation (Stack + Bottom Tabs)
• React Hook Form for form management

Getting started

Prerequisites

• Node.js 18.x - 22.x (22.15.1 LTS recommended)
• npm 9+ or yarn or bun
• Android Studio (for Android) or Xcode (for iOS)
• Supabase account
• Physical device with Expo Go app or configured emulator

Database setup

1. Create a new project on Supabase
2. Run migrations from supabase/migrations/:
   • 20250501201906_initial_schema.sql
   • 20250503183118_tags.sql

Or use Supabase CLI:

npx supabase db reset

App configuration

1. Clone the repository:

   git clone https://github.com/Falcowoski/split-it.git
   cd split-it

2. Create a .env.local file in the root directory:

   EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
   EXPO_PUBLIC_SUPABASE_KEY=your_supabase_anon_key

3. Install dependencies:

   npx expo install

4. Start the development server:

   npx expo start

5. Run on your device:

   • Scan the QR code with Expo Go (Android) or Camera app (iOS)
   • Or press a for Android emulator / i for iOS simulator

Building for production

Local APK (Android):

npx eas build -p android --profile local

Cloud build (EAS):

# Android
npx eas build -p android

# iOS
npx eas build -p ios

Note

Requires EAS account. Run npx eas login first.

Features

• ✅ User management
• ✅ Payment methods with custom colors
• ✅ Expense groups
• ✅ Expense tracking within groups
• ✅ Tag system for categorizing expenses
• ✅ Expense editing and soft delete
• ⏳ User authentication (planned)
• ⏳ Expense splitting between users (planned)
• ⏳ Payment history (planned)
• ⏳ Charts and statistics (planned)

Project structure

src/
├── components/          # Reusable components
│   └── ui/             # Design system components
├── helpers/            # Utility functions
├── navigation/         # Navigation configuration
├── providers/          # Context providers
├── screens/            # App screens (organized by feature)
├── services/           # Supabase API services
├── theme/              # Design tokens
└── types/              # TypeScript type definitions

Database schema

The app uses soft deletes (deleted_at field) for all entities:

• users: App users (no authentication yet)
• groups: Expense groups
• payment_methods: Payment methods with colors
• tags: Categorization tags with colors
• expenses: Expenses with relations to users, groups, and payment methods
• expense_tags: Many-to-many relationship between expenses and tags

Contributing

This is a personal learning project, but feel free to fork and experiment!