Egy hét alatt production-ready napi menü aggregátor — Claude Code-dal, MENUM

Minden nap ugyanaz a kérdés ebédidőben: „hol együnk?". A legtöbb étterem kiteszi a napi menüt a weboldalára, de mindegyik máshogy. Van aki PDF-ben, van aki képben, van aki egyszerű HTML-ben. Nincs egyetlen hely, ahol mindet egyben látnád.   Mi lenne, ha ezt AI-val oldanánk meg? Egy scraper, ami nem kézzel írt CSS selectorokkal dolgozik, hanem maga fedezi fel, hogyan kell kinyerni a menüt bármilyen oldalról. Így született a menum.hu: 167 commit, 34 pull request, ~15.600 sor kód, négy fejlesztő, egy hét.

A csapat és a stack

Négyen dolgoztunk rajta, mindenki Claude Code-dal. A munkamegosztás természetesen alakult ki: backend és DevOps, frontend és térkép, autentikáció és i18n, illetve UI polish és UX.

| Réteg | Technológia | | ----- | ----------- | | Backend | NestJS + Fastify, Prisma ORM, Playwright, Google Gemini AI | | DB | PostgreSQL 16 + PostGIS | | Frontend | Vue 3 (Composition API), Quasar Framework, TanStack Query, MapLibre GL JS | | DevOps | Docker, GitHub Actions, VPS deploy |

A spec-et magyarul írtuk (dev.spec.md), fázisonként bontva. Claude Code minden beszélgetésben ezt kapta kontextusként.   A UI design-hoz a Stitch-et használtuk, ami a Figma komoly vetélytársa lehet. Gyors volt és könnyű vele dolgozni, az egész felület vizuális tervezése órák alatt megvolt, nem napok alatt. A kész design-okat onnan egyenesen a Claude Code-nak adtuk, aki implementálta a Quasar komponenseket.

Mit építettünk?

Az első commit március 24-én délután született, az utolsó március 31-én. Ami ez idő alatt elkészült:   AI-alapú scraping pipeline. A rendszer magja egy 8 lépéses pipeline. Egy új étterem hozzáadásakor a Gemini AI elemzi az oldalt: meghatározza, statikus HTTP-vel vagy Playwright böngészővel kell-e letölteni, megtalálja a menü CSS selectorját, és cache-eli a profilt. Utána naponta automatikusan scrapel, parse-ol, fordít, és change detection-nel csak a változásokat frissíti. PDF, kép, dinamikus JavaScript, mindet kezeli.   Interaktív étterem térkép. MapLibre GL JS, OpenStreetMap tile-ok, PostGIS-alapú távolság számítás, geolokáció, Google Maps útvonaltervezés link.   Étkezési napló és AI ajánlások. A felhasználók naplózhatják mit ettek, és a Gemini az étkezési szokásaik alapján személyre szabott ajánlásokat ad.   Passwordless autentikáció. Magic link email-ben, JWT session, admin felület étterem kezeléssel és felhasználó adminisztrációval.   Teljes i18n. Magyar és angol nyelv, nemcsak a felületen, hanem a menüelemek szintjén is: a Gemini post-parse lépésben fordítja az ételneveket.   Szűrők és AI kategorizálás. Konyha típus, allergének, diétás címkék, szabad szavas keresés, kedvencek. A kategóriákat és címkéket is AI dönti el rendeli hozzá a menüelemekhez a parsing során.   Jogi compliance. GDPR adatvédelmi tájékoztató, felhasználási feltételek, impresszum, regisztráció feltétel-elfogadással.

Kihívások

Nem a klasszikus fejlesztői akadályokról van szó, inkább arról, hogy hol gyorsított az AI igazán, és miben találtunk több nehézséget.

A scraper szélsőséges esetei

A pipeline maga viszonylag simán összeállt. Ami elvitte az időt: üres oldalak, váratlan formátumok, időszakos elérhetetlenség, félbehagyott PDF-ek. Minden étterem weboldala más, és a szélsőséges esetek mindig külön kezelést igényelnek.

Prompt finomítás

