30 Saniyede

Bir çalışan, arkadaşı için küçük bir dijital hediye kutusu hazırlar: bir not, şarkılar, videolar, podcast önerileri ve “senlik bilgiler”. Kutunun bağlantısı alıcıya e-postayla gider; alıcı linke tıklar, kutuyu tıklayıp açar ve kartlar animasyonla saçılır. Hesap açmak, ödeme yapmak yok — sadece bağlantı. Referans alınan ücretli üründen (alittleboxofgoodies.com) farkı: tamamen ücretsiz, kurum içi ve markaya uyarlanmış.

İş Problemi & Fırsat

Kurum içi takdir ve kutlama çoğunlukla bir Teams mesajına sıkışıyor; kişisel his taşımıyor. Hazır “hediye kutusu” ürünleri ise ücretli ve kurum dışı. Fırsat: aynı duygusal deneyimi kurumun kendi platformunda, ödeme ve üyelik olmadan vermek — düşük maliyetli ama hatırlanır bir çalışan deneyimi dokunuşu.

Kullanıcı Deneyimi

Gönderen, tek sayfalık kurucu ekranda alıcının adını/e-postasını yazar, beş kart tipinden istediklerini doldurur (her tipten en fazla bir tane) ve canlı önizlemede kutunun alıcıda nasıl görüneceğini aynen görür. “Gönder” deyince bağlantı alıcıya e-postayla gider. Alıcı linki açar; karşısında robotlu, markalı bir sahne ve kapalı bir koli vardır. Koliye tıklayınca kutu sallanır, açılır, kartlar içinden fırlayıp yüzer; her karta tıklayınca içerik (not, gömülü Spotify/YouTube oynatıcı, madde listesi) bir panelde açılır. Deneyim telefonda da tam çalışır — dar ekranda sahne otomatik olarak sütun düzenine döner.

Sahibin Amacı / Vizyon

Amaç “e-kart” değil, açması keyifli bir an tasarlamak: merak (kapalı koli) → küçük tören (sallanma, açılış) → keşif (kartlar). Tasarımcının sabit 1920×1080 kompozisyonu, karta ve ekrana göre esneyen bir sahne sistemine çevrildi. Bilinçli sadelik kararları: dosya yükleme yok (beş kart tipinin hepsi metin/bağlantı), hesap yok, ödeme yok. Yol haritasında MS Entra SSO ile “Borusan hesabınla gir, alıcıyı listeden seç” var [?].

Nasıl Çalışır (sade)

  1. Gönderen formu doldurur; kartlar tek bir pakete yazılır.
  2. Sistem pakete tahmin edilemez bir bağlantı üretir ve alıcıya e-postayla yollar.
  3. Alıcı bağlantıyı açar; sayfa herkese açıktır ama adresi bilmeyen bulamaz.
  4. Kutu açıldığında sistem “açıldı” bilgisini sayar (gönderene geri bildirim zemini).
  5. Kart içindeki müzik/video bağlantıları tanınan servislerdense sayfada gömülü çalar.

Teknik özet: Next.js 15 (App Router) + tek tablolu Postgres (kartlar jsonb), self-hosted useSend ile e-posta, Coolify/Docker deploy.

Yeniden Kullanılabilir Yetenekler

  • tahmin-edilemez-baglanti-paylasimi — Üyelik istemeden “sadece linki bilen görsün” paylaşımı. Davetiyeler, kişisel raporlar, teklif/sertifika paylaşımı gibi her senaryoya taşınır.
  • guvenli-link-embed — Kullanıcının yapıştırdığı Spotify/YouTube/Vimeo bağlantısını (listeler dâhil) güvenle sayfada oynatır. İçerik kürasyonu olan her ürüne hazır parça.
  • olcek-bagimsiz-sahne-kompozisyonu — Tasarımcının sabit ölçülü kompozisyonunu her ekranda ve küçük önizlemede aynı bileşenle gösterir. Kampanya mikrositeleri ve builder+önizleme ekranları için ideal.
  • eposta-bildirim-sistemi — Bağlantıyı alıcıya kendi altyapımızdan (useSend) ulaştırır; gönderen bazlı saatlik hız sınırı ile kötüye kullanım frenli.

İş Etkisi / Sonuç

Canlıda, Borusan iç kullanımına sunulmuş durumda; kutu açılışları sayılıyor. Yaygın kullanım metrikleri henüz yok [?]. Ağustos 2026’daki güvenlik olayı (framework RCE’si üzerinden env sızıntısı) hızlı müdahaleyle kapatıldı; ders çıkarımları deploy standardına işlendi (sır rotasyonu, erişim kilidi, is_buildtime=false).

Ekran görüntüleri

  • — Kurucu ekran: kart editörleri + canlı önizleme.
  • — Alıcı sayfası: kapalı koli + “hediyeni açmak için tıkla”.
  • — Açılmış kutu: saçılan kartlar ve robot.
  • — Kart paneli: gömülü Spotify/YouTube oynatıcı.
  • — Mobil sütun düzeni.

Teknik Detaylar (geliştiriciler için)

  • Stack: Next.js 15 App Router + TypeScript; Postgres tek tablo (packages), kartlar jsonb; pg için serverExternalPackages zorunlu. Şema, ilk sorgudan önce çalışan tembel ready() adımıyla uygulanır (edge-runtime/pre_deployment_command tuzaklarını aşar).
  • Sahne: container-type: size + cqh/cqw; yerleşim yüzde cinsinden scene.ts’de. 720px altı (ve dikey tablet) sütun düzeni.
  • Güvenlik: paket id 16 karakter/~93 bit; bulunamayan/bozuk/silinmiş id’ler aynı 404. Yönetici yüzeyi geçici oturum kilidi arkasında (SSO’ya kadar); alıcı sayfaları ve statik varlıklar muaf. E-posta gönderiminde gönderen bazlı saatlik sınır + honeypot.
  • Mail: useSend (Resend uyumlu, self-hosted). from domaini useSend’de doğrulanmış olmalı.
  • Deploy: Coolify + Dockerfile build pack; tüm env’ler is_buildtime=false.

Tekrar Kullanım Notları

Strateji: Aynı iskelet (kur → linkle paylaş → törenle aç) başka duygusal anlara taşınır: doğum günü/iş yıldönümü kutlamaları, hoş geldin paketleri, etkinlik davetiyeleri, müşteriye kişisel teşekkür sayfaları. Kart tipleri kolayca değişir (ör. “fotoğraf anısı”, “hediye çeki kodu”). Teknik: Yeni kart tipi eklemek üç dokunuş (tip tanımı + ikon + sahne yuvası). Marka değişimi sahne görselleri + iki renk paletiyle sınırlı. SSO seam’i hazır (AUTH_MODE); kurumsal kimlikle alıcı seçimi eklenirken paket-link modeli aynen kalabilir.