kiumu ist ein gamifizierter Habit-Tracker, der erledigte Gewohnheiten in ausgebbare Punkte für selbst gewählte Ziele verwandelt. Die App macht Fortschritt sofort sichtbar und bleibt bewusst straffrei: Ausgelassene Tage ziehen keine Punkte ab und setzen keinen Ziel-Fortschritt zurück.
Das Projekt wird als echte Web-App mit späterer React-Native-App entwickelt. Es ist zugleich ein Portfolio-Projekt und ein bewusstes Lernprojekt für den Wiedereinstieg in die Frontend-Entwicklung: Produktentscheidungen, technische Trade-offs und die Entwicklungshistorie sind deshalb ebenso nachvollziehbar wie der Code.
preview.kiumu.app · Habit Box direkt öffnen
Die Demo ist öffentlich erreichbar und verwendet gemeinsame Seed-/Demo-Daten aus Supabase. Check-offs werden dauerhaft gespeichert; bis Auth existiert, gehören diese Daten keinem persönlichen Nutzerkonto.
Die interaktive Habit Box bildet den ersten vollständigen UI-Vertical-Slice:
- Gewohnheiten für den aktuellen Tag abhaken,
- Check-offs in PostgreSQL speichern und nach einem Reload wieder lesen,
- Fünf-Tage-Verlauf und abgeleitete Statistiken anzeigen,
- direktes visuelles Feedback durch Count-up-, Icon- und Expand-Animationen,
- responsive Design-Tokens sowie Light-/Dark-Theme,
- reine Ableitungslogik hinter stabilen asynchronen Provider-Verträgen.
Der Habit-Check-off wird inzwischen persistent in Supabase gespeichert. Noch in Entwicklung sind echte Nutzerkonten, Wallet, Ziele und Investitionen. Produkt- Auth und eigentümerbasierte Row Level Security folgen in Phase 1 Slice 3; bis dahin enthalten die öffentlichen Deployments nur Demo-Daten. Den verbindlichen Jetzt-Stand und den nächsten Schritt hält STATUS.md fest.
flowchart LR
UI["Next.js App Router<br/>React UI"] --> State["Container State<br/>Check-off"]
State --> Derive["Pure deriveHabitBox()<br/>View Model"]
State --> Provider["Async Provider<br/>stabile TypeScript-Verträge"]
Supabase["Supabase<br/>PostgreSQL · RLS"] --> Provider
Provider --> State
Die Habit Box trennt Datenzugriff, reine Ableitungslogik, Client-State und Darstellung. Zustände wie „heute erledigt“, das Fünf-Tage-Fenster und die Gesamtanzahl werden aus Log-Einträgen abgeleitet, nicht redundant gespeichert. Der Supabase-Vertrag erzwingt die zentralen Invarianten zusätzlich auf Datenbankebene. Details und die klare Trennung zwischen aktuellem und geplantem Stand stehen in der technischen Spezifikation; die Begründungen hinter langfristigen Entscheidungen in DECISIONS.md.
TypeScript 5 · React 19 · Next.js 16 (App Router) · Tailwind CSS 4 · CSS Modules · Vitest · GitHub Actions · Vercel · Supabase (Phase 1)
- TypeScript Strict Mode und klar getrennte Domänen-, Provider- und UI-Verträge.
- ESLint, Markdown Lint, TypeScript-Check, Vitest und Production-Build als lokale Qualitätschecks und in CI.
- Fokussierte Tests für die reine Habit-Ableitungslogik; Komponenten- und End-to-End-Abdeckung wachsen mit den jeweiligen Vertical Slices.
- Semantische Form-Labels, sichtbare Fokuszustände und kontrastbasierte Design-Tokens; ein vollständiges Accessibility-Audit steht noch aus.
- Kleine Pull Requests werden über Linear-Issues, Branches und nachvollziehbare PR-Beschreibungen miteinander verknüpft.
Phase 1 hat mit dem persistenten Supabase-Datenfluss begonnen. Als Nächstes ergänzen Auth und eigentümerbasierte RLS die geschützte Kernschleife; spätere Phasen bringen Historie, Streaks, Internationalisierung und die Mobile-App auf demselben Backend. Die kanonische Reihenfolge und der bewusste Nicht-Scope stehen in ROADMAP.md und PRD.md.
- STATUS.md lesen — Stand, Fokus, nächster Schritt und Blocker.
- Den neuesten Eintrag unter docs/session-logs/ überfliegen — was geschah zuletzt?
- Das aktuelle Linear-Issue öffnen — welche konkrete Arbeit ist geplant?
- Bei Bedarf die dort verlinkte Spezifikation oder den relevanten ADR lesen.
Eine Information hat genau eine kanonische Quelle; andere Dokumente verlinken darauf, statt dieselbe Erklärung mehrfach zu pflegen.
| Dokument | Kanonisch für |
|---|---|
| PRD.md | Produkt, Zielgruppe und Scope |
| TECHNICAL_SPEC.md | Architektur, Datenmodell und technische Verträge |
| DECISIONS.md | Das Warum hinter langfristigen Entscheidungen |
| DESIGN.md | Designsystem und wiederverwendbare UI-Patterns |
| ROADMAP.md | Produktphasen und Meilensteine |
| STATUS.md | Kurzer aktueller Arbeitssnapshot |
| session-logs/ | Monatliche, append-only Entwicklungschronik |
| WAYS_OF_WORKING.md | Arbeits-, Git- und Dokumentationsprozess |
| AI_COLLABORATION.md | Lern-Modus und Zusammenarbeit mit KI |
| AGENTS.md | Verbindliche Regeln für KI-Agenten |
Konkrete Aufgaben, Status, Prioritäten und Termine leben in Linear. Die Repo-Dokumentation bleibt die glaubwürdige Quelle der Wahrheit für Produkt, Architektur, Entscheidungen, aktuellen Kontext und Historie.