GardenPin
Ein Wochenendprojekt — von der Moleskine-Skizze zu einer funktionierenden Gartenplanungs-App mit Mischkultur-Empfehlungen, Offline-Modus und einem selbst geschriebenen Canvas-Raster.
Problem
Jedes Frühjahr skizziere ich die Anordnung meiner drei Hochbeete in einem Notizbuch, verliere es bis Juli und baue im nächsten Jahr aus dem Gedächtnis neu auf. Mischkultur ist wichtig — Basilikum und Tomaten gedeihen zusammen, Basilikum und Raute nicht — aber die Regeln stehen in einem Dutzend verstreuter Artikel. Es gab kein einziges Werkzeug, mit dem ich ein Beet zeichnen, Pflanzen platzieren und sehen kann, welche Nachbarn helfen oder schaden.
Lösung
Eine telefonfreundliche, offline-first Web-App, in der jedes Hochbeet ein Top-Down-Raster ist. Pflanzen werden auf Felder gezogen; ein Mischkultur-Graph bewertet die Nachbarn in Echtzeit. Aussaattermine lösen Bewässerungs- und Ernte-Erinnerungen über die Browser-Notification-API aus. Keine Konten, keine Server, kein Tracking — nur eine 32-stellige Device-ID in einem Cookie und ein opt-in Sync-Endpoint.
Tech Stack
Hauptfunktionen
Mischkultur-Graph
Katalog mit 278 Pflanzen und Beziehungen (kompatibel / antagonistisch) als spärliche Adjazenztabelle. Drag-and-drop-Scoring wählt Felder, auf denen Nachbarn das Wachstum fördern.
Interaktive Karte + Canvas-Raster
~140 Zeilen Vanilla-Canvas: Pan über Pointer-Events, Pinch-Zoom um den Cursor, Pflanzen als farbige Kreise + Emoji. Keine Charting-Library, keine Map-Tiles, kein SVG.
iCal-Export in den iOS-Kalender
Aussaat, Bewässerung und Ernte als ein-tap abonnierbarer .ics-Feed. Einmal auf dem iPhone hinzufügen — Erinnerungen erscheinen neben dem restlichen Kalender, keine zusätzliche App nötig.
Offline-first als Standard
Alle Nutzerdaten liegen im localStorage. Eine 32-stellige Device-ID erlaubt opt-in Sync über einen einzigen Endpoint. Keine Konten, keine Passwörter, keine externen Tracker.
Zeitstrahl — 48 Stunden, der Reihe nach
- Freitag 19:00
Start mit React Native + Mapbox. Drei Stunden später: Simulator-Zertifikate ungelöst, Mapbox verlangt Kreditkarte. Verwerfen.
- Freitag 22:30
Reset. Plain Next.js 14 + Canvas. Erstes Beet-Raster nach 40 Minuten.
- Samstagmorgen
Kuratierung des 84-Pflanzen-Katalogs und der Mischkultur-Beziehungen. Umweg über r/permaculture für die Gewichtung.
- Samstagnachmittag
Drag-and-drop-Platzierung, Nachbar-Scoring, Score-Visualisierung beim Hover.
- Samstagabend
Erinnerungsgenerierung aus Aussaatterminen. Web-Notifications-API angebunden. Erster End-to-End-Lauf.
- Sonntag
Feinschliff: Dark Mode, Tastaturnavigation, Beet-Export als PNG, Deploy auf Vercel. Ship.
Zahlen
Screenshots
Beet-Editor — Pflanzen ins Raster ziehen
Screenshot folgt mit Release 1.1
Mischkultur-Score beim Hover
Screenshot folgt mit Release 1.1
Erinnerungs-Feed — die Aufgaben von morgen
Screenshot folgt mit Release 1.1
Dark Mode, Planung spät in der Nacht
Screenshot folgt mit Release 1.1
Was ich gelernt habe
Reibung ist der Feind von Wochenendprojekten
Der richtige Stack ist der, den Sie ohne halben Tag Zeitverlust für Zertifikate, Abrechnungskonten oder Framework-Debatten erreichen. Ich habe React Native verworfen, sobald es mich drei Stunden kostete.
Canvas schlägt Charting-Libraries, wenn die Geometrie Ihre eigene ist
Ich hätte fast Konva installiert. Die ganze Karte landete in 140 Zeilen Vanilla-Canvas, und ich verstehe jeden Pixel. Eine Library, wenn Sie sie sonst schlecht nachbauen würden — nicht früher.
Daten kuratieren, bevor Sie die Visualisierung bauen
Ich begann mit dem Canvas und entdeckte mitten am Samstag, dass meine Pflanzendaten unvollständig waren. Ein Wochenendprojekt hat keine Zeit für zwei Durchläufe — erst die Daten richtig, dann hübsch.
Backend-Cronjobs überspringen, wenn der Client es kann
Erinnerungen sind deterministische Funktionen der Pflanzendaten. Ich generiere sie im Browser über die Notification-API — kein Worker, keine Queue, keine Infrastruktur. Hobby-Apps belohnen diese Vereinfachung.
Möchten Sie das ganze Build-Journal?
Den technischen Bericht lesen