Yata Market

Yata Market, ürün keşfinden sepete kadar uzanan temel alışveriş sürecini uçtan uca kuran bir e-ticaret demosu. Kullanıcı ürünleri kategori ve fiyatlarıyla görebiliyor, aradığı ürünü bulabiliyor, ayrıntısına bakabiliyor ve seçtiklerini sepete ya da favorilere ayırabiliyor. Proje aynı zamanda React arayüzüyle Express REST API'nin, ortak durum yönetiminin ve backend ürün işlemlerinin nasıl birlikte çalıştığını gösteriyor.

Katalogda ürün adına göre arama, kategori seçimi, minimum ve maksimum fiyat, artan veya azalan fiyat sıralaması birlikte uygulanıyor. Sonuçlar sayfalara bölünüyor; filtre değiştiğinde liste ilk sayfaya dönüyor. Eşleşme yoksa kullanıcı aramayı temizleyebileceği ayrı bir boş durum görüyor. Ürün kartından veya detay sayfasından sepete ekleme yapılabiliyor. Aynı ürün yeniden eklendiğinde yeni satır açılmıyor, adet artıyor.

Sepette satır toplamları, toplam ürün sayısı ve genel tutar state'ten hesaplanıyor. Kullanıcı adedi artırıp azaltabiliyor, ürünü kaldırabiliyor veya sepeti boşaltabiliyor; sepet sayfa yenilendiğinde tarayıcı kaydından geri yükleniyor. Favoriler ayrı bir akışta tutuluyor ve ürün kartı ile detay görünümü aynı favori durumunu paylaşıyor. Yönetim demosunda ürün oluşturma, güncelleme ve silme formları da mevcut API endpoint'lerine bağlanıyor.

React ve Vite istemcisi, Express sunucusundaki liste, detay ve CRUD uçlarından JSON alıyor. Backend veri, servis, controller, route, validator ve hata katmanlarına ayrılmış; istek gövdesi ile sayfalama parametreleri doğrulanıyor. Sepet ve favori davranışları ayrı Context ve reducer'larda yönetiliyor. Depodan gelen bozuk sepet kaydı uygulamayı çökertmek yerine boş sepetle ele alınıyor. Form hataları, yükleme, boş katalog, sonuç bulunamaması ve bilinmeyen ürün farklı ekran durumları olarak tasarlanmış.

Arayüzde görünür form etiketleri, klavye odağı, favori düğmesinde basılı durum ve azaltılmış hareket tercihi bulunuyor. Ürün verisi backend belleğinde tutulduğu için sunucu yeniden başladığında yönetim değişiklikleri kayboluyor. Gerçek ödeme, sipariş, kullanıcı hesabı, stok ve kargo akışı bu demoda yok; büyük katalog için istemci tarafı filtrelemenin sunucuya taşınması gerekir. Böylece proje, üretim mağazası iddiası yerine alışveriş arayüzü ve tam yığın veri akışını gösteriyor.