Hogyan épült fel az extrahasznaltruha.hu? – Egy modern használtruha-kereskedelem technológiai háttere

Honnan indultunk? – A digitalizáció szükségessége

A Ruhaimport Kft. 2009-ben kezdte meg működését azzal a céllal, hogy prémium minőségű, Európából — elsősorban Angliából — importált használt ruhákat kínáljon a magyar piacnak. Tizenöt év alatt a cég stabil piaci pozíciót épített ki: rendszeres szállítmányok, megbízható minőségi osztályozás és személyes ügyfélkapcsolatok jellemezték a működést.

Azonban a digitális korszak elvárásai alapvetően megváltoztak. Az ügyfélkör egy része már kizárólag online informálódik és vásárol; az új generációs kereskedők nem telefonon, hanem webshopban böngésznek; a versenytársak egyre több digitális csatornán jelennek meg. Nyilvánvalóvá vált: nem elég, ha kiváló az áru — a digitális jelenlétnek is ki kell állnia a versenyt.

Amikor a Ruhaimport Kft. csapata megkeresett minket, egyértelmű volt: nem csupán egy webshopra van szükségük. Az AiSolve előtt az a feladat állt, hogy egy komplex, integrált digitális platformot tervezzünk és fejlesszünk, amely:

• Átlátható termékbemutatást és online rendelési lehetőséget biztosít B2B és B2C ügyfeleknek egyaránt
• Automatizálja a számlázást, a rendeléskezelést és az ügyfélkommunikációt
• Bizalomépítő eszközöket kínál — például videós termékellenőrzést — amik a fizikai találkozást helyettesíthetik
• Többnyelvű kiszolgálást tesz lehetővé a hazai és a határon túli vásárlók számára
• Erős adminisztrációs hátteret ad a csapatnak: CMS, CRM, rendeléskezelés, blog és beállítások egy helyen

Az ügyfél elvárásait megismerve csapatunk modern, skálázható technológiai stack mellett döntött. A cél nem a gyors piacra lépés volt, hanem egy hosszú távra tervezett, karbantartható, biztonságos rendszer megalkotása — amelyet évek múlva is könnyű bővíteni és fejleszteni.

A technológiai alap – Miért Next.js és miért most?

A frontend-backend választás az egyik legkritikusabb döntés egy e-commerce projekt életében. A két legfőbb szempont a teljesítmény és a SEO-hatékonyság volt — egy webshopnak gyorsan kell betöltenie, és a termékoldalakon megjelenő tartalmaknak indexelhetőknek kell lenniük a keresőmotorok számára.

A döntés a Next.js App Router architektúrájára esett, amelynek több komoly előnye is van a hagyományos, tisztán kliensoldalas megközelítéssel szemben. A szerver-oldali renderelés (SSR) és a statikus generálás (SSG) ötvözésével a terméklapok villámgyorsan töltődnek, miközben a dinamikus tartalmak (kosár, rendelési folyamat) valós időben frissülnek.

A TypeScript bevezetése a projekt teljes egészében érvényesül — strict módban. Ez elsőre lassabb fejlesztést jelent, de hosszú távon drasztikusan csökkenti a futásidejű hibák számát, és önmagában dokumentálja a kódbázis szándékait. Különösen fontos ez egy olyan rendszerben, ahol a rendelési adatok, számlázási logika és a fizetési folyamat pontossága kritikus.

A Tailwind CSS v4 a legújabb verziójában fut, PostCSS integrációval. Az utility-first megközelítés lehetővé teszi, hogy a dizájnrendszer konzisztensen érvényesüljön az egész alkalmazásban, anélkül hogy a stílusfájlok kezelhetetlen méretűvé nőnének.

A képfeldolgozást a Sharp könyvtár végzi: minden feltöltött termékfotó automatikusan konvertálódik WebP és AVIF formátumba. Ez nem csupán esztétikai döntés — a modern képformátumok 30-50%-kal kisebb fájlméretet eredményeznek azonos minőség mellett, ami közvetlen hatással van az oldalbetöltési sebességre és ezáltal a konverziós rátára.

