Alışveriş sitesi uygulaması oluşturmanız gerekiyor. Buradan örnek uygulamanın tasarımına ulaşabilirsiniz. https://www.figma.com/file/9hO1ApoWscZXLEqrCkFEGI/2-week-assignment Hazır data için db.json dosyasını kullanabilirsiniz. Bu dosyayı json-server ile ayağa kaldırıp API gibi kullanabilirsiniz.
- Ana sayfa
* Burada site ile ilgili gelen bir bilgi ve görsel yer alacaktır. Top Navbar dahildir.
- Shop page
* Üstteki Shop linkine tıklandığında açılacak sayfadır. Ürünler burada listelenecektir.
* soldaki checkbox menüsünden category bazında filtreleme yapılacaktır.
* Sağdaki sort by dropdown'ında sıralama işlemi gerçekleştirilebilecektir.
* popülerite (azalan),
* fiyat (artan)
* fiyat (azalan)
- Product page
* Ürün detay bilgileri yer alacaktır.
* Quantity alanı ile birlikte Add to Cart butonundaki değer hesaplanacaktır. Örn 2 item alacaksa fiyat x 2 şeklinde olacaktır.
* Add to cart butonuna basıldığında eğer kullanıcı login değilse login olma ekranına yönlendirilecektir.
* Eğer kullanıcı loginse alışveriş sepetine eklenecektir ve üstteki alışveriş sepeti ikonundaki değer 1 arttırılacaktır.
- Login page
* Kullanıcının login işlemi gerçekleştirilecektir.
* User listesi için db.json içerisindeki /users endpoint'i kullanılabilir.
* Eğer username ve password bilgisi uyuşuyorsa client side'da bir token oluşturulup localStorage'a yazılacaktır
* Login olunduktan sonra, önceki sayfa hangisi ise ona yönlendirilecektir. Örneğin product sayfasından geldi diyelim, aynı ürünün sayfasına redirect edilecektir.
- Cart page
* Alışveriş sepei bilgileri yer alacaktır.
* Alınan tüm ürünlerin fiyatı hesaplanıp görüntülenecektir.
* Eklenen ürün Remove butonu ile sepetten çıkarılabilecektir.
- Proje içerisinde react-router-dom ve ant design eklenmiştir. Bu kütüphaneleri direkt olarak kullanabilirsiniz.