187 lines
4.9 KiB
Markdown
187 lines
4.9 KiB
Markdown
# Architektur-Dokumentation
|
|
|
|
## Übersicht
|
|
|
|
Die Nachsuchenfü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 # Nachsuchenfü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 (Nachsuchenfü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)
|