Chattr’ı Nasıl Kurduğum — Bir Twitch Sosyal Ağı

The Stack

Backend: Laravel 13 + PHP 8.5

Laravel, hızlı, esnek ve sağlam bir ekosistem sunmaktadır. PHP 8.5 ile birlikte Laravel 13, constructor property promotion, typed properties ve #[Fillable] gibi özelliklerle kullanıcıların deneyimini geliştirmektedir.

Bazı önemli Laravel paketleri:

• Laravel Socialite: Twitch OAuth’un yalnızca 20 satırlık kod ile entegrasyonunu mümkün kılar. Kullanıcılar Twitch hesapları ile giriş yapar; yeni bir şifre veya kullanıcı adı gerekmez. Girişte, Twitch otomatik olarak takipçileri senkronize eder ve topluluğunuz hazır hale gelir. Ayrıca, Twitch onaylı bir partner iseniz, onay statusü de geçerli olacaktır.
• Laravel Reverb: Gerçek zamanlı özellikler sağlar. Twitch, bir yayıncı yayına geçtiğinde bir webhook gönderir; bu, bir etkinlik yayını yapar ve her takipçinin akışını anında günceller.
• Laravel Scout: Kullanıcılar ve gönderiler için tam metin arama, bu aşamada basitlikle desteklenen bir veritabanı sürücüsüyle.
• Laravel Sanctum: Mobil uygulamalar için API token doğrulaması sağlar.
• Laravel Nightwatch: Üçüncü parti yük olmadan üretim izleme ve hata takibi yapar.
• Laravel Wayfinder: Her Laravel yönlendirme ve kontrolcü eylemi için TypeScript fonksiyonları otomatik olarak oluşturur. Ön uçta sabit kodlu URL’lerden kaçınılır; her yönlendirme çağrısı, türlenmiş bir fonksiyon ithalatı haline gelir. Yeniden yapılandırma güvenliği için önemli bir kazançtır.

Frontend: React 19, Inertia.js v3 ve Tailwind CSS v4

Inertia, Laravel ve React’i birleştirerek ayrı API’ler olmadan bir istemci tarafı React tek sayfa uygulaması geliştirmemi sağladı. Kontrolcü eylemlerinden türlenmiş sayfa bileşenleri döndürüyor, tüm global durumu paylaşıyor ve yalnızca Laravel yönlendirmeleriyle gezinme sağlıyorum. API sürümlemesi veya serileştirme katmanı gerektirmiyor.

React 19 ve derleyicisi, babel-plugin-react-compiler ile memoizasyonu otomatikleştiriyor ve useMemo ile useCallback için boilerplate’i azaltıyor.

Tailwind CSS v4, konfigurasyon dosyasını ortadan kaldırarak CSS doğal bir yaklaşımı tercih ediyor. Tasarım token’larını tek bir CSS dosyasında tanımlıyorum ve Tailwind otomatik olarak bunları tanıyor. Projeyi yalnız başıma oluşturmak için konfigürasyon yükünü büyük ölçüde azaltıyor.

Real-time with WebSockets

En çok gurur duyduğum özellik canlı yayın tespitidir. İşleyiş şöyle:

• Kullanıcı, Twitch hesabını bağladığında, kendi kanalı için Twitch EventSub webhooklarına abone olur.
• Bir Twitch yayını başladığında, web sitesi bir canlı gönderi oluşturur, etkinliği Reverb aracılığıyla yayınlar ve takipçilere push bildirimleri gönderir.
• Ön uçta, Laravel Echo, feedi gerçek zamanlı olarak günceller: canlı gönderi görünür, avatar kırmızı halkalı hale gelir ve bir bildirim gönderilir.

Video: Mux

Mux, kullanıcı tarafından yüklenen videoları yönetir. Dosyalar tarayıcıdan doğrudan yüklenir, asenkron olarak işlenir ve işlem tamamlandığında bir webhook tetiklenir. Web sitesi, oynatma kimliğini depolar, doğrudan Mux’un CDN’sinden yayın yapar ve kodlayıcı yönetimi gerektirmeden transkodlama, dinamik bit hızı ve imzalı URL’ler alır.

Payments: Stripe Connect

Yayıncılar, uygulama içinden Stripe Connect Express aracılığıyla bahşiş alabilir. Stripe, onboarding, KYC (Müşterini Tanı), ödemeler ve uyum süreçlerini yönetir. Bahşiş akışı için Ödeme Niyet akışını kullanın; platform ücretleri, işlem düzeyinde yönetilir. Uygulama, tüm banka/kredi kartı bilgilerini depolamaz, tüm ödemeler Stripe aracılığıyla işlenir. Şu anda bahşiş alanlar %70, ben kalan %30 ile birlikte Stripe’ın tahsil ettiği herhangi bir ücreti alıyorum.

Infrastructure: AWS

Hosting with Amazon ECS

Uygulama Amazon ECS ile Fargate üzerinde çalışmaktadır. Sunucusuz konteynerler ile, EC2 yönetmem gerekiyordu. Laravel’i konteynerleştirmek için Docker kullanıyorum, web sunucusu (FrankenPHP/Caddy), kuyruk işçisi ve Reverb WebSocket için ayrı ECS hizmetleri dağıtıyorum.

