Projelere geri dön React · Clean Architecture

Come Back

WhatsApp ile eski müşteri geri kazanım SaaS'ının web paneli. Claude Design prototipinden (Come Back Panel.dc.html) gerçek, çalışan bir React + TypeScript uygulamasına dönüştürülmüş; Clean Architecture ile ileriye dönük genişlemeye uygun şekilde geliştirilmiştir.

Proje Özeti

Come Back, işletmelerin (oto servis, güzellik salonu vb.) mevcut müşterilerini WhatsApp üzerinden kişiselleştirilmiş kampanyalarla yeniden kazanmasını sağlayan bir SaaS platformunun web panelidir. Savunulabilir farkı uyumlu (İYS/KVKK) geri kazanım, utility/marketing mesaj ayrımı ve somut ROI kanıtıdır; yasal güvenlik birinci sınıf bir ürün özelliği olarak tasarlanmıştır.

Problem & Çözüm

Mevcut müşterileri geri kazanmak yeni müşteri bulmaktan çok daha kârlıdır; ancak bu süreçte İYS/KVKK uyumu çoğu zaman göz ardı edilir. Come Back, pazarlama ve hizmet (utility) mesajlarını net çizgilerle ayırır; her gönderimde MessagingCompliancePolicy üzerinden yasal uygunluğu tek kaynaktan kontrol eder.

  • Onay (consent) birinci sınıf alan: marketingConsent (granted / pending / none)
  • Şablon ve kurallarda utility / marketing kategorisi; pazarlama seçilince uygun hedef kitlesi anında gösterilir
  • Uyum ekranı: onay hunisi, geri kazanım erişimi ve Meta TR ücretleriyle tahmini aylık mesaj maliyeti

Temel Özellikler

  • Değer kanıtı (ROI): ValueProofService ile geri kazanılan ciro, işletmenin gerçek plan fiyatına bağlanır; panoda amortisman bandı gösterilir
  • Kural & şablon CRUD: Yeni kural/şablon oluşturma; pazarlama şablonunda onay kapısı otomatik uygulanır
  • Aktivasyon kontrol listesi: ActivationService kurulum tamamlanma oranını hesaplar; sıradaki adım panoda gösterilir
  • Kalıcılık: Kural aç/kapa, şablon düzenleme ve yeni oluşturulan varlıklar localStorage'a yazılır; sayfa yenilense bile korunur
  • Demo işletmeler: Mert Usta Oto Servis ve Lina Güzellik ile tek tıkla giriş
  • UX & A11y: Tam responsive (mobil off-canvas sidebar), ToastProvider geri bildirimleri, ErrorBoundary, form/label/aria standartları

Teknik Mimari

  • Katmanlı yapı: presentation → application → domain; infrastructure yalnızca domain arabirimlerini uygular
  • SOLID: CustomerQueryService, BillingStrategy ve entity'ler tek sorumlulukla ayrıştırılmıştır
  • Tasarım desenleri: Repository, Strategy (BillingStrategy, TemplateRenderer), Composition Root, Aggregate Root (Tenant), Policy (PlanCtaPolicy)
  • Testler: Domain ve application katmanları için 38 Vitest birim testi (uyum politikası, fiyatlama, ROI, kalıcılık gidiş-dönüşü dahil)

Kullanılan Teknolojiler

React TypeScript Vite Vitest Clean Architecture localStorage (DIP)

Öne Çıkan Mühendislik Kararları

  • Arayüz katmanının iş kurallarından (domain) tamamen izole edilmesi
  • InMemory repository'ler; gerçek backend için yalnızca container.ts değişikliği yeterli
  • BillingStrategy ile plan/faturalama döngüsünün Open/Closed prensibiyle genişletilebilir olması
  • Yasal uygunluk kararının ekranlara dağıtılmaması; tek policy kaynağı (MessagingCompliancePolicy)

İleriye Dönük Genişleme

  • HTTP tabanlı repository ile gerçek backend entegrasyonu
  • IMessageGateway arabirimi üzerinden gerçek WhatsApp API bağlantısı
  • Yeni plan, sektör ve otomasyon türleri mevcut ekran kodunu bozmadan eklenebilir