Architektur-Überblick

Dieses Dokument bietet einen Überblick über die Architektur und die Designprinzipien des Indieboilerplate.

Kerntechnologien

Unser Indie Boilerplate basiert auf den folgenden Kerntechnologien:

• Next.js: Das React-Framework für die Produktion, das serverseitiges Rendering, statische Seitengenerierung und den App Router bietet.
• React: Eine JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen.
• TypeScript: Eine stark typisierte Programmiersprache, die auf JavaScript aufbaut.
• Tailwind CSS: Ein Utility-First-CSS-Framework für die schnelle Erstellung von benutzerdefinierten Designs.
• NextAuth.js: Eine vollständige Authentifizierungslösung für Next.js-Anwendungen.

Projektstruktur

src/
├── app/                    # Next.js 14 App Router
│   ├── (auth)/            # Authentifizierungsrouten
│   ├── (main)/            # Öffentliche Hauptrouten
│   ├── (protected)/       # Geschützte Routen (erfordern Authentifizierung)
│   ├── (sites)/           # Statische Seiten
│   ├── api/               # API-Routen
│   ├── favicon.ico        # Seiten-Favicon
│   ├── globals.css        # Globale Stile
│   ├── layout.tsx         # Root-Layout
│   └── page.tsx           # Startseite
│
├── components/            # React-Komponenten
│   ├── admin/            # Admin-Dashboard-Komponenten
│   ├── navigation/       # Header, Footer, Navigation
│   ├── reusable/        # Wiederverwendbare Komponenten
│   └── ui/              # UI-Komponenten (Buttons, Inputs, etc.)
│
└── lib/                  # Hilfsfunktionen und Konfigurationen
    ├── ai-client.ts     # KI-Integrations-Client
    └── auth-client.ts   # Authentifizierungs-Client

Wichtige Verzeichnisse

App-Verzeichnis

• (auth): Enthält authentifizierungsbezogene Routen wie Login, Registrierung und Passwort-Reset
• (main): Öffentliche Routen, die für alle Benutzer zugänglich sind
• (protected): Routen, die eine Authentifizierung erfordern
• (sites): Statische Seiten wie Dokumentation, Kontakt usw.
• api: Backend-API-Routen für serverseitige Funktionalität

Komponenten

• admin: Komponenten speziell für das Admin-Dashboard
• navigation: Seitenweite Navigationskomponenten
• reusable: Geteilte Komponenten wie Formulare und Karten
• ui: Grundlegende UI-Komponenten, die unserem Designsystem folgen

Library

• Hilfsfunktionen und Konfigurationsdateien
• Integrations-Clients für verschiedene Dienste

Best Practices

1. Komponentenorganisation

   • Halte Komponenten modular und wiederverwendbar
   • Verwende das passende Verzeichnis basierend auf dem Zweck der Komponente
   • Folge konsistenten Namenskonventionen

2. Routen-Gruppen

   • Verwende Routen-Gruppen (Ordner in Klammern) zur logischen Trennung
   • Halte Authentifizierungs- und geschützte Routen getrennt
   • Organisiere Routen basierend auf den Zugriffsebenen

3. Code-Struktur

   • Halte zusammengehörigen Code nah beieinander
   • Verwende passende Abstraktionen
   • Folge den DRY-Prinzipien (Don't Repeat Yourself)