Dieses Projekt ist im Rahmen des Moduls Web Engineering II entstanden und umfasst die vollständige Umsetzung des Frontends für ein Studierendenbewerberportal als Single-Page Application (SPA).
Das Frontend greift auf einen REST-Server (Übung 1) zu und bildet gemeinsam mit Backend und Datenbank eine vollständige Webanwendung, wie sie auch im professionellen Umfeld eingesetzt wird.
Die Umsetzung des Frontends erfolgte eigenständig.
- React
- TypeScript
- Redux Toolkit
- Redux (asynchrone Thunks)
- HTML / CSS
- HTTPS-Kommunikation mit REST-API
Die Anwendung ist als Single-Page Application umgesetzt und folgt einer klaren Struktur:
- Pages
- Startseite
- User-Management
- Studiengang-Management
- Studienbewerbung-Management
- Components
- Formulare
- Listen
- Dialoge (Login, Bestätigungen)
- Redux Store
- Verwaltung des Authentifizierungszustands
- Speicherung von User-Daten und JWT-Token
- Asynchrone API-Zugriffe über Redux Thunks
- Kein Local Storage
- Keine Cookies
- Sicherheitskritische Daten (JWT) werden ausschließlich im Redux Store gehalten
→ Nach einem Reload ist ein erneuter Login erforderlich (bewusste Sicherheitsentscheidung).
- Landing Page mit Begrüßung
- Login-Button (öffnet modalen Login-Dialog)
- Login über Basic Authentication
- Anzeige eines Spinners während des Login-Vorgangs
- Fehlerbehandlung bei falschen Credentials
- Erfolgreicher Login führt in den geschützten Bereich
- Immer sichtbar
- Rollenabhängig (Admin / User)
- Keine Dropdown-Navigation
- User auflisten
- User anlegen
- User bearbeiten (inkl. Passwort & Rolle)
- User löschen (mit Bestätigungsdialog)
- Automatische Aktualisierung der Listen nach Änderungen
- Studiengänge auflisten (alle User)
- Studiengänge anlegen, bearbeiten, löschen (nur Admin)
- Button zum Anlegen einer Studienbewerbung pro Studiengang
- Anlegen von Bewerbungen über Studiengänge
- Unterschiedliches Verhalten je nach Rolle:
- Admin: Bewerbungen für alle User
- User: nur eigene Bewerbungen
- Auflisten von Bewerbungen
- Löschen von Bewerbungen (mit Bestätigung)
- Validierung gemäß Backend-Regeln (keine Doppelbewerbungen)
- UI reagiert auf Benutzerrolle
- Admin-Funktionen nur sichtbar für Administratoren
- Kommunikation ausschließlich über REST-API
- Token wird bei allen geschützten Requests im Header übertragen
npm install