Emircan Erdemci

Porch

Canlı önizleme ve aboneliklerle kişisel bağlantı sayfaları.

  • TürBağlantı sayfası oluşturucu
  • Yıl2026
  • RolümÜrün tasarımı ve full stack geliştirme

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.

  1. 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
  2. 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
  3. 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
  4. 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ş

  1. L1 · Arayüz Kullanıcı Stripe Checkout’u test modunda açar.
  2. L4 · Harici servisler Stripe test ödemesini tamamlar ve webhook gönderir.
  3. L2 · Sunucu Worker imzayı doğrular, güncel aboneliği Stripe üzerinden okur.
  4. L3 · Veri Sunucu planı günceller; veritabanı kuralları kullanıcı müdahalesini engeller.
  5. L1 · Arayüz Tüm temalar ve sınırsız bağlantı kullanımı açılır.

Temel kararlar

  1. 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.

  2. 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.

  3. 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.

  4. 04

    Hafif sayfalar

    Ayrı yerleşimler, CSS ile koyu tema ve sendBeacon. Kaydedilen mobil Lighthouse performans puanı: 98.

  5. 05

    Tema kontrastı

    İçe aktarma betiği, OKLCH açıklığını WCAG AA kontrast eşiklerine göre ayarlıyor.

Sonraki proje · 02 Parley Anlık yanıtlar, hava durumu, hesaplama ve saat kartlarıyla yapay zekâ sohbeti.
İletişim

Projenizi konuşalım.

Yeni web projenizi bana e-posta ile anlatın.

E-posta gönder emircan.erdemci@hotmail.com