Engineering Case Study

Taktik Dehası
Futbol Analitik ve Simülasyon Platformu

Taktik Dehası, taraftarlara ve analistlere derin istatistiksel içgörüler, tarihi kadro karşılaştırmaları ve reyting tabanlı bir maç simülasyon motoru sunmak için tasarlanmış full-stack bir futbol analitik platformudur.

Genel Bakış

Temel hedef, ağır ilişkisel verileri (tarihi kadrolar, oyuncular) işleyebilecek sağlam bir sistem kurarken, frontend performansından ödün vermeden gerçek zamanlı, etkileşimli bir simülasyon deneyimi sunmaktı.

Karşılaşılan Temel Problemler

Spor veri platformları genellikle şu mühendislik zorluklarıyla karşılaşır:

  • İç içe geçmiş ilişkisel verilerin yönetimi (Takımlar -> Kadrolar -> Oyuncular -> Reytingler)
  • Ağır mantık içeren simülasyonların doğrudan istemci (client) tarafında çalıştırılması
  • Dinamik dizilişlerin ölçeklenebilir vektör grafikleri (SVG) üzerinde görselleştirilmesi
  • Binlerce oyuncu düğümünü (node) render ederken yüksek performansın korunması
  • PWA ile mobil kurulum (native app hissiyatı) desteğinin sağlanması

En büyük zorluk; tarihi verileri hızla sunabilecek bir PostgreSQL şeması tasarlamak ve gerçek zamanlı ağırlıklı olasılıkları hesaplayan matematiksel bir simülasyon motoru yazmaktı.

Mimari Çözümler

Modüler Next.js mimarisi, yüksek düzeyde optimize edilmiş PostgreSQL/Prisma backend'i ile birleştirildi.

98 tarihi kadro ve 2.100'den fazla oyuncu kaydını verimli bir şekilde saklamak için 6 tablolu ilişkisel bir PostgreSQL veritabanı modellendi.
Oyuncu reytinglerine dayalı ağırlıklı rastgele (weighted random) dağılımlar kullanarak golleri, logları ve 'Maçın Adamı' seçimlerini simüle eden özel bir 'Maç Motoru' algoritması geliştirildi.
Frontend tarafında, interaktif yan yana kadro karşılaştırmaları için SVG tabanlı saha görselleştirmesi kullanıldı.
Kusursuz mobil kurulum ve çevrimdışı önbellekleme (offline caching) yetenekleri sağlayan güçlü PWA yapılandırması uygulandı.

Sistem Mimarisi

Frontend (Arayüz & Motor)

Next.jsTypeScriptTailwind CSSSVG Visualization
  • Optimize edilmiş React state ile çalışan Gerçek Zamanlı Maç Simülasyon Motoru
  • Diziliş render'ı için dinamik SVG saha (Pitch) altyapısı
  • Progressive Web App (PWA) yapılandırması
  • Derin veri ağaçları (Data Trees) için optimize edilmiş render süreleri

Arayüz, akıcı animasyonlara ve anında veri geri bildirimine öncelik vererek üst düzey bir spor yayını dashboard'u hissi verecek şekilde tasarlandı.

Backend & Veritabanı

Next.js Server ActionsPrisma ORMPostgreSQL
  • İlişkisel veri modelleme (Takımlar, Oyuncular, Reytingler, Dizilişler)
  • Sunucu taraflı turnuva ağacı (Bracket) üretimi
  • Index'lenmiş kolonlar üzerinden 2.100+ kaydın yüksek hızda sorgulanması
  • Grup aşaması simülasyonları için 'Kahin Modu' (Prophet Mode) algoritmaları

Backend mantığı UI'dan sıkı bir şekilde ayrıştırıldı ve veritabanının tüm simülasyon sınırları için 'Single Source of Truth' (Tek Gerçeklik Kaynağı) olarak çalışması sağlandı.

Veri Modelleme

Prisma ORM ile desteklenen PostgreSQL veritabanı, karmaşık varlık (entity) ilişkilerini kusursuz bir şekilde yönetir.

  • Tarihi Kadrolar ve Oyuncular arasındaki Many-to-Many ilişkiler
  • Farklı dönemlerdeki çift (duplicate) oyuncu girişlerini önlemek için katı kısıtlamalar (constraints)
  • Simülasyonlar sırasında hızlı arama ve filtreleme için optimize edilmiş indeksleme

Prisma seviyesindeki N+1 sorgu (query) sorunları çözülerek, platformun tüm turnuva ağaçlarını ve kadro karşılaştırmalarını gecikmesiz yüklemesi sağlandı.

Mühendislik Önemli Noktaları

  • Oyuncu reyting ağırlıklarını kullanan özel matematiksel simülasyon motoru
  • Taktiksel dizilişler için SVG tabanlı etkileşimli saha çizimi
  • Tüm Lighthouse kriterlerini geçen tam PWA entegrasyonu
  • Canlı 2026 FIFA Dünya Kupası fikstür takibi
  • Turnuva ağacı (Bracket) sistemi mantık uygulaması

Hem web hem de mobil için optimize edilmiş yüksek performanslı, veri yoğun (data-dense) bir platform olarak tasarlandı.

Performans ve UX

Karmaşık simülasyonlar sırasında 60 FPS'yi korumak için:

  • Ağır hesaplamalar memoize edildi (useMemo) veya ertelendi.
  • DOM thrashing'i önlemek için SVG render'ları gruplandırıldı (batched).
  • Veri çekme işlemleri Next.js Data Cache aracılığıyla yoğun şekilde önbelleğe alındı.

Tüm bir turnuvanın sonuçları simüle edilirken bile sürükleyici, gecikmesiz bir deneyim sunmak.

Sonuç

Bir haftadan kısa bir sürede sıfırdan inşa edilen platform, başarıyla şunları sağladı:

  • 2.100+ oyuncu istatistiğinin kusursuz işlenmesi
  • Son derece ilgi çekici, tahmin edilemez (ancak istatistiksel olarak doğru) simülasyonlar
  • Görsel olarak çarpıcı, TV yayını kalitesinde kullanıcı arayüzü
  • PWA aracılığıyla native uygulama benzeri mobil deneyim

Taktik Dehası, karmaşık veri yapılarını işleyen hızlı ve sağlam bir full-stack ürün mühendisliği kanıtıdır.

Veri odaklı karmaşık çözümler mi arıyorsunuz?

İletişime Geçin