Projectstructuur

Setup en configuratie

Lees voor elke stap Voordat je begint en Terminal-basis. Open de map supastack bij zijn root — de map die package.json bevat. Een Mobile-checkout bevat apps/mobile plus de gedeelde pakketten hieronder; de All Platforms-monorepo voegt de Web-backend en de Desktop-shell toe. Een omgevingsvariabele is een benoemde instelling opgeslagen in een lokaal .env-bestand of je hostingdashboard; herstart de app na wijziging en houd servergeheimen uit EXPO_PUBLIC_-waarden.

1. Open apps/mobile/app/_layout.tsx in de editor — de root-layout die elk scherm deelt.

2. Verken apps/mobile/src/ — een map per featuregebied, elk met zijn logica en tests.

3. Voer vanuit de repository-root corepack pnpm --filter @supastack/mobile start uit en open de preview op je apparaat.

De Expo-app is georganiseerd als routes die featuremodules aanroepen. Routes blijven dun — ze renderen schermen; de logica die ze aanroepen leeft onder src/ met zijn tests ernaast. Lees AGENTS.md en .ai/PROJECT_CONTEXT.md voordat je gedrag wijzigt; de .ai/-spiegeldocumenten leggen beslissingen vast die uit een bestand alleen niet zichtbaar zijn.

apps/mobile/app/          Expo Router routes — sign-in, onboarding, invite, paywall
apps/mobile/app/(app)/    Signed-in screens — home, chat, notifications, settings, content, commerce, assistant
apps/mobile/src/          Feature modules — auth, api, purchases, offline, push, ui, theme, i18n
packages/ui-native/       Shared native view-models
packages/design-tokens/   Shared theme tokens
apps/mobile/app.config.ts Scheme and allowed-origin derivation
apps/mobile/eas.json      EAS build and submit profiles
docs/                     Runbooks incl. store submission
.agents/skills/           Task guides for coding agents

Waar een wijziging thuishoort

Beslis voor het bewerken welke map de wijziging bezit. De vuistregel: een routebestand rendert alleen; herbruikbare logica leeft in een src/-module; alles wat de server moet beslissen komt nooit in de app.

• Bouw je eerste mobiele feature

• Een nieuw ingelogd scherm → apps/mobile/app/(app)/ voor de route plus apps/mobile/src/<feature>/ voor zijn logica.
• Een nieuw pre-auth- of zelfstandig scherm → apps/mobile/app/ buiten de groep (app).
• Een aanroep naar de backend → apps/mobile/src/api/client.ts — breid de getypte client uit in plaats van ad hoc te fetchen.
• Een visueel element gedeeld tussen schermen → apps/mobile/src/ui/-primitives; een cross-platform view-model → packages/ui-native/.
• Kleuren, spatiëring en donker/licht-waarden → apps/mobile/src/theme/ ondersteund door packages/design-tokens/.
• Een nieuwe vertaalsleutel → alle vier de catalogi onder apps/mobile/src/i18n/.
• Alles aan de serverkant — gegevens, rechten, provider-aanroepen → de Web-backendrepository, die een aparte checkout is voor alleen-Mobile-aankopen.

Implementatieworkflow

Begin bij het routebestand, volg de featuremodule die het rendert, dan de API-clientaanroep — de server beslist over eigendom; de app leidt het nooit zelf af. De skill add-a-mobile-screen in .agents/skills/ loopt dezelfde volgorde.

Voer de pakkettests en typecheck uit na het bewerken van een gedeeld pakket of de API-client; de client moet hetzelfde contract behouden dat de backend serveert.

Verificatie en probleemoplossing

Als expo start een ontbrekende module meldt, voer dan het installatiecommando uit vanuit de repository-root — de appmap alleen kan workspace-pakketten niet resolven. Als een scherm ongestyled verschijnt, controleer dan dat het src/ui-primitives samenstelt in plaats van kale elementen met hardcoded kleuren.

corepack pnpm --filter @supastack/mobile test
corepack pnpm --filter @supastack/mobile typecheck