Her gün kullanacağımız CRM’i, onu kullanan ajans inşa etti.

Şirket içi bir ürün, portföy işi olarak yayınlandı.

Ajanslar; katı pipeline’lara zorlayan, yapay zekâyı sonradan eklenmiş bir sohbet botu gibi gören elektronik tablolar, Notion veya jenerik CRM’lerle çalışıyor. Marketing CRM bizim cevabımız: ajansa özel fikir sahibi pipeline’lar, altyapı olarak yapay zekâ, ilk günden çok kiracılı yapı — ve dakikalar içinde ilk değeri sunan sıfır kurulumla başlama.

Jenerik CRM’ler ajansların satış biçimine uymuyor.

Ajans pipeline’larının gerçekte nasıl çalıştığını inceledik ve hazır araçlarda dört tekrarlayan boşluk bulduk. Yaklaşımımız basitti: Avangard’da her gün kullanacağımız CRM’i inşa etmek.

Boşluk

• Ajans satış döngülerine uymayan katı pipeline’lar.
• Karar katmanı yerine sonradan eklenmiş bot muamelesi gören yapay zekâ.
• Ajans-müşteri ayrımı için çok kiracılı çalışma alanı izolasyonunun olmaması.
• İlk değer anından önce haftalarca süren kurulum.

Bizim yaklaşımımız

• Ajans pipeline’ları için fikir sahibi varsayılanlar: Yeni → Nitelikli → Teklif → Kazanıldı/Kaybedildi.
• Altyapı olarak yapay zekâ — her lead otomatik olarak skorlanır, açıklanır ve aksiyona dönüştürülür.
• İlk günden çok kiracılı yapı — çalışma alanı izolasyonu, RBAC, davet akışları.
• Sıfır kurulumla başlama — dakikalar içinde CSV içe aktarma, Gmail senkronizasyonu ve herkese açık formlar.

Serverless Postgres üzerinde Next.js 16, dayanıklı çift sağlayıcılı yapay zekâ.

Varsayılan olarak React Server Components ve explicit istemci sınırları, Prisma üzerinden Neon serverless Postgres, çalışma alanı RBAC katmanlı JWT kimlik doğrulama — ve maliyet ile gecikme gözlemlenebilirliği için loglanan her yapay zekâ çağrısı.

Next.js 16 (App Router)
  RSC/SSR Sayfalar · İstemci Bileşenleri · API Rotaları (/api/ai, /api/auth)
        │                    │                        │
   Prisma 7 + Neon   NextAuth v5 (JWT)   next-intl v4 (i18n)
        │
   PostgreSQL (Neon serverless)

Veritabanı şeması öne çıkanlar

• Kullanıcı & Auth: User, Account, Session, VerificationToken (NextAuth uyumlu).
• Çalışma alanı: Workspace, WorkspaceMember (çok kiracılı izolasyon).
• Çekirdek CRM: Lead, Client, Contact, Activity, Note, Tag.
• Pipeline: PipelineStage, Deal, Proposal, Task.
• YZ & Otomasyon: Automation, Sequence, ScoringRule, AIUsageLog.
• Entegrasyonlar: Webhook, GmailSync, GoogleCalendar.
• Analitik: Report, SavedView, CustomField.

API yüzeyi

