# 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`).