E-Ticaret
Ürün katalog + sepet + ödeme (Stripe/Iyzico).
E-ticaret = ürün satışı için kompleks ama Claude Code ile yapılabilir. Modern e-ticaret = ürün katalog + sepet + checkout + ödeme + sipariş yönetimi + e-posta bildirimleri. Türkiye için Iyzico, uluslararası için Stripe. Shopify'a alternatif: kendi koduna sahip ol, ek aylık komisyon yok. Niş, butik veya dijital ürün için ideal.
Kim İçin Uygun?
- Butik mağazalar (10-100 ürün)
- Dijital ürün satıcıları (e-kitap, kurs, plugin)
- Niş market (örn: vegan kozmetik, el yapımı takı)
- B2B kataloglar (toptan, fiyat istek)
E-Ticaret için olmazsa olmazlar
Ürün katalog + filtreleme
Kategori, fiyat, marka, özellik filtreleri. Hızlı arama.
Ürün detay (galeri + video)
Görsel slider, video, açıklama, özellikler, beden/renk seçici.
Sepet (LocalStorage)
Kullanıcı giriş yapmadan sepet tutulur.
Checkout flow
Adres + kargo + ödeme — 3 adım veya tek sayfa.
Stripe / Iyzico
Kart ödeme, 3D Secure, taksit (Iyzico).
Sipariş takibi + e-posta
Otomatik onay, hazırlanıyor, kargo, teslim e-postaları.
Admin paneli
Sipariş listesi, stok yönetimi, ürün ekleme.
Müşteri hesabı
Geçmiş siparişler, adres defteri, favoriler.
Önerilen Yığın
8 adımda yayında
Veri modeli (60 dk)
Tablolar: products, categories, orders, order_items, customers, addresses. Claude'a sor: 'Supabase için bu e-ticaret schema'sını yaz, RLS politikalarıyla.'
Ürün katalog (90 dk)
/products grid + filtreleme + arama. Ürün kartı: image + title + price + 'sepete ekle'. Sayfalama.
Ürün detay (120 dk)
/products/[slug]: 5-image galeri (Swiper), video, açıklama, beden/renk select, miktar, sepete ekle. Schema: Product JSON-LD.
Sepet (60 dk)
Zustand store + localStorage. /cart sayfası: ürünler + miktar değiştir + toplam.
Checkout + Stripe (180 dk)
/checkout: 1) adres formu, 2) kargo seçimi, 3) Stripe Checkout veya Iyzico iframe. Webhook ile sipariş kaydı.
Admin paneli (90 dk)
/admin: siparişler tablosu, durum güncelle, ürün ekle/sil. Auth kontrolü.
E-posta bildirimleri (60 dk)
Resend + React Email: sipariş onayı, kargo, teslim. Müşteriye + admin'e.
Test + deploy (60 dk)
Stripe test mode → live. SSL, KVKK aydınlatma metni, satış sözleşmesi. Vercel.
E-Ticaret'da Video / Slider Nasıl Yapılır?
E-ticaret'te ürün galerisi alıcı için en kritik karar noktası. Statik 5 görsel yetersiz — 360° döner görsel + ürün kullanım videosu = dönüşüm 2-3× artar. Amazon, Apple bu yüzden yapıyor.
Ürün galeri Swiper
Ana görsel + 5 thumbnail. Tıklayınca büyük görüntü değişsin. Mobil için swipe.
"use client";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Thumbs } from 'swiper/modules';
import { useState } from 'react';
export function ProductGallery({ images }) {
const [thumbsSwiper, setThumbsSwiper] = useState(null);
return (
<div className="space-y-4">
<Swiper
modules={[Navigation, Thumbs]}
thumbs={{ swiper: thumbsSwiper }}
navigation
className="rounded-xl overflow-hidden"
>
{images.map((img, i) => (
<SwiperSlide key={i}>
<img src={img.url} alt={img.alt} className="w-full aspect-square object-cover" />
</SwiperSlide>
))}
</Swiper>
<Swiper
onSwiper={setThumbsSwiper}
modules={[Thumbs]}
slidesPerView={5}
spaceBetween={8}
watchSlidesProgress
className="thumbs"
>
{images.map((img, i) => (
<SwiperSlide key={i} className="cursor-pointer border-2 border-transparent">
<img src={img.url} alt="" className="w-full aspect-square object-cover rounded" />
</SwiperSlide>
))}
</Swiper>
</div>
);
}Ürün videosu (kullanım gösterimi)
Galerinin son slaytı olarak video. 30-60 sn ürün kullanım gösterimi.
<SwiperSlide>
<video
src="/products/usage.mp4"
poster="/products/usage-poster.jpg"
controls
playsInline
className="w-full aspect-square object-cover"
/>
</SwiperSlide>360° döner görsel
36 görsel (her 10 derecede bir). Kullanıcı sürükledikçe ürün döner.
npm install react-three-360-product
// veya manuel:
const images = Array.from({ length: 36 }, (_, i) => `/360/product-${i + 1}.jpg`);
const [angle, setAngle] = useState(0);
<div
className="relative aspect-square cursor-grab"
onMouseMove={(e) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
setAngle(Math.floor(x * 36) % 36);
}}
>
<img src={images[angle]} className="w-full h-full" />
</div>Zoom on hover
Görselin üzerine gelince büyütüp gösterir — Amazon tarzı.
npm install react-image-magnify
import ReactImageMagnify from 'react-image-magnify';
<ReactImageMagnify {...{
smallImage: { src: image.url, width: 600, height: 600 },
largeImage: { src: image.url, width: 1800, height: 1800 },
enlargedImagePosition: 'beside',
}} />Müşteri yorumlarında video
İncelemeler bölümünde unboxing/kullanım videoları. Sosyal kanıt en güçlü hali.
<div className="grid grid-cols-2 gap-4">
{reviews.filter(r => r.video).map(r => (
<div key={r.id}>
<video src={r.video} controls poster={r.thumbnail} className="rounded-lg" />
<div className="mt-2 flex items-center gap-2">
<Avatar src={r.userAvatar} />
<div>
<p className="font-bold">{r.userName}</p>
<Stars rating={r.rating} />
</div>
</div>
<p className="mt-2">{r.text}</p>
</div>
))}
</div>Ürün listesi hover video
Katalogda ürün kartı üzerine gelince statik görsel video'ya dönüşür. Engagement artar.
<Link href={`/products/${product.slug}`}>
<div
className="group relative aspect-square overflow-hidden"
onMouseEnter={(e) => e.currentTarget.querySelector('video')?.play()}
onMouseLeave={(e) => {
const v = e.currentTarget.querySelector('video');
v?.pause(); v.currentTime = 0;
}}
>
<img src={product.image} className="absolute inset-0 group-hover:opacity-0 transition" />
<video
src={product.previewVideo}
muted loop playsInline
className="absolute inset-0 w-full h-full opacity-0 group-hover:opacity-100 transition"
/>
</div>
</Link>Claude Code'a Yapıştır
Köşeli parantezleri kendi içeriğinizle değiştirin.
Supabase e-ticaret schema
Aç ▾Kapat ▴
Supabase için tam e-ticaret schema'sı oluştur: Tablolar: - products (id, slug, name, description, price, sale_price, stock, images[], video_url, category_id, brand, is_active, created_at) - categories (id, name, slug, parent_id) - product_variants (id, product_id, size, color, sku, stock, price_diff) - product_reviews (id, product_id, user_id, rating, text, video_url, approved) - customers (id, auth_id, name, email, phone) - addresses (id, customer_id, type, name, address1, city, postal_code, phone) - orders (id, customer_id, address_id, status, total, payment_id, tracking, created_at) - order_items (id, order_id, product_id, variant_id, quantity, price, total) - cart_items (geçici, localStorage'a alternatif) RLS politikaları: - customers: kendi kayıtlarını okur/günceller - orders: kendi siparişlerini okur, admin tümünü görür - products: herkes okur, admin günceller Migrations dosyaları + TypeScript tipleri ile.
Stripe Checkout flow
Aç ▾Kapat ▴
Stripe Checkout entegrasyonu:
1. /api/checkout endpoint
- Body: { items: [{ productId, quantity, variantId? }], addressId, email }
- Stripe Checkout Session oluştur (line_items)
- successUrl: /siparis/[orderId]?session_id={CHECKOUT_SESSION_ID}
- cancelUrl: /sepet
- Türk Lirası (TRY) destek
- 9 taksit seçeneği (Türk kartları için)
2. /api/webhooks/stripe — webhook handler
- checkout.session.completed → sipariş veritabanına kaydet
- Resend ile müşteriye onay maili gönder
- Admin'e Slack bildirim
- Stok düş
3. Test mode kurulum + canlıya geçiş checklist'i
Stripe types kullanılsın, error handling sağlam olsun.Iyzico alternatifi
Aç ▾Kapat ▴
Türkiye için Iyzico entegrasyonu: Iyzico Checkout Form (iframe) ile: 1. /api/iyzico/init endpoint - Iyzico SDK ile CheckoutForm oluştur - Token döndür 2. Frontend: iyzicopay.js yükle, iframe göster 3. /api/iyzico/callback - Token doğrulama - Ödeme başarılıysa sipariş onayla - Webhook (Iyzico bildirimleri) Iyzico Türk Lirası, taksit, 3D Secure native destek var. Test ortamı ile başla, sonra production keys. Iyzico vs Stripe karşılaştırma tablosu da ekle.
Bu rehberden gerçek bir vaka
Brief
Vegan kozmetik markası. 50 ürün, ortalama 200 TL. Hedef: aylık 100 sipariş.
Sonuç
10 günde: 50 ürün katalogu + ürün galerisi + sepet + Iyzico ödeme + admin paneli + 6 otomatik e-posta. Mobile responsive, KVKK uyumlu.
Bunlardan kaçının
Hata
Stok kontrolü yapmıyor — fazla satış yapıyor
Çözüm
Her sepete ekleme + checkout'ta stok lock. Postgres transaction kullan.
Hata
Mobilde checkout flow karmaşık
Çözüm
Tek sayfa checkout (multi-step değil). Adres + ödeme yan yana. Mobile-first.
Hata
E-posta otomasyon kurulmamış
Çözüm
Sipariş onayı, hazırlanıyor, kargo, teslim — 4 e-posta zorunlu. Müşteri güveni için kritik.
E-Ticaret için sık sorular
Shopify yerine kendi koduma sahip olmak mantıklı mı?▾
Aylık komisyondan kurtulur, tam kontrolün olur, hız + SEO çok daha iyi. Ama: 10 ürün için Shopify daha hızlı başlar. 100+ ürün veya niş özelleştirme istiyorsanız kendi kod. Migration de mümkün.
Stripe vs Iyzico vs Param vs PayU?▾
Türkiye müşterisi: Iyzico (taksit, 3D, KVKK uyumlu, TL native). Uluslararası: Stripe. KOBİ için Param da iyi. PayU eski, modernize gerek. Iyzico'da entegrasyon 2 saatte tamam.
Kargo entegrasyonu nasıl?▾
Yurtiçi/MNG/Aras için Sürat Kargo API veya basit Shopify-tarzı manuel takip kodu girme. Otomatik: Shippy gibi entegrasyon platformları kullan.
Diğer site türleri
Landing Page
Tek sayfa, tek amaç — ürün lansmanı veya kampanya.
İncele
Kurumsal Site
Hakkımızda, hizmetler, blog, iletişim — tam kurumsal yapı.
İncele
Portfolyo
Tasarımcı, fotoğrafçı, geliştirici için kişisel showcase.
İncele
Blog / İçerik Sitesi
SEO odaklı, MDX/Markdown destekli içerik platformu.
İncele