52 lines
2.6 KiB
Markdown
52 lines
2.6 KiB
Markdown
# 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`).
|