Expo App Architecture

Universal surface (Mobile & Web) for the Artifacts platform, built with Expo (React Native).

Core Components

Authentication (Clerk)

• Provider: Wrapped in ClerkProvider in src/app/_layout.tsx.
• Storage: Uses expo-secure-store via tokenCache for session persistence.
• Flow: Native-friendly OAuth (Google, Apple, GitHub) via useSSO hook.
• Session: JWT used to authenticate Supabase requests.

Data Access (Supabase)

• Client: Direct connection using createClient in components.
• Auth: Authorization: Bearer <clerk_token> header injected per request.
• Policy: Relies on RLS policies in Postgres (user_id from JWT claim).
• Service: Uses shared @chatgpt-artifacts/artifact-service for typed stores.

Navigation (Expo Router)

• Stack: File-based routing in src/app/.
• Protection: <Stack.Protected> guards based on isSignedIn state.
• Modals: Used for Auth flows ((auth)/*) and Artifact details (artifact/[id]).

Rendering Strategy

• Native First: Primary artifact rendering maps Schema -> Native Components.
• Components:
  • vstack -> Flexbox View
  • markdown -> react-native-marked
  • line-chart -> react-native-gifted-charts
• Styling: nativewind v4 + uniwind for Tailwind class sharing with web.

Build Variants

The app supports multiple environments via a custom variant system:

Mechanism:

1. scripts/select-variant.js swaps native folder symlinks (android-staging <-> android).
2. env.js loads correct .env.<variant>.
3. app.config.ts reads APP_VARIANT to configure Bundle ID and Name.