Frontend.md - JinraGit/travelManager GitHub Wiki
π¨ Frontend β Struktur & Komponenten
βοΈ Technologien
- React mit Vite
- JavaScript (ES6+)
- Bootstrap fΓΌr Styling
- Axios fΓΌr HTTP-Kommunikation
π Projektstruktur
Pfad: frontend/src/
| Ordner / Datei | Beschreibung |
|---|---|
components/ |
Wiederverwendbare UI-Komponenten |
βββ auth/ |
Login- und Registrierungsformulare |
βββ trips/ |
TripForm, ConfirmationModal, Messages |
context/ |
Zustandsverwaltung (Message, Theme) |
layouts/ |
Layout-Komponenten wie Sidebar, AuthLayout |
lib/ |
Hilfsfunktionen und API-Logik |
βββ auth/ |
Validierung und Login-Funktionen |
βββ constants/ |
Defaultwerte fΓΌr Hotel/Transport |
βββ meetings/ |
Meeting-Funktionen |
βββ trips/ |
Trip-API-Funktionen |
βββ users/ |
Account-, Admin- und User-Verwaltung |
βββ utils/ |
Utilities fΓΌr Datum, Session, Formate |
routes/ |
Alle React Router Seiten |
βββ admin/ |
Admin-Funktionen (z.β―B. Accounts verwalten) |
βββ auth/ |
SignIn/SignUp-Seiten, ProtectedRoute |
βββ dashboard/ |
Willkommensseite |
βββ meeting/ |
CRUD-Routen fΓΌr Meetings |
βββ trip/ |
CRUD-Routen fΓΌr Trips |
index.css / theme.css |
Globale Styles |
main.jsx |
React Root-Initialisierung |
router.jsx |
Definiert Client-seitige Routen |
setupTests.js |
Testkonfiguration (nicht verwendet) |
π§ Zustand & Authentifizierung
AuthContext.jsx(nicht sichtbar): verwaltet Token und Login-Zustand global- Verwendung von
useContext()zum Zugriff auf Auth-Status
π API-Kommunikation
- Via Axios in
lib/(z.β―B.trips.js,meetings.js,accounts.js) - Endpunkte werden dynamisch mit Token versorgt
π― Besonderheiten
- Formulare mit Validierung & Kontext-Feedback
- JWT-Token in LocalStorage gespeichert
- Logische Trennung von Admin- und User-Funktionen