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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent