Hintergrund / Motivation

Ziel des Projekts war die Entwicklung eines interaktiven Endkunden-Portals im Rahmen des Gesamtprojekts „E[D]VENT“, einem modernen Ökosystem für die Organisation und Buchung von Schulveranstaltungen, Seminaren und Konzerten. Bislang lief die Verwaltung von Teilnehmerlisten, Buchungen und Stornierungen an der EDV-Schule komplett analog über Zettelwirtschaft, Excel-Tabellen und E-Mails ab. Dies führte zu einem enormen administrativen Aufwand für Lehrkräfte und das Sekretariat. Im Rahmen dieses Teilprojekts sollte eine webbasierte Lösung entstehen, die den Nutzern (Schülern, Lehrern, Gästen) eine digitale Plattform bietet, um ihre Profile und Buchungen vollständig autark per Self-Service zu verwalten und so die fehleranfälligen analogen Prozesse abzulösen.

Beschreibung

Es handelt sich um eine interaktive Webanwendung (Single Page Application), die als zentrales Dashboard für die Endkunden der Plattform dient. Nutzer können sich sicher registrieren (inklusive automatisiertem SMTP-E-Mail-Versand) und einloggen, wobei die Authentifizierung zustandslos über JSON Web Tokens (JWT) abgewickelt wird. Die Startseite bietet eine dynamische Übersicht aller Events, die über schnelle, nachladende In-Page-Modals im Detail betrachtet werden können (inkl. Live-Sold-Out-Logik). Über das personalisierte Dashboard haben die Nutzer vollen Zugriff auf ihre gebuchten Tickets und Favoriten. Besondere Fokus-Features zur Steigerung der User Experience sind ein "Hold-to-Confirm"-Button bei Ticket-Stornierungen zum aktiven Schutz vor Fehlklicks sowie die Möglichkeit, Tickets nahtlos per Eingabe an andere registrierte Nutzer zu übertragen (Ticket-Transfer). Die Profilverwaltung ermöglicht zudem einen direkten, clientseitig konvertierten Base64-Upload von Profilbildern. Die gesamte modular aufgebaute Anwendung kommuniziert dabei ausschließlich über eine REST-API mit dem C#-Backend.

Technologien
Programmiersprache / Basis:
  • Vanilla TypeScript
  • HTML5 / CSS3
Frontend Framework / Styling:
  • Tailwind CSS v4
  • DaisyUI-Komponenten
Backend-Anbindung & Architektur:
  • Axios (HTTP-Client inkl. globalem Request-Interceptor)
  • Webpack (Modul-Bundler & Dev-Proxy)
  • Kommunikation mit ASP.NET Core REST-API
Security:
  • JWT-Tokenbasiertes Session-Management (LocalStorage)
  • BCrypt-Hashing (serverseitig implementiert)
IDE / Tools:
  • Visual Studio Code
  • GitLab
Projektinfo
Schuljahr:
25/26
Schüler:
Luis Hofmann,
Jonas Sager

Betreuer:
Herr Apfelbeck / Herr Graf
Bilder
Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.