HafCoin — Projekt-Chronik

Das Team

Christine

Product Owner & Fachexpertin

Fachspezifikationen User Testing Stammdaten Prototypen Testfeedback

Pawel

Architekt

Architektur Tech-Specs Code Reviews DevOps Task-Planung

Claude

KI-Entwickler (Anthropic)

Implementierung Tests E2E-Tests MCP-Server Security Reviews

Marc

Entwickler

Architektur Tech-Specs Code Reviews DevOps Task-Planung

Das Experiment: Agentic Engineering

HafCoin ist kein gewöhnliches Softwareprojekt. Es ist ein Experiment: Kann ein kleines Team mit KI-Coding-Agents enterprise-taugliche Software bauen?

Die Antwort nach 42 Tagen: ja, aber die Arbeit verändert sich grundlegend. Der Ingenieur verschiebt sich vom Autor zum Architekten, Reviewer und Spec-Schreiber. Die eigentliche Kunst liegt darin, Arbeit so zu strukturieren, dass Agents sie zuverlässig umsetzen können. Das erfordert andere Fähigkeiten und wirft offene Fragen auf.

Kleine Schritte

Jeder Task ist so geschnitten, dass ein Agent ihn in einem Durchlauf umsetzen kann. Klare Eingabe, klares Ergebnis, reviewbar in Minuten. So entstanden 101 Tasks — keiner grösser als ein paar Stunden Arbeit.

Mensch als Reviewer

Nach jedem Inkrement: Review, Korrektur, neue Richtung wenn nötig. Die 3 Kehrtwenden in diesem Projekt (Auth, No-Show, Wizard) zeigen, dass der Mensch am Steuer bleibt — der Agent liefert Geschwindigkeit, nicht Entscheidungen.

Specs als Schnittstelle

Fachspezifikationen sind die gemeinsame Sprache zwischen Mensch, Agent und Tester. Christine definiert was, Pawel definiert wie, Claude implementiert. Ohne präzise Specs wäre diese Arbeitsteilung unmöglich.

Wie verändern sich Teams? Klassische Rollen lösen sich auf. Christine ist keine «Business Analystin» — sie ist Product Owner, Testerin und Domänenexpertin in einer Person. Pawel ist kein «Entwickler» — er ist Architekt, Reviewer und Engineering Lead. Die KI ersetzt niemanden, aber sie verändert, wofür Menschen ihre Zeit einsetzen: weniger Tippen, mehr Denken.

Was wir gelernt haben: Der Marathon-Tag (40 Commits, komplettes Backend) war nur möglich, weil 8 Tage Spec-Arbeit vorausgingen und die Testsuite pro Commit lief. Die Agents brauchen präzise Aufgaben, und Menschen brauchen den Mut, Ergebnisse schnell zu verwerfen, wenn die Richtung nicht stimmt. 572 Zeilen Wizard-Code zu löschen tut nicht weh, wenn sie in Minuten entstanden sind.

Interessiert an diesem Ansatz?

Wir begleiten Teams auf dem Weg zu Agentic Engineering — von der Strukturierung der Arbeit bis zur produktiven Zusammenarbeit mit KI-Agents.

christine@betterlabs.ch · pawel@betterlabs.ch

BetterLabs GmbH · Altenbergstrasse 29 · 3013 Bern

Der Workflow: Vier Schritte vom Konzept zum Code

Die Philosophie oben klingt abstrakt — konkret steckt dahinter eine vierstufige Toolchain aus Claude Code Skills, die den Weg von der Idee zum deploybaren Code strukturiert.

1

