← Zurück zum Portfolio

Webentwicklung · PHP · Vibe Coding

Fußball-
Trainingsplaner

Eine vollständige Webapp zur Trainingsplanung für Fußballvereine — von der Übungsbibliothek über das interaktive Taktikboard bis zum PDF-Druck. KI-assistiert entwickelt, ohne schwere Frameworks.

Training planen,
einfach gemacht

Der Fußball-Trainingsplaner ist eine vollständige Webanwendung für Fußballvereine. Trainer können Übungen in einer durchsuchbaren Bibliothek verwalten, mit einem interaktiven Taktikboard auf Voll-, Halb- oder Kleinfeld visualisieren und per Drag & Drop zu strukturierten Trainingseinheiten zusammenstellen.

Die App berechnet automatisch Zeitpläne, aggregiert Materiallisten und erzeugt druckfertige Übersichten für den Trainingstag — inklusive Team-Management mit Rollensystem und sicherer Benutzerauthentifizierung mit E-Mail-basiertem Passwort-Reset.

Das Projekt entstand vollständig als KI-assistiertes Eigenentwicklungsprojekt und zeigt, wie modernes Vibe Coding zu einer vollwertigen, produktionsreifen Webanwendung führt — ohne schwere Frameworks, stattdessen mit sauberem PHP-Backend und einem SPA-Frontend aus reinem Vanilla JavaScript.

Projektdetails

Status Live & produktiv
URL training.dhoffmann.org
Typ Full-Stack Webapp (SPA)
Hosting Strato Webhosting
Entwicklungsansatz Vibe Coding mit KI-Unterstützung

Was die App kann

📚

Übungsbibliothek

Übungen erstellen, kategorisieren, nach Schwierigkeit bewerten und durchsuchen. Globale Übungen sind für alle Teams sichtbar, Team-Übungen nur intern.

🎨

Interaktives Taktikboard

Canvas-basiertes Zeichenwerkzeug für Vollfeld, Halbfeld und Kleinfeld. Spieler, Hütchen, Bälle, Tore sowie Lauf- und Passwege lassen sich frei platzieren.

📅

Trainingsplanung

Übungen per Drag & Drop in Trainingseinheiten zusammenstellen. Die App berechnet automatisch den Zeitplan und aggregiert die Materialliste.

🖨

PDF-Druck

Jede Trainingseinheit lässt sich als druckfertige Übersicht ausgeben — ideal für den Trainingstag auf dem Platz ohne Bildschirm.

👥

Team-Management

Mehrere Teams unabhängig verwalten. Dreistufiges Rollensystem: Betreuer (lesend), Trainer (schreibend), Admin (vollständiger Zugriff).

🔐

Auth & Passwort-Reset

Session-basierte Authentifizierung, Registrierung mit Admin-Freigabe und sicherer Passwort-Reset per E-Mail via Strato SMTP.

Der Tech-Stack

🐘
PHP 8 — Backend & REST-API
Front-Controller-Pattern, sauberes Routing via routeId, JSON-Antworten, PDO für Datenbankzugriff
🗄
MySQL — Datenbank
Relationales Schema für Teams, User, Übungen, Trainingseinheiten, Passwort-Reset-Tokens
Vanilla JS (ES Modules) — SPA-Frontend
Hash-Router, dynamisches Rendering, kein Framework — reines JavaScript mit Modul-Imports
🎨
Konva.js — Canvas / Taktikboard
2D-Canvas-Bibliothek für das interaktive Taktikboard mit Serialisierung der Zeichnungen als JSON
SortableJS — Drag & Drop
Sortierbare Übungslisten für die Trainingsplanung mit Touch-Unterstützung
📧
PHPMailer — E-Mail-Versand
Passwort-Reset-Mails via Strato SMTP (STARTTLS), Zugangsdaten sicher außerhalb des Web-Roots