E-ticaret2026
Patiler — Evcil Hayvan Ürünleri E-Ticaret Vitrini
Patiler, kedi–köpek–kuş ürünleri satan bağımsız bir pet shop için tasarlanmış uçtan uca e-ticaret vitrini. Müşterinin ürünü bulup sepete atmasından, mağaza sahibinin stok ve kampanya yönetmesine kadar iki farklı kullanıcının ihtiyacını tek uygulamada karşılıyor. Next.js 16 App Router, React 19, TypeScript ve Tailwind CSS v4 ile yazıldı; renk paleti, tipografi ve bileşen dili projeye özel olarak kuruldu.
Proje Türü
E-Ticaret Web Sitesi
Sektör
Pet Ürünleri
Hizmet
E-Ticaret Tasarım & Geliştirme
Sonuç
Modern ve kullanıcı odaklı alışveriş deneyimi
Sorun
Küçük ölçekli pet shop'lar çoğunlukla hazır pazaryeri panellerine sıkışıyor: katalog kendi kategori mantığına göre kurulamıyor, kampanya kurgusu yüzde indirimden öteye geçmiyor ve ürün görselleri için sürekli dış kaynağa bağımlı kalınıyor. Vitrin tarafında ise "dost türü" gibi sektöre özgü filtreler hiçbir şablonda hazır gelmiyor; müşteri kedisine mama ararken köpek ürünleri arasında kayboluyor. İhtiyaç, hem mağaza sahibinin kendi diliyle yönetebildiği hem de ziyaretçinin aradığını üç tıkta bulduğu, dış servise bağımlı olmayan bir sistemdi.
Hızlı
Ürün Keşfi
Akıcı
Alışveriş Deneyimi
Pratik
Sepet Yönetimi
Yaklaşım
Rotaları app/(vitrin) ve app/(panel) olarak iki kabuğa ayırıp mağaza ve yönetim arayüzlerini tek kod tabanında topladım
Katalog filtrelerini kategori, dost türü, marka ve fiyat olarak kurup tüm durumu URL arama parametrelerinde tuttum; bağlantı paylaşılabilir, geri tuşu doğru çalışır
Sepet, favoriler ve üyeliği React Context + localStorage üzerine kurdum; depolamayı yalnızca mount sonrası okuyarak hydration uyumsuzluğunu tasarımdan çözdüm
Yönetim panelini özet panosu, siparişler, kampanyalar, üyeler, müşteriler, ürünler, kategoriler ve ayarlar olmak üzere sekiz bölüme ayırdım
Kampanya indirimini ham fiyata yazmak yerine katalog okunurken uyguladım; kampanya bitince ürünler eski fiyatına kendiliğinden döner
Üye ve misafir kayıtlarını e-posta anahtarıyla birleştirip panelde tek bir müşteri listesi haline getirdim
Ürün görsellerini dış dosya yerine slug'dan deterministik üretilen SVG illüstrasyonlara bağladım; site tamamen çevrimdışı çalışır
Tasarım token'larını Tailwind v4 @theme bloğunda tanımlayıp renk, yarıçap, gölge ve tipografiyi tek yerden yönettim