Tag 20. Ich wollte eine gemeinsame Leinwand, auf der eine Gruppe von Leuten Bilder, Links und Notizen an eine Wand werfen kann, um zu sehen, was hängen bleibt. Wortwörtlich.
Der Prompt#
“Baue eine kollaborative Mood-Board-App. Jeder mit dem Link kann Bilder, Textnotizen und Links auf eine gemeinsame Leinwand pinnen. Echtzeit-Sync, anonyme Authentifizierung, freies Layout.”
Das war der Ausgangspunkt. Watchfire hat das in 7 Aufgaben aufgeteilt, die es von einem einfachen Firebase-Grundgerüst zu einem vollständigen kollaborativen Pinboard gebracht haben.
Wie Es Gebaut Wurde#
Sieben Aufgaben, jede mit einer neuen Schicht:
- Firebase Echtzeit-Sync als Fundament
- Drei Pin-Typen: Text-Haftnotizen, Bild-Uploads und Link-Karten mit OG-Vorschau
- Pins per Drag auf einer freien Leinwand anordnen
- Farbige Pin-Tags, um Dinge visuell zu gruppieren
- Zoom und Pan plus Pin-Größenänderung für Leinwand-Kontrolle
- Board-Sperre, damit der Ersteller ein Board auf Nur-Lesen setzen kann, und Export als PNG
- Cursor-Präsenz, um zu sehen, wo andere Leute gerade hovern, plus ein visueller Redesign-Durchgang
Die Abfolge ergab Sinn. Man kann keine Pins ziehen, bevor sie existieren, und man muss sich nicht um visuellen Feinschliff kümmern, bis die Kerninteraktionen funktionieren.
Was Dabei Rauskam#
Das hier hat sofort geklickt.
Die Startseite gibt den Ton an. Großes Logo, verstreute Beispiel-Pins im Hintergrund, ein Button zum Erstellen eines Boards. Keine Anmeldung, kein Konto, keine Hürden. Du klickst auf “Create New Board” und bist drin.
Ein frisches Board ist eine leere Leinwand. Dunkler Hintergrund mit einem dezenten Punktraster. Die Toolbar ist minimal — nur Optionen zum Sperren, Exportieren und Kopieren der Share-URL oben rechts. Der schwebende Aktionsbutton unten rechts öffnet den Pin-Typ-Selektor.
Drei Pin-Typen decken das Wesentliche ab. Text für Haftnotizen, Bild für Uploads und Link für URL-Karten. Drück den Plus-Button, wähl deinen Typ und leg ihn auf der Leinwand ab. Einfach genug, dass jeder mit dem Link es ohne Anleitung versteht.
Haftnotizen sehen aus wie echte Haftnotizen. Sie haben dieses leicht geneigte, papierartige Gefühl. Du kannst reinschreiben was du willst, eine Farbe wählen und sie hinziehen wo du willst. Die Pfirsichfarbe auf einer dunklen Leinwand sieht überraschend gut aus.
Der Bild-Upload ist unkompliziert. Ein Modal erscheint, du wählst eine Datei und sie wird in Firebase Storage hochgeladen. Das Bild erscheint als Pin auf der Leinwand, den du wie alles andere ziehen und in der Größe ändern kannst.
Misch alles zusammen und es fängt an, wie ein echtes Mood Board auszusehen. Bilder, Haftnotizen, verschiedene Größen. Du kannst Dinge herumschieben, um Anordnungen zu finden, die funktionieren. Die freie Leinwand bedeutet, dass nichts an ein Raster gebunden ist — so bekommt man dieses organische Collagen-Feeling.
Link-Karten ziehen OG-Metadaten. Füg eine URL ein und es holt sich Titel, Beschreibung und Vorschaubild. Die Watchfire-Karte, die Blowfish-Karte, die OpenClaw-Karte — alle haben sich sauber mit ihrem Branding gerendert. Das sieht viel besser aus als einfach eine nackte URL einzufügen.
Die Bug Reports#
Echtzeit-Kollaboration hat immer Grenzfälle:
- Die Cursor-Präsenz flackerte gelegentlich, wenn mehrere Nutzer sich schnell bewegten
- Sehr große Bild-Uploads konnten die Leinwand träge machen, bis das Bild fertig geladen war
- Der PNG-Export hat manchmal Pins verpasst, die weit vom Viewport-Zentrum entfernt waren
Nichts, was die Erfahrung kaputt gemacht hätte, aber die Art von Feinschliff-Problemen, die man vor einem echten Einsatz beheben würde.
Die Zahlen#
- 7 Watchfire-Aufgaben vom Firebase-Setup bis zum visuellen Redesign
- Firebase-Stack: Anonymous Auth, Firestore für Echtzeit-Sync, Storage für Bild-Uploads
- Next.js 15 + Tailwind CSS 4 im Frontend
- html2canvas für die PNG-Export-Funktion
- Drei Pin-Typen: Text, Bild, Link (mit OG-Vorschau)
- Kollaborations-Features: Echtzeit-Sync, Cursor-Präsenz, Board-Sperre
Probier Es Aus#
Erstell ein Board und teil den Link. Jeder kann darauf pinnen.
Fazit Tag 20#
Zwei Drittel der Challenge geschafft. Tag 10 war ein Miro-Klon ohne Kollaboration. Tag 20 ist ein Mood Board mit vollständiger Echtzeit-Synchronisation. Das fühlt sich nach Fortschritt an.
Die Firebase-Integration ist das, was dieses Projekt zum Laufen bringt. Anonyme Authentifizierung bedeutet null Hürden, um einem Board beizutreten. Firestore Echtzeit-Listener sorgen dafür, dass Pins sofort für alle erscheinen. Cursor-Präsenz bedeutet, dass du sehen kannst, dass jemand anderes tatsächlich mit dir da ist. Das sind die Features, die eine Solo-Leinwand in einen geteilten Raum verwandeln.
Was mich am meisten überrascht hat, waren die Link-Karten. Eine URL einfügen und eine schön formatierte Karte mit dem Branding der Seite, Beschreibung und Vorschaubild zu bekommen, hat die Boards sofort reichhaltiger wirken lassen. Dieses eine Feature hat es verwandelt — von “ein Ort für Haftnotizen” zu etwas, das man tatsächlich nutzen würde, um Referenzen für ein Projekt zu sammeln und zu teilen.
Sieben Aufgaben war ein enger Rahmen für eine kollaborative Echtzeit-App. Aber jede Aufgabe hat sauber auf der vorherigen aufgebaut, und das Endprodukt fühlt sich stimmig an. Nicht schlecht für Tag 20.
Das ist Tag 20 von 30 Tage Vibe Coding. Folge mir, während ich 30 Projekte in 30 Tagen mit KI-gestützter Programmierung veröffentliche.
