Timetracking: Maßgeschneiderte Webanwendung für moderne Zeiterfassung

Problemstellung / Herausforderung

Die bisherige Zeiterfassung mittels Excel-Listen und E-Mail-basierten Urlaubsanträgen war nicht nur extrem zeitaufwändig, sondern führte auch zu häufigen Fehlern, Inkonsistenzen und Frustration. Eine zentrale, verlässliche Übersicht über Projektzeiten, Urlaub, Krankheitstage und andere Abwesenheiten fehlte gänzlich, was die Projektplanung und -abrechnung erheblich erschwerte und Potential für Optimierungen ungenutzt ließ.

Meine Rolle & Beitrag

Als verantwortlicher Full-Stack Entwickler trieb ich das Projekt von der Konzeption bis zur finalen Implementierung. Meine Aufgaben umfassten die Definition der Anwendungsarchitektur, die Auswahl des Tech-Stacks, die Entwicklung zentraler Backend-Services (API-Routen, Datenbankinteraktion mit Prisma) und die Umsetzung des gesamten Frontends mit React/Next.js. Ein wesentlicher Beitrag war die Gestaltung der Kernlogik für Zeiterfassung und Validierung sowie die Implementierung der Benutzerauthentifizierung und des Rollenmanagements.

Lösungsansatz & Architektur

Um eine moderne, performante und wartbare Lösung zu schaffen, wurde eine SaaS-Anwendung mit mehreren Seiten auf Basis von Next.js entwickelt. Dies ermöglichte sowohl serverseitiges Rendering für schnelle initiale Ladezeiten als auch optimierte Navigation zwischen den verschiedenen Funktionsbereichen für eine flüssige User Experience. TypeScript garantierte Typsicherheit und verbesserte die Developer Experience im Team. Tailwind CSS bot die nötige Flexibilität für ein schnelles, konsistentes und responsives UI-Design. Prisma als ORM vereinfachte die Datenbankinteraktionen mit PostgreSQL erheblich und bot Migrationsmanagement. NextAuth.js lieferte eine robuste und erweiterbare Lösung für Authentifizierung und Sitzungsmanagement. Der Fokus lag auf einer klaren Trennung von Frontend und Backend (API-Routen) innerhalb des Next.js-Frameworks.

Technische Details & Kernfunktionen

Intuitive Zeiterfassung & Validierung

Kernstück der Anwendung ist die einfache Erfassung von Arbeitszeiten (Kommen, Gehen, Pause) pro Tag oder Woche. React Hook Form und Zod werden für effizientes Formularhandling und robuste client- sowie serverseitige Validierung genutzt. Die Logik berücksichtigt Feiertage und individuelle Arbeitszeitmodelle (zukünftig). Zeiten werden Projekten zugeordnet, was eine granulare Auswertung ermöglicht.

Next.js React TypeScript Tailwind CSS

KI-gestützte Foto-Erkennung mit OpenAI Vision

Eine innovative Funktionalität ermöglicht es Nutzern, handschriftliche oder gedruckte Zeiterfassungsbelege einfach zu fotografieren und hochzuladen. Die Integration der OpenAI Vision API analysiert diese Bilder in Echtzeit, extrahiert automatisch relevante Zeitdaten wie Datum, Start- und Endzeit sowie Pausendauer und wandelt diese in strukturierte Daten um. Dies eliminiert die manuelle Dateneingabe komplett und reduziert Erfassungsfehler erheblich. Die erkannten Daten werden vor dem Speichern zur Überprüfung angezeigt und können bei Bedarf korrigiert werden.

OpenAI Vision API Next.js API Routes React TypeScript

Flexibles Projekt- & Kundenmanagement

Ein dediziertes Modul erlaubt die Anlage und Verwaltung von Kunden und Projekten. Projekte können mit Details wie Budgets (Zeit/Geld) und Stundensätzen versehen werden. Dies bildet die Grundlage für spätere Rentabilitätsanalysen und Reportings. Die Datenstruktur in PostgreSQL ist auf Erweiterbarkeit ausgelegt.

Prisma PostgreSQL Next.js API Routes TypeScript

Sichere Authentifizierung & Rollenbasiertes Rechtemanagement

Implementierung einer sicheren Authentifizierung mittels E-Mail/Passwort über NextAuth.js, vorbereitet für zukünftige OAuth-Integrationen. Ein einfaches, aber effektives Rollensystem (Admin, Mitarbeiter) steuert den Zugriff auf verschiedene Anwendungsbereiche und Funktionen über Middleware und API-Guards.

NextAuth.js Next.js API Routes Prisma

Integriertes Abwesenheitsmanagement

Mitarbeiter können Urlaub, Krankheitstage oder andere Abwesenheiten beantragen. Vorgesetzte werden benachrichtigt und können Anträge genehmigen oder ablehnen. Ein Teamkalender visualisiert Verfügbarkeiten und geplante Abwesenheiten.

React Prisma Next.js API Routes TypeScript

Dynamisches Reporting & Datenexport

Interaktive Berichte (realisiert mit Chart.js) bieten Einblicke in gebuchte Zeiten pro Projekt, Kunde oder Mitarbeiter über wählbare Zeiträume. Wichtige Kennzahlen wie Budgetauslastung werden visualisiert. Daten können zur Weiterverarbeitung als CSV exportiert werden.

Prisma Next.js API Routes React

Ergebnisse & Mehrwert

Die Implementierung von des Timetracking-Tools revolutionierte die internen Abläufe: Der administrative Aufwand für Zeiterfassung und Urlaubsverwaltung konnte um schätzungsweise 40-50% reduziert werden. Die Datenqualität der Projektzeiten stieg signifikant, was zu präziseren Nachkalkulationen und einer verbesserten Budgetkontrolle führte. Die Mitarbeiterzufriedenheit erhöhte sich durch die einfache Bedienung und die Transparenz über Arbeitszeiten und Urlaubsansprüche. Das Management profitiert von Echtzeit-Einblicken in die Projektprofitabilität und Ressourcenauslastung.