Kleidarakos B2B & Papanikolaou Doors
Lead Developer
B2B marketplace που αντικαθιστά τη διαδικασία με spreadsheet και τηλέφωνο για ελληνικό δίκτυο κλειδαράδων. Quote workflows, multi-supplier ενημέρωση καταλόγου και 3D door configurator που επιτρέπει στους πελάτες να βλέπουν το προϊόν πριν παραγγείλουν.
Το σύστημα
Τα Kleidarakos & Papanikolaou Doors λειτουργούν ένα ελληνικό δίκτυο κλειδαράδων που διαχειριζόταν τις B2B παραγγελίες με τηλεφωνήματα και spreadsheets. Χρειάζονταν marketplace όπου οι επαγγελματίες πελάτες θα μπορούσαν να δουν έναν ενιαίο κατάλογο (από 8 διαφορετικούς προμηθευτές), να λάβουν εγκεκριμένες προσφορές, να περάσουν παραγγελίες, και να ρυθμίσουν custom πόρτες Papanikolaou σε 3D πριν αγοράσουν. Έχτισα πέντε ολοκληρωμένα components για να γίνει αυτό: ένα Medusa B2B marketplace με εταιρικές ιεραρχίες, ροές προσφορών και approval flows (port του official B2B starter, με custom modules για brands, bundles, wishlist, reviews, newsletter και Resend notifications), ένα React 19 + TanStack admin frontend για την ομάδα καταλόγου, ένα Express 5 + TypeORM backend με 43 controllers και 49 entities που αντλεί και ενοποιεί τα δεδομένα των προμηθευτών, ένα Chrome Manifest v3 extension για γρήγορο manual data extraction, και έναν Three.js 3D door configurator που τρέχει σε όποιο laptop χρησιμοποιεί ο B2B αγοραστής τη στιγμή.
Αρχιτεκτονική
- B2B storefront: Medusa 2.14.2 με ported B2B framework (Company, Employee, Quote, Approval modules), Next.js 16 storefront με custom modules (brands, bundles, wishlist, reviews, newsletter, Resend notifications), Stripe + PayPal, design tokens layer
- Catalog frontend: React 19 + Vite + TanStack Router/Query/Table, JWT auth με 80% token refresh, Context-based state, served στο
backend.kleidarasioannina.com - PIM backend (
product-catalog-management): Express 5 + TypeORM + Postgres, 43 controllers / 49 entities / 94+ services, BullMQ queue για multi-supplier ingestion, AES-256-GCM credential encryption, Greek VAT 24% logic, Google Calendar OAuth2 sync, accounting/bookkeeping domain, Socket.IO real-time notifications - Chrome extension: Manifest v3 popup data extractor (popup.js: 23.9KB) που τραβάει product data απευθείας από supplier websites
- 3D door configurator (
papanikolaou-doors): Three.js + R3F + drei + postprocessing, GLB asset pipeline με procedural fallback, adaptive performance tiers (auto low/high quality via PerformanceMonitor), material/accessory naming convention για recoloring
Η συνεισφορά μου
Σχεδίασα και έχτισα και τα πέντε components ως ο μοναδικός developer. Το product-catalog-management backend ήταν το μεγαλύτερο κομμάτι (43 controllers, 49 entities, 94+ services) και ένα από τα πιο σύνθετα Express projects που έχω γράψει: 8 supplier-specific data adapters (κάθε platform έχει διαφορετικό HTML και API quirks, δεν υπάρχει universal adapter που να δουλεύει παντού), per-supplier rate limiting μέσω BullMQ, AES-256-GCM encryption για αποθηκευμένα supplier credentials, Google Calendar OAuth2 για appointment sync, και Greek VAT logic embedded στο catalog level αντί στο storefront. Το Medusa B2B marketplace ήταν port του official starter με custom modules (brands, bundles, wishlist), πληρωμές Stripe + PayPal, και ένα design-tokens layer. Το React 19 admin τρέχει στο subdomain του πελάτη με JWT auth. Ο 3D door configurator ήταν το πιο ενδιαφέρον τεχνικά κομμάτι: έπρεπε να τρέχει σε χαμηλής ισχύος laptops B2B αγοραστών, οπότε έγραψα adaptive performance tiers μέσω PerformanceMonitor του R3F που υποβαθμίζουν αυτόματα την ποιότητα όταν πέφτουν τα FPS, και επανέρχονται όταν αυτά ανακάμπτουν.
Stack λεπτομέρειες
Η πιο ενδιαφέρουσα τεχνική απόφαση ήταν τα 8 supplier-specific data adapters. Κάθε supplier τρέχει διαφορετικό e-commerce platform (Magento, PrestaShop, OpenCart, WooCommerce) με δικό του HTML structure και API quirks, δεν υπάρχει ένα generic adapter που να δουλεύει παντού. Η BullMQ queue επιτρέπει concurrent supplier ingestion με per-supplier rate limiting. Το AES-256-GCM credential encryption εξασφαλίζει ότι supplier passwords αποθηκεύονται ασφαλώς στη βάση. Η Greek VAT 24% business logic είναι embedded στο PIM αντί για storefront, γιατί τα tax calculations εφαρμόζονται ήδη στον catalog level. Το fuzzy search μέσω DB extensions επιτρέπει partial matching σε ελληνικά product names. Η 300+ API endpoints count αντικατοπτρίζει πλήρες accounting/bookkeeping domain επιπλέον του catalog.
Αποτελέσματα
- Production B2B marketplace με quote-based selling, company hierarchies, approval workflows
- Αυτοματοποιημένο sourcing από 8 διαφορετικούς προμηθευτές (Magento, PrestaShop, OpenCart, WooCommerce)
- 3D door configurator που επιτρέπει στους B2B αγοραστές να δουν τα προϊόντα από κάθε γωνία πριν παραγγείλουν
- Chrome extension που μειώνει τον χρόνο data entry όταν προστίθενται νέα supplier products
Πρόκληση
Ο 3D configurator για Papanikolaou Doors έπρεπε να τρέχει σε χαμηλής ισχύος laptops των B2B πελατών, δεν μπορούσα να υποθέσω dedicated GPU. Υλοποίησα adaptive performance tiers μέσω PerformanceMonitor του R3F: σε κάθε frame, ο monitor μετρά actual FPS και αν πέσουν κάτω από threshold, ο configurator μεταβαίνει αυτόματα σε low-quality mode (χαμηλότερη ανάλυση textures, απλοποιημένα shadows, λιγότερα postprocessing passes). Αν τα FPS ανακάμψουν, επιστρέφει σε high-quality. Το GLB asset pipeline έχει procedural fallback για browsers που δεν φορτώνουν το model γρήγορα, αντί για blank screen, ο χρήστης βλέπει procedurally-rendered placeholder. Το material/accessory naming convention που σχεδίασα επιτρέπει runtime recoloring χωρίς reload: αλλαγή χρώματος πόρτας = swap material uniform, όχι reload GLB.
Σύνδεσμοι
- Production deployment internal (no public storefront URL).
- 3D configurator repo:
jimrarras/papanikolaou-doors(private)
Παρόμοια έργα
- Heartbeat Pharmacy Platform: άλλη Medusa build, αλλά B2C pharma αντί B2B locksmith
Στιγμιότυπα