resetmerlin / react-shopping-cart

⚛️ React Shopping Basket Application 🛒

shopping basket

React & Redux Desktop shopping basket application

🚀 Getting Started

Composes a large number of components into pages and manages complexity.

✔ Implement the ️ 'Desktop Target' web app and think about the 'UI/UX considering revisiting' without interruption leading to purchases. ✔ Use 'Redux' based on 'Flux Architecture' for ️ status management. ✔ Consider switching multiple pages using the ️ 'Router'. ✔ Refer to the ️ Baemin Chamber of Commerce Service

🕋 How to run the Server

• At first run

# npm
cd server

npm install

npm run server

• On subsequent runs

# npm
npm run server

🕋 How to run the Client

• At first run

# npm
cd client

npm install

npm run dev

• On subsequent runs

# npm
npm run dev

📝 API Specification

🌏 baseUrl

http://localhost:3003

🎁 Product

Product List Inquiry

method	uri
GET	/products

{
  "response": [
    {
      "id": 1,
      "price": 10000,
      "name": "치킨",
      "imageUrl": "http://example.com/chicken.jpg"
    },
    {
      "id": 2,
      "price": 20000,
      "name": "피자",
      "imageUrl": "http://example.com/pizza.jpg"
    }
  ]
}

Add a product

method	uri
POST	/products

{
  "requestBody": {
    "products": {
      "price": 10000,
      "name": "치킨",
      "imageUrl": "http://example.com/chicken.jpg"
    }
  }
}

Product Single Inquiry

method	uri
GET	/products/{id}

{
  "response": {
    "id": 1,
    "price": 10000,
    "name": "치킨",
    "imageUrl": "http://example.com/chicken.jpg"
  }
}

Product Single Delete

method	uri
DELETE	/products/{id}

{
  "response": {}
}

🛒 Shopping basket

Check shopping basket item list

method	uri
GET	/carts

{
  "response": {
    "id": 1,
	  "product": {
			"name": "test",
			"price": 1234,
			"imageUrl": "test.com",
			"id": 1
		},
	},
	{
    "id": 5,
		"product": {
			"name": "tes11111t",
			"price": 1234,
			"imageUrl": "test.com",
			"id": 10
		}
	},
}

Add shopping basket items

method	uri
POST	/carts

{
  "requestBody": {
    "product": {
      "id": 10,
      "name": "tes11111t",
      "price": 1234,
      "imageUrl": "test.com"
    }
  }
}

Single Delete Shopping Basket Item

method	uri
DELETE	/carts/{cartId}

{
  "response": {}
}

🗒 Order

Add Order (to place an order)

method	uri
POST	/orders

{
  "requestBody": {
    "orderDetails": [
      {
        "id": 1,
        "price": 10000,
        "name": "치킨",
        "imageUrl": "http://example.com/chicken.jpg",
        "quantity": 5
      },
      {
        "id": 2,
        "price": 20000,
        "name": "피자",
        "imageUrl": "http://example.com/pizza.jpg",
        "quantity": 3
      }
    ]
  }
}

Order list (details) inquiry

method	uri
GET	/orders

