Beyond Vibe coding - Redesigning Filmz

Translated by: gpt-4o-2024-08-06 | Original version

Filmz

Vor einiger Zeit habe ich eine kleine iOS-App namens Filmz entwickelt: Behalten Sie den Überblick über Filme und Serien, die Sie sehen möchten oder gesehen haben. Speichern Sie persönliche Zusatzinformationen wie „Wie hat es mir gefallen?“ (d.h. meine persönliche Bewertung), „Für welches Publikum würde ich es empfehlen?“ (Erwachsene, Kinder, Familie) „Wann und wo habe ich es gesehen?“ usw. Und dann kommt das Teilen: Filmempfehlungen an Freunde weitergeben, entweder einen Film nach dem anderen oder als Listen.

Da ich damals kein Swift konnte, habe ich es im vibe coding-Stil entwickelt, vollständig unterstützt von KI (damals hauptsächlich Cursor.ai). Das gab mir einen schnellen Start, aber ich war verloren, sobald ich komplexere Funktionen hinzufügen wollte, die eine gut strukturierte Codebasis erforderten. Und da ich nicht viel über Swift wusste, konnte ich es auch nicht umsetzen. Vibe Debugging funktioniert noch nicht...

Also starte ich hier erneut und mit einem anderen Ansatz: Ich werde versuchen, auf ähnliche Weise zu arbeiten, wie ich es mit einem klugen, aber unerfahrenen Junior-Entwickler tun würde. Der Fokus wird auf einem schrittweisen Ansatz liegen, begleitet von einer ordentlichen Dokumentation: Beschreibungen der aktuellen Aufgabe, Beschreibung der Architekturänderungen, der inspizierten / in Betracht gezogenen Optionen und was warum gewählt wurde...

Ich habe mit meinem KI-Freund ChatGPT gearbeitet und plane, mit einer Struktur zu beginnen, wie unten beschrieben.

README.md                        # Projektübersicht und Einrichtungshinweise
docs/                     # Alles, was *nicht* Quellcode ist, lebt hier
├── index.md              # Funktionale Übersicht auf hoher Ebene (benutzerzentriert)
├── architecture.md       # Technische Übersicht auf hoher Ebene
├── glossary.md           # Fachvokabular
├── features/             # Ein Unterverzeichnis *pro* Funktion ⬇
│   ├── dark-mode/
│   │   ├── 01-intent.md          # „User Story“ oder Problemstellung
│   │   ├── 02-ui-flow.md         # Wireflow, Screenshots, Diagramme → PNG/Drawio *im selben Ordner* behalten
│   │   ├── 03-design.md          # Technisches Design & Pseudocode
│   │   ├── 04-test-plan.md       # Akzeptanz- & Randfallliste
│   │   └── dark-mode.drawio.png  # Diagramm sitzt neben dem Text, der darauf verweist
│   ├── profile-refactor/
│   │   └── …
│   └── _TEMPLATE/               # Leeres Gerüst, das Sie beim Hinzufügen einer Funktion kopieren
├── data-structure/            # Übergreifende Funktionen, Entitätsstrukturen oder ERDs, Migrationshinweise
│   ├── schema-overview.mmd
│   └── schema.md
├── adr/                  # Architektur-Entscheidungsprotokolle
│   ├── ADR-001-use-themex.md
│   └── ADR-002-db-index.md
└── changelog.md          # „Keep a Changelog“-Stil Geschichte

2025-05-28: Ich nehme dies als Ausgangspunkt, arbeite und sehe, was fehlt. Und füge die fehlenden Teile unterwegs hinzu.