https://github.com/musayar9/sayar-commerce

Sayar Commerce
https://github.com/musayar9/sayar-commerce

css json react-carousel react-icons reactjs tailwindcss

Last synced: about 2 months ago
JSON representation

Sayar Commerce

• Host: GitHub
• URL: https://github.com/musayar9/sayar-commerce
• Owner: musayar9
• Created: 2023-02-11T20:07:51.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-25T14:32:10.000Z (about 1 year ago)
• Last Synced: 2023-12-25T16:54:57.398Z (about 1 year ago)
• Topics: css, json, react-carousel, react-icons, reactjs, tailwindcss
• Language: JavaScript
• Homepage: https://sayar-commerce.vercel.app/
• Size: 1.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Sayar  Commerce

![image-1](img/8.jpg)

Bu projemizde e-ticaret sitesi yaptık. Bu projede ürünleri sepete ekleme, ürünleri sepet den çıkarma, beğenilen ürünleri favorilere ekleme ve çıkarma gibi işlemler react.js kullanılarak yapıldı. Bu projede kendi Api'lerimizi oluşturarak  bu api'ler üzerinden  veri çekme  işlemlerini gerçekleştirdik. Bu projede state yönetimini  react'ın Context  yapısı üzerinden gerçekleştirdik. 

React-Multi-Carousel kullanarak markalar ve favori ürünlerimizi carousel yapısı içerinde oluşturduk.

Proje tasarımını tailwindcss ile gerçekleştirdik. Proje bilgisayar, tablet ve mobile uygun olarak responsive tasarımını yaptık. 

## Sayfa Yapısı

Aşağıdaki resimde'de görüldüğü gibi kullanıcı konum başlığına tıkladığında açılan alandan kendi konum bilgisini girebilecek.

![image-2](img/1.jpg)

Kullanıcı sepete eklediği ürünleri sepetim başlığı üzerine tıkladığında açılan alandan görebilecek.

![image-3](img/2.jpg)

Kullanıcı beğendiği ürünleri'de favorilerim başlığına tıkladığında açılan alandan beğendiği ürünleri görebilecek.

![image-4](img/3.jpg)

Markalar ve favori ürünler Carousel yapısı içinde kullanıcıya gösteriliyor.

![image-5](img/6.jpg)

![image-6](img/5.jpg)

Sayfanın en sonunda footer alanımız yer almaktadır.

![image-7](img/7.jpg)

### Proje içerisinde kullanılan Teknolojiler;

1. React.js

2. Tailwindcss

### Proje içerisinde kullanılan npm paketleri

1. react-multi-carousel

2. react-slick

3. react-toastifty

4. react-icons

5. tailwincss

6. useWindowSize

### Authors:

Musa SAYAR