GardenPin
Víkendový projekt — od skici v Moleskinu k funkční aplikaci pro plánování zahrady s doporučeními pro společenskou výsadbu, offline režimem a ručně psanou canvas mřížkou.
Problém
Každé jaro si do sešitu načrtnu rozložení svých tří vyvýšených záhonů, do července ho ztratím a další rok stavím zpaměti znovu. Společenská výsadba má smysl — bazalka a rajčata si pomáhají, bazalka a routa ne — jenže pravidla jsou roztříštěné po deseti článcích. Neexistoval jeden nástroj, kde bych nakreslil záhon, položil rostliny a hned viděl, kteří sousedi pomáhají a kteří škodí.
Řešení
Mobilní web app, která funguje offline. Každý záhon je top-down mřížka. Rostliny se přetahují na políčka; graf vztahů v reálném čase boduje jejich sousedy. Z datumů výsevu se generují připomínky zálivky a sklizně přes browserové Notification API. Žádné účty, žádný server, žádné trackery — jen 32znakové device ID v cookie a opt-in sync endpoint.
Tech Stack
Klíčové funkce
Graf společenské výsadby
Katalog 278 rostlin s hranami compatibility / antagonismu v řídké adjacency tabulce. Drag-and-drop skórování vybírá políčka, kde sousedi posilují růst a kde se neperou.
Interaktivní mapa + canvas mřížka
~140 řádků vanilla canvasu: pan přes pointer events, pinch-zoom okolo kurzoru, rostliny jako barevné kruhy + emoji. Žádná chartingová knihovna, žádné map tily, žádné SVG.
iCal export do iOS kalendáře
Výsev, zálivka i sklizeň jako .ics feed na jeden tap. Přidáte si ho jednou na iPhone a připomínky se objeví vedle ostatních událostí — žádnou další appku není potřeba.
Offline-first jako default
Všechna uživatelská data jsou v localStorage. 32znakové device ID umožňuje opt-in sync přes jediný endpoint. Žádné účty, žádná hesla, žádní externí trackeři.
Časová osa — 48 hodin, jak šly za sebou
- Pátek 19:00
Startuju s React Native + Mapbox. Po třech hodinách: simulátor certy neřeším, Mapbox chce kreditku. Hod do koše.
- Pátek 22:30
Reset. Čistý Next.js 14 + canvas. První mřížku záhonu mám za 40 minut.
- Sobota ráno
Skládám katalog 84 rostlin a jejich vztahy. Odbočka přes r/permaculture na nastavení vah.
- Sobota odpoledne
Drag-and-drop pokládání pinů, skórování sousedů, vizualizace skóre na hover.
- Sobota večer
Generování připomínek z datumů výsevu. Web Notifications API napojené. První end-to-end běh.
- Neděle
Doladění: dark mode, klávesová navigace, export záhonu jako PNG, deploy na Vercel. Ship.
Čísla
Screenshoty
Editor záhonu — drag rostlin na mřížku
Screenshot dorazí s verzí 1.1
Skóre společenské výsadby na hover
Screenshot dorazí s verzí 1.1
Feed připomínek — zítřejší úkoly
Screenshot dorazí s verzí 1.1
Dark mode, plánování pozdě v noci
Screenshot dorazí s verzí 1.1
Co jsem se naučil
Tření je nepřítel víkendových projektů
Správný stack je ten, ke kterému se dostanete bez ztráty půl dne na certifikátech, fakturačních účtech nebo debatě o frameworku. Shodil jsem React Native ve chvíli, kdy mě stál tři hodiny.
Canvas překoná chartingové knihovny, když je geometrie vaše
Skoro jsem nainstaloval Konvu. Celá mapa skončila na 140 řádcích vanilla canvasu a rozumím každému pixelu. Knihovnu berte, až když byste ji jinak špatně reimplementovali — ne dřív.
Data vykurátujte dřív, než stavíte vizualizaci
Začal jsem s canvasem a v polovině soboty jsem zjistil, že data o rostlinách jsou děravá. Víkendový projekt nemá čas na dvě iterace — nejdřív data správně, potom design.
Vyhněte se backend cronům, když to umí klient
Připomínky jsou deterministická funkce dat o rostlinách. Generuju je v prohlížeči přes Notification API — žádný worker, žádná queue, žádná infra. Hobby aplikace tohle zjednodušení odmění.
Chcete celý build journal?
Číst technický článek