GasSplit App 🚗⛽

A React Native app for splitting gas costs among passengers.

Tech Stack

• Framework: Expo SDK 54 with expo-router
• Styling: NativeWind (TailwindCSS)
• Backend: Supabase (Auth, Database)
• State Management: Zustand, React Query
• Forms: React Hook Form + Zod
• i18n: react-i18next
• Maps: react-native-maps + Google Maps API

Get Started

1. Install dependencies

pnpm install

2. Environment Setup

Supabase Key Usage:

• For mobile/desktop apps, use EXPO_PUBLIC_SUPABASE_KEY (publishable key), not the anon key.
• For web apps, you may use the anon key.

For local Supabase development:

# Copy the example file
cp .env.example .env

# Start local Supabase
npx supabase start

# Set your local Supabase URL and publishable key in .env.local
EXPO_PUBLIC_SUPABASE_URL="http://127.0.0.1:54321"
EXPO_PUBLIC_SUPABASE_KEY="your-local-publishable-key"

3. Run the app

# iOS Simulator
pnpm ios

# Android Emulator
pnpm android

# Physical Device (requires native build)
npx expo run:ios --device
npx expo run:android --device

Supabase

Local Development

# Start local Supabase
npx supabase start

# Stop local Supabase
npx supabase stop

# View local Supabase status (includes URLs and keys)
npx supabase status

# Open local Supabase Studio
open http://127.0.0.1:54323

Migrations

# Create a new migration
npx supabase migration new <migration_name>

# Push migrations to remote
npx supabase db push

# Pull schema from remote
npx supabase db pull

# Reset local database
npx supabase db reset

Generate Types

# From local database
npx supabase gen types typescript --local > services/supabase/database.types.ts

# From remote database
npx supabase gen types typescript --project-id <project-id> > services/supabase/database.types.ts

Project Structure

├── app/                 # Expo Router screens
│   ├── (app)/           # Protected routes (authenticated)
│   ├── (auth)/          # Auth routes (sign-in, sign-up)
│   └── _layout.tsx      # Root layout with providers
├── components/          # Reusable components
│   ├── forms/           # Form components (Input, FormInput)
│   ├── typography/      # Text components
│   └── ui/              # UI components (Button, Card, etc.)
├── features/            # Feature modules
│   ├── auth/            # Authentication
│   ├── maps/            # Maps & location
│   └── rides/           # Ride management
├── services/            # External services
│   ├── supabase/        # Supabase client & types
│   └── google-maps/     # Google Maps API
├── hooks/               # Global hooks
├── i18n/                # Internationalization
├── lib/                 # Library configurations
└── theme/               # Theme (colors, etc.)