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
74 lines
4.6 KiB
Markdown
74 lines
4.6 KiB
Markdown
### ⚙️ 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 |
|