Patika & Protein React Bootcamp Bitirme Projesi

Proje Patika & React Bootcamp'in bitirme projesidir.

Demo

https://ikinciel.emredag.com.tr (API kapatıldığı için demo çalışmıyor)

Projenin Amacı

Projenin amacı ikinci el ürünleri almak veya satmak isteyen kişilerin kolay bir şekilde ürünlerini yayınlayabilmesi, dilerse de ürün satın almasıdır.

Proje Hakkında

Kullanıcı siteye girdikten sonra üye olmadan ilana koyulmuş ürünleri görüntüleyebilir. Ürünleri satın almak isterse veya teklif vermek isterse kullanıcının üye olması gerekmektedir. Üye olduktan sonra dilediği ürüne işlem gerçekleştirebilmektedir.

Kullanıcı ürünlerini satmak istediğinde ürün yükleme sayfasından ürünün bilgilerini yazarak, resmini yükleyerek ve dilediği takdirde teklif opsiyonunu da açarak ürünlerini yükleyebilmektedir.

Teklif verilen ve teklif alınan ürünleri de profil sayfasından takip edip teklifleri onaylama/reddetme, verdiği ve onaylanan teklifleri satın alma yapabilmektedir.

Teklif verilen ürünleri profil sayfasından takip edip tekliflerin durumunu kontrol edebilir. Teklifi hem ürünün detay sayfasından hem de profil sayfasından geri çekebilmektedir. Eğer ki teklifi onaylandıysa ürünü satın alabilmektedir.

Aynı şekilde teklif alınan ürünleri de profil sayfasından takip edip gelen teklifleri onaylayıp, reddedebilmektedir.

Yol Haritası

Kayıt ol / Giriş yap sayfalarının oluşturulması ve tüm authorization işlemleri

Kullanıcının girdiği bilgileri API'a yolluyorum ve kaydını gerçekleştiriyorum. Kullanıcının diğer işlemleri yapabilmesi için tokeni Axios'a ekliyorum.

Anasayfanın oluşturulması ve kategori & ürünlerin listelenmesi

API'dan kategorileri ve ürünleri çekiyorum. Seçilen kategoriye göre ürünleri listeliyorum.

Ürün detay sayfasının oluşturulması ve ürün satın alma / teklif verme işlemleri

Anasayfadaki ürünlere tıklandığında detay sayfasına yönlendiriyorum. Detay sayfasında ürünlerin açıklama, kullanım durumu gibi detaylarını gösteriyorum. Ürünü satın alabiliyor ya da ürünün durumuna göre kullanıcı teklif verebiliyor. Verdiği teklifi geri çekebiliyor.

Ürün ekleme sayfasının oluşturulması ve gerekli validasyonlar

Ürün ekleme sayfasında forma girilen değerleri ve yüklenen fotoğrafı form-data da tutup API'a gönderiyorum. Ardından da kullanıcının yüklediği ürünün detay sayfasına yönlendiriyorum.

Profil sayfasının oluşturulması ve tekliflerin listelenmesi

Profil sayfasında "Teklif Verdiklerim" ve "Teklif Aldıklarım" başlıkları bulunuyor. Kullanıcıya gelen teklifleri ve verdiği teklifleri API'den getiriyorum ve durumlarına göre işlem yapmasını sağlıyorum. Örneğin x ürününe gelen tüm teklifleri görüntüleyip, istediğini kabul edebiliyor.

Kullanılan Teknolojiler

İstemci: React

React içerisinde: Context, React Dom, React Router, Axios

• Context: Global state tanımlamaları yapmak için

• Router: Yönlendirmeler için

• Axios: API istekleri için

• React Dom: Modallar için

Paketler: Toastify, Antd Uploader, Node-Sass, Formik, Yup

• Toastify: Pop up için

• Antd Uploader: Sürükle bırak fotoğraf yükleme için

• Node-Sass: Scss compiler için

• Formik: Formlar için

• Yup: Form validasyonları için

Sunucu: REST API

Bilgisayarınızda Çalıştırın

Projeyi klonlayın

  git clone https://github.com/emredag/e-commerce-app.git

Proje dizinine gidin

  cd e-commerce-app

Gerekli paketleri yükleyin

  npm install / yarn install

Sunucuyu çalıştırın

  npm run start / yarn start

Projeden Bazı Görüntüler

Masaüstü Anasayfa

Masaüstü Anasayfa Kategori seçili

Masaüstü Ürün Detay Sayfası

Masaüstü Ürün Satın Alma

Masaüstü Teklif Gönderme

Masaüstü Ürün Yükleme ve Validasyonlar

Masaüstü Kendi Yüklediğim Ürün

Masaüstü Alınan Teklifler

Masaüstü Verilen Teklifler

Mobil Anasayfa

Mobil Ürün Detay Sayfası

Mobil Ürün Yükleme Sayfası

Performans Testi Sonucu