# Architektur-Dokumentation

## Übersicht

Die Stöberhundeführer-App besteht aus einem Node.js/Express-Backend und einem React-Frontend.

## Backend-Architektur

### Struktur

```
backend/
├── config/
│   ├── database.js      # MongoDB-Verbindung
│   └── env.js           # Umgebungsvariablen-Konfiguration
├── controllers/
│   ├── authController.js # Authentifizierungs-Logik
│   └── userController.js # Benutzer-CRUD-Operationen
├── middleware/
│   ├── auth.js          # JWT-Token-Validierung
│   ├── errorHandler.js  # Zentrale Fehlerbehandlung
│   ├── requestLogger.js # Request-Logging
│   └── validator.js     # Input-Validierung
├── models/
│   ├── Admin.js         # Admin-Modell
│   └── User.js          # Stöberhundeführer-Modell
├── routes/
│   ├── authRoutes.js    # Authentifizierungs-Routes
│   └── userRoutes.js    # Benutzer-Routes
├── utils/
│   └── logger.js        # Winston-Logger
├── server.js            # Express-Server
└── seed.js             # Datenbank-Seeding
```

### Datenmodell

#### User (Stöberhundeführer)
- `name`: String (erforderlich)
- `address`: String (erforderlich)
- `phone`: String (erforderlich)
- `type`: Enum ['HS', 'SB', 'BGS', 'Lab. HS'] (erforderlich)
- `available`: Boolean (Standard: true)
- `gps`: Object
  - `lat`: Number (-90 bis 90)
  - `lng`: Number (-180 bis 180)
- `createdAt`: Date (automatisch)
- `updatedAt`: Date (automatisch)

#### Admin
- `username`: String (erforderlich, eindeutig)
- `password`: String (erforderlich, gehasht)
- `createdAt`: Date (automatisch)
- `updatedAt`: Date (automatisch)

### Sicherheit

- JWT-basierte Authentifizierung
- Passwort-Hashing mit bcryptjs
- Token-Validierung über Middleware
- CORS-Konfiguration
- Input-Validierung mit express-validator
- Zentrale Fehlerbehandlung

### Logging

- Winston-Logger für strukturiertes Logging
- Log-Levels: error, warn, info, debug
- Logs werden in `logs/` gespeichert
- Request-Logging für alle HTTP-Anfragen

## Frontend-Architektur

### Struktur

```
frontend/src/
├── components/
│   ├── admin/
│   │   ├── AdminPanel.js
│   │   └── ExportButton.js
│   ├── auth/
│   │   └── LoginForm.js
│   ├── common/
│   │   ├── Header.js
│   │   ├── Loading.js
│   │   └── ErrorMessage.js
│   ├── map/
│   │   └── MapView.js
│   ├── public/
│   │   ├── PublicUserList.js
│   │   └── RulesDisplay.js
│   └── users/
│       ├── UserCard.js
│       ├── UserList.js
│       ├── SearchBar.js
│       └── FilterPanel.js
├── hooks/
│   ├── useAuth.js
│   └── useUsers.js
├── pages/
│   ├── Home.js
│   ├── Rules.js
│   └── Admin.js
├── services/
│   ├── api.js
│   ├── auth.js
│   └── users.js
├── utils/
│   ├── constants.js
│   └── helpers.js
└── App.js
```

### State Management

- React Hooks (useState, useEffect, useContext)
- Custom Hooks für wiederverwendbare Logik
- Lokaler State in Komponenten
- Kein Redux erforderlich für diese App-Größe

### API-Integration

- Axios für HTTP-Anfragen
- Zentrale API-Konfiguration
- Interceptors für Token-Management
- Automatische Token-Erneuerung bei Ablauf

### UI-Komponenten

- Modulares Komponenten-System
- Wiederverwendbare Komponenten
- Responsive Design mit CSS
- Leaflet für Kartenansicht

## Datenfluss

1. **Authentifizierung:**
   - Benutzer sendet Login-Anfrage
   - Backend validiert Credentials
   - JWT-Token wird generiert und zurückgesendet
   - Frontend speichert Token im localStorage
   - Token wird bei allen weiteren Anfragen mitgesendet

2. **Datenabfrage:**
   - Frontend ruft API-Endpunkt auf
   - Backend validiert Token
   - Daten werden aus MongoDB abgerufen
   - Antwort wird an Frontend gesendet
   - Frontend aktualisiert UI

3. **Datenänderung:**
   - Frontend sendet PUT/POST/DELETE-Anfrage
   - Backend validiert Token und Input
   - Daten werden in MongoDB aktualisiert
   - Erfolgsmeldung wird zurückgesendet
   - Frontend aktualisiert lokalen State

## Technologie-Stack

### Backend
- Node.js
- Express.js
- MongoDB mit Mongoose
- JWT für Authentifizierung
- Winston für Logging
- express-validator für Validierung

### Frontend
- React 18
- Axios für HTTP-Anfragen
- Leaflet für Karten
- CSS für Styling

## Umgebungsvariablen

### Backend (.env)
- `PORT`: Server-Port (Standard: 5000)
- `NODE_ENV`: Umgebung (development/production)
- `MONGO_URI`: MongoDB-Verbindungsstring
- `JWT_SECRET`: Geheimer Schlüssel für JWT
- `JWT_EXPIRES_IN`: Token-Ablaufzeit (Standard: 24h)
- `CORS_ORIGIN`: Erlaubter CORS-Origin

### Frontend (.env)
- `REACT_APP_API_URL`: Backend-API-URL (Standard: http://localhost:5000)