Ditco Food, İzmir merkezli bir gıda tedarikçisi olarak üç ayrı markayı yönetiyor: botanik hammaddeler için Ditco Ingredients, gurme ürünler için Pino Roble ve profesyonel mutfak ürünleri için Ditco Food. Avrupa'daki satın almacılar için tek adres olacak, fiyat ve sepet yerine teklif talebi toplayan, Almanca ve İngilizce bir B2B ürün kataloğuna ihtiyaç vardı. ditcoeu.com bu ihtiyaç için sıfırdan kurulan, içeriği tamamen veritabanından gelen bir katalog ve teklif platformudur.

Proje bağlamı ve ihtiyaç

Önceki site bir hazır e-ticaret altyapısı üzerinde çalışıyordu ve B2B satış modeline uymuyordu: sepet, stok ve fiyat alanları bir ithalatçının ihtiyacı değildi; asıl ihtiyaç ürün bilgisinin, ambalaj seçeneklerinin, sertifikaların ve doğru kişiye ulaşan bir teklif talebinin bir arada olmasıydı. Üç markanın ürünleri ayrıca üç farklı kaynakta dağınık duruyordu.

Proje başında birkaç kilit karar alındı: site bir B2B katalog olacak; online ödeme, sepet ve sipariş akışı olmayacak; her ürün sayfasında fiyat yerine Teklif İste düğmesi bulunacak; ürün, kategori, banner, ekip ve iletişim bilgilerinin hiçbiri kodda yazmayacak, tamamı yönetim panelinden gelecek. Yeni bir dil eklemek için şema değişikliği gerekmeyecek.

Çözüm ve kapsam

Üç markalı açılış sayfası

Ana sayfa, ortada logo dairesi bulunan üç panelli bir bölünmüş hero ile açılır. Her panel bir markayı temsil eder ve ziyaretçiyi doğrudan o ürün grubunun kategori listesine götürür. Klasik üst menü kaldırıldı; gezinme sabit bir offcanvas menüyle yapılır.

Ürün kataloğu

Katalog ürün grubu → kategori → ürün şeklinde kademeli ilerler. Üç marka kendi sitelerinden derlenerek yeniden kurgulandı; katalogda bugün 170 ürün yer alıyor. Ürün detay sayfası görsel galerisi, varyant ve ambalaj seçenekleri, teknik özellikler ve breadcrumb ile birlikte gelir. Kategori kartları kapak görselleriyle gösterilir.

Teklif talebi

Teklif formunda ziyaretçi ürünü bir seçiciden işaretler; ürün sayfasından gelindiğinde ürün otomatik seçili olur. Form firma adı, yetkili kişi, e-posta, ülke ve talep edilen miktar gibi B2B alanları toplar, KVKK/gizlilik onayını zorunlu tutar ve bot gönderimlerine karşı gizli bir tuzak alanı kullanır. Bir talepte en fazla 50 kalem gönderilebilir.

Kurumsal sayfalar

Hakkımızda, Ekibimiz, Sertifikalarımız ve İletişim sayfaları modernize edildi. Sertifika sayfası FSSC 22000, BRC Global Standard, ISO 22000, ISO 9001, Helal ve Koşer belgelerini gerçek logolarıyla ve belge galerisiyle sunar. İletişim sayfasında ofis adresleri, dünya haritalı bir banner ve iki ayrı form bulunur. Gizlilik, kullanım şartları ve çerez politikası sayfaları da panelden yönetilir.

Yönetim paneli

Proje, frontend'den önce backend ve yönetim paneli tamamlanacak şekilde planlandı. Panelde şu modüller yönetilir:

• Ürün grupları ve kategoriler: üst kategori seçimi, gruba göre filtre ve sıralama; grup banner görseli medya kütüphanesinden seçilir.
• Ürünler: dil sekmeleri, varyant/ambalaj, çoklu görsel ve teknik özellik sekmeleri; çevirisi eksik dil sekmesinde uyarı rozeti.
• Teklif talepleri: durum akışı (yeni, incelemede, iletişime geçildi, nitelikli, kapandı, spam), sorumlu atama, iç notlar, e-posta/telefon/WhatsApp hızlı aksiyonları ve CSV dışa aktarma.
• Teklifler (Sales Quote): kalemleri satır içinde düzenlenebilen teklif editörü, otomatik teklif numarası, revizyon ve gönderim kaydı; müşteriye yazdırılabilir bir teklif belgesi bağlantısı.
• Müşteriler: tekliflerden müşteri kaydı oluşturma ve geçmişi görme.
• Ekip ve ofisler: çok dilli kayıtlar ve sıralama.
• Site ayarları ve tema: renk paleti, logo, favicon, sosyal medya bağlantıları, yasal sayfalar.

Formlarda kaydedilmemiş değişiklik uyarısı, çift gönderim kilidi ve silme onay pencereleri bulunur.

Teknik mimari

Frontend Next.js 16 ve React 19 ile, yönetim paneli ayrı bir Next.js uygulaması olarak, API ise Bun üzerinde çalışan Fastify ile yazıldı. Veri katmanı MySQL ve Drizzle ORM; katalog için ürün, ürün çevirisi, varyant, görsel, teknik özellik, ofis, ekip ve teklif talebi kalemleri gibi ayrı tablolar kuruldu. Her içerik tablosunun bir çeviri tablosu var; bu sayede Almanca eklenirken şemaya dokunulmadı, yalnız veri eklendi.

Aktif diller veritabanındaki dil ayarından okunur; varsayılan dil Almanca'dır ve sayfa adresleri dile göre yerelleşir, dil değiştiğinde slug da değişir. Desteklenmeyen bir dil istendiğinde API başka dile sessizce düşmez, açık bir hata döner. Public katalog yanıtları kısa süreli önbelleğe alınır, yönetim yanıtları hiç önbelleğe alınmaz.

SEO tarafında Organization yapılandırılmış verisi, dinamik sitemap, robots, llms.txt ve IndexNow anahtarı bulunur. Tasarım renkleri tek bir token setinden gelir; kurumsal yeşil ve petrol olmak üzere iki hazır palet panelden seçilebilir. Gizli anahtarlar ortam değişkeni olmadan uygulamayı başlatmayacak şekilde yapılandırıldı.

Entegrasyonlar

Yönetim panelinde Google hesabı bağlantısı (Gmail ve Takvim), Search Console, GA4 ve Google Ads ekranları hazır. Teklif belgeleri token'lı, tarayıcıdan yazdırılabilir bir sayfa olarak üretilir. Site kendi VPS'inde PM2 ve Nginx ile, Cloudflare arkasında SSL ile yayındadır.

Sonuç

Ditco Food bugün üç markasını tek bir alan adı altında, Almanca ve İngilizce, B2B satın almacının beklediği yapıda sunuyor. Ürün eklemek, bir sertifikayı güncellemek ya da gelen bir talebi teklife dönüştürmek için yazılımcıya ihtiyaç yok; hepsi panelden yapılıyor. Teklif PDF'i ve otomatik teklif e-postası gibi adımlar ikinci faz için ayrıldı.