FrankenPHP, Caddy üzerinde inşa edilmiş modern bir PHP sunucusudur. Daha hızlı soğuk başlangıçlar sunar, HTTP/2, HTTP/3, Early Hints’i destekler ve WebSocket yükseltmelerini doğrudan yönetir.

ECS Fargate, web katmanını kuyruk işçilerinden bağımsız olarak ölçeklememi sağlar; bu, birçok kullanıcının aynı anda yayına başladığı sosyal bir platform için önemli (hafta sonları yoğun geçiyor).

File Storage: Amazon S3

Tüm kullanıcı medya dosyaları -resimler, sesler, bildirim sesleri- S3‘te saklanmaktadır. Yüklemeler, önceden imzalı URL’ler ile tarayıcıdan doğrudan S3’e gider; böylece Laravel, ham baytları işlemek zorunda kalmaz. Bu, istekleri hızlı tutar ve dosya işlemesini azaltır.

S3 kovası kişidir. Tüm medya, kısa sürede süresi dolacak şekilde önceden imzalı URL’ler aracılığıyla sunulur, böylece aboneye özel içerikler doğrudan paylaşılmaya çalışılsa bile kilitli kalır. Bu konuda özellikle gurur duyuyorum çünkü videoları özel tutmak genelde zorlayıcıdır.

CDN: Amazon CloudFront

CloudFront, tüm uygulama ve S3 statik varlıklarını küresel olarak önbelleğe alır. Kullanıcılar, bölgelerine bağlı olarak hızlı yükleme deneyimi yaşarlar.

CloudFront, SSL’yi sonlandırır ve trafiği ECS’ye yönlendirir. Dinamik HTML, ihtiyatlı önbellek politikaları kullanırken; hashlanmış statik varlıklar bir yıl boyunca önbelleğe alınır.

Features Worth Highlighting

Twitch Emote Reactions

Kullanıcılar, gönderilere yalnızca parmak yukarı ve kalp sembollerine yanıt vermez; gerçek Twitch emojileriyle tepki verirler. İlk yüklemede global Twitch emote setini alıyor ve belleğe kaydediyorum. Her tepki, emote slug’ını kaydeder ve Twitch’in CDN’sinden bir görüntü olarak gösterilir. Bu özellik, topluluğu derinlemesine besler; bu, Twitch topluluklarının zaten kullandığı bir dildir.

Subscriber-Only Posts

Yayıncılar, herhangi bir gönderiyi Twitch aboneleri için kilitleyebilir. Abone durumu her yüklemede canlı olarak doğrulanır; eğer süresi dolarsa, erişim otomatik olarak iptal edilir.

Public Streamer Directory

Public streamer dizinini chattr.online/streamers adresinde ekledim. Kullanıcılar, profillerinin ve gönderilerinin Google tarafından dizine eklenmesi için katılım gösterebilirler. Bu, SEO’yu destekler; “{oyun} yayıncıları” aramaları, Chattr profillerini ortaya çıkarır.

Voice Posts with AI Transcription

Kullanıcılar, sesli gönderi kaydedebilirler. AWS, bunu otomatik olarak OpenAI Whisper ile yazıya döker ve gönderiye arama yapılabilir bir transkript ekler. Kullanıcılar, gönderiyi okuyabilir veya dinleyebilirler. Bu, Threads’le ilhamlandı; Threads, daha önce Sesli Notlar sunuyordu ancak sonrasında kaldırdı. Threads kullanıcıları, Sesli Notların tekrar eklenmesini talep ediyordu; bu nedenle iyi bir ekleme olabileceğini düşündüm.

What I would Do Differently

Halka açık sayfaları daha erken başlatmayı isterdim. Sosyal akışı ilk oluşturmak, her şeyi bir giriş duvarının arkasına koydu. Arama motorları içeriği tarayamadı. Yayıncı dizinini ve kamu profillerini eklemek, keşfi hemen artırdı.

Try It

Chattr şu anda chattr.online adresinde yayında. Twitch ile giriş yaparak topluluğa anında erişim sağlayabilirsiniz. Kurulum, manuel takipler veya boş bir akış yok. Zaten Twitch’te takip ettiğiniz kişiler eğer Chattr’da ise akışınızda görülecektir.

Eğer bir yayıncıysanız, kamu dizinine girmek ve dizinlenmeye başlamak için yaklaşık 30 saniye alır. Oyun toplulukları, biri oyuna katıldığında otomatik olarak oluşturulur; böylece bir oyun oynuyorsanız ve hayranlarınız da öyleyse, bunun için zaten bir topluluk sayfası var.

Laravel, React, Inertia.js, Tailwind, AWS ECS, CloudFront, S3, Mux, Stripe ile inşa edildi ve arka planda birçok Twitch yayını bulunuyor.

Sorular veya geri bildirim? Chattr’da beni bulabilirsiniz: chattr.online/streamers/MichaelBrooksUK veya Threads.