1. Proje Özeti ve İhtiyaç Analizi
Geleneksel basılı düğün davetiyelerinin yerini alan dijital davetiyeler, misafirlere yalnızca mekan ve tarih bilgisi vermekle kalmayıp; çift ile konuklar arasında çift taraflı etkileşim kurulmasını sağlar.
Bu projede (zeynepvevahdettin.com), standart bir statik web sayfası yerine; zarif tipografi, arka plan müziği, geri sayım sayacı, dinamik LCV (katılım bildirimi) ve en önemlisi etkinlik günü misafirlerin çektikleri yüksek çözünürlüklü fotoğraf ve videoları doğrudan çifte ulaştırabildikleri bir bulut medya yükleme platformu ( INLINECODE0 ) geliştirildi.
[ MİSAFİR CİHAZI ] ──> QR / Web Bağlantısı ──> Cloudflare Edge (Pages/CDN)
│
┌────────────────────────────────────────────────┴────────────────────────────────┐
│ │
▼ ▼
[ İNTERAKTİF DAVETİYE ] [ BULUT MEDYA PLATFORMU (/anilar/) ]
• Web Audio Ambient Müzik • Cloudflare Turnstile Bot Doğrulama
• Canlı Geri Sayım & LCV • Sürükle-Bırak Çoklu Yükleme (HEIC/MP4/WebP)
• Harita & Yol Tarifi • Parçalı Yükleme (Chunked / Multi-Part)
│
▼
[ CLOUDFLARE R2 OBJECT STORAGE ]
• Sıfır Egress (Trafik) Ücreti
• Dosya Başına 2 GB, Toplam 5 GB / Oturum2. Karşılaşılan Teknik Zorluklar
- Mobil Cihazlardan Yüksek Boyutlu Medya Yüklemeleri: Yüzlerce misafirin aynı anda 4K videolar ve yüksek çözünürlüklü HEIC/PNG fotoğraflar yüklemesi sırasında geleneksel VPS/Hosting sunucularında oluşacak bant genişliği (bandwidth) ve bellek (RAM) darboğazları.
- Trafik Çıkış (Egress) Maliyetleri: AWS S3 gibi geleneksel bulut depolama servislerinde yüksek boyutlu medya indirmeleri ve yüklemelerinde oluşan sürpriz maliyetler.
- Bot ve Kötü Niyetli Yükleme Koruması: Herkese açık yükleme alanının spam botlar veya zararlı script'ler tarafından istismar edilmesini engelleme zorunluluğu.
- Farklı Medya Formatları Desteği: iOS cihazların varsayılan formatı olan Apple HEIC/HEIF ve modern WebP/MP4 formatlarının sorunsuz kabul edilmesi.
3. Geliştirilen Mimari ve Teknik Çözümler
Aşama 1: Serverless Altyapı ve Cloudflare R2 Depolama
- Tüm web sitesi Cloudflare Pages üzerinde küresel CDN uç noktalarından (Edge) milisaniyelik yanıt süreleriyle yayınlandı.
- Medya depolama katmanı için Cloudflare R2 Object Storage kullanıldı. R2'nin sıfır çıkış trafiği ücreti (Zero Egress Fees) politikası sayesinde yüzlerce gigabaytlık veri transferinde dahi altyapı maliyeti sıfır seviyesinde tutuldu.
Aşama 2: Gelişmiş Dosya Yükleme Motoru ( INLINECODE1 )
- Misafirler için oturum başına 30 dosya, dosya başına 2 GB ve toplamda 5 GB'a kadar devasa yükleme kotaları tanımlandı.
- Büyük video ve fotoğraflar için tarayıcı üzerinde parçalı (chunked) ve progress-bar destekli yükleme pipeline'ı kuruldu.
- Spam yüklemeleri önlemek amacıyla arka planda kullanıcıyı yormayan akıllı Cloudflare Turnstile güvenlik doğrulaması entegre edildi.
Aşama 3: Oyunlaştırma (Photo Scavenger Hunt / Görevler)
- Misafirleri fotoğraf çekmeye teşvik etmek amacıyla dinamik bir görev listesi ("Bugün için küçük görevler") ve tamamlanma ilerleme çubuğu (progress bar) geliştirildi.
Aşama 4: Zarif Ön Yüz ve Kullanıcı Deneyimi
- Özel tipografi (Kudry Headline, Cormorant Garamond, Montserrat) ve responsive mikro animasyonlar.
- Kesintisiz döngüde çalışan telifsiz piyano arka plan müziği (Web Audio API).
- Tek tıkla WhatsApp LCV mesajlaşması ve Google Maps yol tarifi entegrasyonu.
4. Elde Edilen Ölçülebilir Sonuçlar
| Metrik | Geleneksel Çözümler | zeynepvevahdettin.com | Avantaj |
|---|---|---|---|
| Medya Yükleme Limiti | 10–50 MB (E-posta/Form) | 5 GB / Misafir (2 GB/Dosya) | 100 Kat Yüksek Kapasite |
| Altyapı & Sunucu Maliyeti | Aylık $20–$80 VPS/S3 | %100 Serverless (0 ₺) | Sıfır Sabit Maliyet |
| Sayfa Yükleme Hızı | 1.8 – 2.5 sn | < 200 ms (Cloudflare Edge) | Mükemmel Hız |
| Bot ve Spam Koruması | Rahatsız Edici Captcha | Görünmez Cloudflare Turnstile | Sıfır Sürtünmeli UX |
5. Kullanılan Teknolojiler
- Bulut & Serverless: Cloudflare Pages, Cloudflare Workers API, Cloudflare R2 Storage
- Güvenlik & Bot Koruması: Cloudflare Turnstile API, SHA-256 Checksum Validation
- Ön Yüz & Tipografi: Vanilla JavaScript (ES6+), Modern CSS3 Grid/Flexbox, Web Audio API
- Desteklenen Formatlar: JPEG, PNG, WebP, HEIC, HEIF, MP4, QuickTime (MOV), M4V
Sizin Projeniz İçin de Özel Bir Web Çözümü Kuralım
İşletmeniz veya özel etkinlikleriniz için yüksek performanslı, modern ve bulut depolama entegrasyonlu web uygulamaları geliştirmek isterseniz hizmetlerimi inceleyebilir veya benimle iletişime geçebilirsiniz.