SmartStudy Kurs-Planner: Kursverwaltung als Full-Stack Showcase

Der SmartStudy Kurs-Planner ist eine vollständig implementierte Webanwendung zur Kursverwaltung und -buchung. Studenten können Kurse durchsuchen, buchen und ihren persönlichen Stundenplan verwalten. Administratoren organisieren das Kursangebot, legen Kapazitäten fest und verwalten Teilnehmerlisten. Das Projekt demonstriert die Umsetzung einer realen Produktanforderung mit modernem Tech-Stack – von der Datenbankmodellierung bis zum responsiven UI.

Frontend: React 19 mit modernem Component-Pattern

Das Frontend basiert auf React 19 mit React Router für clientseitiges Routing und der Context API für globales State Management (Authentifizierung). Das UI ist mit Tailwind CSS gestaltet – Mobile-First, mit dunklem Farbschema und intuitiver visueller Hierarchie.

Die Anwendung besteht aus vier Haupt-Screens:

// React Router Setup mit rollenbasiertem Routing
export default function App() {
  const { user } = useAuth();

  return user ? (
    <Routes>
      <Route path="/katalog" element={<KatalogPage />} />
      <Route path="/dashboard" element={<DashboardPage />} />
      {user.rolle === 'ADMIN' && (
        <Route path="/admin" element={<AdminPage />} />
      )}
    </Routes>
  ) : <LoginPage />;
}

Backend: Node.js/Express mit REST API

Das Backend ist als Node.js/Express REST API implementiert. Drei klar getrennte Router-Module bedienen Authentifizierung, Kursverwaltung und das Buchungssystem. Die Authentifizierung nutzt JWT (JSON Web Tokens) mit bcrypt-Passwort-Hashing – ein Industry-Standard für zustandslose API-Authentifizierung.

API Routes     →  Endpunkt-Struktur
     │
     ├── /api/auth      →  Login, Register (JWT)
     ├── /api/kurse     →  CRUD + Suche (Admin/User)
     ├── /api/buchungen  →  Buchen, Stornieren, Dashboard
     └── /api/health    →  Health Check Endpoint

Besonders interessant ist die Middleware-Architektur: Ein JWT-Authentifizierungs-Middleware schützt alle geschützten Routen, während ein separater Admin-Check sicherstellt, dass nur Administratoren Kurse erstellen, bearbeiten oder löschen können.

Datenbank: Prisma ORM mit SQLite

Die Datenschicht nutzt Prisma ORM mit SQLite – eine Zero-Config-Datenbank, die für Prototypen und Demonstrationszwecke ideal ist. Das relationale Schema bildet die drei Kernentitäten sauber ab:

model Kurs {
  id             Int       @id @default(autoincrement())
  titel          String
  beschreibung   String
  maxTeilnehmer  Int
  startzeit      DateTime
  endzeit        DateTime
  erstelltVonId  Int
  erstelltVon    User      @relation("KursErsteller")
  buchungen      Buchung[]
}

model Buchung {
  userId  Int
  kursId  Int
  user    User  @relation(fields: [userId])
  kurs    Kurs  @relation(fields: [kursId], onDelete: Cascade)

  @@unique([userId, kursId])  // Doppelbuchungen verhindern
}

Buchungssystem: Intelligente Backend-Validierung

Das Herzstück der Anwendung ist das Buchungssystem mit serverseitiger Validierung. Bevor eine Buchung akzeptiert wird, prüft das Backend drei kritische Bedingungen:

Diese Validierungen sind ausschließlich im Backend implementiert – nicht im Frontend. Das ist ein bewusster Architektur-Entscheid: Clientseitige Validierung kann umgangen werden, serverseitige nicht. Das Frontend zeigt lediglich die aussagekräftigen Fehlermeldungen des Backends an und gibt dem Nutzer visuelles Feedback (grüne Bestätigung, rote Warnung bei Konflikten).

Admin-Panel: Vollständige Kursverwaltung

Das Admin-Panel bietet Administratoren die Möglichkeit, das gesamte Kursangebot zu organisieren. Es beinhaltet ein umfangreiches CRUD-Interface für Kurse, Teilnehmerlisten mit Detailansicht und die Möglichkeit, Kurse mit allen zugehörigen Buchungen zu löschen (Cascade Delete).

Architektur-Highlights

Einige bewusste Architektur-Entscheidungen machen dieses Projekt zu mehr als einer einfachen CRUD-App:

Fazit

Der SmartStudy Kurs-Planner demonstriert, wie eine reale Produktanforderung – Kursverwaltung mit Buchungssystem – als Full-Stack-Anwendung sauber umgesetzt wird. Von der Prisma-Datenbankmodellierung über JWT-Authentifizierung bis zur Zeitkonflikt-Erkennung: Jedes Feature zeigt praxisnahes Full-Stack Engineering. Das Projekt ist live deployed und sofort testbar.