Hogyan épült fel a letelem.hu? – Organikus e-kereskedelem és intelligens crawler architektúra

Honnan indultunk? – A wellness e-kereskedelem kihívásai

Az egészség- és wellness termékek — vitaminok, bio tisztítószerek, étrend-kiegészítők és prémium kisállat-eledelek — piaca rendkívül gyorsan növekszik. A vásárlók egyre tudatosabbak, keresik a tiszta, ellenőrzött forrásból származó készítményeket. A LétElem Webáruház (letelem.eu) fejlesztésének megkezdésekor a legnagyobb üzleti és technológiai szűk keresztmetszetet a különböző beszállítóktól származó, rendkívül heterogén termékkatalógusok kezelése jelentette. A kézi adatrögzítés, a készletváltozások követése és a termékleírások folyamatos másolása nem volt skálázható módszer egy több ezer cikkszámmal dolgozó webshop esetében.

A hagyományos e-kereskedelmi megoldások (például a WordPress és a WooCommerce párosa) gyakran elbuknak, amikor több külső API-ból vagy különböző formátumú adatforrásokból kell valós időben importálni és frissíteni a termékeket. A nagy mennyiségű dinamikus adat kezelése lassítja az oldalt, növeli a betöltési időt, ami közvetlenül rontja a konverziós arányt. Emiatt a LétElem alapítói egy olyan egyedi fejlesztésű, robusztus és biztonságos platform mellett döntöttek, amely képes teljesen automatizálni a termékéletciklus-kezelést, miközben prémium felhasználói élményt nyújt.

A célkitűzések tiszták voltak: minimalizálni a manuális adminisztrációt egy intelligens háttér-crawler segítségével, garantálni a villámgyors betöltési sebességet (Core Web Vitals értékek zöld zónában tartásával), kiépíteni egy tranzakcióbiztos Barion fizetési kaput, és egy modern, letisztult dizájnt létrehozni, amely tökéletesen tükrözi a márka organikus és egészségtudatos identitását.

A vizuális dizájn és hozzáférhetőség – „LétElem Life Gallery”