„A technológiai stack nem öncélú — minden egyes eszköz valós üzleti problémára ad választ, legyen az betöltési sebesség, SEO-elérhetőség vagy hosszú távú karbantarthatóság."

Az adatbázis és a backend architektúra

Az adatkezelési réteg tervezésekor a Clean Architecture és a Domain-Driven Design (DDD) elvei vezéreltek. Ez azt jelenti, hogy az üzleti logika nem keveredik az adatbázis-lekérdezésekkel vagy a felhasználói felület kódjával — minden réteg jól meghatározott felelősséggel rendelkezik.

Az adatbázis-motor PostgreSQL 16, amelyhez a Prisma ORM biztosítja a típusbiztos hozzáférést. A Prisma séma az egész rendszer adatmodelljének egységes forrása: ebből generálódnak a TypeScript típusok, az adatbázis migrációk és a kliensoldali lekérdező metódusok egyaránt.

A főbb adatmodellek

A rendszer hét fő doménje köré szervezett adatbázis-sémával dolgozik:

• Product – A termék teljes leírása: kategória (felnőtt, gyerek, cipő, lakástextil, kiegészítők, bálás), minőségi szint (krém, extra, A+, originál), kilogrammonkénti ár, képek, videók, minimum rendelési mennyiség és lépésköz
• Order & OrderItem – Rendelések a teljes ügyfél-adatkészlettel, szállítási és számlázási cím szeparáltan, Stripe fizetési státusz, Számlázz.hu számlaszám
• Invoice – Számlák nyilvántartása a Számlázz.hu integrációhoz, státusz kezeléssel (kiállított/visszavont)
• Customer – CRM modul: egyedi email alapú azonosítás, rendelési előzmények, newsletter feliratkozás
• BlogPost – Multilingvális blog: slug-alapú URL-ek, fordítási csoportok azonosítója, publikálási státusz
• User – Admin felhasználók: szerepkör, TOTP-alapú kétfaktoros hitelesítés, onboarding tour állapot
• ShopSettings – Singleton konfiguráció: alapértelmezett szállítási díj, minimum rendelés, ingyenes szállítás határa

A Next.js Server Actions mechanizmusa a backend belépési pontjait valósítja meg. Ez a modern Next.js funkció lehetővé teszi, hogy a szerver-oldali kód közvetlenül a React komponensekből hívható legyen, anélkül hogy külön REST API végpontokat kellene definiálni és menedzselni. Az eredmény: kevesebb boilerplate kód, erős típusbiztonság az egész kérdés-válasz cikluson át, és jobb fejlesztői élmény.

A webshop és a felhasználói élmény

A felhasználói élmény tervezésekor két végletesen különböző vásárlói profil igényeit kellett egyidejűleg kielégíteni: a nagybani B2B vevőt, aki kilogrammonként áraz és tonnás tételekben gondolkodik — és az egyéni vásárlót, aki néhány zsák ruhát keres otthoni továbbértékesítésre.

A termékoldal felépítése

A termékek kilogrammonkénti árazással jelennek meg, ami a nagykereskedelmi logika digitális tükre. A vásárló megadja a kívánt mennyiséget (kg-ban), a rendszer pedig automatikusan kalkulálja az összeget és a szállítási díjat. A minimum rendelési mennyiség és a mennyiségi lépésköz termékenként konfigurálható — ezzel biztosítható, hogy a kisebb csomagolási egységek ne bomlassák meg a logisztikát.

A terméklap tartalmaz:

• Teljes képgalériát WebP/AVIF optimalizált képekkel, lazy loading-gal
• Termékleírást kategória és minőségi osztály alapján
• Videókat a termék tartalmáról (Video Check funkció)
• Valós idejű ár- és szállítási díj kalkulátort
• Kosárba helyezés gombot minimummennyiség-ellenőrzéssel

A kosár és a checkout folyamat

A kosárkezelés teljesen kliensoldalon fut, React state és localStorage alapon, hogy az oldalbetöltések között megőrizze a tartalmát. A checkout folyamatnál azonban már teljes szerver-oldali validáció fut — az árak, szállítási díjak és az elérhetőség újból ellenőrződnek, kizárva a kliensoldalon esetlegesen manipulált adatokat.

