Bağlantılarınızı tek sayfada toplayın, temanızı seçin ve tıklamaları takip edin. Düzenlemeler telefon önizlemesine anında yansır. Stripe ödemeleri test modunda çalışır.
İhtiyaç
Workers ücretsiz planının CPU sınırları içinde hızlı sayfalar ve API üzerinden aşılamayan abonelik kuralları.
Rolüm
Ürünü, arayüzü, veritabanı kurallarını, Stripe entegrasyonunu ve dağıtımı geliştirdim. CI üzerinden 62 test çalışıyor.
Mimari
Her parçanın çalıştığı yer. Kırmızı çizgi örnek akışı izliyor.
- L1 Arayüz Çalıştığı yer: Tarayıcı
Canlı önizleme, erişilebilir bağlantı sıralama ve tıklama analitiği. Herkese açık sayfalarda çok az JavaScript.
- Next.js 16
- Tailwind CSS 4
- shadcn/ui
- dnd-kit
- Recharts
- L2 Sunucu Çalıştığı yer: Cloudflare Workers
Next.js çalıştırıyor, webhook’ları doğruluyor. Sayfaları bir gün önbellekte tutup düzenleme sonrası yeniliyor.
- Cloudflare Workers
- OpenNext
- Workers KV
- L3 Veri Çalıştığı yer: Supabase
Tetikleyiciler, sütun yetkileri ve satır düzeyinde güvenlikle plan denetimi. Herkese açık veriler için özel işlev.
- Postgres
- Row-level security
- Supabase Auth
- Supabase Storage
- L4 Harici servisler Çalıştığı yer: Stripe
Test modunda ödeme, abonelik yönetimi ve imzalı webhook’lar.
- Stripe Checkout
- Customer Portal
- Webhooks
Adım adım akış: Test modunda Pro planına geçiş
- L1 · Arayüz Kullanıcı Stripe Checkout’u test modunda açar.
- L4 · Harici servisler Stripe test ödemesini tamamlar ve webhook gönderir.
- L2 · Sunucu Worker imzayı doğrular, güncel aboneliği Stripe üzerinden okur.
- L3 · Veri Sunucu planı günceller; veritabanı kuralları kullanıcı müdahalesini engeller.
- L1 · Arayüz Tüm temalar ve sınırsız bağlantı kullanımı açılır.
Temel kararlar
- 01
Veritabanında plan kuralları
Postgres, bağlantı sınırlarını ve Pro temaları denetliyor. Kullanıcılar planlarını değiştiremiyor. Kurallar PGlite ile test ediliyor.
- 02
Doğrulanmış webhook’lar
Doğrulanan her olayda güncel abonelik okunuyor; tekrarlanan veya sırası değişen olaylardan kaynaklanan eski güncelleme riski azalıyor.
- 03
Worker CPU kullanımı
Statik dosyalar ve önbellekle CPU kullanımı azaldı. Ölçülen sıcak istekler: 5 ila 14 ms. Sıkıştırılmış paket: 2,65’ten 1,64 MiB boyutuna.
- 04
Hafif sayfalar
Ayrı yerleşimler, CSS ile koyu tema ve sendBeacon. Kaydedilen mobil Lighthouse performans puanı: 98.
- 05
Tema kontrastı
İçe aktarma betiği, OKLCH açıklığını WCAG AA kontrast eşiklerine göre ayarlıyor.