Prysm
Menu

The mobile app

Prysm is an Expo and React Native app, organised by feature and split into screens, stores and services. Screens don't call the backend themselves: network calls go through a service layer.

The stack

  • Expo SDK 57, using development builds rather than Expo Go, because the app has native modules and widget targets.
  • React Native 0.86, React 19 and TypeScript.
  • React Navigation 7: a native stack wrapped around a floating bottom tab bar.
  • Zustand for state, one small store per feature.
  • expo-image for cover art, which caches images on the device.

How the code is organised

Code is grouped by feature, not by file type. Each feature owns its screens, components and store: library, adding games, wishlist, the feed, friend profiles, events, vague search, onboarding, the paywall, the passport, notifications, sharing, Steam linking, widgets and profile. Shared UI and the theme live in one shared folder.

App layers
Screensone folder per featureStoresZustand, one per featureServicesnetwork calls live hereSupabase clientdata and edge functionsRevenueCat SDKpurchasesOneSignal SDKpush

Each layer only calls the one below it.

The rule that holds this together: network calls go through the service layer (catalog, library, social, events, auth, purchases, notifications). A screen asks a store, the store asks a service, and the service knows which endpoint is involved.

Talking to the backend

The app reaches the backend in two ways.

  1. Direct calls through the Supabase client, for the signed-in user's own data: library, wishlist, profile, follows, likes and watches. These are safe because row-level security in the database decides what each user can read and write.
  2. Edge functions, for anything that needs a secret or crosses between users: search, game detail, roulette, sharing, imports, vague search and account deletion. The Supabase client attaches the session token automatically.

Sessions are stored on the device and refresh on their own, so people stay signed in.

Native pieces

  • Share-sheet target. Prysm registers as a share target, so a TikTok or YouTube link shared from another app opens Prysm's confirm screen.
  • Deep links use the prysm:// scheme, for returning from a Steam or Xbox account link and for taps on widgets.
  • Widgets on the home screen: WidgetKit on iOS, and react-native-android-widget on Android.
  • Installed-games check. A small Android module reports which game packages are installed, which powers the Android import.
  • Push through OneSignal and purchases through RevenueCat, each behind its own service.

Design

The interface is dark-only with an orange accent. Colours live in one theme file, and this website reuses the same palette so the two feel like one product.

PreviousSystem overviewNextThe backend

Last updated