A szállítási díj kalkuláció dinamikusan a globális shop-konfigurációból olvassa az aktuális tarifákat, így az adminisztrátor egyetlen beállítási felületen módosíthatja az árazást anélkül, hogy kódhoz kellene nyúlni. Az ingyenes szállítás küszöbértéke szintén adminisztrálható — a rendszer automatikusan alkalmazza a megfelelő díjat.

A fizetési folyamat két csatornán fut párhuzamosan: Stripe Checkout Session azonnali bankkártyás fizetéshez és utánvétes (COD) fizetés azoknak, akik személyesen veszik át az árut vagy bankátutalást preferálnak. A Stripe integráció a legmagasabb szintű PCI-megfelelőséget biztosítja anélkül, hogy a kártyaadatok bármikor a saját szerverünkre kerülnének.

A Video Check – Bizalom a digitális térben

Az online használtruha-kereskedelem legfőbb akadálya a bizalom hiánya. Amikor valaki több tízezer forintot költ egy zsák ruhára, amelynek tartalmát nem látja előre, az természetes kockázatnak tűnik. A klasszikus megközelítés erre az, hogy a webshop szép képeket mutat és leírja a minőségi osztályt — de a vásárló nem tudja ezt valóban ellenőrizni vásárlás előtt.

Az ügyfél kérésére egy saját megoldást fejlesztettünk ki: a Video Check rendszert. A lényege egyszerű, de hatásos: a vásárló vásárlás előtt videós ellenőrzést kérhet a kiszemelt termékről. A Ruhaimport csapata fizikailag felnyitja a zsákot vagy bálát, és videón megmutatja a tartalmát — így a vevő pontosan látja, mit kap.

Technológiai oldalról ez magában foglalja:

• Videó galériát a felhasználói felületen, ahol korábbi ellenőrzések megtekinthetők
• Admin felületet a videók kezelésére: TikTok és YouTube linkek hozzáadása, thumbnail-ek, aktív/inaktív státusz
• FFmpeg integrációt a videók szerver-oldali feldolgozásához
• „Ajánlatot kérek" CTA gombokat, amelyek közvetlen kapcsolatfelvételre irányítanak

A Video Check nem csupán egy funkció — ez a platform üzleti differenciátora. Olyan bizalmi tőkét épít fel, amelyet a versenytársak nehezen tudnak egyszerűen lemásolni, hiszen nemcsak szoftvert igényel, hanem üzemeltetési kultúrát és elkötelezettséget is.

A videók megjelenítése a főoldalon és a terméklapokon is szerepel, ezzel a bizalomépítő üzenet a teljes felhasználói útvonal mentén jelen van — az első látogatástól a vásárlás befejezéséig.

Automatizált számlázás és pénzügy

Egy nagykereskedés esetén a számlázás nem opcionális — ez jogszabályi kötelezettség. A kézi számla kiállítás azonban időigényes, hibalehetőséget rejt, és nem skálázódik jól növekvő rendelési volumen mellett. Az extrahasznaltruha.hu platform ezért teljes körűen integrálja a Számlázz.hu API-t és a Stripe fizetési rendszert.

Stripe integráció

A Stripe integrációs flow három fázisból áll. Első lépésben a checkout során a backend létrehozza a Stripe Checkout Session-t a kosár tartalmából és a szállítási díjból, majd átirányítja a vásárlót a Stripe biztonságos fizetési oldalára. Sikeres fizetés után a vásárló visszatér az oldalra, ahol a rendelés feldolgozása megtörténik.

A második fázis a Stripe webhook feldolgozás: a rendszer valós időben fogadja a Stripe visszajelzéseit. A sikeres fizetési esemény azonnal triggeri az automatikus invoice generálást és a visszaigazoló email küldését. A kriptográfiai aláírás-ellenőrzés biztosítja, hogy csak valódi Stripe eseményeket dolgozzon fel a rendszer.

