Projektstruktur

Hinweis: Dies sind Beispiel- bzw. Platzhalterinhalte zu Demonstrationszwecken.

Erfahren Sie, wie die Codebasis organisiert ist und wo Sie was finden.

Überblick über das Monorepo

Dieses Projekt verwendet Turborepo, um ein Monorepo mit mehreren Apps und Paketen zu verwalten.

project-root/
├── apps/                    # Anwendungen
│   ├── web/                # Haupt-App (Next.js)
│   ├── e2e/                # Playwright-E2E-Tests
│   └── dev-tool/           # Entwicklungswerkzeuge
├── packages/               # Gemeinsame Pakete
│   ├── features/          # Feature-Pakete
│   ├── ui/                # UI-Komponenten
│   ├── supabase/          # Supabase-Hilfsfunktionen
│   └── billing/           # Abrechnungsintegrationen
├── tooling/               # Entwicklungstools
├── supabase/              # Datenbankschema & Migrationen
└── docs/                  # Dokumentation

Hauptanwendung (apps/web)

Die primäre Next.js-Anwendung:

apps/web/
├── app/                    # Next.js App Router
│   ├── (marketing)/       # Öffentliche Seiten
│   ├── (auth)/            # Authentifizierung
│   ├── home/              # Hauptanwendung
│   │   ├── (user)/        # Persönliches Konto
│   │   └── [account]/     # Teamkonten
│   ├── admin/             # Admin-Bereich
│   └── api/               # API-Routen
├── components/            # Gemeinsame Komponenten
├── config/                # Konfigurationsdateien
├── lib/                   # Hilfsfunktionen
├── public/                # Statische Assets
└── supabase/              # Supabase-Einrichtung

Routenstruktur

Marketing-Routen ((marketing))

Öffentlich zugängliche Seiten:

app/(marketing)/
├── page.tsx               # Landingpage
├── pricing/               # Preisseite
├── blog/                  # Blog
└── docs/                  # Dokumentation

Auth-Routen ((auth))

Authentifizierungsseiten:

app/(auth)/
├── sign-in/
├── sign-up/
├── password-reset/
└── verify/

Anwendungsrouten (home)

Hauptanwendung:

app/home/
├── (user)/                # Kontext des persönlichen Kontos
│   ├── page.tsx          # Persönliches Dashboard
│   ├── settings/         # Benutzereinstellungen
│   └── projects/         # Persönliche Projekte
└── [account]/            # Kontext des Teamkontos
    ├── page.tsx          # Team-Dashboard
    ├── settings/         # Teameinstellungen
    ├── projects/         # Teamprojekte
    └── members/          # Teammitglieder

Paketstruktur

Feature-Pakete (packages/features/)

Modulare Funktionen:

packages/features/
├── accounts/              # Kontoverwaltung
├── auth/                  # Authentifizierung
├── team-accounts/         # Team-Funktionen
├── billing/               # Abrechnung & Abonnements
├── admin/                 # Admin-Funktionen
└── notifications/         # Benachrichtigungssystem

UI-Paket (packages/ui/)

Gemeinsame UI-Komponenten:

packages/ui/
└── src/
    ├── components/        # Shadcn-UI-Komponenten
    │   ├── button.tsx
    │   ├── input.tsx
    │   ├── dialog.tsx
    │   └── ...
    └── utils/             # UI-Hilfsfunktionen

Supabase-Paket (packages/supabase/)

Datenbank-Hilfsfunktionen:

packages/supabase/
├── schema/                # Deklarative Schemas
│   ├── accounts.schema.ts
│   ├── auth.schema.ts
│   └── ...
├── src/
│   ├── clients/          # Supabase-Clients
│   ├── hooks/            # React-Hooks
│   └── middleware/       # Auth-Middleware
└── migrations/           # SQL-Migrationen

Konfigurationsdateien

Stammebene

project-root/
├── package.json           # Stamm-package.json
├── turbo.json             # Turborepo-Konfiguration
├── pnpm-workspace.yaml    # PNPM-Workspace
└── tsconfig.json          # Basis-TypeScript-Konfiguration

Anwendungsebene

apps/web/
├── next.config.js         # Next.js-Konfiguration
├── tailwind.config.ts     # Tailwind CSS
├── tsconfig.json          # TypeScript-Konfiguration
└── .env.local             # Umgebungsvariablen

Feature-Konfiguration

apps/web/config/
├── paths.config.ts        # Routenpfade
├── billing.config.ts      # Abrechnungseinstellungen
├── feature-flags.config.ts # Feature-Flags
├── personal-account-navigation.config.tsx
└── team-account-navigation.config.tsx

Namenskonventionen

Dateien

• Seiten: page.tsx (Next.js-Konvention)
• Layouts: layout.tsx
• Komponenten: kebab-case.tsx
• Hilfsfunktionen: kebab-case.ts
• Typen: types.ts oder component-name.types.ts

Verzeichnisse

• Routensegmente: [param] für dynamische Segmente
• Routengruppen: (group) zur Organisation
• Private Ordner: _components, _lib
• Parallele Routen: @folder

Code-Organisation

feature/
├── page.tsx               # Routenseite
├── layout.tsx             # Routenlayout
├── loading.tsx            # Ladezustand
├── error.tsx              # Error Boundary
├── _components/           # Private Komponenten
│   ├── feature-list.tsx
│   └── feature-form.tsx
└── _lib/                  # Private Hilfsfunktionen
    ├── server/            # Serverseitiger Code
    │   ├── loaders.ts
    │   └── actions.ts
    └── schemas/           # Validierungsschemas
        └── feature.schema.ts

Importpfade

Verwenden Sie TypeScript-Pfadaliase:

// Absolute Importe aus Paketen
import { Button } from '@kit/ui/button';
import { createClient } from '@kit/supabase/server-client';

// Relative Importe innerhalb der App
import { FeatureList } from './_components/feature-list';
import { loadData } from './_lib/server/loaders';

Best Practices

1. Routenspezifischen Code privat halten – Verwenden Sie _components und _lib
2. Wiederverwendbaren Code teilen – Lagern Sie ihn in Pakete aus
3. Zusammengehörige Dateien gemeinsam ablegen – Halten Sie Dateien nah an dem Ort, an dem sie verwendet werden
4. Einheitliche Benennung verwenden – Folgen Sie den etablierten Mustern
5. Nach Funktion organisieren – Nicht nach Dateityp

Orientierungshilfe