Skip to content
All projects
Web & Full StackPrivate

Marmora: High-Performance B2B Marble Catalog & Lookbook

A statically generated, multi-lingual B2B catalog platform for the natural stone industry. Engineered to replace bloated WordPress legacy systems with a heavily optimized Next.js architecture, featuring dynamic i18n routing, on-demand catalog generation, and hardware-accelerated interactions.

Tech stack

Languages

Performance & metrics

  • Aggressive SSG ensures massive, high-resolution image catalogs load with zero database latency
  • Isolating the dynamic catalog generator to client-side chunks prevents main-thread blocking and minimizes server compilation overhead
  • CSS structure bypasses standard framework bloat, utilizing strict Tailwind utility classes and native CSS gradients to maintain 60 FPS scrolling

Why I built it

The natural stone and marble industry notoriously relies on sluggish, visually unappealing WordPress templates that fail to showcase high-fidelity product imagery effectively. I engineered this platform to disrupt that standard. The objective was absolute performance and aesthetic superiority. By shifting to a Next.js Static Site Generation (SSG) model, I eliminated database bottlenecks during catalog browsing. Additionally, the platform integrates a bespoke dynamic catalog generator, allowing buyers to download real-time, up-to-date product inventories without requiring administrators to manually design new PDFs.

Architecture & decisions

Built on the Next.js 15 App Router using strict Static Site Generation (generateStaticParams) across four distinct locales (tr, en, fr, ar) routed via /[lang]. The presentation layer utilizes Tailwind CSS v4 coupled with Framer Motion for precise layout animations (AnimatePresence with popLayout). Product grids dynamically adapt their aspect ratios based on material topology (e.g., aspect-square for mosaics and sinks vs. aspect-4/5 for slabs). The custom catalog exporter is dynamically loaded client-side (next/dynamic with SSR disabled) to offload PDF compilation overhead from the server and protect TTFB.

Key features

  1. 01Deep i18n integration (tr, en, fr, ar) with centralized localized SEO metadata injection
  2. 02Hardware-accelerated layout transitions and staggered viewport animations via Framer Motion
  3. 03On-demand, client-side dynamic catalog generator for real-time localized PDF exports
  4. 04Topology-aware adaptive CSS grids for varied product dimensionalities
  5. 05Suspense-wrapped lazy loading with custom CSS keyframe fallback animations

Technical review

This project showcases how to execute enterprise-grade frontend engineering for a traditional B2B sector. By leveraging asynchronous React Server Components, resolving locale parameters via Promise-based routing, and rigorously enforcing component-level code splitting, the application delivers a seamless, magazine-like Lookbook experience. The custom UI transcends generic templates, utilizing advanced animation variants (ease: [0.21, 0.47, 0.32, 0.98]) to provide a fluid, premium shopping environment that standard CMS platforms cannot replicate.