Számlázz.hu integráció

A Számlázz.hu Magyarország egyik vezető online számlázási platformja, és az extrahasznaltruha.hu natívan integrálja az API-ját. Minden sikeres rendelés után a rendszer automatikusan kiállít egy számlát a vásárló adataival, a Ruhaimport Kft. eladói adataival és a rendelt termékek tételes listájával. A számlaszám visszakerül a rendelés rekordjába, biztosítva a teljes körű nyomonkövethetőséget.

Az automatizáció nem áll meg a bankkártyás fizetésnél. A banki átutalásos rendelések esetén a rendszer szintén API-kapcsolaton keresztül egyezteti a beérkező bankszámlakivonatot a nyitott rendelésekkel. Ha az utalás azonosítható, a rendelés státusza automatikusan frissül, a számla kiállítódik, és az ügyfél értesítő emailt kap — mindenféle manuális beavatkozás nélkül. Ez a háromirányú automatizáció (Stripe + banki utalás + Számlázz.hu) biztosítja, hogy a pénzügyi folyamatok lépést tartsanak a rendelési volumennel anélkül, hogy az adminisztratív terhek arányosan növekednének.

Többnyelvűség – Határokon átívelő kereskedelem

A Ruhaimport Kft. természetes növekedési iránya a szomszéd piacok felé mutat — különösen Szlovákia irányába, ahol a hasonló igények és közeli földrajzi elhelyezkedés logikus terjeszkedési lehetőséget kínál. A platform ezért eleve három nyelven lett tervezve: magyar (hu), angol (en) és szlovák (sk).

A többnyelvűséget a next-intl könyvtár kezeli, amely a Next.js App Router-rel natívan integrálódik. Az URL struktúra locale-prefix alapú: /hu/termekek, /en/products, /sk/produkty — így minden oldal egyedi URL-en érhető el, ami a SEO szempontjából is optimális.

A fordítási tartalmak a kódtól teljesen elválasztva, strukturált szövegfájlokban élnek. A blog bejegyzések fordításcsoporton keresztül kapcsolódnak össze: egy tartalom három különböző locale-on publikálható, a rendszer automatikusan összeköti a megfelelő hreflang tagekkel, amelyek segítik a Google-t a megfelelő nyelvi változat indexelésében.

A dinamikus metaadatok (OpenGraph, Twitter Card, page title) szintén lokalizáltak — egy angol nyelven böngésző látogató az összes megosztható tartalmat angolul látja, a keresőmotorok pedig a megfelelő nyelvi változatokat rangsorolják a megfelelő piacon.

Az adminisztrációs felület – A vezérlőközpont

Egy modern e-commerce platform csak annyira jó, amennyire könnyen kezelhető a csapat számára, amely nap mint nap dolgozik vele. Az extrahasznaltruha.hu adminisztrációs felülete egy teljes körű CMS és CRM rendszert tartalmaz, amely egységes kezelőfelületen ad hozzáférést az üzlet minden dimenziójához.

Dashboard és analitika

A dashboard belépési képernyőn KPI kártyák fogadják az adminisztrátort: összes rendelés, összbevétel, aktív termékek száma. A havi bevételi diagramot Chart.js rendereli — vizuálisan azonnal áttekinthető a forgalom alakulása. A legújabb blog bejegyzések és a gyors linkek (Új Termék, Új Bejegyzés) a leggyakrabban használt funkciókat teszik egy kattintásnyira.

Termékmenedzsment

A termékkezelő oldal az egyik legkomplexebb felület: kategória, minőségi osztály, kilogrammos ár, minimum rendelési mennyiség, lépésköz, leírás, képek és videók — mindez egyetlen, jól strukturált formban. A képfeltöltés során a Sharp processzoron átmenő képek automatikusan WebP és AVIF formátumban mentődnek, ezzel tehermentesítve az adminisztrátort a manuális optimalizálástól.

Rendeléskezelés és CRM

