TimeClock v3.0

🕐 Eine moderne Full-Stack-Zeiterfassungsanwendung mit Node.js und Vue 3.

Features

• ⏱️ Echtzeit-Zeiterfassung - Starten und stoppen Sie Timer mit einem Klick
• 📊 Detaillierte Statistiken - Verfolgen Sie Ihre Zeit nach Projekten
• 💼 Projekt-Management - Organisieren Sie Ihre Zeiteinträge nach Projekten
• 🎨 Moderne UI - Schöne und intuitive Benutzeroberfläche
• 📱 Responsive Design - Funktioniert auf Desktop und Mobile

Technologie-Stack

Backend

• Node.js mit Express.js
• MySQL-Datenbank (stechuhr2)
• RESTful API mit klassenbasierter Architektur
• Repository-Pattern für saubere Datenbankabstraktion
• Service-Layer für Business-Logik
• CORS & Helmet für Sicherheit
• Morgan für Logging

Frontend

• Vue 3 mit Composition API
• Vite als Build-Tool
• Vue Router für Navigation
• Pinia für State Management
• Moderne CSS mit Gradients

Installation

Voraussetzungen

• Node.js (v16 oder höher)
• npm oder yarn

Backend Setup

cd backend
npm install

# .env Datei erstellen und konfigurieren
cp .env.example .env
# Bearbeiten Sie .env mit Ihren MySQL-Zugangsdaten

npm run dev

Der Backend-Server läuft standardmäßig auf http://localhost:3010

Wichtig: Siehe backend/DB_SETUP.md für detaillierte Datenbank-Konfiguration!

Frontend Setup

cd frontend
npm install
npm run dev

Das Frontend läuft standardmäßig auf http://localhost:5010

Verwendung

1. Starten Sie zuerst den Backend-Server
2. Starten Sie dann den Frontend-Development-Server
3. Öffnen Sie http://localhost:5010 in Ihrem Browser

Dashboard

• Starten Sie einen neuen Timer mit Projekt und Beschreibung
• Sehen Sie die aktuelle Laufzeit in Echtzeit
• Stoppen Sie den Timer, wenn Sie fertig sind
• Sehen Sie Ihre letzten 5 Einträge

Einträge

• Vollständige Liste aller Zeiteinträge
• Filtern nach Status (laufend/beendet)
• Löschen von Einträgen

Statistiken

• Gesamtanzahl der Einträge
• Gesamtarbeitsstunden
• Aufschlüsselung nach Projekten
• Detaillierte Projekt-Statistiken

API-Endpunkte

GET /api/health

Health-Check des Servers

GET /api/time-entries

Alle Zeiteinträge abrufen

POST /api/time-entries

Neuen Zeiteintrag erstellen (Timer starten)

{
  "project": "Projektname",
  "description": "Beschreibung der Tätigkeit"
}

PUT /api/time-entries/:id

Zeiteintrag aktualisieren (Timer stoppen)

{
  "endTime": "2025-10-15T10:30:00.000Z"
}

DELETE /api/time-entries/:id

Zeiteintrag löschen

GET /api/time-entries/stats/summary

Statistiken abrufen

Projektstruktur

TimeClock/
├── backend/
│   ├── src/
│   │   ├── config/
│   │   │   └── database.js
│   │   ├── controllers/
│   │   │   └── TimeEntryController.js
│   │   ├── services/
│   │   │   └── TimeEntryService.js
│   │   ├── repositories/
│   │   │   ├── WorklogRepository.js
│   │   │   └── UserRepository.js
│   │   ├── models/
│   │   │   └── TimeEntry.js
│   │   ├── routes/
│   │   │   └── timeEntries.js
│   │   └── index.js
│   ├── ARCHITECTURE.md
│   ├── DATABASE.md
│   ├── DB_SETUP.md
│   └── package.json
│
└── frontend/
    ├── src/
    │   ├── assets/
    │   │   └── main.css
    │   ├── components/
    │   ├── router/
    │   │   └── index.js
    │   ├── stores/
    │   │   └── timeStore.js
    │   ├── views/
    │   │   ├── Dashboard.vue
    │   │   ├── Entries.vue
    │   │   └── Stats.vue
    │   ├── App.vue
    │   └── main.js
    ├── index.html
    ├── package.json
    └── vite.config.js

Entwicklung

Backend-Entwicklung

cd backend
npm run dev  # Startet mit nodemon für Auto-Reload

Frontend-Entwicklung

cd frontend
npm run dev  # Startet Vite Dev-Server mit HMR

Build für Produktion

Frontend:

cd frontend
npm run build

Die Build-Dateien befinden sich dann im dist/ Ordner.

Implementierte Features

• ✅ MySQL-Datenbank - Integration mit bestehender stechuhr2-Datenbank
• ✅ Repository-Pattern - Saubere Datenbankabstraktion
• ✅ Service-Layer - Klare Trennung von Business-Logik
• ✅ Klassenbasierte Architektur - Controller und Services als Klassen

Geplante Erweiterungen

• 👤 Benutzer-Authentifizierung - JWT-basiertes Login-System
• 🔐 Multi-User Support - Mehrere Benutzer mit Berechtigungen
• 📧 E-Mail-Berichte - Automatische Zeitberichte per E-Mail
• 📱 Mobile App - React Native oder Flutter App
• 📈 Erweiterte Analytics - Grafiken und Diagramme
• 🌐 Mehrsprachigkeit - i18n Integration
• 🔔 Benachrichtigungen - Push-Notifications
• 📤 Export-Funktionen - CSV, PDF Export

Lizenz

ISC

Autor

TimeClock v3 - 2025

Support

Bei Fragen oder Problemen öffnen Sie bitte ein Issue im Repository.