> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# Bouw je eerste feature

Een end-to-end traject van schema naar uitgeleverd scherm.

## Walkthrough voor beginners

Vereisten: Lees de twee onderstaande beginnershandleidingen, voltooi de lokale webconfiguratie en open deze monorepo in de root van uw editor. Webinstellingen horen thuis in `apps/web/.env.local`; Next.js leest de root `.env` niet. `/dashboard` in de standaard nepmodus is een demo zonder database; `/auth` heeft een gemigreerde database nodig.

Korte termen: een werkruimte bestaat uit de afzonderlijke gebruikers, gegevens en instellingen van één team. De server is de vertrouwde backend; houd providersleutels uit de browser- en telefooncode. Een migratie is een versiebeheer van de database, waarbij tabellen worden gemaakt of bijgewerkt. Een AI-model is de motor die antwoord geeft; de modelcatalogus is de serverlijst met beschikbare model-ID's en prijzen. Een provider is een externe service, zoals een AI-, e-mail- of factureringsservice. Een recht is een subsidie ​​waarmee een werkruimte een functie kan gebruiken. Een webhook is een bericht dat de ene service naar de URL van een andere service verzendt.

1. Open VS Code in de root van de repository en vraag uw codeeragent om `apps/web/app/reports/page.tsx` en `apps/web/src/reports.ts` te maken. Geef het de rapportvelden en toegestane rollen; vereisen lidmaatschapscontroles aan de serverzijde en een zoekopdracht gefilterd door `workspaceId`.

2. Open `/reports` als aangemeld lid en bevestig dat alleen de records van de werkruimte verschijnen.

3. Probeer een afgemeld account en een account voor een tweede werkruimte; als een van beide de records kan lezen, stop dan en repareer de servercontrole.

Voor aangepaste code begint u met de meegeleverde `prompts/README.md` en kopieert u de dichtstbijzijnde prompt: `prompts/new-app-screen.md` voor een app-scherm of `prompts/new-landing-page.md` voor een openbare pagina. Voor server-, database- of providerwerk geeft u uw codeeragent de taak van deze handleiding en vraagt ​​u hem om `AGENTS.md`, `.ai/PROJECT_CONTEXT.md` en overeenkomende `.ai/`-mirrors te lezen; inspecteer de exacte bronbestanden die hier worden genoemd; maak een lijst van bestanden en controleer deze voordat u deze bewerkt; behoud van het eigendom van de werkruimte en geheimen voor de server; en laat je het verschil zien. Vertel het gewenste gedrag, invoer- en uitvoervelden, toegestane rollen, verwacht succes en fouten, en het testaccount, de provider of het apparaat. Gebruik voorbeeldwaarden; plak nooit een echt geheim.

[Voordat u begint](https://supastack.dev/nl/docs/web/before-you-start.md)

[Basisbeginselen van de terminal](https://supastack.dev/nl/docs/web/terminal-basics.md)

[Lokale webinstellingen](https://supastack.dev/nl/docs/web/ship-in-5-minutes.md)

[Agentprompts en projectgeheugen](https://supastack.dev/nl/docs/web/agents.md)


## Maak de route

Voeg een pagina toe onder `apps/web/app/`. Begin vanaf het dashboard of de inhoudsroute, zodat u de sessie- en actieve werkruimteresolutie ervan opnieuw kunt gebruiken. Er bestaat een route als de map `page.tsx` bevat; gebruik een servercomponent voor beveiligde leesbewerkingen.

```
apps/web/app/reports/page.tsx
apps/web/src/reports.ts
.ai/apps/web/app/reports/page.md
.ai/apps/web/src/reports.md
```


## Los het eigendom op de server op

Lees de ingelogde identiteit en actieve werkruimte via de bestaande verificatie-/werkruimtehelpers. Controleer het lidmaatschap voordat u records laadt. Filter elke vraag op de opgeloste `workspaceId`; neem nooit een eigenaar-ID uit een formulier of modeluitvoer.

Controleer de eigenaars-/beheerdersrechten voor beheeracties. Wanneer voor een functie wordt betaald, controleer dan of er recht op is bij de lees- of actiegrens voordat beschermde gegevens worden geretourneerd; een verborgen knop dwingt geen toegang af.


## Controleer toegang en herstel

Test anonieme toegang, een geldig lid, een lid van een andere werkruimte, een ingetrokken sessie en de vereiste rol. Voeg lege en mislukte laadstatussen toe met een herstelactie. Houd de route buiten de openbare sitemap en voeg het voorvoegsel ervan toe aan robots disallows.

[Werkruimte-isolatie](https://supastack.dev/nl/docs/web/security.md)

[Rechtencontroles](https://supastack.dev/nl/docs/web/setup-payments.md)


## Modelleer de record

Elke productrecord begint in het databaseschema. Voeg een tabel toe in packages/db met een workspaceId-kolom, genereer de migratie en schrijf de repository-helpers die de workspace oplossen vóór lezen of schrijven.

```
// packages/db/src/schema.ts
export const ideas = pgTable("idea", {
  id: uuid().primaryKey(),
  workspaceId: uuid().notNull().references(() => workspaces.id),
  title: text().notNull(),
  createdAt: timestamp().defaultNow(),
});

corepack pnpm --filter @supastack/db db:generate
```


## Autoriseer de actie

Maak een server action die sessie, workspace en entitlement in die volgorde oplost. Valideer invoer met een zod-schema, voer de mutatie uit via de repository en geef een getypeerd resultaat terug dat de interface kan renderen.

De volgorde doet ertoe: een mutatie die schrijft vóór het controleren van workspace-eigendom heeft de grens al overschreden. Leid eigendom af op de server — vertrouw nooit een workspace id die door de browser wordt gestuurd.


## Stel het oppervlak samen

Bouw de pagina uit gedeelde componenten en tokens — de blocks van de kit en de ui-web-primitieven dekken de gebruikelijke patronen. Behandel loading-, error- en lege states; een feature die alleen het happy path rendert is niet af.


## Volgende

[Bouwen met een codeeragent](https://supastack.dev/nl/docs/web/agents.md)