Tag 29. Ein Tag noch nach diesem. Also hab ich Notion geklont.
Nicht alles davon. Aber die Kernerfahrung: ein Block-Editor mit verschachtelten Seiten, Slash-Befehlen und einer sauberen Seitenleiste zur Navigation. Das Ergebnis ist n0ti0n. Das Frontend war schnell zusammen. Das Deployment war eine andere Geschichte.
Der Prompt#
“Baue einen von Notion inspirierten Block-Editor mit verschachtelten Seiten, Slash-Befehlen, Rich-Text-Formatierung, Code-Blöcken mit Syntax-Highlighting, Tabellen, Aufgabenlisten und einer Seitenleiste zur Navigation. Verwende Tiptap für den Editor, Firebase Firestore für Echtzeit-Persistenz, anonyme Authentifizierung damit jeder es ausprobieren kann, und Dark Mode.”
Was Ich Bekommen Habe#
Der Editor verwendet Tiptap 3, ein fantastisches blockbasiertes Editor-Framework, und es gab mir fast alles was ich wollte direkt out of the box mit den richtigen Erweiterungen. Du bekommst Slash-Befehle, die erscheinen wenn du / tippst, mit denen du Überschriften, Listen, Code-Blöcke, Tabellen, Aufgabenlisten, Trennlinien und sogar verschachtelte Seiten einfügen kannst. Wähle beliebigen Text aus und ein Bubble-Menü erscheint mit Inline-Formatierungsoptionen wie Fett, Kursiv, Durchgestrichen, Hervorhebung und Links.
Die Seitenleiste ist wo die verschachtelten Seiten wirklich glänzen. Du kannst Seiten in Seiten erstellen, und die Baumstruktur zeigt sich im linken Panel mit einklappbaren Abschnitten. Es gibt eine Such-/Befehlspalette (Cmd+K), mit der du schnell zwischen Seiten springen, den hellen Modus umschalten oder neue Seiten erstellen kannst.
Es gibt auch eingebaute Vorlagen. Wenn du eine neue Seite erstellst, kannst du aus vorgefertigten Vorlagen wie Reiseplänen, Meeting-Notizen oder Projektplänen wählen. Jede Vorlage kommt mit einer nützlichen Struktur vorausgefüllt.
Das Slash-Befehlsmenü selbst ist sauber und funktional. Tippe / irgendwo im Editor und du bekommst ein Dropdown mit allen Blocktypen: Überschriften, Text, Aufzählungslisten, nummerierte Listen, Aufgabenlisten, Code-Blöcke, Tabellen, Blockzitate, Trennlinien, Bilder und verschachtelte Seiten.
Seiten können per Toggle ins Web geteilt werden, und es gibt Exportoptionen für Markdown und JSON. Das Ganze ist auch responsiv und funktioniert gut auf dem Handy.
Alles synchronisiert sich in Echtzeit über Firebase Firestore mit anonymer Authentifizierung, sodass jeder die App öffnen und sofort losschreiben kann ohne ein Konto zu erstellen.
Die Firestore-Saga#
Hier ist die Sache an diesem Projekt, über die es sich wirklich lohnt im Detail zu reden. Der Editor selbst kam relativ problemlos zusammen. Tiptap ist gut dokumentiert, die Erweiterungen sind modular, und Claude hat die Integration ohne viel Händchenhalten geschafft. Die echte Herausforderung war, Firestore in Produktion richtig zum Laufen zu bringen.
Das Git-Log dieses Projekts ist wild. Es gibt Dutzende von Commits nur zum Debuggen von Firestore-Deployment-Problemen. Long-Polling-Konfiguration, Cache-Einstellungen, REST-API-Fallbacks, Trimmen von Umgebungsvariablen, Verbindungs-Timeout-Handling… es war eine Parade von kleinen, schmerzhaften Problemen, die erst nach dem Deploy auf Vercel aufgetaucht sind.
Lokal hat alles perfekt funktioniert. Aber in Produktion hingen Firestore-Verbindungen, Daten wurden nicht geladen, oder die App hat stillschweigend beim Synchronisieren versagt. Jeder Fix führte zur Entdeckung des nächsten Problems. Whitespace aus Umgebungsvariablen trimmen hat ein Problem behoben. Von WebSocket auf Long Polling umstellen hat ein anderes behoben. Die Cache-Konfiguration anpassen hat ein drittes behoben. Es war eine klassische “Funktioniert auf meinem Rechner”-Situation verteilt über wahrscheinlich 15-20 Commits.
Das ist ehrlich gesagt einer der realistischsten Teile der ganzen Challenge. Die UI zu bauen ist der spaßige Teil. Sie tatsächlich in Produktion mit einem echten Backend zum Laufen zu bringen ist wo die Zeit hingeht. Und beim KI-gestützten Coding ist die Debugging-Schleife interessant, weil Claude schnell Fixes vorschlagen kann, aber du musst trotzdem deployen, testen und iterieren. Der Feedback-Zyklus ist langsamer als lokale Entwicklung, egal wie schnell die KI ist.
Watchfire hat die Deployment-Probleme fast sofort erkannt, was mir zumindest erspart hat, sie Tage später durch Nutzerberichte zu entdecken.
Probier Es Aus#
Fazit Tag 29#
Ein Block-Editor mit echter Persistenz, verschachtelten Seiten und einer sauberen UI ist etwas, das Leute wirklich brauchen. Tiptap 3 hat auf der Editor-Seite viel Schwerstarbeit geleistet, und Firebase hat das Backend übernommen, aber alles zusammenzustecken und besonders das Deployment zum Funktionieren zu bringen hat echten Aufwand gekostet. Die Firestore-Debugging-Saga ist eine gute Erinnerung daran, dass der schwierige Teil beim Ausliefern von Software selten der Feature-Code ist. Es ist die Infrastruktur, die Grenzfälle und die Dinge, die nur in Produktion kaputtgehen. Noch ein Tag.
Dies ist Tag 29 von 30 Tage Vibe Coding. Folge mir während ich 30 Projekte in 30 Tagen mit KI-gestütztem Coding ausliefere.