Spec schreiben

                docs/10-business/*.md
              

Der Mensch schreibt eine fachliche Spezifikation: Datenmodell, Abläufe, Geschäftsregeln, Randfälle. Die Spec ist der Forcing Function: sie zwingt implizite Entscheidungen an die Oberfläche, bevor eine Zeile Code entsteht.

2

Prototyp erzeugen

                /prototype
              

Ein Claude Code Skill generiert aus der Spec ein klickbares Alpine.js-Prototype. Stakeholder erleben das Verhalten: Buchungen anlegen, Coins abziehen, stornieren. Lücken werden sichtbar, bevor Code geschrieben wird.

3

Tasks generieren

                /generate-tasks
              

Der Skill analysiert Spec gegen Codebase, findet Mehrdeutigkeiten und zerlegt die Arbeit in schichtspezifische Tasks: Schema → Domain → API → UI → Test. Oft schickt dieser Schritt zurück zu Schritt 1.

4

Task umsetzen

                /implement-task
              

Ein Task pro Durchlauf: Spec lesen, Abhängigkeiten prüfen, implementieren, Security-Review, Writedown, Commit auf Feature-Branch. Der Mensch reviewed, erst dann geht es weiter.

↻

Kein linearer Prozess. Der Prototyp deckt Lücken auf → Spec wird verfeinert. /generate-tasks findet Widersprüche → zurück zur Spec. Selbst /implement-task erzeugt manchmal neue Spec-Aufgaben. Der Mensch entscheidet an jeder Übergangsstelle. Jeder Schritt ist ein Quality Gate.

✓ Das Sicherheitsnetz: Tests als Harness

Eine dreistufige Testsuite läuft bei jeder Änderung automatisch. Sie prüft, ob der Agent-Code korrekt ist, und schützt bestehende Funktionalität vor Regressionen. Erst das macht das Tempo vertretbar.

Unit-Tests

                  Vitest · src/domain/
                

Prüfen isolierte Geschäftslogik: Coin-Berechnung, Storno-Regeln, Quartals-Verfall. Jede Domain-Funktion hat eine Spec. Der Test ist ihr automatisierter Beweis.

Integrationstests

                  Vitest · echte Datenbank
                

Server Actions gegen eine echte PostgreSQL-Instanz. Bewusste Entscheidung: keine Mocks. Wenn der Agent eine Migration falsch schreibt, scheitert der Test, nicht erst die Produktion.

E2E-Tests

                  Playwright · Browser
                

Simulieren echte Nutzer: einloggen, Raum buchen, Coins prüfen, stornieren. Decken Regressionen auf, die kein Unit-Test finden kann: das kaputte Formular, der fehlende Button, die falsche Weiterleitung.

/implement-task erzeugt nicht nur Code, sondern auch Tests, und lässt die gesamte bestehende Suite laufen. Scheitert ein Test, wird der Task nicht abgeschlossen. Mit jedem Inkrement wird das Netz dichter. Die Tests sind gegen die Spec geschrieben und damit nachvollziehbar.

Jeder Schritt begrenzt den Blast Radius. Specs sind portabler als Prompt-Engineering. Kleine Tasks vermeiden Context Rot. Die Testsuite wächst mit jedem Task und sichert das Ganze gegen Regressionen ab. Kein Schritt produziert Produktionscode ohne automatisierte Verifikation und menschliches Review.

Technologien

Stack

Next.js 16 React 19 TypeScript PostgreSQL 16 Drizzle ORM Auth.js v5 Tailwind CSS

Testing & Deployment

Vitest Playwright Cucumber/Gherkin Render Docker

KI & Integration

Claude Code MCP-Server Resend ICS-Feeds

KI-Buchung via MCP

HafCoin bietet einen MCP-Server (Model Context Protocol) — damit können Mieter Räume direkt über Claude buchen, stornieren und ihre Buchungen verwalten. Kein Wechsel zur Web-App nötig.

6 Tools, 2 Resources, 1 Prompt — alles dünne Adapter auf der bestehenden Fachlogik. Claude versteht die Buchungsregeln, prüft Verfügbarkeiten, warnt bei Stornierungsfristen und bietet bei knappem Coin-Guthaben automatisch die Rechnungsoption an.

check-availability create-booking cancel-booking list-my-bookings get-coin-balance list-resources

Welche Räume sind morgen Nachmittag frei für 4 Personen?

check-availability aufgerufen ›

Morgen Nachmittag (14–18 Uhr) sind 2 Räume für 4+ Personen frei:

Aquarium (EG) — 4 Plätze, 2 Coins/h
Meeting Room Large (EG) — 16 Plätze, 6 Coins/h

Welchen Raum soll ich buchen?

Buche das Aquarium von 14 bis 16 Uhr

create-booking aufgerufen ›

Gebucht! Aquarium, morgen 14:00–16:00 Uhr.
Kosten: 4 Coins. Restguthaben: 7 Coins.

Kostenlose Stornierung bis 24h vorher möglich.

Sackgassen & Kehrtwenden

Die Auth-Saga KEHRTWENDE

Custom Auth (TASK-003)

→

«Kein Auth.js»-Entscheid

→

Auth.js v5 (TASK-052..055)

19. März: Eigenes Authentifizierungssystem von Grund auf gebaut.
23. März (morgens): Dokument verfasst: «AUTH - DOC DIRECTION CHANGE - No Auth.js» — Auth.js ausdrücklich ausgeschlossen.
23. März (nachmittags): Vier Stunden später: komplette Kehrtwende — Migration auf Auth.js v5 in 4 Tasks (TASK-052..055).
Eine vollständige Richtungsänderung an einem einzigen Tag. Der Custom-Auth-Code wurde geschrieben, getestet und dann komplett ersetzt.

~10 Commits Arbeit an einem Nachmittag umgeschrieben

Das No-Show-Feature GESTRICHEN

No-Show-Tracking gebaut

→

Aus Specs entfernt

→

TASK-091: Formell entfernt

No-Show-Tracking wurde spezifiziert, ins Domain-Modell eingebaut und in die UI integriert. Am 14. April wurde entschieden, es komplett zu entfernen — Referenzen wurden aus Specs, aktiven Tasks und Code bereinigt. TASK-037 (E2E-Tests für No-Show-Admin-Flows) wurde ebenfalls abgelöst und verworfen.

Feature komplett gebaut, dann komplett entfernt — Netto null

Die Buchungs-UX-Odyssee 3 ITERATIONEN

Buchungs-Wizard (TASK-059)

→

Split-Pane-Prototyp (TASK-071)

→

Pauschale-Buttons (TASK-100..104)

24. März: Schritt-für-Schritt-Buchungswizard mit Sidebar-Navigation gebaut. Christine testete Prototyp 6.
26. März: Alternative Split-Pane-UI spezifiziert, Variante C als Prototyp gebaut.
5.–6. April: «Unified Booking»-Ansicht mit Raum-zuerst- und Zeit-zuerst-Ansatz gebaut.
18. April: Wizard komplett verworfen (572 Zeilen gelöscht) zugunsten einfacher Pauschale-Schnellbuchungs-Buttons direkt in der Tagesansicht. Die einfachste Lösung gewann nach drei Iterationen.

~24 Tage vom ersten Versuch bis zur finalen Lösung — 572 Zeilen Wizard-Code gelöscht

Code-Zusammensetzung

Zeilen nach Dateityp

Projekt-Zeitstrahl

10. März — 16. März

Die Planungsphase SPEC

Erster Commit. Pawel und Christine erarbeiten Fachspezifikationen, technische Architektur, Prototypen, ADRs und Testszenarien. Sechs HTML-Prototypen werden getestet, bevor eine Zeile App-Code geschrieben wird. Spec-Driven Development in Aktion.

17. März — 19. März

Der Marathon-Tag 40 Commits

Allein am 19. März: 40 Commits. Projekt aufgesetzt, Datenbank gebaut, Auth implementiert, Stammdaten geladen, alle 5 Repositories geschrieben, Fachlogik für Coins & Buchungen, Gherkin-Testframework eingerichtet, Unit-Tests bestanden. Das komplette Backend an einem Tag.

23. März

Die Auth-Kehrtwende KEHRTWENDE

Morgens: «Kein Auth.js»-Entscheid dokumentiert. Nachmittags: komplette Kehrtwende — Auth.js v5 in 4 Tasks migriert. Custom-Auth-Code umgeschrieben. Pivot am selben Tag.

22. März — 24. März

Full Stack zusammengebaut FEATURE

REST API, Admin-Panel (Mieter, Ressourcen, Rechnungen, Coin-Verlauf), Mieter-Dashboard, Verfügbarkeitskalender, Buchungserstellung — die komplette Applikation nimmt Form an über 80+ Commits.

25. März — 26. März

Deployment & neue UI-Ideen FEATURE

Migration von Vercel zu Render. Split-Pane-Buchungs-UI-Prototyp erstellt. DB-Connection-Pooling konfiguriert.

24. März → 18. April

Buchungs-UX: 3 Iterationen 572 LOC gelöscht

Wizard gebaut → Split-Pane prototypisiert → Unified View getestet → alles verworfen für einfache Pauschale-Schnellbuchungs-Buttons. Die einfachste Lösung gewann, aber es brauchte 24 Tage und 3 Iterationen.

2. April — 6. April

Ruhige Woche

E-Mail-Infrastruktur mit Resend. Unified-Booking-Ansichten getestet. Mietername-Tooltips auf Slots. Nur 8 Commits in 4 Tagen — Denkzeit.

12. April

MCP-Server-Blitz 15 Commits

Kompletter MCP-Server an einem Tag gebaut: Setup, Auth, 6 Tools (Ressourcen auflisten, Coin-Saldo, Verfügbarkeit prüfen, Buchung erstellen/stornieren, Buchungen anzeigen), Resources, Prompts und 24 Integrationstests. Die KI kann jetzt Räume buchen.

13. April — 14. April

User-Testing-Sprint TEST

Christine liefert Stammdaten und Testfeedback. 43 Commits allein am 14. April — der grösste Tag des Projekts. ICS-Feeds, Dashboard-Umbau, Cron-Jobs, UX-Feinschliff und die No-Show-Entfernung passieren alle hier.

14. April

No-Show: Gebaut und gestrichen GESTRICHEN

No-Show-Tracking aus Specs, Code und Tasks entfernt. TASK-037 (Admin-E2E-Tests für No-Shows) abgelöst. Entscheid: Einfacher ist besser.

15. April — 17. April

Feinschliff & Testing FEATURE

Christines Testfeedback umgesetzt. E2E-Testsuite erweitert (Verfügbarkeit, Buchung, Admin). Pauschale-Schnellbuchung ersetzt Wizard. Web-Analytics-Spec entworfen.

18. April

Analytics, Chronik & Mobile 45 Commits

Web Analytics implementiert (TASK-105..108): Seitenaufrufe werden im Middleware getrackt, Admin-Dashboard mit Diagramm und Tabelle. Projekt-Chronik als öffentliche Seite erstellt (/chronik.html) mit Agentic-Engineering-Showcase, Teamübersicht und MCP-Demo. Mobile-Optimierung für Admin- und Mieter-Ansichten (TASK-113, 114) abgeschlossen.

19. April

Audit-Wochenende & Architektur-Refactoring 24 Commits

Drei umfassende Audits durchgeführt: Security, Architektur und Usability. Architektur-Refactoring nach ADR-0008: Seiten-Queries in wiederverwendbare Actions extrahiert, @/db-Imports in MCP-Tools durch Action-Aufrufe ersetzt, Cron-Orchestrierung in testbare Service-Funktionen ausgelagert. Performance: Fremdschlüssel-Indexes auf allen FK-Spalten (TASK-115), DB-Level-Constraints gehärtet. Veraltete Vercel/Neon-Referenzen aus lebenden Specs bereinigt.

20. April

UI-Vereinheitlichung & Analytics FEATURE

Gemeinsame UI-Komponentenbibliothek gebaut (TASK-117): Button, Input, Dialog, Badge, Alert als einheitliche Bausteine. Alle Views auf Shared Components umgestellt (TASK-118). Datum/Zeit-Formatierung zentralisiert in src/lib/date.ts (TASK-119). Analytics um Rollenfilter erweitert (TASK-120). feature/ui-revamp-Branch gemergt.

21. April — 22. April

Specs & Testing-Audit SPEC

Testing-Audit durchgeführt. E2E-Tests gehärtet (Umgebungsvariablen statt Hardcoding). Neue fachliche Spezifikationen geschrieben: Passwort-Reset (Spec 11), Mieter-Profil (Spec 12). Ruhige Tage — Denkarbeit vor dem nächsten Sprint.

23. April

Profil & persönliche Kalender-Feeds 31 Commits

Self-Service-Profilseite gebaut (TASK-126, 127, 129): Firmendaten anzeigen, Passwort ändern, E2E-Tests. Persönliche ICS-Kalender-Feeds komplett implementiert (TASK-132..136): Token-basierte Feeds pro Mieter, Shared-ICS-Helpers extrahiert, Kalender-Abo-Dialog mit zwei Feed-Optionen. Produktions-Testfeedback verarbeitet, Seed-Daten in Test und Produktion getrennt, Render-Deployment stabilisiert.

24. April

Benachrichtigungssystem komplett AKTUELL

Komplettes Benachrichtigungssystem an einem Tag: Domain Event Bus (TASK-139), ICS-Kalendereinladungen für E-Mails (TASK-137), Templates für alle 8 Ereignistypen (TASK-138), Admin-E-Mail-Log (TASK-068), Benachrichtigungs-Präferenzen — Schema, Actions, Handler-Checks, UI und Tests (TASK-141..145). Dazu neue Spec für Mitarbeiter-Konten (Spec 15) und Projekt-Chronik um Workflow-Sektion erweitert. 10 Tasks in einem Tag abgeschlossen.

Themengruppen — Was wurde gebaut

Thema

Commits

Tage

Aufwand

Spezifikation & Design

16 Fachspezifikationen, Prototypen, Roadmap, ADRs, Testfeedback

~45

11 Tage

Grundlagen

TASK-001..004 — Scaffold, DB-Schema, Auth, Stammdaten

2 Tage

Fachlogik

TASK-005..008 — Coin-Zuteilung, Buchungskosten, Storno, Verfall

1 Tag

Datenzugriff

TASK-009..013 — 5 Repositories (Mieter, Ressource, Buchung, Coins, Rechnung)

1 Tag

Server Actions

TASK-014..018 — Admin-, Buchungs-, Coin-, Rechnungsaktionen

2 Tage

REST API

TASK-019, 047, 048 — Routen, HTTP-Testdateien, Integrationstests

2 Tage

Auth-Migration

TASK-052..055 — Custom Auth → Kein Auth.js → Auth.js v5

1 Tag

Mieter-UI

TASK-023..027 — App-Shell, Dashboard, Kalender, Buchung, Verlauf

2 Tage

Admin-UI

TASK-028..032, 049, 064, 081..082 — Komplettes Admin-Panel

3 Tage

Buchungs-UX-Evolution

TASK-059, 061, 071, 100..104 — Wizard → Split-Pane → Pauschale-Buttons

24 Tage

Test-Framework

TASK-033..036, 040..046, 056..060, 083 — Unit, Gherkin, Integration, E2E

5 Tage

DevOps & Deployment

TASK-038, 062, 063 — Docker, Vercel-Anleitung, Render-Migration

3 Tage

ICS-Kalender-Feeds

TASK-022, 085, 092..094, 132..136 — Globale & persönliche Feeds, Mieter-Abo, Shared Helpers

2 Tage

MCP-Server (KI-Integration)

TASK-072..080 — 8 MCP-Tools für Claude-gestützte Raumbuchung

1 Tag

E-Mail & Benachrichtigungen

TASK-065, 068, 137..145 — Domain Event Bus, 8 E-Mail-Templates, ICS-Einladungen, Präferenzen, Admin-Log

3 Tage

UX-Feinschliff

TASK-084..090, 098 — Datums-URLs, vergangene Slots, Aktivieren-Button, etc.

2 Tage

Web Analytics

TASK-105..108, 120 — Seitenaufruf-Tracking, Admin-Dashboard, Rollenfilter

2 Tage

Audits & Architektur-Härtung

TASK-115, 116 — Security/Architektur/Usability-Audits, ADR-0008, FK-Indexes, DB-Constraints

2 Tage

UI-Vereinheitlichung

TASK-117..119 — Shared Component Library (Button, Input, Dialog, Badge, Alert), zentralisierte Formatter

1 Tag

Profil & Passwort

TASK-126, 127, 129 — Self-Service-Profilseite, Passwortänderung, E2E-Tests

1 Tag

Projekt-Chronik

öffentliche Seite mit Git-Statistiken, Agentic-Engineering-Showcase, MCP-Demo

1 Tag

Task-Fortschritt

Offene Arbeiten

Passwort-Reset (5 Tasks) Pauschale CHF-Rechnungen (2 Tasks) Wiederkehrende Buchungen Rechnungs-Optionen E2E & Testtools (4 Tasks) Mobile Bugfix

HafCoin Chronik

Die Auth-Saga KEHRTWENDE

Das No-Show-Feature GESTRICHEN

Die Buchungs-UX-Odyssee 3 ITERATIONEN