Gewohnheiten & Fortschritt
HabitFlow
Ein Habit-Tracker, der komplett im Browser läuft: Gewohnheiten anlegen, täglich abhaken und den Fortschritt über Serien, Statistiken und einen Kalender verfolgen. Ohne Konto, die Daten bleiben auf dem eigenen Gerät.
Auf einen Blick
- 4Ansichten: Dashboard, Statistik, Kalender und Einstellungen
- 2Diagramme zu Wochen- und Monatsquoten
- 39automatisierte Tests für Daten, Zeitpläne und Statistiken
- JSONExport und Import, die Daten bleiben im Browser
Überblick
HabitFlow ist ein Habit-Tracker mit vier Ansichten: einem Dashboard für den Tag, einer Statistikseite, einem Monatskalender und den Einstellungen. Die Anwendung ist veröffentlicht und läuft vollständig im Browser.
Funktionen
Dashboard
- Gewohnheiten anlegen, bearbeiten und löschen, mit Kategorie und Symbol
- Flexible Zeitpläne: täglich oder an ausgewählten Wochentagen
- Täglicher Fortschritt mit Wochenübersicht
Statistiken & Serien
- Aktuelle und beste Serie pro Gewohnheit, nur geplante Tage zählen
- Wochen- und Monatsquoten
- Zwei Diagramme mit Chart.js, erst beim Öffnen der Seite geladen
Kalender
- Monatsansicht, die jeden Tag als erledigt, teilweise erledigt oder verpasst zeigt
- Vergangene Tage lassen sich nachträglich korrigieren
Daten & Oberfläche
- Speicherung lokal im Browser, ohne Konto
- Export und Import der Daten als JSON
- Dunkles und helles Design
- Responsives Layout für Desktop und Smartphone
Screenshots
Problem
Neue Gewohnheiten entstehen im Alltag nebenbei, und genau dort verliert man sie leicht aus den Augen. Viele Habit-Tracker zeigen vor allem eine Reihe von Häkchen. Daraus lässt sich schwer ablesen, wie regelmässig man wirklich dranbleibt – besonders bei Gewohnheiten, die nicht jeden Tag anstehen.
Lösung
HabitFlow verbindet eine schlichte tägliche Erfassung mit Auswertungen über längere Zeit: Serien pro Gewohnheit, Wochen- und Monatsquoten, zwei Diagramme und ein Kalender, der jeden Tag als erledigt, teilweise erledigt oder verpasst zeigt. Gezählt werden nur Tage, an denen eine Gewohnheit geplant war.
Technische Umsetzung
Die Anwendung ist in JavaScript mit ES-Modulen geschrieben, ohne Framework, und wird mit Vite gebaut. Die Logik für Daten, Zeitpläne und Statistiken ist von der Darstellung getrennt und wird mit 39 automatisierten Tests auf dem Test-Runner von Node geprüft. Chart.js wird erst geladen, wenn die Statistikseite geöffnet wird. Gespeichert wird im localStorage des Browsers; die Daten lassen sich als JSON exportieren und wieder importieren.
Herausforderungen
Am meisten Sorgfalt brauchten die Datumslogik und die Zeitpläne. Tage richten sich nach dem lokalen Kalender statt nach UTC, damit sich ein Eintrag um Mitternacht nicht verschiebt. Und wenn man die Wochentage einer Gewohnheit ändert, darf das die Vergangenheit nicht umschreiben: Jede Gewohnheit führt deshalb einen Verlauf ihrer Zeitpläne.
Erkenntnisse
Statistiken sind nur so gut wie die Regeln dahinter. Erst klar festzulegen, was als geplant, erledigt oder verpasst gilt, und diese Regeln dann mit Tests abzusichern, hat mehr gebracht als jede zusätzliche Funktion.