Hogyan épült fel a premiumhasznaltruha.hu? – Digitális transzformáció a B2B nagykereskedelemben

Honnan indultunk? – A B2B digitalizáció új szintje

A prémium minőségű használt ruhák importőrei és nagykereskedői hagyományosan a személyes kapcsolatokra és a fizikai bemutatótermekre támaszkodnak. Ez a működési modell azonban jelentős logisztikai és időbeli korlátokkal küzd. A nemzetközi és hazai viszonteladók, butikosok és online kereskedők ma már elvárják, hogy a termékkészletet bárhonnan, bármikor, kiváló minőségben böngészhessék — anélkül, hogy órákat vagy akár napokat kellene utazniuk a raktárakhoz. Az offline értékesítés során a bálák és márkás válogatások áttekintése időigényes, a papíralapú vagy Excel-alapú nyilvántartások pedig lassítják a megrendelések feldolgozását, ami növeli a hibák kockázatát a kiszállítás során.

Amikor a Premium Használtruha csapata megkeresett minket, egyértelmű célokat határoztunk meg: egy olyan exkluzív B2B katalógus- és e-commerce felületet kell létrehoznunk, amely nem csupán egy egyszerű terméklista, hanem a prémium minőség digitális tükörképe. A legfőbb kihívás egy olyan skálázható, biztonságos és modern rendszer felépítése volt, amely támogatja a gazdag médiatartalmakat, saját videós modulon keresztül mutatja be a bálákat és márkás válogatásokat, miközben az adminisztrációs felületet a legmagasabb szintű kétlépcsős biztonsággal védi a botok és az illetéktelen behatolók elől, akik az exkluzív nagykereskedelmi árakat szeretnék lekaparni.

Az offline-ról online-ra való áttérés során különös figyelmet kellett fordítanunk a partneri bizalom megőrzésére. A használtruha-import szektorban a vásárlók megszokták, hogy személyesen ellenőrizhetik a textília textúráját, anyagsűrűségét és a márkák hitelességét. A digitális platformnak ezt a fizikai tapasztalatot kellett pótolnia a lehető legmagasabb felbontású vizuális eszközökkel, miközben a tranzakciós és adminisztratív folyamatokat teljesen automatizálja a háttérben.

A vizuális koncepció – „The Textile Archive”

A projekt dizájnfilozófiája szakít a hagyományos webshopok túlzsúfolt, agresszíven színes sémáival. Helyette egy letisztult, művészeti galériák ihlette vizuális rendszert hoztunk létre, amely a „The Textile Archive” elnevezést kapta. A vizuális struktúra alapvető célja az volt, hogy maga a textil és a ruha legyen a fókuszban, a felület pedig elegáns, minimalista keretet biztosítson ehhez. Az üresség és a tágas tér használata kiemeli a termékek egyediségét, és azt az üzenetet közvetíti, hogy minden bála és válogatás gondosan válogatott, értékes árucikk.

A színpaletta és a tipográfia szigorúan szabályozott tokenekre épül:

• White Background (#FFFFFF) – Tiszta, szellős terek a termékek prémium megjelenítéséhez. Nincs zavaró háttérzaj, a kontrasztok segítik a textíliák vizuális elemzését.
• Carbon Black (#111111) – A brand fő strukturális színe. Ebben jelennek meg a címsorok, a navigáció, a mobil menü háttere és a szövegek, tekintélyt és eleganciát sugározva.
• Heritage Gold (#8A6E35) – A prémium minőség és az interakciók exkluzív színe. Gombok, aktív állapotok, finom árnyékok és ikonok akcentusa használja ezt az árnyalatot.
• Noto Serif Címsorok – Elegáns, hagyományőrző tipográfia a címekhez, klasszikus könyvtári és archív hangulatot teremtve, kontrasztot alkotva a modern, jól olvasható Manrope test szöveggel.
• Szögletes Formavilág (0px Border Radius) – Minden interaktív elem, képkeret és gomb éles sarkokkal rendelkezik. A lekerekítések teljes elhagyása modern, építészeti fegyelmet és stabilitást sugároz a látogatóknak.

A felhasználói élményt a háttérben futó finom mikro-animációk teszik teljessé. A Framer Motion könyvtár segítségével megalkotott áttűnések és a lebegő (hover) hatások a gombokon és kártyákon reagálnak a felhasználó mozdulataira, organikus, élő érzetet adva a felületnek. A navigációs fejléc görgetéskor áttetszővé (glassmorphism) válik, finoman elmosva a mögötte elhaladó tartalmat, megőrizve a modern vizuális dizájn prémium jellegét.

„A design nem csupán dekoráció. A 'The Textile Archive' koncepcióval sikerült a használtruha-nagykereskedelmet olyan magasztos vizuális szintre emelni, amely azonnal bizalmat ébreszt a legigényesebb B2B partnerekben is.”

A technológiai alap – Next.js 16 és React 19

Egy B2B katalógus esetén a sebesség és az indexelhetőség kritikus. Ha egy viszonteladó nem találja meg a Google-ben a keresett bálás ruhát, vagy a termékoldal másodpercekig töltődik mobilon, a konverzió elvész. Ezért döntöttünk a legújabb Next.js 16 és React 19 mellett. Az App Router architektúra lehetőséget biztosít arra, hogy a termékadatlapok nagy része statikusan generálódjon (Static Site Generation - SSG), miközben a készletadatok és a felhasználói állapotok dinamikusan frissülnek a szerver oldali renderelés (Server-Side Rendering - SSR) segítségével.

Az RSC (React Server Components) technológia drasztikusan csökkenti a kliensoldali JavaScript méretét. Mivel a lekérdezések és a HTML struktúra összeállítása közvetlenül a szerveren történik, a böngészőnek nem kell nehéz keretrendszer-kódokat letöltenie és futtatnia a tartalom megjelenítéséhez. Ez különösen a lassabb mobilhálózaton böngésző viszonteladók számára jelent óriási előnyt, akik a raktárban vagy útközben szeretnének rendelni.

A React 19 egyik legnagyobb és leginkább várt újdonsága a Server Actions natív támogatása. Ennek köszönhetően a frontendről közvetlenül, biztonságos RPC (Remote Procedure Call) hívásokkal érhetjük el a backend logikát, nincs szükség felesleges REST API végpontok karbantartására és külön adatvalidációs körökre a hálózati rétegben. A típusbiztonság a teljes folyamaton át garantált, hiszen a TypeScript fordító azonnal jelzi, ha a kliensről küldött adatok struktúrája eltér a szerver által várt sémától. Ez a fajta integráció minimalizálja az integrációs hibákat és drasztikusan felgyorsítja a fejlesztési folyamatot.

Adatbázis és Clean Architecture

A backend tervezése során a Clean Architecture és a Domain-Driven Design (DDD) elveit alkalmaztuk. Az üzleti logika (domain réteg) teljesen elkülönül az infrastruktúrától (adatbázis, külső API-k) és a prezentációs rétegtől (UI komponensek). Ez a struktúra hosszú távon rendkívül könnyű tesztelhetőséget és karbantarthatóságot biztosít. Ha a jövőben a PostgreSQL adatbázist más típusú adatbázisra kellene cserélnünk, az üzleti logikát tartalmazó szervizréteg érintetlen maradhat, csupán az adathozzáférési adaptereket kell lecserélni.

Az adatbázis-kezelést a Prisma 6.2.1 ORM látja el egy nagyteljesítményű PostgreSQL adatbázis felett. A Prisma segítségével az adatbázis-séma változtatásai és a TypeScript típusok szinkronban tarthatók, ami szinte teljesen kizárja a hibás lekérdezésekből fakadó futásidejű összeomlásokat. A sémában összetett indexeket definiáltunk a leggyakrabban használt keresési és szűrési paraméterekre (kategória, minőségi osztály, státusz), így az adatbázis-lekérdezések válaszideje még többezres termékkatalógus esetén is néhány ezredmásodperc marad.

Egyedi fejlesztés vs. Sablon megoldások

Sok vállalkozás esik abba a hibába, hogy B2B igényeit egy standard WooCommerce vagy Shopify sablon segítségével próbálja megoldani. Bár ezek az eszközök kiválóak egyszerű kiskereskedelmi webshopokhoz, egy prémium nagykereskedelmi platform komplexitását és egyedi logikáját nem képesek hatékonyan kiszolgálni. Az alábbi táblázat bemutatja az AiSolve által fejlesztett egyedi B2B platform és a hagyományos sablon alapú megoldások közötti legfontosabb különbségeket:

A Video Hub – Termékbemutatók prémium minőségben

Az online B2B értékesítés legfőbb gátja, hogy a partnerek nem tudják kézbe venni a textilt. Az extrahasznaltruha.hu esetén bevezetett videós ellenőrzést (Video Check) a premiumhasznaltruha.hu-nál továbbfejlesztettük, és egy dedikált Video Hub modulba integráltuk. Ez a modul a bizalom kiépítésének legfőbb digitális eszköze.

Ahelyett, hogy külső platformokra (például YouTube-ra vagy TikTokra) hagyatkoznánk — ami megtörné a prémium, reklámmentes márkaélményt, és külső ajánlásokkal elvonná a vásárló figyelmét —, a Video Hub a helyi fájlfeltöltést és az optimalizált lejátszást támogatja. A videók közvetlenül a szerverről vagy egy globális tartalomkiszolgáló hálózatról (CDN) töltődnek be egy egyedileg fejlesztett, szögletes arany szegéllyel ellátott lejátszóban, amely tökéletesen harmonizál a „The Textile Archive” vizuális elveivel. A videókat a háttérben automatikusan optimalizáljuk több különböző felbontásra, így a lejátszás azonnal elindul mobiltelefonon is, pufferelés nélkül.

A videók segítségével a viszonteladók részletesen áttekinthetik az egyes bálák, krém kategóriás csomagok tartalmát, az anyagok esését és a termékek valódi minőségét. A bemutatók során a nagykereskedés munkatársai egyesével emelik ki a ruhákat a zsákokból, bemutatva a márkajelzéseket és a hibátlan állapotot. Ez a fajta transzparencia és részletgazdagság jelentősen csökkenti a téves megrendelésekből fakadó utólagos reklamációk számát, miközben olyan kiemelkedő versenyelőnyt biztosít a piacon, amellyel az offline vagy egyszerűbb online nagykereskedések nem képesek lépést tartani.

Biztonság felsőfokon – RBAC és Kétfaktoros Autentikáció (2FA)

Egy B2B platform esetén az adatok védelme kiemelten kritikus fontosságú. A nagykereskedelmi árak, a raktárkészlet pontos adatai, valamint a partnerlisták olyan bizalmas üzleti információk, amelyek nem szivároghatnak ki az illetéktelen látogatók vagy a konkurencia számára. Ha az árak nyilvánossá válnának, az ronthatná a viszonteladók piaci pozícióját is. Ezért a platformot többrétegű biztonsági rendszerrel védtük meg.

A hitelesítést és a munkamenet-kezelést a Next-Auth v5 (Auth.js) végzi, amely a modern webes hitelesítések aranyszabványa. Bevezetésre került a szigorú Role-Based Access Control (RBAC), amely három jól elkülönített jogosultsági szintet kezel:

• User – Regisztrált és az adminisztrátorok által manuálisan jóváhagyott B2B partnerek, akik hozzáférnek a katalógushoz, a nagykereskedelmi árakhoz és a Video Hubhoz. A jóváhagyás nélküli látogatók csak egy minimális marketingfelületet látnak árak nélkül.
• Admin – A nagykereskedés munkatársai, akik kezelik a termékeket, kategóriákat, videókat és rendeléseket, valamint jóváhagyhatják az új regisztrációkat.
• Super Admin – Teljes hozzáférés a rendszerbeállításokhoz, fejlesztői eszközökhöz, a biztonsági audit naplókhoz és a felhasználók jogosultságainak kezeléséhez.

Az adminisztrációs felület elérését és az érzékeny adatkezelési műveleteket kétlépcsős azonosítással (2FA) védjük. A rendszer a legbiztonságosabb időalapú egyszeri jelszó (TOTP - RFC 6238) szabványt követi. Az adminisztrátorok az első bejelentkezés alkalmával egy egyedi QR-kódot olvashatnak be kedvenc hitelesítő alkalmazásukkal (pl. Google Authenticator, Microsoft Authenticator), és a továbbiakban csak a generált 6 jegyű kód megadásával léphetnek be. A jelszavak tárolása természetesen szigorúan sózott bcryptjs hasheléssel történik, megnehezítve a brute-force vagy szótár alapú támadásokat.

DevOps és automatizált termékimportálás

A korábbi rendszerekről való átállás és az adatmigráció gyakran a legfájdalmasabb pont egy nagykereskedés életében. Senki sem szeretne heteken át manuálisan feltölteni 77 különböző terméket és a hozzájuk tartozó nagy felbontású médiafájlokat. Ezért egy automatizált importálási folyamatot terveztünk a DevOps csatornába. Ez lehetővé teszi a rendszer gyors és zökkenőmentes élesítését bármilyen környezetben.

A folyamat lelke a automatizált adatmigrációs modul script, amely képes a strukturált strukturált katalógus-adatforrás fájlból kinyerni az összes termékadatot, kategóriát, minőségi osztályt és árat. A script intelligensen elvégzi a kategóriák slug-alapú párosítását a PostgreSQL-ben meglévő CUID-okkal, majd tranzakcióbiztos módon hajtja végre az importálást. Ez azt jelenti, hogy ha a folyamat során bármilyen hiba lép fel, a rendszer teljesen visszagörgeti a változtatásokat, elkerülve a részben sérült vagy inkonzisztens adatok bekerülését az adatbázisba.

A képeket egy dedikált deploy script automatikusan másolja át a szerver éles biztonságos média-tároló mappájába, preferálva a modern, kis fájlméretű WebP és AVIF formátumokat. A script ellenőrzi a képek integritását, és automatikusan generálja a hiányzó placeholder változatokat is. Ezzel az automatizációval a teljes adatbázis és médiatár másodpercek alatt élesíthető vagy teljesen újraépíthető a tesztelési fázisokban.

Összefoglalás és a jövő

A premiumhasznaltruha.hu projekt tökéletes példája annak, hogyan lehet a modern szoftverarchitektúrát és a kifinomult vizuális dizájnt a B2B nagykereskedelmi igények szolgálatába állítani. Az eredmény egy olyan villámgyors, biztonságos és rendkívül elegáns platform lett, amely méltón reprezentálja a prémium minőséget és új standardot állít fel a használtruha-import szektorban. A digitalizáció nem csökkentette a cég személyes jellegét, épp ellenkezőleg: felszabadította a munkatársakat az adminisztratív terhek alól, így több időt fordíthatnak a minőségi beszerzésekre és a kiemelt partnerek kiszolgálására.

A Next.js 16 és React 19 biztosítja a jövőálló alapokat, a Clean Architecture és a DDD elvek garantálják a hosszú távú skálázhatóságot, míg az automatizált importálási folyamatok és a magas szintű kétlépcsős admin biztonság (2FA) nyugalmat adnak az üzemeltetőknek. A beépített Video Hub pedig sikeresen megszünteti a fizikai távolságokból adódó bizalmi korlátokat a hazai és nemzetközi B2B partnerek között, megnyitva a kaput az új, határon túli piacok felé.

„Az AiSolve csapata nem csupán egy weboldalt épített nekünk, hanem egy professzionális digitális bemutatótermet és logisztikai vezérlőközpontot, amely megalapozza a nemzetközi terjeszkedésünket.”