DFA
Derbazlar Fight Academy
Müşteri & Bağlam
Derbazlar Fight Academy, İstanbul'un en güçlü dövüş sporları topluluğu. Çok disiplinli bir spor salonu ekosistemi için ihtiyaç, telefona kurulabilen, sadakat sistemi olan bir PWA uygulamasıydı.
Tasarımın merkezinde bir soru vardı: Soyunma odası enerjisini, antrenman disiplinini dijitale nasıl taşırız? Dark estetik, güçlü tipografi ve somut ödül mekanizmaları bu soruya yanıt.
Site İçi Görüntüler
Sadakat & Puan Sistemi
Her salona giriş +10 puan, her referans +50 puan. Biriken puanlar ödül kataloğundan harcanıyor.
Özel İçecekler
DFA'ya özel üç içecek konsepti — her biri farklı antrenman fazına hitap ediyor. Özel SVG ikon kütüphanesi ile her birinin kendi karakteri var.
Fighter Shot
Zencefil + limon. Antrenman öncesi enerji bombası.
PRE-WORKOUTRecovery Shake
Protein bazlı toparlanma. Antrenman sonrası kas desteği.
POST-WORKOUTHydration Station
Detoks suyu. Antrenman boyunca elektrolit desteği.
INTRA-WORKOUTPlatform Özellikleri
Sadakat Puan Sistemi
Her giriş +10, her referans +50 puan. Ödül kataloğu: 250pt Havlu, 500pt Tişört. Anlık bakiye gösterimi — kazanma motivasyonu her ziyarette yenileniyor.
Özel İçecekler
Fighter Shot, Recovery Shake, Hydration Station — özel SVG ikonlu üç DFA içeceği. Sadakat sistemiyle bağlantılı, belirli seviyelerde ücretsiz kazanılıyor.
PWA Deneyimi
Next.js tabanlı PWA. App store'suz telefona kurulum, Service Worker ile offline destek. Install banner ziyaret sırasında tetikleniyor.
Disiplin Filtresi
Antrenman programı filtresi: Boks, Kick Boks, MMA, BJJ. Seçim localStorage'da — uygulama her açılışta tercihini hatırlıyor.
Teknik Mimari
Next.js App Router, code-splitting, TypeScript tip güvenliği. Tailwind CSS ile dark tema. PWA manifest + Service Worker ile telefon uygulaması deneyimi.
next-pwa + Workbox ile Service Worker önbellekleme. App Manifest ile telefon ana ekranı entegrasyonu.
Neden PWA?
Spor salonu uygulamaları telefona kurulup her gün açılır. Tarayıcıdan gidip siteyi bulmak bir alışkanlık oluşturmuyor — ama ana ekranda bir ikon oluşturuyor. PWA yaklaşımıyla uygulama mağazasına gerek kalmadan iOS ve Android'de native deneyim sunuluyor. Push bildirimleri eklenince 'antrenmanın başlamak üzere' uyarısı da gidecek.
Teknik Zorluklar
PWA Kurulum Deneyimi — iOS vs Android
⚡ Sorun
Android'de otomatik 'Ana Ekrana Ekle' banner'ı çıkıyor. iOS'ta ise bu banner yok — kullanıcının manuel olarak Safari paylaşım menüsünü bulması gerekiyor. İki platform için farklı yönlendirme gerekti.
✓ Çözüm
Tarayıcı ve işletim sistemi user-agent'a göre tespit edildi. iOS kullanıcılarına 'Paylaş → Ana Ekrana Ekle' adımlarını gösteren özel bir modal çıkarıldı. Android'de beforeinstallprompt event'i yakalanıp custom buton ile yönlendirme yapıldı.
Sadakat Puanı Race Condition
⚡ Sorun
Birden fazla cihazdan aynı anda giriş yapıldığında puan çift sayıldı. SELECT + UPDATE arasına başka bir istek girebiliyordu, bu da puan tutarsızlığına yol açtı.
✓ Çözüm
Puan güncelleme işlemi MySQL/Prisma transaction içine alındı. İşlem atomik hale getirildi: önce kayıt kilitlendi (SELECT FOR UPDATE), ardından güncelleme yapıldı. Eşzamanlı istekler sıralı hale getirildi.
JavaScript Filter vs SEO
⚡ Sorun
Disiplin bazlı filtreleme JavaScript ile yapılıyordu — boks derslerini arayan biri Google'da sayfayı bulamıyordu çünkü URL değişmiyordu, içerik JS ile gösterilip gizleniyordu.
✓ Çözüm
Her disiplin için ayrı URL hash kullanıldı (#boks, #mma). Sayfa yüklenirken hash okunup ilgili filtre aktif edildi. Meta description tag'i dinamik olarak hash'e göre güncellendi. Google artık her disiplini ayrı sayfa gibi indexleyebiliyor.