Bunu Neden İnşa Ettim?
"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
- 01.Merkezi ve yerelleştirilmiş SEO meta veri enjeksiyonu ile derin i18n entegrasyonu (`tr`, `en`, `fr`, `ar`)
- 02.Framer Motion aracılığıyla donanım hızlandırmalı düzen geçişleri ve kademeli (staggered) viewport animasyonları
- 03.Gerçek zamanlı yerelleştirilmiş PDF çıktıları için isteğe bağlı (on-demand), istemci tarafı dinamik katalog oluşturucu
- 04.Farklı ü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)
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.