Marmora: Yüksek Performanslı B2B Mermer Kataloğu ve Lookbook
Doğal taş endüstrisi için statik olarak üretilmiş, çok dilli bir B2B katalog platformu. Hantal WordPress sistemlerinin yerini almak üzere geliştirilmiş; dinamik i18n yönlendirmesi, isteğe bağlı katalog oluşturma ve donanım hızlandırmalı etkileşimler içeren, yoğun şekilde optimize edilmiş bir Next.js mimarisi.
Teknoloji yığını
- Diller
- Çatılar & kütüphaneler
Performans & metrikler
- Agresif SSG, yüksek çözünürlüklü devasa görsel kataloglarının sıfır veritabanı gecikmesiyle yüklenmesini sağlar
- Dinamik katalog oluşturucunun istemci tarafı parçalara (chunks) izole edilmesi, ana iş parçacığının (main-thread) bloklanmasını önler ve sunucu derleme yükünü en aza indirir
- CSS yapısı, 60 FPS kaydırma (scrolling) performansını korumak için katı Tailwind utility sınıfları ve yerel CSS gradient'leri kullanarak standart framework şişkinliğini atlar
Neden geliştirdim?
Doğal taş ve mermer endüstrisi, yüksek çözünürlüklü ürün görsellerini etkili bir şekilde sergilemekten aciz, yavaş ve görsel olarak çirkin WordPress şablonlarına bel bağlamasıyla bilinir. Bu standardı yıkmak için bu platformu geliştirdim. Hedef, mutlak performans ve estetik üstünlüktü. Next.js Statik Site Üretimi (SSG) modeline geçerek, katalog taraması sırasındaki veritabanı darboğazlarını ortadan kaldırdım. Ek olarak, platforma özel dinamik bir katalog oluşturucu (generator) entegre ettim; bu sayede alıcılar, yöneticilerin manuel olarak yeni PDF'ler tasarlamasına gerek kalmadan her an güncel ürün envanterlerini indirebiliyorlar.
Mimari & kararlar
Dört farklı dil (tr, en, fr, ar) üzerinden /[lang] şeklinde yönlendirilen ve katı Statik Site Üretimi (generateStaticParams) kullanan Next.js 15 App Router üzerine inşa edilmiştir. Sunum katmanı, hassas düzen animasyonları (popLayout modunda AnimatePresence) için Framer Motion ile entegre edilmiş Tailwind CSS v4 kullanır. Ürün ızgaraları (grids), malzeme topolojisine göre en-boy oranlarını dinamik olarak uyarlar (örn. mozaikler ve lavabolar için aspect-square, plakalar için aspect-4/5). Özel katalog dışa aktarıcı, PDF derleme yükünü sunucudan almak ve TTFB (Time to First Byte) süresini korumak için istemci tarafında dinamik olarak yüklenir (SSR devre dışı bırakılmış next/dynamic ile).
Temel özellikler
- 01Merkezi ve yerelleştirilmiş SEO meta veri enjeksiyonu ile derin i18n entegrasyonu (
tr,en,fr,ar) - 02Framer Motion aracılığıyla donanım hızlandırmalı düzen geçişleri ve kademeli (staggered) viewport animasyonları
- 03Gerçek zamanlı yerelleştirilmiş PDF çıktıları için isteğe bağlı (on-demand), istemci tarafı dinamik katalog oluşturucu
- 04Farklı ürün boyutları (plakalar ve lavabolar) için topolojiye duyarlı adaptif CSS ızgaraları
- 05Özel CSS keyframe fallback animasyonları ile Suspense sarmallı tembel yükleme (lazy loading)
Teknik değerlendirme
Bu proje, geleneksel bir B2B sektörü için kurumsal düzeyde frontend mühendisliğinin nasıl uygulanması gerektiğini göstermektedir. Asenkron React Server Component'lerinden faydalanarak, Promise tabanlı yönlendirme üzerinden dil (locale) parametrelerini çözümleyerek ve bileşen düzeyinde kod bölmeyi (code splitting) titizlikle uygulayarak, uygulama dergi kalitesinde kesintisiz bir Lookbook deneyimi sunar. Özel arayüz, standart CMS platformlarının kopyalayamayacağı akıcı, premium bir alışveriş ortamı sağlamak için gelişmiş animasyon varyasyonları (ease: [0.21, 0.47, 0.32, 0.98]) kullanarak sıradan şablonların ötesine geçmektedir.