A rendelések teljes életciklusát az admin felület kezeli: az új rendeléstől a szállítási értesítőn át a számla kiállításig. Az adminisztrátor egy kattintással küldhet visszaigazolást vagy szállítási értesítőt, megtekintheti a Stripe fizetési státuszt, és manuálisan is triggerelheti a Számlázz.hu számlakiállítást.

A vásárlói CRM modul minden vevőhöz rendeli a rendelési előzményeket, kontaktadatokat és a newsletter feliratkozási státuszt. Ez lehetővé teszi a célzott ügyfélkommunikációt és a visszatérő vásárlók azonosítását.

Blog és tartalom

Az integrált blog CMS a tartalmakat három nyelven kezeli egy egységes szerkesztőfelületen. A slug automatikusan generálódik, a featured kép feltöltése drag-and-drop alapon működik, és a bejegyzések publikálás előtt piszkozatként is menthetők. A blog tartalmak dinamikus OpenGraph és JSON-LD metaadatokkal rendelkeznek, amelyek a keresőoptimalizálást és a közösségi megoszthatóságot egyaránt javítják.

Biztonság: 2FA és session kezelés

Az admin felület hitelesítését a NextAuth.js kezeli. A jelszavak bcryptjs alapon, 10 salt körrel vannak titkosítva az adatbázisban. Az érzékeny adminisztrációs műveletek védelme érdekében kétfaktoros hitelesítés (2FA) is elérhető: TOTP algoritmust implementál, QR-kód alapú beállítással (pl. Google Authenticator, Authy).

Interaktív onboarding tour

Új adminisztrátornak az első bejelentkezés során egy interaktív onboarding tour segít eligazodni. A lépésről lépésre vezető útmutató rámutat a legfontosabb funkciókra, csökkentve a betanulási időt és az emberi hibák valószínűségét. Az elvégzett tour-ok állapota az adatbázisban tárolódik, így a visszatérő felhasználónak nem kell újra végigmenni rajtuk.

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

Az extrahasznaltruha.hu platform egy olyan digitális transzformáció eredménye, amelynek minden technológiai döntése mögött konkrét üzleti szükséglet áll. A Next.js App Router a SEO-hatékonyságot és a teljesítményt biztosítja; a Prisma és PostgreSQL a megbízható, típusbiztos adatkezelést; a Stripe és Számlázz.hu integráció az automatizált pénzügyi folyamatokat; a Docker a megbízható, reprodukálható deploymentet.

A platform legfontosabb jellemzői összefoglalva:

• B2B és B2C képességek párhuzamosan, egyetlen platformon
• Automatizált pénzügyek: Stripe + banki utalás + Számlázz.hu, nulla kézi beavatkozás a normál folyamatban
• Multilingvális kiszolgálás: magyar, angol, szlovák piaci jelenlét
• Video Check: egyedi bizalomépítő megoldás, iparági differenciátor
• Integrált CMS és CRM: blog, termékek, rendelések, vásárlók egy adminisztrációs felületen
• Magas szintű biztonság: 2FA, titkosított jelszavak, kriptográfiai webhook verifikáció
• Skálázható architektúra: Clean Architecture + DDD, Docker-ready deployment

A jövőbeni fejlesztési irányok között szerepel a keresési és szűrési élmény továbbfejlesztése, egy törzsvásárlói program bevezetése, valamint a mobil natív élmény javítása. Az automatizálási potenciál is jelentős: az AI-alapú termékleírás-generálás és a kép-alapú minőségbecslés olyan irányok, amelyek a jövőbeni roadmapon szerepelnek.

„Egy jó platform nem csak azt teszi lehetővé, amit ma csinálsz — felkészíti a vállalkozásodat arra is, amivé holnap válhat."

Az extrahasznaltruha.hu projekt bebizonyítja, hogy a hagyományos, személyes kapcsolatokon alapuló iparágak is profitálhatnak a modern szoftverarchitektúrából — ha az implementáció valóban az üzlet igényeit szolgálja, és nem öncélt hajszol. A 2009-ben alapított Ruhaimport Kft. ma egy 2026-os technológiai szinten álló platformmal kiszolgálva folytatja azt, amit mindig is csinált: megbízható, minőségi árut juttat el az emberekhez.