Mobile Architecture

Overview

Expo/React Native mobile app (@life-manager/mobile) sharing the same Supabase backend and PowerSync offline-first architecture as the web app.

Tech Stack

• Framework: Expo SDK 55 + Expo Router v6
• Database: PowerSync (@powersync/react-native + @powersync/op-sqlite) + Supabase
• State: TanStack DB for server state (same pattern as web)
• Navigation: Expo Router (file-based) + React Navigation

App Structure

src/
  app/              # Expo Router (file-based routing)
    _layout.tsx     # Root layout
    index.tsx       # Home screen
    login.tsx       # Login screen
  db/
    collections/    # Data layer (same pattern as web)
      profile/      # Profile collection
    powersync/
      Connector.ts  # PowerSync <-> Supabase bridge (mobile-specific)
      db.ts         # PowerSync database instance (uses op-sqlite)
    supabase.ts     # Supabase client
  providers/
    AuthProvider.tsx # Auth context
  polyfills/
    crypto.ts       # Crypto polyfill for React Native

Shared Packages

• @life-manager/db — PowerSync schema, Supabase types, domain types (shared with web)
• @life-manager/shared — Not yet fully integrated (planned)

Auth Flow

1. User opens app → AuthProvider checks Supabase session
2. No session → redirect to login.tsx
3. Session exists → initialize PowerSync connection, show home screen
4. Logout → disconnect PowerSync, clear local data