Co jíme? Aneb jak jsem s AI hacknul rodinné vaření (a přidal ingredience přímo do Rohlíku...)
Funkční webová appka za jeden den, Rohlik.cz integrace přes neoficiální API, card sorting se synem jako UX výzkum a jedna ingredience, která mi vzdorovala celý týden. Tohle je příběh projektu, který jsem nepotřeboval, ale teď ho doma opravdu používáme 🙂
Proč tohle vůbec řešit?
Syn (13 let) má obědy ve škole. Snídaně a večeře jsou ale na mně. V praxi to vypadalo tak, že jsme pořád dokola jedli stejných 5–7 jídel, syn se do rozhodování nijak nezapojoval a já na Rohlíku nakupoval chaoticky, vymýšlel ingredience za pochodu, zapomínal věci, kupoval zbytečnosti….
Odhaduji, že mě tohle stálo 40–50 minut týdně čistého mentálního výkonu navíc. Jen na jednoduchou otázku: „Co dneska uvařím?“
V kurzu DESB45 jsme dostali úkol: najít si vlastní pain point a hacknout ho digitálně. Tohle byl můj.
Nejdřív jsem šel za mým uživatelem
Než jsem cokoliv začal dělat technicky, sednul jsem se synem ke stolu. Vytiskl jsem kartičky s jídly a nechal ho je projít. Co chce jíst? Co nechce? Co nezná?
Výsledek: 18 oblíbených večeří + 10 snídaní. To se stalo databází celé appky.
Ano, jde o card sorting. Ano, je to věc z UX toolkitu. A ano funguje i v kuchyni s třináctiletým. Možná to byl nejdůležitější krok celého projektu, protože zajistil, že appka obsahuje jídla, která chce on, ne ta, která si myslím že chce já.
Tech stack a proč zrovna takhle
Šel jsem cestou, která maximalizuje rychlost a minimalizuje ruční práci:
- Next.js 14 (App Router) + TypeScript + Tailwind CSS – solidní základ, PWA podpora, deploy na Vercel za pár minut
- JSON soubor jako databáze receptů, žádný backend, žádná databáze, vše v repozitáři
- Vercel: hosting zdarma, automatický deploy při každém push
- Claude AI + Cursor + Claude Code – AI asistence při specifikaci, generování kódu i databáze receptů
Celkový čas: cca 15 hodin. Z toho přibližně 60 % jsem strávil definováním problému, specifikací a datovým modelem. Kódování (resp. AI asistované kódování) byl ten jednodušší díl.
Jak appka funguje
Syn otevře appku na iPhonu (přidanou na plochu jako PWA). Vidí týdenní přehled — 7 dní, každý den slot na snídani a večeři. Tapne na slot, otevře se modal s kartičkami jídel, vybere co chce. Každé jídlo má vlastní stepper — pro kolik osob se vaří.
Appka pak vygeneruje nákupní seznam: všechny ingredience agregované a deduplikované, seskupené podle kategorií (Mléčné, Ovoce a zelenina, Pečivo, Maso, Suché potraviny).
A pak přišel ten moment, kvůli kterému celý projekt stál za to:
Jedno tlačítko. Položky jdou přímo do košíku na Rohlik.cz.
Rohlik API: jak jsem se dostal tam, kam jsem neměl přístup
Rohlik nemá veřejné API. Tohle byl největší technický oříšek celého projektu.
Řešení přišlo přes open-source projekt rohlik-mcp, který reverse-engineeruje Rohlik API. Vytvořil jsem server-side API route v Next.js, která:
- Přihlásí se na Rohlik.cz s mými credentials (uloženými jako env vars na Vercelu: nikdy v kódu)
- Pro každou ingredienci vyhledá produkt
- Přidá ho do košíku
Credentials jsou bezpečně na serveru, nikdy se nedostanou do prohlížeče syna ani nikoho jiného.
Pak přišel druhý problém: search nenacházel správné produkty. Generické výrazy jako „mléko polotučné“ vracely buď špatné produkty, nebo nic. Řešení: pro klíčové ingredience jsem dohledal přesná produktová ID z URL na Rohlik.cz a uložil je přímo do databáze receptů. Pokud ID existuje, search se přeskočí úplně a produkt se přidá přímo.
{
"name": "Ovesné vločky",
"rohlikSearch": "Vilgain Minutové ovesné vločky",
"rohlikProductId": 1455566
}
Tohle mi dalo cca 95% úspěšnost přidávání. Zbývajících 5 % (zdravím, ovesné vločky) stále vzdoruje z důvodů, které dodnes plně nechápu. Ale o tom je vibe coding: funkční v 95 % případů, a zbývajících 5 % tě naučí pokoru 😀
Kde jsem narazil (a co mě to stálo)
Cursor free limit: vyčerpal jsem měsíční kvótu v půlce projektu. Přešel jsem na Claude Code (CLI nástroj od Anthropic) – stejná funkce, jen v terminálu. Překvapilo mě, jak bezbolestný byl přechod.
Množství v košíku: prvních pár minut jsem koukal na to, jak appka přidala 80 kusů ovesných vloček místo jednoho balení. Přidal jsem quantity: 1 pro všechny produkty bez ohledu na gramáže v receptu. Gramáže jsou pro vaření, ne pro nákup balení.
Vercel deployment protection: první deploy byl chráněný autentizací, takže na mobilu to nefungovalo. Řešení: vypnout v Settings.
Vercel breach: uprostřed projektu jsem se dozvěděl, že Vercel byl hacknut. Okamžitě jsem změnil heslo na Rohlíku a přidal env vars jako Sensitive. Real world produkce.
Co jsem změřil
| Metrika | Před | Dnes |
|---|---|---|
| Čas plánování jídel / týden | ~50 min | ~5 min |
| Unikátních jídel / měsíc | 5–7 | 28 |
| „Nevím co vařit“ momenty | denně | nikdy |
| Čas nákupu na Rohlíku | ~20 min | ~1 min |
| Synova účast na rozhodování | žádná | aktivní |
Úspora: ~45 minut týdně. A jedna věc navíc, která se měřit nedá: syn si teď sám vybírá co bude jíst. To jsem nečekal.
Co jsem se naučil?
Specifikace je obtížnější než kódování. 60 % času jsem strávil definováním problému a návrhem řešení. Kód (resp. AI kód) byl ta jednodušší část. To se říká pořád, ale tohle byl první projekt, kde jsem to zažil na vlastní kůži.
Zapojení uživatele není luxus. Card sorting se synem byl půlhodinová investice, která zachránila celý projekt od toho, aby obsahoval jídla, která on nechtěl jíst.
Vibe coding funguje a má hranice. Funkční webová appka s Rohlik integrací za jeden den, bez předchozích zkušeností s Next.js. To je reálné. Ale AI nehlídá detaily (množství v košíku, empty stavy, hidden soubory), a pokud nevíš kde hledat, můžeš strávit hodiny na problémech, které mají jednořádkové řešení.
Řešit reálný problém motivuje jinak. Tohle není školní projekt. Appku doma skutečně používáme.