jagd-apps/stoeberhunde/docs/ARCHITECTURE.md

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)