Moderne Webanwendung zur Verwaltung von Anwesenheiten, Schüler:innen und Gruppen in der Ganztagsbetreuung.
GTB-Management ist eine moderne Webanwendung zur Verwaltung von Schüler:innen, Anwesenheiten und Gruppen in der Ganztagsbetreuung (GTB) einer Schule.
Das Projekt basiert auf Next.js 16 (App Router) und nutzt Prisma ORM zur Datenbankverwaltung.
- Schülerverwaltung: Erfassung von Stammdaten, Klassenstufen und individuellen Anmerkungen.
- Gruppenverwaltung: Erstellung farblich kodierter Gruppen zur flexiblen Organisation.
- Anwesenheitserfassung & Besuchsberichte: Protokollierung von Anwesenheitszeiten, Hausaufgabenstatus und Notizen.
- Ausschlüsse (Exceptions): Verwaltung geplanter Abwesenheiten an spezifischen Tagen.
- Benutzersystem & Rechteverwaltung: Rollenbasierte Berechtigungen (Owner, Admin, Default) zum Schutz sensibler Daten.
- Onboarding-System: Einfache Erstkonfiguration beim ersten Systemstart.
| Bereich | Technologie |
|---|---|
| Framework | Next.js 16 (React 19, Turbopack) |
| Datenbank | MySQL 8 & Prisma ORM |
| Authentifizierung | NextAuth.js v5 Beta (JWT) |
| Styling | Tailwind CSS & Radix UI (shadcn/ui) |
| State Management | TanStack Query, Zustand |
| Formulare & Validierung | React Hook Form, Zod |
| Animationen | Framer Motion |
Stelle sicher, dass folgende Software auf deinem System installiert ist:
- Node.js (Version 18 oder höher)
- MySQL (laufender Datenbankserver, Version 8 empfohlen)
git clone https://github.com/jonas1812st/gtb-management.git
cd gtb-management
npm installKopiere die Vorlage .env.example in eine neue Datei namens .env:
cp .env.example .envPasse die Werte in der .env an deine Umgebung an:
DATABASE_URL: Der MySQL-Verbindungsstring (z. B.mysql://user:password@localhost:3306/gtb_db).AUTH_SECRET: Ein sicherer Schlüssel für die Session-Verschlüsselung (kann vianpx auth secretgeneriert werden).MAIN_LIST_NAME&MAIN_GROUP_NAME: Namen für die Standard-Anwesenheitsliste und Gruppe, die bei der Initialisierung angelegt werden.
Generiere den Prisma-Client und wende die initialen Migrationen auf deine Datenbank an:
npx prisma generate
npx prisma migrate deployStarte den Next.js-Produktionsserver:
npm run build && npm run startDie Anwendung läuft nun unter http://localhost:8080.
Um das System sicher in Betrieb zu nehmen, ist kein manueller Datenbank-Eintrag nötig:
- Rufe die Anwendung im Browser auf (http://localhost:8080).
- Da noch kein Benutzer in der Datenbank existiert, wirst du automatisch auf die Setup-Seite (
/auth/setup) weitergeleitet. - Erstelle dort das primäre Betreiberkonto (Owner) durch Eingabe eines Benutzernamens und eines starken Passworts.
- Automatische Initialisierung: Beim Absenden des Formulars erstellt das System das Owner-Konto und initialisiert im Hintergrund die Standard-Listen und Gruppen auf Basis deiner
.env-Variablen. - Nach der erfolgreichen Initialisierung wirst du direkt in das Dashboard eingeloggt.
| Befehl | Beschreibung |
|---|---|
npm run dev |
Startet den lokalen Entwicklungsserver mit Turbopack |
npm run build |
Erstellt eine optimierte Produktionsversion |
npm run start |
Startet den Produktionsserver (erfordert vorherigen Build) |
npm run tsc |
Führt TypeScript-Typprüfungen aus |
npm run lint |
Prüft den Code mit ESLint |
Beiträge sind herzlich willkommen! Bitte lies unsere Beitragsrichtlinien (CONTRIBUTING.md) und unseren Verhaltenskodex (CODE_OF_CONDUCT.md), bevor du deinen ersten Pull Request einreichst.
Für Sicherheitslücken beachte bitte unsere Sicherheitsrichtlinie (SECURITY.md).
Alle wichtigen Änderungen werden im CHANGELOG.md dokumentiert.
Dieses Projekt ist unter der MIT-Lizenz lizenziert.