Andrej Spielmann
3fefc550fe
- Django backend with DRF (clubs, wrestlers, trainers, exercises, templates, trainings, homework, locations, leistungstest) - Next.js 16 frontend with React, Shadcn UI, Tailwind - JWT authentication - Full CRUD for all entities - Calendar view for trainings - Homework management system - Leistungstest tracking
4.6 KiB
4.6 KiB
⚙️ Backend: Django & REST API
Das Fundament für Sicherheit, Datenstruktur und Exporte.
Core & Infrastruktur
- Python: Die Programmiersprache.
- Django: Das Web-Framework (Batteries included).
- PostgreSQL: Die Datenbank (zuverlässig und performant für komplexe Datenrelationen).
- django-environ: Für die sichere Trennung von Zugangsdaten (Secret Keys, DB-Passwörter) vom Code.
- gunicorn & whitenoise: Notwendig für den stabilen Betrieb (Deployment) auf einem Server.
API & Authentifizierung
- djangorestframework (DRF): Macht aus Django eine leistungsfähige REST API.
- django-cors-headers: Erlaubt deinem Next.js-Frontend, sicher mit dem Backend zu kommunizieren.
- djangorestframework-simplejwt: Schützt die API-Endpunkte, damit nur eingeloggte Trainer/Admins Daten sehen können.
- drf-spectacular: Generiert automatisch eine Swagger-Dokumentation. Das Frontend weiß so immer exakt, wie die Datenstruktur aussieht.
Daten-Handling & Features
- django-filter: Ermöglicht es, Ringer nach Club, Gruppe oder Anwesenheit über die API zu filtern.
- django-import-export: Ermöglicht dir, Ringer-Listen oder Trainings-Statistiken direkt im Admin-Bereich als CSV oder PDF zu exportieren.
Medien & Bilder (Ringerpässe, Fotos)
- Pillow: Basis-Bibliothek für Bildverarbeitung in Python.
- django-resized: Zwingt hochgeladene Fotos automatisch auf eine vordefinierte Größe, um Speicherplatz zu sparen und Ladezeiten zu verkürzen.
- django-cleanup: Löscht automatisch alte Bilddateien vom Server, wenn ein Ringer-Profil gelöscht oder das Foto geändert wird.
Admin-Oberfläche ("Geiles Design" für Trainer)
- django-unfold: Verwandelt das standardmäßige, altbackene Django-Admin in ein modernes, responsives Interface im Material Design. Da Trainer hier arbeiten, ist das essenziell.
🎨 Frontend: Next.js & UI
Die Oberfläche für schnelle Navigation, Filter und flüssige Animationen.
Core & Infrastruktur
- Node.js: Die Laufzeitumgebung.
- Next.js (mit TypeScript): Das React-Framework für Performance und Typsicherheit. Wir nutzen den modernen App Router.
UI, Styling & Animationen
- Tailwind CSS: Utility-First CSS-Framework für extrem schnelles und konsistentes Design.
- shadcn/ui: Die Komponenten-Bibliothek (Daten-Tabellen, Dialoge, Formulare), die perfekt aussieht und auf Tailwind basiert.
- Framer Motion: Für die "geilen Animationen". Hiermit steuern wir weiche Übergänge, aufklappende Elemente und Status-Änderungen.
- lucide-react: Ein Icon-Set, das modern und konsistent wirkt.
Datenmanagement & Kommunikation
- axios: Der HTTP-Client für die API-Aufrufe an Django.
- @tanstack/react-query: Das wichtigste Tool für Performance. Es cached die Daten im Frontend. Wenn ein Trainer filtert oder zwischen Listen-/Kalenderansicht wechselt, sind die Daten sofort ohne Ladezeit da.
- zustand: Ein leichtgewichtiger State-Manager, um globale Einstellungen (z.B. den aktuell ausgewählten Club) seitenübergreifend zu speichern.
Formulare & Validierung
- react-hook-form: Veraltet performante Formulare (z.B. beim Erstellen von Übungen oder Trainingsvorlagen).
- zod: Validiert die Eingaben im Formular, noch bevor sie ans Backend geschickt werden (z.B. "Gewicht muss eine Zahl sein").
Spezifische Features
- @fullcalendar/react: Für den Wechsel zwischen Kalender- und Listenansicht.
- recharts: Um die Statistiken auf der Reports-Seite schön darzustellen (z.B. Anwesenheits-Kurven).
🔗 Feature-to-Tech Map
Hier siehst du, wie deine Wünsche konkret technisch umgesetzt werden:
| Deine Anforderung | Technische Umsetzung (Backend/Frontend) |
|---|---|
| Ringerpässe scannen & Fotos | Django: Pillow, django-resized, cleanup / Next.js: HTML5 Camera API |
| Gewichtshistorie, Geburtstage | Django: Models mit Date & DecimalField / Next.js: Formulare & Recharts (für Kurven) |
| Trainingsvorlagen (modular) | Django: Komplexe Database Relations (ForeignKey, ManyToManyField) |
| Kalender/Liste Switch | Django: API liefert Daten / Next.js: @fullcalendar/react + State Switch |
| Filtern auf allen Seiten | Django: django-filter & REST API / Next.js: tanstack/react-query & URL Params |
| Hausaufgaben Status | Django: Model mit Status-Feld / Next.js: shadcn/ui Checkboxen & API-Update |
| "Geile Animationen" | Next.js: framer-motion für alle Übergänge |
| CSV/PDF Export | Django: django-import-export (Backend-generiert für Stabilität) |
| Dashboard (keine Pers. Daten) | Django: Separater Public-API Endpunkt / Next.js: Eigene Dashboard-Page |