> ## 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

# Dein erstes Feature bauen

Ein durchgängiger Weg vom Schema bis zum ausgelieferten Screen.

## Schritt-für-Schritt für Einsteiger

Voraussetzungen: Lesen Sie die beiden folgenden Einsteigerhandbücher, schließen Sie die lokale Web-Einrichtung ab und öffnen Sie dieses Monorepo im Stammverzeichnis in Ihrem Editor. Webeinstellungen gehören in `apps/web/.env.local`; Next.js liest das Stammverzeichnis `.env` nicht. `/dashboard` im Standard-Fake-Modus ist eine Demo ohne Datenbank; `/auth` benötigt eine migrierte Datenbank.

Kurze Begriffe: Ein Arbeitsbereich umfasst die einzelnen Benutzer, Daten und Einstellungen eines Teams. Der Server ist das vertrauenswürdige Backend; Halten Sie Anbieterschlüssel aus Browser- und Telefoncodes fern. Eine Migration ist eine versionierte Datenbankänderung, die Tabellen erstellt oder aktualisiert. Ein KI-Modell ist der Motor, der antwortet; Der Modellkatalog ist die Liste der verfügbaren Modell-IDs und Preise des Servers. Ein Anbieter ist ein externer Dienst wie ein KI-, E-Mail- oder Abrechnungsdienst. Eine Berechtigung ist eine Bewilligung, die einem Arbeitsbereich die Nutzung einer Funktion ermöglicht. Ein Webhook ist eine Nachricht, die ein Dienst an den URL eines anderen Dienstes sendet.

1. Öffnen Sie VS Code im Repository-Stammverzeichnis und bitten Sie Ihren Programmieragenten, `apps/web/app/reports/page.tsx` und `apps/web/src/reports.ts` zu erstellen. Geben Sie ihm die Berichtsfelder und zulässigen Rollen; erfordern serverseitige Mitgliedschaftsprüfungen und eine nach `workspaceId` gefilterte Abfrage.

2. Öffnen Sie `/reports` als angemeldetes Mitglied und bestätigen Sie, dass nur die Datensätze dieses Arbeitsbereichs angezeigt werden.

3. Versuchen Sie es mit einem abgemeldeten Konto und einem zweiten Workspace-Konto. Wenn einer der beiden die Datensätze lesen kann, stoppen Sie die Serverprüfung und beheben Sie sie.

Beginnen Sie für benutzerdefinierten Code mit dem bereitgestellten `prompts/README.md` und kopieren Sie die nächstgelegene Eingabeaufforderung: `prompts/new-app-screen.md` für einen App-Bildschirm oder `prompts/new-landing-page.md` für eine öffentliche Seite. Geben Sie Ihrem Programmieragenten für Server-, Datenbank- oder Anbieterarbeiten die Aufgabe dieses Handbuchs und bitten Sie ihn, `AGENTS.md`, `.ai/PROJECT_CONTEXT.md` und passende `.ai/`-Spiegel zu lesen; Überprüfen Sie die hier genannten genauen Quelldateien. Listen Sie Dateien auf und prüfen Sie sie vor der Bearbeitung. Bewahren Sie den Arbeitsbereichseigentum und die Nur-Server-Geheimnisse. und zeige dir den Unterschied. Teilen Sie ihm das gewünschte Verhalten, Eingabe- und Ausgabefelder, zulässige Rollen, erwartete Erfolge und Fehler sowie das Testkonto, den Anbieter oder das Gerät mit. Beispielwerte verwenden; Fügen Sie niemals ein echtes Geheimnis ein.

[Bevor Sie beginnen](https://supastack.dev/de/docs/web/before-you-start.md)

[Terminal-Grundlagen](https://supastack.dev/de/docs/web/terminal-basics.md)

[Lokales Web-Setup](https://supastack.dev/de/docs/web/ship-in-5-minutes.md)

[Agentenaufforderungen und Projektspeicher](https://supastack.dev/de/docs/web/agents.md)


## Route erstellen

Fügen Sie eine Seite unter `apps/web/app/` hinzu. Beginnen Sie mit der Dashboard- oder Inhaltsroute, um deren Sitzungs- und aktiven Workspace-Auflösung wiederzuverwenden. Eine Route entsteht, wenn ihr Ordner `page.tsx` enthält; verwenden Sie für geschützte Lesezugriffe eine Server-Komponente.

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


## Zuständigkeit auf dem Server auflösen

Lesen Sie die angemeldete Identität und den aktiven Workspace über die vorhandenen Auth- und Workspace-Hilfsfunktionen aus. Prüfen Sie die Mitgliedschaft, bevor Sie Datensätze laden. Filtern Sie jede Abfrage nach der aufgelösten `workspaceId`; übernehmen Sie niemals eine Eigentümer-ID aus einem Formular oder einer Modellausgabe.

Prüfen Sie für Verwaltungsaktionen die Berechtigung von Ownern oder Admins. Ist eine Funktion kostenpflichtig, prüfen Sie ihre Berechtigung an der Lese- oder Aktionsgrenze, bevor Sie geschützte Daten zurückgeben; ein ausgeblendeter Button erzwingt keinen Zugriffsschutz.


## Zugriff und Wiederherstellung prüfen

Testen Sie anonymen Zugriff, ein gültiges Mitglied, ein Mitglied eines anderen Workspace, eine widerrufene Sitzung und die erforderliche Rolle. Ergänzen Sie leere und fehlgeschlagene Ladezustände um eine Wiederherstellungsaktion. Nehmen Sie die Route nicht in die öffentliche Sitemap auf und ergänzen Sie ihr Präfix in den robots-Sperrregeln.

[Arbeitsbereichisolation](https://supastack.dev/de/docs/web/security.md)

[Berechtigungsprüfungen](https://supastack.dev/de/docs/web/setup-payments.md)


## Den Record modellieren

Jeder Produkt-Record beginnt im Datenbankschema. Lege in packages/db eine Tabelle mit workspaceId-Spalte an, generiere die Migration und schreibe die Repository-Helper, die den Workspace vor jedem Lesen oder Schreiben auflösen.

```
// 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
```


## Die Aktion autorisieren

Erstelle eine Server Action, die in dieser Reihenfolge Session, Workspace und Entitlement auflöst. Validiere die Eingabe mit einem zod-Schema, führe die Mutation über das Repository aus und gib ein typisiertes Ergebnis zurück, das die Oberfläche rendern kann.

Die Reihenfolge zählt: Eine Mutation, die schreibt, bevor die Workspace-Zugehörigkeit geprüft ist, hat die Grenze bereits überschritten. Leite Ownership auf dem Server ab — traue niemals einer Workspace-ID aus dem Browser.


## Die Oberfläche komponieren

Baue die Seite aus geteilten Komponenten und Tokens — die Blocks und ui-web-Primitives des Kits decken die üblichen Muster ab. Behandle Loading-, Error- und Empty-States; ein Feature, das nur den Happy Path rendert, ist nicht fertig.


## Weiter

[Mit einem Coding-Agenten bauen](https://supastack.dev/de/docs/web/agents.md)