Bu e ticaret sitesi react ile yaptığım ilk projedir. O yüzden proje de bazı eksiklikler görebilirsiniz.

Sitenin Altyapısı

• React Vite
• Net Core Api
• Material UI

Paketler

• Redux
• Axios
• React Hook Form
• 18Next

Sitenin frontend kısmında React ve Material UI, backend kısmında ise her zaman olduğu gibi Net Core Api kullandım.

Sitenin Bölümleri

Anasayfa

Anasayfa da basit bir yaklaşım izledim. Banner ve altta bilgi kutucukları yer alıyor

Katalog

Sitenin tüm ürünleri katalog kısmında yer alıyor arama ve filtreleme işlemleri bu kısımda oluyor.

Ürün Detayı

Ürün detayları kısmında sağda fiyat, kategori, varyasonlar, miktar ve sepete ekle butonu bulunmakta.

Aşağıda ise açıklama ve benzer ürünler yer alıyor.

Sepet

Sepet gayet basit olmakla beraber kargo ücreti ürünü satın aldıktan sonra belirleniyor. Biraz garip ancak bu şekilde istenmişti.

Sepet Güncel

Kargo kısmı normal olmadığı için siteyi daha sonradan güncelledim ve kargo ücreti satın alım esnasın hesaplanacak olarak ayarladım.

Ödeme

Ödeme kısmına geçtiğiniz de karşınıza ilk adres bilgileri geliyor. Gerekli alanları doldurduktan sonra diğer bölüme geçebilirsiniz.

İkinci adımda ise kargo firması seçmeniz isteniyor ve ona göre fiyat değişiyor.

En son adımda kupon kodunuz varsa girerek indirim uygulayabilir ve ödeme adımına geçebilirsiniz.

Ödeme adımında kart bilgilerini girerek ödeme yapabilirsiniz. Ödemeyi iyzico ile yapıyorsunuz. Görüntü olarak çok hoş olmayabilir çünkü bu projeden sonra e ticaret sitesini next.js e taşıdım.

Siparişlerim

Kullanıcı siparişleri bu kısımdan takip edebilir.

Admin Paneli

Eğer giriş yapan kullanıcı adminse sağda bir simge gelir ve bu simgeye tıklayarak kullanıcı admin paneline giriş yapabilir.

Admin paneline giriş yaptıktan sonra karşımıza ürün yönetimi sayfası geliyor.

Ürün Düzenleme/Ekleme

Ürün eklerken yada düzenlerken kategori zorunlu ancak alt kategori zorunlu değil. Fiyat kısmı biraz garip oldu bunu Next.Js ile yaptığımda düzelttim. Fiyat girerken mesela bir ürünün 100 lira olmasını istiyorsanız 10000 girmeniz gerekiyor. Son iki rakam küsüratı temsil ediyor.

Varyasyonlar

Eğer ürüne bir varyasyon eklemek isterseniz Seçenek İsmi yazıp yeni bir liste ekliyorsunuz ve listeye ait öğeler giriyorsunuz. Her varyasyona ait özel fiyat olabilir. Eğer varyasyonun ürün fiyatı ile aynı olmasını isterseniz fiyata 0 yazabilirsiniz.

Siparişler

Verilen siparişleri buradan takip edebiliyorsunuz.

Kategoriler

Kategorileri buradan ekleyebilir,düzenleyebilir ya da kaldırabilirsiniz.

Kullanıcılar

Kullanıcıları buradan yönetebilirsiniz.

İndirim Kodları

İndirin kodu belirleyebilirsiniz. Her kodun fiyatsal mı yoksa yüzdesel mi olacak belirleyebilirsiniz.

Sayfalar

Buradan özel sayfa ekleyebilirsiniz.

Ayarlar

Üst Başlık Ayarları

Üst başlıkta bulunan kısımları buradan düzenleyebilirsiniz.

Alt Başlık Ayarları

Buradan alt başlık kısmında bulunan çeşitli yerleri düzenleyebilirsiniz.

Anasayfa Ayarları

Son olarak anasayfa ayarımız mevcut buradan banner fotoğraflarını ve kutuları düzenleyebilirsiniz.

---

Sitede aynı zamanda birden fazla dil seçeneği de mevcut. Değişmeyen alanları kendim çevirerek statik bir şekilde yaptım değişken alanları da (mesela ürün bilgileri) çeviri apisi ile çevirdim.

Sitenin eksiklikleri olabilir bu eksikleri yeni e-ticaret projemde gideriyorum.