A brief azt mondta: "weboldal." A probléma mást.
A Paddy's Burger egy nyíregyházi smash burger étterem, növekvő helyi rajongótáborral. A kiszállítás Wolton és Foodorán fut, az jól működik. De a helybeni átvételre nem volt digitális csatorna. Nem lehetett előre rendelni. Nem volt közvetlen vendégkapcsolat. Sem email cím. Sem rendeléstörténet. Sem mód a visszatérő vendégek jutalmazására.
Egy landing page kielégítette volna a briefet, de a tényleges problémához hozzá sem ért volna.
Amit tényleg készítettem
Négy rendszer, egy kódbázis:
- Előrendelési folyamat, ami közvetlen csatornát ad az étteremnek a helybeni átvételes rendelésekre.
- Hűségprogram, ahol a visszatérő vendégek pontokat gyűjtenek és QR-kóddal váltják be a jutalmaikat.
- Személyzeti felület, ami élőben mutatja a konyhának a beérkező rendeléseket.
- Catering modul (fejlesztés alatt), ami új piacot nyit: rendezvények, irodák, tömeges rendelések.
Az előrendelés és a hűségprogram a meglévő vendégeket szolgálja jobban. A catering teljesen új célközönséget ér el. Minden funkció valós szükségletből nőtt ki, nem egy előre megírt funkciólistából.
Design döntések
A legtöbb food brand pirosat, narancsot, sárgát használ. A Paddy's az ellenkező irányba ment: telített kék, ami kontraszton keresztül dobja meg az ételfotókat. Ha minden versenytárs meleg tónusú, egy hűvös paletta azonnali felismerhetőséget teremt.
A tipográfia erős és sűrű. A címsorok mobilon is távolról olvashatók. A szövegtörzs olvasható marad anélkül, hogy versenyezne a képekkel. A vizuális hierarchia vezeti a szemet: először a burgert látod, aztán a nevet, aztán az árat.
A GSAP kezeli a scroll-alapú animációkat. Szekciók belépéskor jelennek meg, az étlap elemei 50ms-os késleltetéssel lépcsőznek, a hero finoman parallaxol. A mozgás célja: a figyelmet a rendelési CTA felé terelni. Az animációk minden eszközön ugyanazon a feszes 350ms-os alaptempón futnak. A ScrollTrigger küszöbök mobilra (80% viewport) és desktopra (75%) külön vannak hangolva.
Minden képernyő mobile-first. A forgalom nagy része közösségi médiából érkező linkekről jön, telefonon.
Kezdőlap
A kezdőlap egyetlen görgetés. Hero, étlap, hűségprogram, gyakori kérdések, catering: mind ugyanaz a kék, feszes vizuális nyelv, és minden szekció a rendelési gomb felé terel.
Nincs aloldal-labirintus. A vendég lefelé görget, és mire az aljára ér, mindent látott a döntéshez: az ételt, az árat, a klubot, a választ a kérdéseire.
Előrendelés
Az első ösztön egy egyszerű űrlap volt: név, telefon, tételek, időpont. De a mintázat, amit éttermeknél folyamatosan láttam, mindig ugyanaz. A vendég túl sokat rendel, irreális időpontot választ, és a konyhának nincs visszaszólási lehetősége.
A folyamat progressive disclosure-t használ. Először burgereket választasz. Kiegészítők csak utána jelennek meg. Aztán az átvételi idő. Aztán a kontakt adatok. Minden lépés szűkíti a lehetőségeket. A vendég sosem találkozik hosszú űrlappal, a konyha pedig sosem kap teljesíthetetlen rendelést.
Az elérhető átvételi időt a rendszer az étterem nyitvatartásához köti, és blokkolja a nyitvatartáson kívüli kéréseket.
Fizetés után a vendég egy valós idejű követőoldalra kerül. Egy körkörös haladásjelző vizualizálja az öt lépéses utat, érzékelt haladás-térképezéssel: a gyűrű beküldéskor 5%-ra ugrik, elfogadáskor 30%-ra, készítés közben 65%-ra, készre 100%-ra. Egy eltelt idő számláló mutatja a rendelés óta eltelt perceket. A rendelés részletei lenyitható szekcióban jelennek meg, tételképekkel és árakkal.
A konyha azonnali értesítést kap. Telefonálás nem szükséges.
Két részlet, ami tovább tartott a vártnál. A magyar betétdíj rendszer (DRS) palackonként 50 Ft-ot ad, és a tételnek láthatónak, különállónak és jogszabályilag helyesnek kell lennie. A magyar telefonszámok legalább hatféle formátumban érkeznek; a parser mindet normalizálja validálás előtt.
Hét automatizált email követi a rendelés életciklusát: visszaigazolás tételes számlával, staff értesítés vendégadatokkal, elfogadási értesítés, készítési frissítés, átvételre kész az étterem címével és telefonszámával, átvételt visszaigazoló üzenet a jóváírt pontokkal, és lemondási üzenet ha szükséges. Mind React Email-ben sablonozva, mind magyarul, mind az oldal vizuális nyelvét követve.
Hűségprogram
A papír pecsétkártyák elvesznek. Az app-alapú programoknál a letöltés a súrlódás. A középút: webes pontrendszer, fiókhoz kötve.
A regisztráció a Paddy's Clubon keresztül megy, Google OAuth-tal az alacsony súrlódásért vagy email/jelszóval alternatívaként. A belépési folyamat tartalmaz valós idejű jelszóvalidálást (8+ karakter, vegyes kis/nagybetű, számok), email-alapú 6-jegyű OTP kódot, és progresszív zárolást a hibás próbálkozások ellen: három hiba után 30 másodperc, öt után egy perc, hét után öt perc várakozás, látható visszaszámlálóval.
Minden rendelés pontot ér, nagyjából 1000 Ft-onként egyet. Tíz beváltható jutalom, egy extra feltéttől 8 pontért a Smokey Paddy burgerig 48-ért. Beváltáskor a rendszer egyedi QR-kódot generál, 7 napos érvényességgel. A személyzet a pultnál leolvassa. Nincs papír, nincs elfelejtett kártya, nincs manuális nyilvántartás.
A vendég radiális haladásjelzőt lát a következő jutalomig. Beváltáskor: konfetti a márka színeiben (kék, sárga, zöld) lő ki a képernyő mindkét oldaláról. Apró részletek, de szokást csinálnak a tranzakcióból.
Személyzeti felület
A személyzeti felület más problémát old meg. A vendégnek tisztaság és egyszerűség kell. A konyhának sűrűség és sebesség.
A rendelések öt állapoton haladnak végig: új, elfogadva, készítés alatt, kész, átvéve. Egy hatodik, lemondott végállapot kezeli a kivételeket. Minden állapot színkódolt, élő számlálókkal. A konyha nézet mindent eltávolít ami nem lényeges: nagy betűméret, ragadós fejléc, élő óra, túlméretezett státuszjelzők.
A személyzet egyetlen érintéssel viszi tovább a rendelést. A rendszer minden állapotváltást naplóz időbélyeggel és felhasználó-azonosítással.
A hűségprogram kezelése ugyanezen a felületen él: vendégkeresés, QR-validálás, pontkorrekciók. Egy felület mindenre, amihez a személyzet naponta hozzányúl.
Architektúra
A tech döntések a követelményekből jöttek.
Convex backendként. A konyhai felület és a rendeléskövetés egyaránt valós idejű adatot igényel. Amikor a vendég lead egy rendelést, a konyha azonnal látja. Amikor a személyzet készre jelöli, a követőoldal frissítés nélkül frissül. Egy hagyományos REST API pollinggal késleltetést és komplexitást adott volna. A Convex élő szinkront, szerver-oldali mutációkat, ütemezett jobokat és beépített rate limitinget ad egyetlen rendszerben.
Zustand a kliensoldali állapotra. A kosárnak túl kell élnie az oldal-újratöltést, és komplex beágyazott adatot kell tárolnia: tételek, variánsok, kiegészítők, betétdíjak, átvételi preferenciák. A Zustand persistence middleware-rel ezt tisztán kezeli. A szerveroldali állapot a Convexben marad, a kliensoldali a Zustandban; a kettő közötti határ tiszta.
Next.js 16 React 19-cel a frontendon. A szerver komponensek kezelik a statikus részeket (étlap, brand oldalak, jogi szövegek). A kliens komponensek az interaktív folyamatokat (rendelés, személyzeti felület, hűségprogram). Ez a szétválasztás kicsiben tartja a kezdeti bundle-t, míg az interaktív részek igény szerint töltődnek.
Resend React Email-lel tranzakciós üzenetekre. Hét email típus, mind React komponensekként sablonozva, mind az oldal design nyelvét követve.
GSAP lazy loadinggal. Az animációs kód dinamikusan importálódik, csak szükség esetén töltődik. A ticker 60fps-t céloz. A batchelés trigger-enként 5 elemnél sapkáz a jank ellen. GPU-gyorsított transzformok force3D-vel, befejezés után takarítva a memóriaszivárgás ellen.
Catering
A backend kész: 10:00 és 18:00 közötti átvételi sávok, szállítási adatok, számlázás, mennyiségalapú kedvezmények (10 adagtól 20%, 40 adagtól 30%), ingyenes szállítás 50 000 Ft felett. Szállítási és átvételi teljesítést egyaránt támogat.
Az étterem az operatív munkafolyamatot véglegesíti az élesítés előtt.
A láthatatlan rész
Kívülről ez egy éttermi weboldal, kék színvilággal és gusztusos ételfotókkal.
Alatta: nyitvatartáshoz kötött átvételi idők, betétdíj-számítás italonként, hat állapotú rendelési pipeline valós idejű szinkronnal, QR-kódok 7 napos lejárattal és staff-oldali validálással, hét lépéses email automatizáció, érzékelt haladás-térképezés körkörös trackeren, progresszív zárolással védett belépés, és konfetti ami akkor lő, amikor kiérdemelsz egy ingyen burgert.
A vendég egy étlapot és egy gombot lát. A konyha pontosan azt, amire szüksége van. Minden, ami a kettő között van, infrastruktúra.
Mindig van következő szint.
Ha tetszik, amit látsz (akár terméket, akár csapatot raksz össze) szívesen beszélek róla.