Produkt-Showcase: ClientLedger

Eine umfassende Full-Stack-Anwendung für Freelancer zur Zeiterfassung, Projektverwaltung und Rechnungserstellung – gebaut mit Laravel 11 und Vue 3.

Die Vision

ClientLedger ist eine umfassende Webanwendung, die Freelancern und kleinen Agenturen hilft, ihre Zeit, Projekte und Rechnungsstellung zentral zu verwalten. Als Open-Source-Projekt demonstriert es moderne Web-Entwicklungspraktiken, Full-Stack-Architektur und Enterprise-Grade-Sicherheitsfeatures.

ClientLedger Dashboard Übersicht

Kernfunktionen

Eine vollständige Lösung für professionelles Freelancing – von der Zeiterfassung bis zur Rechnungsstellung, mit modernem UI/UX-Design und Enterprise-Sicherheit.

Echtzeit-Zeiterfassung

Start/Stop-Timer für Live-Tracking, manuelle Zeiteinträge mit automatischer Berechnung, sowie Unterscheidung zwischen abrechnungsfähigen und nicht-abrechnungsfähigen Stunden. Jeder Arbeitseintrag wird automatisch einem Projekt und Kunden zugeordnet.

Screenshot: Echtzeit-Zeiterfassung mit Timer
Screenshot: Projekt- und Kundenverwaltung

Projekt- & Kundenverwaltung

Multi-Projekt-Tracking mit Deadlines, flexibler Stundensatz-Konfiguration (pro Projekt oder pro Mitarbeiter), Deadline-Alerts und umfassendes Kundenbeziehungsmanagement. Farbcodierte Dringlichkeits-Indikatoren für besseren Überblick.

One-Click Rechnungserstellung

Generieren Sie professionelle Rechnungen mit einem Klick aus Ihren Arbeitseinträgen. Rechnungen werden als Invoice-Objekte erstellt, aus denen dann echte PDFs generiert werden können. Multi-Projekt-Konsolidierung, automatisches Invoice-Numbering-System und Status-Tracking (Bezahlt, Ausstehend, Überfällig) inklusive.

Screenshot: One-Click Rechnungserstellung
Screenshot: Business Analytics Dashboard

Business Analytics & Dashboard

Interaktives Dashboard mit KPIs und Charts: Umsatz-Trends, Kunden-Revenue-Verteilung, abrechnungsfähige vs. nicht-abrechnungsfähige Stunden, monatliche und jährliche Vergleiche mit Extrapolation. Alle Daten visuell aufbereitet für fundierte Geschäftsentscheidungen.

Enterprise-Grade Sicherheit

Zwei-Faktor-Authentifizierung (2FA) mit QR-Codes, E-Mail-Verifizierung mit 6-stelligen Codes, Trusted Device Management, Laravel Sanctum API-Authentifizierung und rollenbasierte Zugriffskontrolle (Admin/Freelancer). Sicherheit steht an erster Stelle.

Screenshot: Two-Factor Authentication Setup
Screenshot: Team-Management

Team-Zusammenarbeit

Multi-User-Support mit rollenbasiertem Zugriff, Projektzuweisung und Team-Management, individuelle Stundensätze pro Teammitglied und scoped Data Views basierend auf Benutzerrollen. Perfekt für kleine Agenturen und wachsende Teams.

Technologie-Stack & Architektur

Backend

  • Laravel 12 (PHP 8.2+)
  • Laravel Sanctum (API Auth & Tokens)
  • Google 2FA (pragmarx/google2fa)
  • PDF-Generierung (DomPDF)
  • QR-Code-Generierung (bacon-qr-code)
  • MySQL/PostgreSQL/SQLite
  • E-Mail-Benachrichtigungen (2 Custom)
  • Factories & Seeders (6/7)

Frontend

  • Vue 3 (Composition API)
  • Vuetify 3 (Material Design 3)
  • Pinia (State Management)
  • Vue Router 4 (SPA Navigation)
  • Vue I18n (Internationalisierung)
  • Vue Google Charts (Visualisierung)
  • Vite (Build Tool & HMR)
  • Mitt (Event Bus)

Sicherheit & Auth

  • Multi-Faktor-Authentifizierung (2FA/TOTP)
  • Recovery Codes (Backup Auth)
  • Trusted Devices (Fingerprinting)
  • E-Mail-Verifizierung (Code-basiert)
  • Role-Based Access Control (RBAC)
  • 3 Custom Middleware
  • API Token Auth (Sanctum)

Architektur

  • RESTful API (68 Endpoints)
  • 6 Eloquent Models
  • 13 Controllers
  • 2 Custom Services
  • 15 Vue Pages (Full SPA)
  • 9 Wiederverwendbare Components
  • 12+ Database Migrations
  • Middleware Security Pipeline

Internationalisierung

  • 5 Sprachen unterstützt
  • Englisch, Deutsch, Spanisch
  • Französisch, Italienisch
  • Vue I18n Integration
  • Vollständige App-Abdeckung

Testing & Qualität

  • PHPUnit (Unit & Feature)
  • Playwright (E2E Testing)
  • Laravel Pint (Code Style)
  • Faker (Testdaten)
  • ~1.475 Zeilen Tests

UI/UX Design

  • Glassmorphism Dark Theme
  • Material Design 3 (Vuetify)
  • Vollständig Responsive (Mobile-First)
  • Datenvisualisierung (Charts)
  • Echtzeit-Updates
  • Interaktives Dashboard

Developer Tools

  • Laravel Tinker (REPL)
  • Laravel Pail (Log Viewer)
  • Hot Module Replacement (HMR)
  • API-Dokumentation bereit

Production Ready & Open Source

Diese Anwendung läuft bereits produktiv im Live-Einsatz und demonstriert Enterprise-Grade-Qualität mit robusten Security-Features, Performance-Optimierungen und Production-Ready-Deployment. Als Open-Source-Projekt unter MIT-Lizenz verfügbar – perfekt um moderne Web-Entwicklungspraktiken und Real-World-Application-Architektur zu demonstrieren.

Production Dashboard

Projekt-Statistiken

68
API Endpoints
6
Models & 13 Controllers
20+
Vue Pages
17,600+
Lines of Code

Code-Statistiken im Detail

Eine vollständige Full-Stack-Anwendung mit umfassender Test-Abdeckung

Backend (PHP/Laravel)

Controllers (13 files)2,430 lines
Models (6 files)444 lines
Routes (68 endpoints)156 lines
Middleware & Services1,402 lines
Database Migrations (12)853 lines
Config Files1,297 lines

Frontend (Vue.js)

Vue Pages (20+)7,956 lines
Vue Components (15+)2,004 lines
JavaScript/Store (Pinia)1,343 lines

Testing & Quality

PHP Tests (Unit/Feature)1,108 lines
E2E Tests (Playwright)367 lines

Benötigen Sie eine ähnliche Full-Stack-Lösung?

Ob Zeiterfassung, Projektverwaltung oder komplexe Business-Anwendung – ich entwickle maßgeschneiderte Lösungen mit modernsten Technologien.