/api/auth/[...nextauth]    → NextAuth v5 işleyiciler
/api/ai/analyze-stream     → Streaming lead analizi (SSE)
/api/ai/deep-analysis      → Tam yapılandırılmış analiz
/api/ai/generate-sequence  → YZ ile e-posta serisi üretimi
/api/ai/suggestions        → Gerçek zamanlı YZ önerileri
/api/cron/*                → Zamanlanmış işler (özet, seriler, otomasyonlar)
/api/integrations/google/* → OAuth bağlama / çözme / durum
/api/track/*               → E-posta açılma / tıklama takibi
/api/upload-*              → Doğrulamalı görsel / PDF yükleme

Tek bileşen kütüphanesi, kapsamlı iki tema.

Panel; bilgi yoğunluğu ve nötr bir çerçeve ister, landing sayfası ise duygusal rezonans ve marka kişiliği. İkisi de Radix primitifleri üzerinde 40’tan fazla özelleştirilmiş shadcn/ui bileşeninden besleniyor — tek bir tema sınıfıyla kapsülleniyor, böylece ikisi asla birbirine sızmıyor.

Bileşen temeli

• Kütüphane: shadcn/ui (New York stili, stone bazı, CSS değişkenleri) + Radix UI primitifleri.
• İkonlar: Lucide React. Formlar: react-hook-form + Zod doğrulama.
• Zengin metin: Tiptap (renk, yazı tipi, görsel, bağlantı, hizalama).

Özel tasarım token’ları (OKLCH)

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.25);
  --primary: oklch(0.216 0.006 56.043);
  --radius: 0.625rem;
}
.landing-theme {
  --canvas: oklch(0.977 0.008 95);
  --bark: oklch(0.245 0.018 75);
  --moss: oklch(0.545 0.075 155);
  --clay: oklch(0.63 0.098 55);
}

Hareket & etkileşim

• Scroll reveal (520ms ease-out), hover’da duran marquee, hero’da yavaş aura hareketi.
• “Canlı ürün” hissi için scroll-bağlantılı 3B dönüşümlü pipeline önizlemesi.
• Tüm animasyonlar prefers-reduced-motion altında kapalı.

Erişilebilirlik

• Radix primitifleri ARIA kalıplarını taşır; tüm etkileşimli öğelerde focus-visible halkaları.
• Semantik landmark’lar, başlıklar ve listeler; baştan sona klavye navigasyonu.
• Her iki temada da WCAG AA kontrast doğrulaması.

Landing, giriş ve mobil — beta’ya çıkan ürün.

Staging sürümünden yedi kare: landing hunisi, karanlık mod hero, giriş kapısı ve responsive mobil görünüm.

Landing’de kapılı beta hunisi, panelde aktivasyon.

Anonim ziyaretçiler beta talebine akar; giriş yapan kullanıcıları karşılayanlar ise bir onboarding kontrol listesi, bir komut paleti ve her biri tek bir yönlendirilmiş aksiyona işaret eden boş durumlar.

Üç dil, çerez tabanlı, sayfa bazında meta veriler.

İngilizce (varsayılan), Türkçe ve İspanyolca tam mesaj paritesini paylaşıyor — landing metinleri, panel dizgileri ve hatta YZ analiz istemleri; analiz dili her lead’in tercih ettiği dile uyum sağlıyor.

i18n mimarisi

Middleware (çerez → dil)
      → next-intl isteği (statik mesaj içe aktarmaları)
      → Layout (NextIntlClientProvider)
      → Sayfalar (useTranslations, useFormatter)

Dil algılama sırası

1. NEXT_LOCALE çerezi (1 yıl max-age).
2. Accept-Language başlığı (yedek).
3. Varsayılan: İngilizce.

Performans bütçeleri

• LCP 2,5sn altı (hero görseli + pipeline önizlemesi).
• CLS 0,1 altı (font swap, dinamik içerik için ayrılmış alan).
• INP 200ms altı (varsayılan RSC, minimal istemci JS).

Bir özellik sekmesi değil, altyapı olarak yapay zekâ.

Skorlama, içgörüler ve seriler tek bir pipeline’ı paylaşıyor: güçlü bir yedeği olan ucuz ve hızlı bir birincil sağlayıcı, üstel geri çekilmeli yeniden denemeler, Zod-doğrulamalı yapılandırılmış çıktı ve her çağrıda kullanım loglaması.

Kullanıcı isteği → Groq (birincil, llama-3.1)
                    → Gemini (yedek, gemini-1.5)
      Üstel geri çekilme (en fazla 3 deneme)
      Yapılandırılmış çıktı (Zod) → Kullanım loglaması (her çağrı)

interface LeadAnalysis {
  score: number;                    // 0–100
  confidence: number;               // 0–1
  scoreBreakdown: ScoreFactor[];    // açıklanabilir: faktör, ağırlık, kanıt
  executiveSummary: string;
  bestServiceMatch: ServiceType;
  conversationStarters: string[];
  recommendedActions: Action[];
  nextBestAction: { action, reasoning, urgency };
  outreachStrategy: { channel, multiTouchPlan[], toneGuidance };
  dealStrategy: { positioning, stakeholders, competitiveAngle };
  potentialObjections: { objection, response, proofPoint }[];
  dealRisks: { risk, severity, mitigation }[];
  outreachEmail: { subject, body, followUp };
  proposalGuidance: { angle, deliverables, successMetrics, riskReversal };
}

Maliyet kontrolü

• Groq yaklaşık $0,0001 / 1K token (birincil); Gemini yaklaşık $0,001 / 1K (yedek).
• Token tavanları: analizde 4096, önerilerde 2048.
• Aynı istemler oturum içinde tekilleştirilir.

Gereken yerde yoğun, geri kalan her yerde yönlendiren.

Daraltılabilir role-filtreli kenar çubuğu, bildirimli çalışma alanı değiştirici, mobilde alt sekme navigasyonu — ve tek bir etkileşim grameri paylaşan yedi çekirdek görünüm.

Güç kullanıcısı özellikleri

• Komut paleti (⌘K): lead, müşteri, görev ve aksiyonlarda fuzzy arama.
• Global klavye kısayolları: panele git, lead’lere git, yeni lead, arama.
• Kayıtlı görünümler: kullanıcı başına, paylaşılabilir; filtre, sıralama ve sütun yapılandırmasıyla.
• Toplu aksiyonlar: çoklu seçimle ata, aşama değiştir, etiketle, dışa aktar veya sil.

Her kestirme, alınmadan önce fiyatlandırıldı.

İnşayı şekillendiren sekiz karar — her birinin kabul edilen maliyetiyle.

Beta için hedefler — sonuç değil.

Ürün henüz lansman yapmadı, bu yüzden dürüstçe raporlanacak bir şey yok. Aşağıda, betanın yargılanacağı AARRR çerçevesi ve teknik sağlık çıtası var.

Dogfooding kendini amorti etti; istemler ayrı paket ister.

Avangard ekibi gerçek fırsatlarını ürünün içinden yönetiyor, geri bildirim döngüsü anlık. Tasarım sistemi yatırımı sayesinde yeni sayfalar saatler içinde çıkıyor — buna karşılık YZ istemleri, E2E kapsamı ve herkese açık API’nin hepsi olması gerekenden geç geldi.

İşe yarayanlar

• İlk günden dogfooding — gerçek fırsatlar, anlık geri bildirim döngüsü.
• Özellik değil altyapı olarak YZ — skorlama, içgörüler ve seriler tek pipeline’ı paylaşıyor.
• Tasarım sistemi yatırımı — özelleştirilmiş bileşenler sayesinde yeni sayfalar günler değil saatler içinde çıkıyor.
• Baştan çok kiracılı yapı — sıfır migrasyon sancısı; izolasyon her sorguya gömülü.
• Yerleşik gözlemlenebilirlik — YZ çağrı logları, sağlayıcı limitlerini kullanıcılardan önce yakaladı.

Farklı yapacaklarımız

• Sitemap üretimini daha erken eklemek — dinamik rotalar manuel yapılandırma ister; SEO hazırlığı gecikti.
• YZ istemlerini sürümlü ayrı pakete çıkarmak — manuel sürümlenen 2.000+ satır istem can yakıyor.
• E2E kapsamına daha erken yatırım — geç eklenen Playwright testleri flaky CI demekti.
• Tasarım token’larını Figma ile senkron tutmak — CSS tarafındaki token’lar tasarımcı dosyalarından sapıyor.
• İlk günden herkese açık API — geç eklenen webhook’lar veri modelini şekillendirirdi.

Ajansa kattığı değer

Şirket içi bir araç olmanın ötesinde, bu inşa ajans genelinde bileşik getiri sağlıyor — ve aynı düşünce, müşterilerimize sunduğumuz yapay zekâ otomasyonları, dönüşüm optimizasyonu ve teknik SEO çalışmalarımıza aktarılıyor.

• Portföy işi: full-stack, YZ, i18n, tasarım sistemleri ve CRO tek bir gösterimde.
• Şirket içi araç: Avangard içinden yönetiliyor — gerçek gelir etkisi.
• İşe alım sinyali: mühendisler bu stack’te çalışmak istiyor.
• Müşteri sohbetleri: “bunu inşa ettik”, “Next.js biliyoruz”dan güçlü.