A webáruház arculatának megalkotásakor a természetesség és a prémium minőség vizuális egyensúlyára törekedtünk. A dizájn alapját a tiszta fehér hátterek, a mély szénfekete tipográfia és a friss, organikus zöld (#22C55E) akcentusok alkotják. Ez a minimalista, mégis rendkívül elegáns kontraszt kiemeli a termékek prémium jellegét, miközben nyugalmat és megbízhatóságot sugároz.

A tipográfia terén a klasszikus eleganciát ötvöztük a modern olvashatósággal. A főcímekhez a gyönyörű Noto Serif betűtípust választottuk, amely hagyományos, megbízható jelleget kölcsönöz a márkának, míg a folyószöveghez és a funkcionális elemekhez a modern, kiválóan olvasható Manrope betűcsaládot alkalmaztuk. Ez a kombináció biztosítja, hogy a leírások hosszabb olvasás esetén is kényelmesek maradjanak a látogatók számára mind mobil, mind asztali eszközökön.

A modern frontend fejlesztés egyik legfontosabb szempontja a hozzáférhetőség (a11y). A LétElem fejlesztése során szigorúan követtük a WCAG 2.1 AA szintű irányelveit. Ennek megvalósításához a **Radix UI** hozzáférhető, headless komponenskönyvtárát használtuk alapként. A legördülő menük, a kosár oldalsávja, a modális ablakok és a szűrők mind billentyűzetről teljesen navigálhatóak, tartalmazzák a megfelelő ARIA attribútumokat, és támogatják a képernyőolvasó rendszereket. Ez nem csupán jogi és etikai kötelesség, hanem komoly SEO előnyt is jelent, mivel a keresőmotorok előnyben részesítik a teljesen hozzáférhető weboldalakat.

A technológiai alap – Neon Serverless PostgreSQL és Prisma v6 ORM

Egy több ezer terméket és dinamikus beszállítói adatokat kezelő platformnak stabil és skálázható adatbázis-háttérre van szüksége. Választásunk a **Neon Serverless PostgreSQL** adatbázisra és a **Prisma v6 ORM**-re esett. A Neon felhőalapú architektúrája lehetővé teszi, hogy az adatbázis-kapacitás automatikusan skálázódjon a látogatók számának függvényében, sőt, inaktív időszakokban teljesen leálljon, ami rendkívül költséghatékony üzemeltetést tesz lehetővé.

A Neon egyik legforradalmibb funkciója az **adatbázis-ágak (database branching)** kezelése. Ez lehetővé teszi, hogy a fejlesztési és tesztelési fázisokban másodpercek alatt létrehozzuk az éles adatbázis pontos, izolált másolatát. Így a Playwright crawler új verzióit vagy a bonyolultabb Prisma migrációkat anélkül tudtuk tesztelni valós adatokon, hogy veszélyeztettük volna a működő webshop integritását vagy az éles tranzakciókat.

A Prisma v6 ORM használata biztosította a teljes típusbiztonságot (Type Safety) a teljes TypeScript alkalmazásban. A sématervezés során nagy hangsúlyt fektettünk az adatbázis-szintű indexelésre. A termékek kereshetőségének javítására indexeket helyeztünk el a kategóriákon, a cikkszámokon és az árakon, míg a kosár és rendeléskezelés konzisztenciáját tranzakciós blokkokkal garantáljuk. A Prisma optimalizált lekérdezés-generálása minimálisra csökkenti a válaszidőket, támogatva a villámgyors szerveroldali renderelést.

Az intelligens crawler és automatizált szinkronizáció

A LétElem igazi technológiai motorja az az egyedileg fejlesztett **Playwright-alapú intelligens crawler**, amely teljesen automatizálja a termékek beszerzését és frissítését a partner beszállítók felületeiről. A modul nem csupán egyszerű CSV vagy XML fájlokat dolgoz fel, hanem képes bejelentkezni a beszállítói portálokra, navigálni a dinamikus felületeken, és kinyerni a legfrissebb adatokat, beleértve a nagy felbontású képeket, összetevőket és valós idejű készletinformációkat.

A Playwright fejlett böngésző-automatizációs képességeit kihasználva a crawler úgy működik, mint egy valós felhasználó, így képes áthidalni a modern, JavaScript-alapú partnerportálok akadályait is. Az összegyűjtött strukturálatlan adatokat egy tisztító és normalizáló folyamatnak vetjük alá: a rendszer kiszűri a duplikációkat, egységesíti a mértékegységeket, optimalizálja a képek méretét és WebP formátumba konvertálja azokat a gyorsabb betöltés érdekében.

Az adatintegritás megőrzése érdekében a mentési folyamat PostgreSQL tranzakciókban fut le. A beszállítói adatok frissítésekor az adatbázisban a rekordok egy egyedi azonosító alapján frissülnek vagy jönnek létre, elkerülve a duplikált termékeket. A készlet- és árváltozások azonnal szinkronizálódnak, így a vásárlók soha nem futhatnak bele olyan hibába, hogy egy már nem elérhető terméket tesznek a kosárba.

Biztonság és infrastruktúra – Upstash Redis és Auth.js

A kiberbiztonság a LétElem fejlesztése során nem egy utólagos kiegészítés, hanem az alaparchitektúra szerves része volt. Az adminisztrátori hozzáférések és a felhasználói fiókok védelmét az **Auth.js (NextAuth v5)** látja el, amely a legújabb biztonsági szabványoknak megfelelően kezeli a munkameneteket. A rendszerben szigorú **szerepkör-alapú jogosultságkezelést (RBAC)** vezettünk be, elválasztva a vásárlói, szerkesztői és adminisztrátori felületeket.

A nyilvános végpontok, a bejelentkezési felület és a Barion webhook fogadó útvonalak védelmére bevezettük az **Upstash Redis** alapú sebességkorlátozást (Rate Limiting). A Redis-alapú token-bucket algoritmus segítségével IP-cím és felhasználói azonosító alapján korlátozzuk az API-hívások gyakoriságát, ezzel hatékonyan megvédve a rendszert a Brute Force típusú támadásoktól és az automatizált botok túlterhelésétől.

Az Upstash Redis elosztott gyorsítótárként (caching) is funkcionál. A Playwright crawler által beolvasott és a Neon adatbázisban frissített termékkatalógusok gyorsítótár-címkék segítségével azonnal invalidálódnak a Redisben. Ennek köszönhetően a vásárlók terméklekérdezései egy számjegyű milliszekundumos válaszidővel futnak le közvetlenül a memóriából, drasztikusan tehermentesítve az adatbázist nagy látogatottságú időszakokban.

Egyedi Next.js Platform vs. Sablon WooCommerce Webshop

Sok induló vállalkozás választja a WordPress és a WooCommerce párosát az alacsony kezdeti költségek miatt. Azonban egy összetett beszállítói szinkronizációt és maximális sebességet igénylő projekt esetében a sablonmegoldások gyorsan elérik a korlátaikat. Az alábbi összehasonlítás bemutatja, miért jelentett az egyedi Next.js architektúra nagyságrendekkel jobb választást a LétElem számára:

Barion fizetés és tranzakcióbiztos architektúra

A modern e-kereskedelemben a fizetési folyamat zökkenőmentessége és biztonsága kritikus fontosságú. A LétElem webshopban a **Barion** kártyás fizetési rendszert integráltuk. A fizetési folyamatot egy tranzakcióbiztos, szerveroldali állapotgép kíséri végig. Amikor a vásárló a pénztárnál a fizetésre kattint, a rendszer létrehoz egy függőben lévő (PENDING) rendelési rekordot az adatbázisban, majd a háttérben generál egy egyedi tranzakciós azonosítót, amellyel átirányítja a felhasználót a biztonságos Barion felületre.

A integráció egyik kiemelkedő pontja a többszintű fizetés-visszaigazolási rendszer. A sikeres fizetés után a Barion szerverei egy aszinkron, szerverek közötti (S2S) értesítést (Webhook) küldenek a Next.js API végpontunkra. A webhook fogadó modul kriptográfiai aláírás-ellenőrzéssel hitelesíti a beérkező kérést, összehasonlítva a kapott hash aláírást a helyi biztonsági kulcsokkal, garantálva, hogy a státuszfrissítés valóban a Barion hivatalos szerverétől érkezett.

A hálózati hibákból adódó duplikált kérések vagy versenyhelyzetek (race conditions) elkerülésére a platform PostgreSQL tranzakció-izolációt és Redis-alapú zárolást alkalmaz. Amikor egy értesítés beérkezik, a rendszer azonnal zárolja a tranzakció azonosítót a Redisben. Minden további párhuzamos vagy ismételt webhook kérést a rendszer várakoztat vagy figyelmen kívül hagy, kizárva a duplikált rendelésfeldolgozást vagy a többszörös számlázást.

DevOps és az automatizált mentési rendszer

Egy folyamatosan frissülő webáruház esetében az adatok biztonsága és az üzletmenet folytonossága kiemelt prioritás. A LétElem platformon egy **teljesen automatizált adatbázis-mentési rendszert** építettünk ki, amely a háttérben, észrevétlenül végzi a feladatát. A rendszer minden nap hajnali 2:00-kor automatikusan lefut, amikor a látogatói forgalom a legalacsonyabb.

A mentési modul az SQL dump generálás előtt egy adatbázis-integritási ellenőrzést hajt végre, biztosítva, hogy sérült adatok soha ne írják felül az egészséges korábbi mentéseket. Minden elkészült mentési archívumot AES-256 szimmetrikus titkosítással látunk el a szerveroldali környezeti változókból származó biztonsági kulcsok segítségével, így maga a mentési fájl fizikai hozzáférés esetén sem fejthető vissza illetéktelenek által.

A mentések tárolására hibrid stratégiát alkalmazunk: a helyi szerveren a FIFO (First-In-First-Out) rotációs elv alapján pontosan hét napig őrizzük meg a tömörített mentéseket, miközben a hosszú távú havi mentéseket automatikusan feltöltjük egy izolált, privát objektumtárba (Object Storage). Ez a felépítés garantálja, hogy egy esetleges fizikai hardverhiba esetén is percek alatt teljes mértékben visszaállítható legyen a webshop teljes katalógusa és ügyféladatbázisa.

Összefoglalás és jövőkép

A LétElem Webáruház (letelem.eu) egyedi Next.js 15 és Neon PostgreSQL alapon történő felépítése bebizonyította, hogy egy modern technológiai stackkel tervezett e-commerce felület messze felülmúlja a hagyományos, bővítményekkel túlterhelt sablon webshopokat. Az intelligens Playwright crawler teljesen tehermentesítette a webshop adminisztrátorait a manuális termékfeltöltés és készletkövetés alól, míg a robusztus biztonsági és tranzakciós háttér stabil, hibamentes működést biztosít.

A villámgyors betöltődési sebesség és a Radix UI-alapú akadálymentesített felhasználói felület kiemelkedő konverziós arányokat és kiváló organikus Google helyezéseket eredményezett. A projekt sikeres élesítése megnyitotta az utat a jövőbeli fejlesztések előtt, mint például a gépi tanuláson alapuló intelligens termékajánló rendszer és az AI-vezérelt ügyfélszolgálati chatbot integrációja.