İçeriğe geç
HT Hüseyin Taşkıran
Tüm projeler

/ Vaka Çalışması 01

Düğün
Fotoğraf Duvarı

Davetlilerin masadaki QR kodu okutarak kendi telefonlarından fotoğraf yüklediği, yüklenen her karenin yönetici onayından geçtikten sonra canlı galeride yayınlandığı mobil öncelikli bir web uygulaması. Uygulama indirmeye gerek yok — tarayıcı yeterli.

Rolüm
Tasarım · Geliştirme · Yayın
Durum
Yayında
Teknolojiler
React · Node.js · SQLite
Canlı adres
edahuseyin.online ↗
Tanıtım videosu hazırlanıyor

Problem

Bir düğünde en çok fotoğraf misafirlerin telefonlarından çıkar. Fotoğrafçı planlı kareleri çeker; ama masadaki kahkaha, dans pistindeki an, kapıdaki karşılama çoğunlukla misafirlerin galerisinde kalır. Bu kareler ya hiç paylaşılmaz ya da düğünden günler sonra dağınık bir mesaj grubunda birikir, çözünürlüğü düşmüş halde.

İkinci sorun ise anlıktır: gece devam ederken o fotoğrafları salondaki ekranda göstermenin pratik bir yolu yoktur. Herkesin uygulama indirmesini beklemek de gerçekçi değildir.

Çözüm

Masalara yerleştirilen bir QR kod, misafiri doğrudan tarayıcıda açılan yükleme sayfasına götürüyor. Kurulum yok, üyelik yok. Misafir birden fazla fotoğrafı tek seferde seçip gönderiyor.

Gönderilen her fotoğraf önce beklemede durumuna düşüyor ve galeride görünmüyor. Yönetici panelinden onaylanan kareler canlı galeriye ekleniyor. Böylece ekrana yansıyan içerik kontrol altında kalıyor — düğün gibi telafisi olmayan bir günde bu, üzerinde en çok durduğum tasarım kararı oldu.

Düğüne özel bilgiler (çift isimleri, tarih, mekân, program akışı) tek bir yapılandırma dosyasında toplandı. Uygulama bu sayede başka bir düğün için yeniden kullanılabilir durumda.

Öne çıkan özellikler

/ 01

Onay kuyruğu

Yüklenen fotoğraflar beklemede başlar; onaylanmadan galeriye düşmez.

/ 02

Yönetici paneli

Onaylama, reddetme, yayından kaldırma ve tüm fotoğrafları toplu indirme.

/ 03

Çoklu yükleme

Tek seferde birden fazla fotoğraf; dosya başına 10 MB sınırı.

/ 04

Mobil öncelikli arayüz

Ana sayfa, program akışı, galeri ve büyütme görünümü telefon için tasarlandı.

/ 05

QR ile giriş

Masadaki koddan tek dokunuşla yükleme sayfası; kurulum gerektirmez.

/ 06

Yeniden kullanılabilir

Çift bilgileri ve program tek dosyadan değiştirilerek başka düğüne uyarlanır.

Mimari

Tek sunucu üzerinde çalışan, sade ve bakımı kolay bir yapı kurdum. Gereksiz servis eklemek yerine her katmanın işini net biçimde ayırmayı tercih ettim.

Misafir Telefon tarayıcısı · QR ile giriş
Nginx HTTPS sonlandırma · ters vekil · yükleme boyutu sınırı
Express Node.js · REST uçları · oturum · dosya doğrulama
SQLite Fotoğraf kayıtları ve onay durumları
Disk Dosyalar statik değil, veritabanı durumu kontrol edilerek servis edilir

Arayüz React ve Vite ile geliştirildi; üretimde derlenmiş çıktı aynı Express sunucusu üzerinden tek origin altında servis ediliyor. Uygulama systemd servisi olarak çalışıyor: çökerse otomatik yeniden başlıyor ve kendi kullanıcısı altında, dosya sistemine sınırlı erişimle izole ediliyor.

Güvenlik tarafında ne yaptım

Herkese açık bir yükleme formu, internete açtığınız en riskli şeylerden biridir. Bu yüzden yükleme akışını birden fazla katmanda doğruladım: dosya uzantısı, tarayıcının bildirdiği tür ve dosyanın kendi imzası ayrı ayrı kontrol ediliyor — üçü uyuşmuyorsa dosya reddediliyor.

Yüklenen dosyalar özgün adlarıyla saklanmıyor, güvenli ve rastgele adlarla yeniden oluşturuluyor. Yükleme klasörü statik olarak dışarı açılmıyor; bir fotoğrafın görünürlüğü her istekte veritabanındaki onay durumundan kontrol ediliyor. Böylece onaylanmamış bir kare, adresi bilinse bile dışarıdan görüntülenemiyor.

Yönetici oturumu JWT ile kuruluyor ve token yalnızca httpOnly çerezde tutuluyor. Hem yükleme hem yönetici girişi istek sınırlamasına tabi. Sunucu tarafında ise HTTPS zorunlu ve sertifika otomatik yenileniyor.

Sonuç

Uygulama gerçek bir düğünde kullanıldı ve hâlâ yayında. Misafirlerin çektiği kareler tek bir yerde toplandı; çiftin eline dağınık mesaj gruplarından değil, düzenli ve indirilebilir bir galeriden ulaştı.

Bu proje benim için şunu netleştirdi: küçük ölçekli bir işte doğru kararlar, teknoloji seçiminden çok akış tasarımında veriliyor. Onay kuyruğu olmasaydı uygulama teknik olarak yine çalışırdı — ama kullanılmaya güvenilmezdi.

Benzer bir şeye mi ihtiyacınız var?

Ne yapmak istediğinizi yazın, birlikte değerlendirelim.