WordPress’e Alternatif: Strapi v5 + Angular 21 ile Headless CMS Nasıl Yaptım (ve AI Agent Olmadan Bunu Yapabilir miydim?)

Başlamadan Önce: Neden Böyle Bir Proje?

Her yazılım geliştiricisinin hayatında bir an gelir ve kendine sorar: “Neden hâlâ WordPress kullanıyorum?”

Tema güncellemesi bozuyor, eklentiler çakışıyor, admin paneli yavaş, kod yazamıyorsun, test edemiyorsun, CI/CD kurmanın yolu yok. Her şeyi bir PHP eklentisine emanet ediyorsun.

Ben de bu soruyu sordum. Ve cevabım şu oldu: Headless CMS + Modern Frontend.

Ama bu sefer farkı vardı: Yanımda bir AI agent vardı.

Proje Nedir? Ne Yaptık?

strapi-angular adını verdiğim bu proje, tamamen özelleştirilebilir bir headless CMS sistemi. Tek cümleyle: WordPress’in yaptığı her şeyi, ama senin kurallarınla.

Mimari

strapi-angular/
├── backend/    → Strapi v5 (Node.js/TypeScript) — İçerik yönetim API'si
├── frontend/   → Angular 18+ (Standalone Components, Signals) — Kullanıcı arayüzü
└── shared/     → Ortak TypeScript type'ları — İki taraf aynı dili konuşuyor

Bu üçlü yapı çok önemli. types klasörü sayesinde backend’in döndüğü veriyle frontend’in beklediği veri her zaman senkron. Bir alan eklendiğinde TypeScript seni uyarıyor — runtime’da değil, yazarken.

Backend: Strapi v5

Strapi bir headless CMS. Sana otomatik olarak REST ve GraphQL API üretiyor. Ama bu projede özelleştirme kritikti:

• Blog Post, Category, Tag, Social Setting content type’ları oluşturuldu
• Custom controller ve service katmanları yazıldı
• Lifecycle hook’larla slug otomatik üretimi sağlandı
• Veritabanı migration’ları ile slug düzeltmeleri yapıldı
• Rate limiting, CORS kısıtlaması ve input sanitization eklendi

Frontend: Angular 18

Angular 18 ile gelen yenilikler bu projeyi farklı kıldı:

Signals kullandık — RxJS’i sadece HTTP için bıraktık:

// BlogService içinden
readonly posts = signal<BlogPostData[]>([]);
readonly featuredPosts = computed(() => this.posts().filter((p) => p.featured));
readonly loading = signal(false);

Artık BehaviorSubject, subscribe/unsubscribe karmaşası yok. State değiştikçe Angular otomatik güncelleniyor.

Standalone Components — NgModule’e elveda:

@Component({
  selector: 'app-medium',
  standalone: true,
  imports: [DatePipe],
  // ...
})

Her component bağımsız. Lazy loading gerçek anlamda mümkün. Bundle boyutu küçülüyor.

inject() fonksiyonu — Constructor injection tarihe karıştı:

private readonly strapi = inject(StrapiService);
private readonly http = inject(HttpClient);

Öne Çıkan Özellikler

• Blog sistemi: Kategori, etiket, slug, kapak görseli, okuma süresi, öne çıkan yazı desteği
• Medium entegrasyonu: RSS üzerinden Medium yazıları otomatik çekiliyor
• GitHub entegrasyonu: Proje portföyü için GitHub API bağlantısı
• SEO servisi: Her sayfa için dinamik meta tag yönetimi
• Global error handler: Kullanıcıya anlamlı Türkçe hata mesajları
• HTTP interceptor: Her istekte otomatik Bearer token yönetimi
• Edit mode servisi: Yetkili kullanıcılar için inline düzenleme altyapısı
• Server-Side Rendering: Angular Universal ile SSR desteği
• Tam TypeScript strict mode: any yasak, her şey tipli

Asıl Konu: AI Agent Bu Süreçte Ne Yaptı?

