103 lines
4.5 KiB
Markdown
103 lines
4.5 KiB
Markdown
# Frontend Architecture (Next.js)
|
|
|
|
**Note:** This document describes a *conceptual* architecture and is not a final, binding requirement.
|
|
|
|
The frontend uses **Next.js** with **TypeScript** and **FPTS** for functional programming.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
timetracker-frontend/
|
|
├── public/ # Statische Dateien
|
|
│ ├── assets/
|
|
│ └── locales/ # i18n Übersetzungen
|
|
├── src/
|
|
│ ├── app/ # Next.js App Router
|
|
│ │ ├── api/ # API Routes
|
|
│ │ ├── (auth)/ # Auth Pages
|
|
│ │ ├── dashboard/
|
|
│ │ ├── time-tracking/
|
|
│ │ ├── projects/
|
|
│ │ └── ...
|
|
│ ├── domain/ # Domain Model (analog zu Backend)
|
|
│ │ ├── entities/ # Domain Entities
|
|
│ │ │ ├── user.ts
|
|
│ │ │ ├── timeEntry.ts
|
|
│ │ │ ├── project.ts
|
|
│ │ │ └── ...
|
|
│ │ └── valueObjects/ # Value Objects
|
|
│ │ ├── money.ts
|
|
│ │ ├── duration.ts
|
|
│ │ └── ...
|
|
│ ├── application/ # Anwendungsfälle
|
|
│ │ ├── auth/ # Auth Use Cases
|
|
│ │ ├── timeTracking/ # Time Tracking Use Cases
|
|
│ │ ├── projects/ # Projects Use Cases
|
|
│ │ └── ...
|
|
│ ├── infrastructure/ # Infrastruktur
|
|
│ │ ├── api/ # API Client
|
|
│ │ │ ├── apiClient.ts # Axios Konfiguration
|
|
│ │ │ ├── endpoints.ts # API Endpunkte
|
|
│ │ │ └── interceptors.ts # Request/Response Interceptors
|
|
│ │ ├── storage/ # Lokale Speicherung
|
|
│ │ │ ├── localStorage.ts
|
|
│ │ │ └── sessionStorage.ts
|
|
│ │ └── external/ # Externe Dienste
|
|
│ │ └── ...
|
|
│ ├── presentation/ # Präsentationsschicht
|
|
│ │ ├── components/ # UI Komponenten
|
|
│ │ │ ├── common/ # Allgemeine Komponenten
|
|
│ │ │ │ ├── Button/
|
|
│ │ │ │ ├── Card/
|
|
│ │ │ │ └── ...
|
|
│ │ │ ├── layout/ # Layout Komponenten
|
|
│ │ │ │ ├── Navbar/
|
|
│ │ │ │ ├── Sidebar/
|
|
│ │ │ │ └── ...
|
|
│ │ │ ├── timeTracker/ # Zeiterfassung Komponenten
|
|
│ │ │ │ ├── Timer/
|
|
│ │ │ │ ├── EntryForm/
|
|
│ │ │ │ └── ...
|
|
│ │ │ └── ...
|
|
│ │ ├── hooks/ # Custom React Hooks
|
|
│ │ │ ├── useAuth.ts
|
|
│ │ │ ├── useTimeTracking.ts
|
|
│ │ │ └── ...
|
|
│ │ ├── providers/ # Context Provider
|
|
│ │ │ ├── AuthProvider.tsx
|
|
│ │ │ ├── ThemeProvider.tsx
|
|
│ │ │ └── ...
|
|
│ │ └── pages/ # Page Components (für App Router)
|
|
│ │ ├── DashboardPage.tsx
|
|
│ │ ├── TimeTrackingPage.tsx
|
|
│ │ └── ...
|
|
│ ├── utils/ # Utilities
|
|
│ │ ├── fp/ # Funktionale Programmierung (FPTS)
|
|
│ │ │ ├── option.ts
|
|
│ │ │ ├── result.ts
|
|
│ │ │ └── ...
|
|
│ │ ├── date/ # Datumsfunktionen
|
|
│ │ │ └── dateUtils.ts
|
|
│ │ ├── formatting/ # Formattierung
|
|
│ │ │ ├── numberFormat.ts
|
|
│ │ │ └── ...
|
|
│ │ └── validation/ # Validierung
|
|
│ │ └── validators.ts
|
|
│ ├── types/ # TypeScript Typendefinitionen
|
|
│ │ ├── api.ts # API Response/Request Typen
|
|
│ │ ├── auth.ts # Auth Typen
|
|
│ │ └── ...
|
|
│ └── styles/ # Globale Styles
|
|
│ ├── globals.css
|
|
│ └── theme.ts
|
|
├── docu/ # Frontend-spezifische Dokumentation
|
|
│ ├── component_library.md
|
|
│ ├── state_management.md
|
|
│ └── ...
|
|
├── next.config.js
|
|
├── tailwind.config.js
|
|
├── tsconfig.json
|
|
├── package.json
|
|
└── README.md
|
|
```
|