E-Ticaret Platformu
Katalogdan siparişe kadar bütün akışı sıfırdan kurduğum e-ticaret altyapısı.
- Web
- 2026
- Kendi ürünüm
Görsellerde geçen AURA markası, ürünler, fiyatlar, puanlar ve iletişim bilgileri gerçek değildir — platformu geliştirirken kullandığım örnek veridir. Yayında olan bir mağaza değil, üzerinde çalıştığım bir altyapı. Burada gösterdiğim şey ürünler değil, arayüzün ve akışların kendisi.
Ekran görüntüleri
Büyütmek için bir görsele tıklayın.
Proje hakkında
Mobil tarafta uzun süre çalıştıktan sonra bir e-ticaret akışının baştan sona nasıl kurulduğunu kendi elimle görmek istedim. Hazır bir altyapı kurup üzerine tema giydirmek yerine katalogdan sipariş onayına kadar bütün akışı sıfırdan yazdım.
İşin ilginç kısmı arayüz değil, arayüzün altındaki kurallar oldu. Bir sepet aslında bir ürün listesi değil; stok sınırı, kargo eşiği, kupon, puan kazanımı ve vergi kırılımı aynı anda tutarlı kalmak zorunda olan bir hesap. Kullanıcı adedi artırdığında ücretsiz kargo eşiği, kupon indirimi ve kazanılacak puan aynı anda güncelleniyor — biri yanlış hesaplanırsa toplam tutar da yanlış çıkıyor.
Bir diğer öğrendiğim şey Türkiye'de e-ticaretin hukuki tarafı. Mesafeli Satış Sözleşmesi, Ön Bilgilendirme Formu, KVKK aydınlatma metni, cayma hakkı ve ETBİS kaydı — bunlar isteğe bağlı sayfalar değil, satış yapabilmek için bulunması gereken şeyler. Arayüzü tasarlarken bu sayfaların akışın neresinde durması gerektiğini de öğrenmiş oldum.
Hesap doğrulama tarafını da bilerek zorlaştırdım: kullanıcı e-postasını ve telefonunu doğrulamadan ödemeye geçemiyor, ürünü satın almayan kullanıcı yorum yazamıyor. İstemciye güvenmemek mobilde öğrendiğim bir alışkanlıktı; burada da aynı şekilde kurdum.
Öne çıkan akışlar
- Canlı arama: yazarken kategori ve ürün önerileri, eşleşen harfler vurgulanmış hâlde
- Dört adımlı sipariş: sepet → adres → ödeme → onay, her adımda durum korunuyor
- Ücretsiz kargo eşiği: kalan tutarı gösteren ilerleme çubuğu
- Hesap doğrulama: e-posta ve telefon onaylanmadan ödeme kapalı
- Puan ve kupon: sadakat puanı kazanımı ve kupon kodu doğrulama
- Ürün detayı: sekmeli içerik, özellik tablosu, kargo hesaplayıcı
- Yorum kilidi: yalnızca ürünü satın alan kullanıcı değerlendirme yazabilir
- Mevzuat sayfaları: mesafeli satış, ön bilgilendirme, KVKK, cayma hakkı
Kurduğum yapılar
62 başlık · 7 grupArayüz ve Etkileşim
- HTML5 · CSS3 · saf JavaScript
- Bileşen tabanlı sayfa kurgusu
- Mega menü ve açılır kategoriler
- Hero döngüsü (otomatik geçiş + göstergeler)
- Canlı arama önerileri
- Eşleşen metni vurgulama
- Ürün galerisi ve büyüteç
- Sekmeli ürün detayı
- Bildirim baloncukları (toast)
- Ayrılma niyeti (exit-intent) açılır penceresi
- İskelet (skeleton) yükleme
Katalog ve Arama
- Kategori ve alt kategori ağacı
- Çoklu filtre (kategori, alt kategori)
- Sıralama seçenekleri
- Ürün sayacı ve sonuç bildirimi
- Kırıntı navigasyonu (breadcrumb)
- Arama önerisinde kategori + ürün ayrımı
- Stok durumu gösterimi
- İndirim yüzdesi hesabı
- Çok satan / yeni rozetleri
Sepet ve Sipariş Akışı
- Dört adımlı sipariş ilerlemesi
- Sepet durumunun kalıcı tutulması
- Adet artır/azalt ve stok sınırı
- Ücretsiz kargo eşiği ve ilerleme çubuğu
- Kupon kodu doğrulama
- Ara toplam / kargo / KDV kırılımı
- Kapıda ödeme hizmet bedeli
- Puan kazanımı hesabı
- Tahmini teslimat süresi
- Favorilere taşıma
- Sepetten ürün çıkarma
Hesap ve Doğrulama
- Üç aşamalı hesap doğrulama akışı
- E-posta doğrulama ve yeniden gönderme
- Telefon doğrulama (e-postaya bağlı sıra)
- Doğrulanmadan ödemeye geçişin engellenmesi
- Yalnızca satın alanın yorum yazabilmesi
- Oturum durumuna göre arayüz
Ticari Kurgu
- Puan iadesi (sadakat) mantığı
- Kupon kampanyası
- Ücretsiz kargo eşiği
- İndirimli fiyat / liste fiyatı ayrımı
- Kampanya ve koleksiyon sayfaları
- Ürün karşılaştırma
- Favoriler
- WhatsApp üzerinden sipariş
Mevzuat ve Güven
- Mesafeli Satış Sözleşmesi
- Ön Bilgilendirme Formu
- KVKK aydınlatma metni
- Gizlilik politikası
- Kullanım şartları
- Çerez bildirimi
- ETBİS kaydı alanı
- Vergi dairesi / MERSİS alanları
- 14 gün cayma hakkı akışı
SEO ve Erişilebilirlik
- Anlamsal HTML yapısı
- Kırıntı navigasyonu
- Ürün odaklı başlık hiyerarşisi
- Mobil öncelikli düzen
- Görsellerde alternatif metin
- Klavye ile gezinme
- Odak durumları
- Sayfa hızı gözeten görsel yükleme
Bu projede de tasarım, kod, içerik yerleşimi ve akış kurgusunun tamamı bana ait. Ekip ya da hazır tema kullanmadım.
Bu proje hakkında konuşalım
Sepet hesaplarını, doğrulama akışını veya mevzuat tarafını nasıl kurduğumu ayrıntısıyla anlatabilirim. Kodun tamamı bende duruyor.