A Gemini API-t több ponton is használtuk: oldal discovery, menü parsing, kategorizálás, fordítás, ajánlások. Mindegyikhez külön prompt kellett, és egyik sem volt elsőre jó. A menü parser eleinte összekeverte az árat a leírással, a discovery prompt nem mindig a megfelelő stratégiát választotta, a kategorizálás pedig túl tág vagy túl szűk címkéket adott. Minden étteremnél más volt a struktúra, más a nyelv, más a formátum, és ami az egyiknél működött, a másiknál nem. A promptokat iteratívan finomítottuk: scrapeltünk, megnéztük az eredményt, módosítottuk a promptot, újra scrapeltünk. Ez nem egyszeri munka volt, hanem végigkísérte az egész hetet. Végül a promptokat konfigurálhatóvá tettük környezeti változókon keresztül, hogy production-ben is tudjunk hangolni deploy nélkül.

Deploy nehézségek

Egy nap alatt 10 egymás utáni commit, mindegyik deploy workflow fix. GitHub Actions, Docker multi-stage build, VPS deploy script, production Compose, mind egyszerre kellett összehozni. A feedback loop lassú volt: commit, push, várni a CI-t, nézni hol áll el, javítani, újra. Claude Code nem látta a szerver állapotát, nem tudta elsőre kitalálni a konfigurációt. Klasszikus próba-hiba, amit az AI nem tud megspórolni.

ARM build meglepetések

A szerver ARM architektúrán futott. A Sentry Profiler megfagyasztotta a Docker build-et, a PostGIS extension-nek más verzió kellett ARM-en, a locale konfig crash-elte az appot. Ezeket sem a dokumentáció, sem a Claude Code nem jelezte előre — csak production-ben derültek ki.

Hogyan dolgoztunk a Claude Code-dal?

Ami jól működött: Feature scaffolding (teljes NestJS modul vagy Vue oldal percek alatt), refaktorálás (a scraper többször átszerveződött, Claude Code pontosan tudta átstruktúrálni), és hibakeresés (Playwright/Gemini hibákból kiindulva gyors iteráció).   Ami kevésbé: Deploy és infrastruktúra (Claude Code nem látta a szervert), külső szolgáltatások integrációja (Google Places API referrer probléma, email provider specifikus beállítások), és vizuális tesztelés (térkép, geolokáció, mobil nézet, ezeket kézzel kellett ellenőrizni).   A dev.spec.md fázisonkénti bontása volt a kulcs. Amikor a spec pontos volt, adatmodell, endpoint struktúra, viselkedés leírás, Claude Code szinte hibátlanul implementálta. Amikor homályos volt, többször kellett iterálni. Feature branch-eken dolgoztunk, 34 PR-t kézzel review-ztunk és merge-öltünk.

A számok

| Metrika | Érték | | ------- | ----- | | Fejlesztési idő | 7 nap | | Összes commit | 167 | | Pull request-ek | 34 | | Kódbázis méret | ~15.600 sor (TypeScript + Vue + SCSS) | | Backend modulok | 9 | | Frontend oldalak | 10+ | | API endpointok | 20+ |

Mit tanultunk?

A párhuzamos fejlesztés működik, ha a határok tiszták. A NestJS moduláris felépítése és a Vue oldalankénti szétválasztás segített. Négyen dolgoztunk egyszerre, mégis kevés volt a konfliktus.   A nehézségek nem ott vannak, ahol várnád. A scraping pipeline, az AI integráció, a térkép, ezek viszonylag simán mentek. A deploy, az email küldés, az ARM kompatibilitás, ezek vitték el az időt.   Nem azért volt lehetséges, mert az app egyszerű. 15.600 sor kód, 9 backend modul, AI scraping pipeline, interaktív térkép, passwordless auth és i18n nem „egyszerű". Azért volt lehetséges, mert a Claude Code eltüntette a boilerplate-et és lehetővé tette, hogy a tervezésre és a döntésekre koncentráljunk, ne a kód begépelésére.

Mi jön ezután?

Az ajánlórendszer jelenleg fix 3 javaslatot ad a promptban beégetett számmal. A terv az, hogy ezt dinamikusabbá tegyük: a felhasználó beállíthassa az ajánlások számát, az AI figyelembe vegye a kedvenc éttermeket, a szűrő beállításokat, és hosszabb távú étkezési mintákat is és ne csak az elmúlt 7 napot.

NestJS + Fastify Prisma ORM Playwright Google Gemini AI Vue 3 Quasar Framework TanStack Query MapLibre GL JS PostgreSQL 16

Olvasnék még ...