Bu çalışma Admin Panelli Full Stack React E-Ticaret Sitesi Yapımı eğitiminde geliştirilen örnek projeyi anlatır. Mağaza arayüzünü, Node.js API katmanını ve Ant Design yönetim panelini tek uygulama akışında bir araya getir.
Başlamadan önce
JavaScript ve React ile temel uygulama geliştirme bilgisi. HTTP istekleri ve Node.js API yapısı hakkında başlangıç bilgisi önerilir.
Kullanılan teknolojiler
React, Node.js, REST API, Ant Design.
Eğitimde ele alınan özellikler
- Mağaza, ürün, sepet ve hesap sayfaları
- Kategori, ürün, kullanıcı ve kupon endpointleri
- Ant Design ile kategori, ürün ve kupon yönetim ekranları
- Giriş, kayıt, yorum, arama ve ödeme akışları
Projeyi hangi adımlarla geliştirebilirsin?
- React tarafında ortak layout ve sayfa bileşenlerini kur. Sepet ve yönlendirme davranışlarını düzenle.
- Backend tarafında kategori, kullanıcı, ürün ve kupon işlemlerini endpointlere ayır. İstek ve yanıt yapılarını belirle.
- Yönetim panelini geliştir ve arayüzün API ile veri alışverişini kur. Giriş ve kayıt akışlarını bağla.
- Ürün arama, yorum ve ödeme akışlarını birleştir. Uçtan uca senaryoları inceleyip kod düzenlemelerini tamamla.
Çalışmanı nasıl kontrol edebilirsin?
- Yönetim panelinde değiştirilen bir ürün mağazada doğru görünüyor mu?
- Sepete eklenen ürünlerin bilgisi ve toplamı tutarlı mı?
- Başarısız API isteği için kullanıcıya anlaşılır mesaj gösteriliyor mu?
- Giriş yapmış kullanıcı ile ziyaretçinin akışları doğru ayrılıyor mu?
Kendi projenle pratiği genişlet
Kendi mağaza fikrini seç. Ürün verilerini ve tasarımını değiştir, API doğrulamalarını ve hata durumlarını geliştir. Ödeme entegrasyonunu test ortamında değerlendirerek başarısız ve iptal edilmiş işlem senaryolarını da ele al.
Eklediğin özellikleri ve karşılaştığın hataları kısa notlarla kaydet. Bir özelliği hangi dosyalarda geliştirdiğini göstermek için küçük commit'ler oluştur. Projeni paylaşırken kullanılan araçları, çalıştırma adımlarını ve örnek ekran akışlarını açıkla.