4.5 KiB
4.5 KiB
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