{
  "response": [
    {
      "id": 1,
      "orderDetails": [
        {
          "id": 1,
          "price": 10000,
          "name": "치킨",
          "imageUrl": "http://example.com/chicken.jpg",
          "quantity": 5
        },
        {
          "id": 2,
          "price": 20000,
          "name": "피자",
          "imageUrl": "http://example.com/pizza.jpg",
          "quantity": 3
        }
      ]
    },
    {
      "id": 2,
      "orderDetails": [
        {
          "id": 1,
          "price": 10000,
          "name": "치킨",
          "imageUrl": "http://example.com/chicken.jpg",
          "quantity": 5
        },
        {
          "id": 2,
          "price": 20000,
          "name": "피자",
          "imageUrl": "http://example.com/pizza.jpg",
          "quantity": 3
        }
      ]
    }
  ]

Order Single Lookup

method	uri
GET	/orders/{id}

{
  "response": {
    "id": 1,
    "orderDetails": [
      {
        "id": 1,
        "price": 10000,
        "name": "치킨",
        "imageUrl": "http://example.com/chicken.jpg",
        "quantity": 5
      },
      {
        "id": 2,
        "price": 20000,
        "name": "피자",
        "imageUrl": "http://example.com/pizza.jpg",
        "quantity": 3
      }
    ]
  }
}

---

장바구니

React & Redux 데스크탑 장바구니 애플리케이션

🚀 Getting Started

다수의 컴포넌트를 페이지로 구성하고 복잡해진 상태를 관리합니다.

✔️ 데스크탑 타겟의 웹 앱을 구현하며 구매로 이어지는 것에 끊김이 없고 재방문을 고려한 UI/UX에 대해 고민해봅니다.
✔️ 상태 관리를 위해 Flux Architecture 기반의 Redux를 활용합니다.
✔️ Router를 활용해 여러 페이지 전환을 고려합니다.
✔️ 배민상회 서비스 참고

🕋 Server 실행 방법

react-shopping-cart/client 디렉토리에서 실행해주세요.

• 최초 실행 시

# npm
npm run server:first

# yarn
yarn server:first

• 이후 실행 시

# npm
npm run server

# yarn
yarn server

📝 API 명세

🌏 baseUrl

http://localhost:3003

🎁 상품

상품 목록 조회

method	uri
GET	/products

{
  "response": [
    {
      "id": 1,
      "price": 10000,
      "name": "치킨",
      "imageUrl": "http://example.com/chicken.jpg"
    },
    {
      "id": 2,
      "price": 20000,
      "name": "피자",
      "imageUrl": "http://example.com/pizza.jpg"
    }
  ]
}

상품 추가

method	uri
POST	/products

{
  "requestBody": {
    "products": {
      "price": 10000,
      "name": "치킨",
      "imageUrl": "http://example.com/chicken.jpg"
    }
  }
}

상품 단일 조회

method	uri
GET	/products/{id}

{
  "response": {
    "id": 1,
    "price": 10000,
    "name": "치킨",
    "imageUrl": "http://example.com/chicken.jpg"
  }
}

상품 단일 삭제

method	uri
DELETE	/products/{id}

{
  "response": {}
}

🛒 장바구니

장바구니 아이템 목록 조회

method	uri
GET	/carts

{
  "response": {
    "id": 1,
	  "product": {
			"name": "test",
			"price": 1234,
			"imageUrl": "test.com",
			"id": 1
		},
	},
	{
    "id": 5,
		"product": {
			"name": "tes11111t",
			"price": 1234,
			"imageUrl": "test.com",
			"id": 10
		}
	},
}

장바구니 아이템 추가

method	uri
POST	/carts

{
  "requestBody": {
    "product": {
      "id": 10,
      "name": "tes11111t",
      "price": 1234,
      "imageUrl": "test.com"
    }
  }
}

장바구니 아이템 단일 삭제

method	uri
DELETE	/carts/{cartId}

{
  "response": {}
}

🗒 주문

주문 추가(주문하기)

method	uri
POST	/orders

{
  "requestBody": {
    "orderDetails": [
      {
        "id": 1,
        "price": 10000,
        "name": "치킨",
        "imageUrl": "http://example.com/chicken.jpg",
        "quantity": 5
      },
      {
        "id": 2,
        "price": 20000,
        "name": "피자",
        "imageUrl": "http://example.com/pizza.jpg",
        "quantity": 3
      }
    ]
  }
}

주문 목록(내역) 조회

method	uri
GET	/orders

{
  "response": [
    {
      "id": 1,
      "orderDetails": [
        {
          "id": 1,
          "price": 10000,
          "name": "치킨",
          "imageUrl": "http://example.com/chicken.jpg",
          "quantity": 5
        },
        {
          "id": 2,
          "price": 20000,
          "name": "피자",
          "imageUrl": "http://example.com/pizza.jpg",
          "quantity": 3
        }
      ]
    },
    {
      "id": 2,
      "orderDetails": [
        {
          "id": 1,
          "price": 10000,
          "name": "치킨",
          "imageUrl": "http://example.com/chicken.jpg",
          "quantity": 5
        },
        {
          "id": 2,
          "price": 20000,
          "name": "피자",
          "imageUrl": "http://example.com/pizza.jpg",
          "quantity": 3
        }
      ]
    }
  ]

주문 단일 조회

method	uri
GET	/orders/{id}

{
  "response": {
    "id": 1,
    "orderDetails": [
      {
        "id": 1,
        "price": 10000,
        "name": "치킨",
        "imageUrl": "http://example.com/chicken.jpg",
        "quantity": 5
      },
      {
        "id": 2,
        "price": 20000,
        "name": "피자",
        "imageUrl": "http://example.com/pizza.jpg",
        "quantity": 3
      }
    ]
  }
}