Bu projeyi tek başıma yapıyor olsaydım, tahminimce 3–4 hafta alırdı. AI agent ile çok daha hızlı tamamladım. Ama sayıdan daha önemli olan şu: nasıl çalıştığım değişti.

1. “Nasıl yapılır?” sorusunu sormayı bıraktım

Eski alışkanlık: Stack Overflow’a git, belgeleri tara, örnek ara, kopyala yapıştır, düzelt, çalıştır.

Yeni alışkanlık: Ne istediğimi tarif et, çalışan kodu al, anla, gerekirse değiştir.

Strapi v5'in filter sözdizimi değişmişti. Nested filter objelerini HTTP params’a flatten eden şu kodu yazmak dakikalar sürerdi:

Bu kodu yazmak değil, doğru yazmak önemli. Ve agent’ın katkısı tam burada: doğruluğu test eden, edge case’leri gören, Strapi v5 sözdizimini bilen biri olarak çalışıyor.

const flattenFilters = (obj: Record<string, unknown>, prefix = 'filters'): void => {
  for (const [key, value] of Object.entries(obj)) {
    const fullKey = `${prefix}[${key}]`;
    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
      flattenFilters(value as Record<string, unknown>, fullKey);
    } else {
      params = params.set(fullKey, String(value));
    }
  }
};

2. Mimari kararları hızlandı

“Bu content-type’ı nasıl modelliyim?”, “Strapi relation mı kullanmalıyım, yoksa component mi?”, “Bu Angular service singleton olmalı mı?” gibi sorular, şimdi tartışılabilir hale geldi.

Agent sadece kod yazmıyor. Trade-off analizi de yapıyor. “Bu yaklaşımı seçtim çünkü…” diye başlayan bir yanıt aldığında, kararı anlamak kolaylaşıyor.

3. Güvenlik kontrolleri otomatikleşti

OWASP Top 10, her kod incelemesinde değerlendiriliyor. innerHTML kullandın mı? Uyarı var. Ham SQL yazdın mı? Uyarı var. Secrets'ı .env'ye koymadın mı? Uyarı var.

Bu sadece productivity değil — bu, kalite güvencesi.

4. Rol geçişleri anlık oldu

Bir projede hem backend hem frontend hem UI hem de DevOps yapıyorsun. Beyin kapasitesi sınırlı. Her role geçişte context yüklüyorsun.

Agent ile çalışınca şunu fark ettim: Her soru için doğru “rol”ü aktive edebiliyorsun. “Senior Backend olarak Strapi lifecycle hook’unu yaz” ile “UI Engineer olarak bu komponentin SCSS’ini BEM metodolojisiyle düzenle” arasındaki fark, tek bir parametre değişikliği.

Öğrendiğim En Önemli Şey

AI agent, seni daha iyi bir geliştirici yapıyor — yerine geçmiyor.

Fark şu: Kodu alan ama anlamayan biri, bir değişiklik gerektiğinde çaresiz kalır. Kodu alan, anlayan ve tartışabilen biri ise bir sonraki adımda daha hızlı.

Bu projenin her satırını okudum. Her mimari kararı sorguladım. Neden signal() kullandığımı, neden inject() tercih ettiğimi, neden types klasörünün bu kadar önemli olduğunu biliyorum.

Agent bir araç. Ama doğru kullanıldığında, öğrenme hızını katlayan bir araç.

Sonuç: WordPress’ten Sonra Hayat Var mı?

Var. Ve çok daha iyi.

• Tam kontrol: Her API endpoint’ini, her query’yi sen yazıyorsun
• TypeScript boyunca: Frontend’den backend’e tip güvenliği
• Test edilebilir: Pure function’lar, inject edilebilir dependency’ler, mock’lanabilir servisler
• Ölçeklenebilir: Modüler yapı, lazy loading, SSR hazır
• Güvenli: OWASP Top 10 gözetilmiş, secrets .env'de, input validate edilmiş

Ve tüm bunları yaparken yanında bir AI agent varsa — hem hızlısın, hem güvendesin, hem de öğreniyorsun.