proj/SYSTEM_UEBERSICHT.md

Systemübersicht & Verwendete Technologien

Frontend

Das Frontend wurde als moderne Single-Page-Application (SPA) entwickelt und setzt auf folgende Technologien:

• Framework: Next.js 16 (React 19)
  • Sprache: TypeScript
  • Routing: App Router
• Styling: Tailwind CSS
  • Komponentenbibliothek: Shadcn UI (basiert auf Radix UI)
  • Icons: Lucide React
• State & Form Management:
  • React Hook Form (Formularvalidierung)
  • Zod (Schema-Validierung)
• Authentifizierung: NextAuth.js
• Visualisierung: Recharts (Diagramme)
• Datum/Zeit: Date-fns

Backend

Das Backend ist als RESTful API konzipiert und basiert auf dem Spring Boot Framework:

• Framework: Spring Boot 3.2.2
  • Sprache: Java 21
• Sicherheit: Spring Security (JWT / Session Handling, CORS Konfiguration)
• Datenbankzugriff: Spring Data JPA (Hibernate)
• Tools: Lombok (zur Reduzierung von Boilerplate-Code)
• Build Tool: Maven

Datenbank

Als Datenbank kommt ein relationales Datenbankmanagementsystem zum Einsatz:

• System: PostgreSQL 16 (Betrieb via Docker)
• Name: ticketsystem
• Verbindung: JDBC

Probleme & Lösungen

CORS (Cross-Origin Resource Sharing)

Ein wesentliches Problem während der Entwicklung war die CORS-Konfiguration (Cross-Origin Resource Sharing).

• Problem: Da Frontend (z.B. localhost:3000) und Backend (z.B. localhost:8080 oder Docker-Netzwerk) auf unterschiedlichen Origins laufen, blockierten Browser standardmäßig die API-Anfragen des Frontends aus Sicherheitsgründen.
• Lösung: Implementierung einer globalen CORS-Konfiguration im Backend (SecurityConfig.java).
  • Es wurde eine CorsConfigurationSource definiert.
  • Explizite Freigabe der erlaubten Origins:
    • http://localhost:3000 (Lokale Entwicklung)
    • https://projekt.lona-development.org (Produktion Frontend)
    • https://projektbackend.lona-development.org (Produktion Backend)
  • Erlaubte HTTP-Methoden: GET, POST, PUT, PATCH, DELETE, OPTIONS.
  • Credentials (setAllowCredentials(true)) wurden aktiviert, um Authentifizierungs-Cookies/Header zuzulassen.

Weitere Herausforderungen

• Docker Networking: Konfiguration der Kommunikation zwischen Frontend- und Backend-Containern über das interne Docker-Netzwerk (ticketsystem-network), während das Frontend teilweise auch clientseitig (im Browser des Users) auf die API zugreifen muss. Die Lösung bestand darin, Umgebungsvariablen für API-URLs flexibel zu gestalten (NEXT_PUBLIC_API_URL).