AI-vel Épített Webshop: extrahasznaltruha.hu — Next.js + PostgreSQL + Stripe [Esettanulmány]

Projekt háttér: Ki és miért?

Az extrahasznaltruha.hu egy Nyíregyháza-közeli használt ruha kereskedő vállalkozás, amely egyidejűleg kiszolgál B2B nagykereskedői (ruhaipari feldolgozók, secondhand üzletek, export partnerek) és B2C kiskereskedelmi (végfelhasználó vásárlók) szegmenst. A két üzleti modell párhuzamos kiszolgálása rendkívüli architektúrális kihívást jelent.

Az ügyfél korábbi megoldása egy elavult WordPress + WooCommerce alapú rendszer volt, amely egyre lassabban töltött be, nem kezelte megfelelően a B2B árazást, és a Stripe integrációja megbízhatatlan volt — fizetési visszaigazolások rendszeresen elmaradtak. Az új webshoppal szemben három alapvető elvárás fogalmazódott meg:

• Nagy készlet (500+ termék) kezelése villámgyors betöltéssel
• B2B és B2C ügyfelek egyidejű kiszolgálása egyetlen platformon, különböző árazással
• Megbízható, webhook-alapú Stripe fizetési folyamat, automatikus B2B számlázással

Kulcsmutatók a launch után

Architektúra döntések részletesen

Miért Next.js? — SSR és ISR kombinációja

A webshop terméklapjai ISR-rel (Incremental Static Regeneration) épülnek fel: az oldal statikusan kiszolgált, de 60 másodpercenként újragenerálódik a háttérben, ha megváltozott a készlet. Ez azt jelenti, hogy a felhasználó mindig egy előre generált, azonnal betöltő oldalt kap — nincs várakozás a szerver-oldali renderelésre.

A kosár, a fizetési folyamat és a B2B felület valós idejű, SSR-alapú renderelést használ, hogy az árak és a készletszint mindig naprakész legyen. A Next.js App Router lehetővé tette, hogy ezt a két megközelítést egységes kódbázisban, route-szinten válasszuk szét.

Miért PostgreSQL? — ACID tranzakciók és komplex lekérdezések

A B2B rendelések komplex folyamatokat igényelnek: egy rendelés leadásakor egyszerre kell foglalni a készletet, létrehozni a rendelési rekordot, elindítani a számlázást és értesíteni a raktárt. Ha bármelyik lépés meghibásodik, az egész tranzakciót vissza kell vonni — ez PostgreSQL ACID tulajdonságát igényli.

A NoSQL alternatívák (pl. MongoDB) nem kínálnak natív multi-document tranzakciókat ugyanolyan megbízhatósággal. PostgreSQL-lel Prisma ORM-et használtunk, amely typesafe lekérdezéseket és automatikus migrációt biztosított, drámaian lerövidítve a fejlesztési időt.

Miért Stripe? — Webhook kezelés és B2B számlázás

A korábbi rendszer problémája az volt, hogy a fizetési visszaigazolást a redirect URL-en keresztül kezelte — ha a felhasználó bezárta a böngészőt a redirect előtt, a fizetés elveszett az adatbázisban. Stripe webhook alapú megközelítéssel ez a probléma teljesen megszűnik: a Stripe közvetlenül értesíti a szervert minden fizetési eseményről, függetlenül a kliens viselkedésétől.

A B2B ügyfeleknek automatikus PDF számlát generálunk Stripe Invoicing segítségével, amely tartalmazza az EU-s adószámot és a fordított adózású (reverse charge) jelölést — ami B2B export esetén kötelező.

B2B vs. B2C logika egyetlen rendszerben

Az egyik legnagyobb architektúrális kihívás az volt, hogyan szolgáljon ki egyetlen Next.js alkalmazás két teljesen különböző üzleti modellt. A megoldás: szerepkör-alapú (role-based) middleware és Prisma séma szintű elkülönítés.

A Next.js middleware réteg az első kérés pillanatában eldönti, milyen szerepkörrel rendelkezik a felhasználó, és ennek megfelelően irányítja a kérést a megfelelő szerver komponenshez. Ez azt jelenti, hogy ugyanaz az URL (/termekek/xyz) B2C látogatónak fogyasztói árat, bejelentkezett B2B partnernek nagykereskedelmi árat mutat — egy oldal renderelési cikluson belül.

Teljesítmény optimalizálás

Képkezelés: Next.js Image + WebP konverzió

Használt ruha webshopnál a termékképek általában nagy felbontású, szabályozatlan minőségű fotók. A Next.js Image komponens automatikusan konvertál WebP formátumba, méretezi a képet az adott viewport-hoz, és blur placeholder-t generál a lazy loading során — a felhasználó soha nem lát „üres" helyet, csak egy homályos előnézetet, amíg a kép betölt.

Adatbázis lekérdezés optimalizálás

A terméklistázó oldal kezdetben N+1 lekérdezési problémát okozott: minden termékhez külön lekérdezés indult a képek és kategóriák betöltéséhez. Prisma include és select direktívákkal egyetlen optimalizált JOIN lekérdezéssé alakítottuk, ami 87%-kal csökkentette az adatbázis terhelést listázásnál.

Keresés és szűrés: szerver oldali gyorsítótár

A termékkeresés és kategóriaszűrés eredményeit Redis-alapú szerver oldali cache-szel tároljuk 5 percig. A leggyakoribb keresési kombinációk (pl. „S méretű, jó állapotú kabát") azonnal kiszolgálódnak a cache-ből, az adatbázist megkerülve.

Biztonság

CSRF védelem: Minden állapotmódosító API végpont (kosárba rakás, rendelés leadása, felhasználói adatok módosítása) CSRF token ellenőrzést alkalmaz. A Next.js szerver akcióin belül a same-site cookie policy és az Origin header validálás kettős védelmet biztosít.

Stripe webhook signing: A Stripe által küldött webhookokat titkos aláíráskulccsal ellenőrizzük minden fogadáskor. Ez megakadályozza, hogy valaki hamis webhook-okat küldjön a szerverünkre, ezzel manipulálva a rendelési státuszokat.

SQL injection védelem: Prisma ORM parameterized query-t használ alapból — nem lehetséges nyers SQL string összefűzés, ami az SQL injection legelterjedtebb forrása. Minden felhasználói bemenet Zod sémával is validálva van szerver oldalon, mielőtt az adatbázishoz érne.

Üzleti eredmények — 3 hónappal a launch után