Projectstructuur

Setup en configuratie

Lees vóór elke stap Voordat u begint en Basisbeginselen van de terminal. Deze instructies gaan ervan uit dat je de volledige supastack monorepo in VS Code hebt geopend; zijn root package.json markeert de root van de repository. In pnpm-opdrachten is een werkruimtepakket een app of map met gedeelde code; in het product is een werkruimte de gegevenscontainer en de beveiligingsgrens van een team. corepack pnpm --filter ... selecteert één pakket uit de monorepo terwijl opdrachten vanuit de root worden uitgevoerd. Als u alleen een gesynchroniseerde mobiele map of desktopmap hebt geopend, bevat deze niet de webbackend, Docker-installatie of rootscripts: voer de backend uit vanaf deze monorepo of een bereikbare gehoste server en gebruik de eigen scripts van de platformmap. Een omgevingsvariabele is een benoemde instelling die is opgeslagen in een lokaal .env-bestand of op uw hostingdashboard; start de relevante app opnieuw nadat u deze hebt gewijzigd en houd servergeheimen buiten de NEXT_PUBLIC_- en EXPO_PUBLIC_-waarden.

1. Open de root package.json in VS Code en blader vervolgens door apps/web voor de website, apps/mobile voor Expo, apps/desktop voor de desktopshell en pakketten voor gedeelde stukken.

2. Voer vanuit de root van de repository corepack pnpm --filter @supastack/web dev.

3. Open http://localhost:3000. Verwacht: de webapp start vanaf apps/web terwijl gedeelde pakketten in dezelfde repository blijven; het bureaubladvenster omhult deze webapp in plaats van een tweede product te bevatten.

De pnpm-workspace bevat Next.js in apps/web, Expo in apps/mobile en gedeelde packages onder packages. Draai workspacecommando's vanuit de repositoryroot. Applicatieroutes componeren gedeelde modules; productspecifiek gedrag hoort in het consumerende product.

Lees AGENTS.md en .ai/PROJECT_CONTEXT.md voordat je gedrag wijzigt. Bestandsmirrors in .ai/ leggen beslissingen en constraints uit die uit een component alleen niet blijken.

apps/web/app/       Routes and layouts
apps/web/src/       Web components and server composition
apps/mobile/        Expo application
packages/           Shared contracts and adapters
tests/              Cross-module and browser checks
docs/               Operational guides

Commando's om te kopiëren

Volg de opmerkingen om te zien in welke map een opdracht wordt uitgevoerd. Als twee terminals zijn gelabeld, opent u twee terminalvensters en laat u de eerste opdracht draaien terwijl u de tweede gebruikt.

corepack pnpm --filter @supastack/web dev

Waar een wijziging thuishoort

Bepaal voordat u gaat bewerken welke app of welk package de eigenaar van de wijziging is. De vuistregel: als slechts één productoppervlak het nodig heeft, zet het dan in die app; als elk oppervlak het nodig heeft, zet het dan in een gedeeld package onder packages/.

De webrepository en de All Platforms-monorepo bevatten elke onderstaande map. Een op zichzelf staande mobiele of desktop-checkout bevat alleen zijn eigen app — de servercode blijft in de webrepository.

• Bouw uw eerste functie

• Een nieuwe marketing- of landingspagina → apps/web/app/ — de openbare website.
• Een nieuw scherm binnen het aangemelde product → apps/web/app/ voor de route plus apps/web/src/ voor de logica — pagina's componeren de gedeelde packages.
• Een nieuwe API-route → apps/web/app/api/ — de serverhelft van de webapp.
• Een wijziging die elke app deelt — een databasetabel, een contract, een provideradapter → de bijbehorende map in packages/.
• Een scherm dat alleen voor de telefoon is → apps/mobile/ — het praat met de API van de webapp in plaats van een eigen backend te bevatten.
• Een gedrag dat alleen voor desktop is → apps/desktop/ — de Tauri-shell omhult de webapp en forkt vrijwel nooit product-UI.

Implementatieworkflow

Begin bij de route die de gebruikersactie bezit, volg de serverhandler en inspecteer daarna het gedeelde package dat wordt aangeroepen. Een UI-component mag workspace-resolutie, billing-autorisatie of providerselectie niet opnieuw creëren.

Bepaal bij het toevoegen van een route of hij publiek of geauthenticeerd is. Resolveer geauthenticeerd eigenaarschap op de server voordat je gebruikersrecords benadert, en houd servercredentials buiten client-imports.

Verificatie en probleemoplossing

Als de opdracht meldt dat geen enkel project overeenkomt met het filter, controleer dan of de terminal zich in de map bevindt die het rootpakket.json bevat. Als poort 3000 al in gebruik is, stop dan eerst de andere lokale webserver. Zoek niet naar een aparte Desktopchat of login-implementatie; de desktopshell laadt de webbackend.

Draai de relevante tests en typecheck na het wijzigen van een packagecontract. Inspecteer zowel web- als mobiele consumers bij het wijzigen van gedeelde types. Een succesvolle webbuild alleen stelt geen compatibiliteit met de native app vast.