init

README.md

@@ -0,0 +1,60 @@
+## Тестовое задание для фронтенд-разработчика (React)
+
+В тестовом задании представлены макеты дизайна двух страниц: страницы каталога продуктов и страница корзины. Тестовое задание состоит из нескольких уровней — обязательных (level 1, level 2 и level 3) и необязательный (level 4). В обязательных задачах мы проверяем знания необходимые для прохождения на эту позицию.
+Необязательные задачи не должны занять много времени, но помогут вам показать себя с лучшей стороны. Вы можете сделать только часть из них, если что-то покажется вам интересным, или не делать их вовсе.
+
+Условий несколько:
+- Используйте менеджер пакетов NPM;
+- Используйте TypeScript;
+- Используйте [React](https://github.com/facebook/react);
+- Используйте [Redux](https://github.com/reduxjs/react-redux);
+- Сборка скриптов [Webpack](https://webpack.js.org/);
+- Сборка стилей проекта должна выполняться [Webpack](https://webpack.js.org/) или [Gulp](https://github.com/gulpjs/gulp);
+- Работоспособность последних версиях браузеров Chrome, Safari и Firefox;
+
+## Задачи
+### Level 1
+
+Реализовать список товаров, который можно отфильтровать с помощью расположенного слева списка брендов. Необходимые данные можно подгрузить из JSON-файлов [продукты](assets/products.json) и [бренды](assets/brands.json).
+
+![](assets/images/catalog.png?raw=true "")
+
+### Добавление товара в корзину
+При добавлении в корзину необходимо отображать количество продуктов в корзине рядом с иконкой вверху.
+
+### Вёрстка и дизайн
+Для упрощения задания представлены не макеты в Sketch, Figma или PS, а мокапы, показывающие основную структуру страниц. В этой задаче вы вольны использовать любую сетку или не использовать вовсе.
+Логотип можно взять [отсюда](assets/images/logo.png). Эта задача позволит нам понять, как вы видите в целом UI, как его сделать аккуратней и удобней для пользователя, не имея при этом чётких дизайнов или ограничений.
+
+### Level 2
+
+* Сделать адаптивную верстку, начиная от 320px и выше. Использовать фреймворк [Bootstrap](https://github.com/react-bootstrap/react-bootstrap). Главное, чтобы интерфейс оставался удобным, аккуратным и эстетичным.
+
+
+## Необязательные задачи
+
+### Level 3
+* Страница корзины
+
+![](assets/images/cart-level-2.png?raw=true "")
+
+Вывести добавленные ранее товары. Добавить поле с возможностью выбора количества и кнопку Удалить для удаления позиции из корзины. Текст с суммой всего заказа должен в реальном времени пересчитывать сумму. Переключение между страницей каталога и корзины реализовать с помощью [React Router](https://github.com/remix-run/react-router).
+
+### Level 4
+
+Добавлен новый тип продукта "[Настраиваемый](assets/level3/products.json)" (configurable) . У данного продукта есть опции (configurable_options), в нашем случае пользователь может выбрать цвет и размер товара. Также в информации о продукте присутствует список доступных вариантов товара (variants). 
+
+
+![](assets/images/catalog-level-3.png?raw=true "")
+
+* Необходимо реализовать добавление доступных вариантов товаров в корзину и  невозможность добавления несуществующих вариантов.
+* Менять изображение товара при полном соответствии выбранных опций пользователя с одним из вариантов товара 
+* Вывести выбранные опции в корзине (если выполнен level 3)
+
+![](assets/images/cart-level-3.png?raw=true "")
+
+# Результат работы
+Результат работы должен быть представлен в репозитории github. Запуск проекта должен производиться терминальными командами <br />
+```npm i```<br />
+```npm run dev``` сборка версии для разработки<br />
+```npm run build``` сборка версии для продакшн

assets/brands.json

@@ -0,0 +1,56 @@
+[
+  {
+    "id": 1,
+    "title": "Brand 1",
+    "sort": "100",
+    "code": "brand_1"
+  },
+  {
+    "id": 2,
+    "title": "Brand 2",
+    "sort": "200",
+    "code": "brand_2"
+  },
+  {
+    "id": 3,
+    "title": "Brand 3",
+    "sort": "300",
+    "code": "brand_3"
+  },
+  {
+    "id": 4,
+    "title": "Brand 4",
+    "sort": "400",
+    "code": "brand_4"
+  },
+  {
+    "id": 5,
+    "title": "Brand 5",
+    "sort": "500",
+    "code": "brand_5"
+  },
+  {
+    "id": 6,
+    "title": "Brand 6",
+    "sort": "600",
+    "code": "brand_6"
+  },
+  {
+    "id": 7,
+    "title": "Brand 7",
+    "sort": "700",
+    "code": "brand_7"
+  },
+  {
+    "id": 8,
+    "title": "Brand 8",
+    "sort": "700",
+    "code": "brand_8"
+  },
+  {
+    "id": 9,
+    "title": "Brand 9",
+    "sort": "900",
+    "code": "brand_9"
+  }
+]

assets/level3/products.json

@@ -0,0 +1,485 @@
+[
+  {
+    "type": "simple",
+    "id": 1,
+    "sku": "s1",
+    "title": "Product 1",
+    "regular_price": {
+      "currency": "USD",
+      "value": 27.12
+    },
+    "image": "/images/1.png",
+    "brand": 9
+  },
+  {
+    "type": "configurable",
+    "id": 2,
+    "sku": "c1",
+    "title": "Product 2",
+    "regular_price": {
+      "currency": "USD",
+      "value": 54.21
+    },
+    "image": "/images/conf/default.png",
+    "configurable_options": [
+      {
+        "attribute_id": 93,
+        "attribute_code": "color",
+        "label": "Color",
+        "values": [
+          {
+            "label": "Red",
+            "value_index": 931,
+            "value": "#ff0000"
+          },
+          {
+            "label": "Blue",
+            "value_index": 932,
+            "value": "#0000ff"
+          },
+          {
+            "label": "Black",
+            "value_index": 933,
+            "value": "#000"
+          }
+        ]
+      },
+      {
+        "attribute_code": "size",
+        "attribute_id": 144,
+        "position": 0,
+        "id": 2,
+        "label": "Size",
+        "values": [
+          {
+            "label": "M",
+            "value_index": 1441,
+            "value": 1
+          },
+          {
+            "label": "L",
+            "value_index": 1442,
+            "value": 2
+          }
+        ]
+      }
+    ],
+    "variants": [
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 931
+          },
+          {
+            "code": "size",
+            "value_index": 1441
+          }
+        ],
+        "product": {
+          "id": 2001,
+          "sku": "c1-red-m",
+          "image": "/image/conf/red.png"
+        }
+      },
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 931
+          },
+          {
+            "code": "size",
+            "value_index": 1442
+          }
+        ],
+        "product": {
+          "id": 2002,
+          "sku": "c1-red-l",
+          "image": "/image/conf/red.png"
+        }
+      },
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 932
+          },
+          {
+            "code": "size",
+            "value_index": 1441
+          }
+        ],
+        "product": {
+          "id": 2003,
+          "sku": "c1-blue-m",
+          "image": "/image/conf/blue.png"
+        }
+      },
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 933
+          },
+          {
+            "code": "size",
+            "value_index": 1442
+          }
+        ],
+        "product": {
+          "id": 2004,
+          "sku": "c1-black-l",
+          "image": "/image/conf/black.png"
+        }
+      }
+    ],
+    "brand": 1
+  },
+  {
+    "type": "simple",
+    "id": 3,
+    "sku": "s2",
+    "title": "Product 3",
+    "regular_price": {
+      "currency": "USD",
+      "value": 36.87
+    },
+    "image": "/images/2.png",
+    "brand": 8
+  },
+  {
+    "type": "simple",
+    "id": 4,
+    "sku": "s3",
+    "title": "Product 4",
+    "regular_price": {
+      "currency": "USD",
+      "value": 28.91
+    },
+    "image": "/images/3.png",
+    "brand": 2
+  },
+  {
+    "type": "simple",
+    "id": 5,
+    "sku": "s4",
+    "title": "Product 5",
+    "regular_price": {
+      "currency": "USD",
+      "value": 41.23
+    },
+    "image": "/images/4.png",
+    "brand": 7
+  },
+  {
+    "type": "simple",
+    "id": 6,
+    "sku": "s5",
+    "title": "Product 6",
+    "regular_price": {
+      "currency": "USD",
+      "value": 88.00
+    },
+    "image": "/images/5.png",
+    "brand": 3
+  },
+  {
+    "type": "simple",
+    "id": 7,
+    "sku": "s6",
+    "title": "Product 7",
+    "regular_price": {
+      "currency": "USD",
+      "value": 127.41
+    },
+    "image": "/images/6.png",
+    "brand": 6
+  },
+  {
+    "type": "configurable",
+    "id": 8,
+    "sku": "c2",
+    "title": "Product 8",
+    "regular_price": {
+      "currency": "USD",
+      "value": 63.27
+    },
+    "image": "/images/conf/default.png",
+    "configurable_options": [
+      {
+        "attribute_id": 93,
+        "attribute_code": "color",
+        "label": "Color",
+        "values": [
+          {
+            "label": "Red",
+            "value_index": 931,
+            "value": "#ff0000"
+          },
+          {
+            "label": "Blue",
+            "value_index": 932,
+            "value": "#0000ff"
+          },
+          {
+            "label": "Black",
+            "value_index": 933,
+            "value": "#000"
+          }
+        ]
+      },
+      {
+        "attribute_code": "size",
+        "attribute_id": 144,
+        "position": 0,
+        "id": 2,
+        "label": "Size",
+        "values": [
+          {
+            "label": "M",
+            "value_index": 1441,
+            "value": 1
+          },
+          {
+            "label": "L",
+            "value_index": 1442,
+            "value": 2
+          }
+        ]
+      }
+    ],
+    "variants": [
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 931
+          },
+          {
+            "code": "size",
+            "value_index": 1441
+          }
+        ],
+        "product": {
+          "id": 8001,
+          "sku": "c2-red-m",
+          "image": "/image/conf/red.png"
+        }
+      },
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 931
+          },
+          {
+            "code": "size",
+            "value_index": 1442
+          }
+        ],
+        "product": {
+          "id": 8002,
+          "sku": "c2-red-l",
+          "image": "/image/conf/red.png"
+        }
+      },
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 932
+          },
+          {
+            "code": "size",
+            "value_index": 1441
+          }
+        ],
+        "product": {
+          "id": 8003,
+          "sku": "c2-blue-m",
+          "image": "/image/conf/blue.png"
+        }
+      },
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 933
+          },
+          {
+            "code": "size",
+            "value_index": 1442
+          }
+        ],
+        "product": {
+          "id": 8004,
+          "sku": "c2-black-l",
+          "image": "/image/conf/black.png"
+        }
+      }
+    ],
+    "brand": 4
+  },
+  {
+    "type": "simple",
+    "id": 9,
+    "sku": "s7",
+    "title": "Product 9",
+    "regular_price": {
+      "currency": "USD",
+      "value": 123.40
+    },
+    "image": "/images/7.png",
+    "brand": 5
+  },
+  {
+    "type": "configurable",
+    "id": 10,
+    "sku": "c3",
+    "title": "Product 10",
+    "regular_price": {
+      "currency": "USD",
+      "value": 68.273
+    },
+    "image": "/images/conf/default.png",
+    "configurable_options": [
+      {
+        "attribute_id": 93,
+        "attribute_code": "color",
+        "label": "Color",
+        "values": [
+          {
+            "label": "Red",
+            "value_index": 931,
+            "value": "#ff0000"
+          },
+          {
+            "label": "Blue",
+            "value_index": 932,
+            "value": "#0000ff"
+          },
+          {
+            "label": "Black",
+            "value_index": 933,
+            "value": "#000"
+          }
+        ]
+      },
+      {
+        "attribute_code": "size",
+        "attribute_id": 144,
+        "position": 0,
+        "id": 2,
+        "label": "Size",
+        "values": [
+          {
+            "label": "M",
+            "value_index": 1441,
+            "value": 1
+          },
+          {
+            "label": "L",
+            "value_index": 1442,
+            "value": 2
+          }
+        ]
+      }
+    ],
+    "variants": [
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 931
+          },
+          {
+            "code": "size",
+            "value_index": 1441
+          }
+        ],
+        "product": {
+          "id": 10001,
+          "sku": "c10-red-m",
+          "image": "/image/conf/red.png"
+        }
+      },
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 931
+          },
+          {
+            "code": "size",
+            "value_index": 1442
+          }
+        ],
+        "product": {
+          "id": 10002,
+          "sku": "c10-red-l",
+          "image": "/image/conf/red.png"
+        }
+      },
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 932
+          },
+          {
+            "code": "size",
+            "value_index": 1441
+          }
+        ],
+        "product": {
+          "id": 10003,
+          "sku": "c10-blue-m",
+          "image": "/image/conf/blue.png"
+        }
+      },
+      {
+        "attributes": [
+          {
+            "code": "color",
+            "value_index": 933
+          },
+          {
+            "code": "size",
+            "value_index": 1442
+          }
+        ],
+        "product": {
+          "id": 10004,
+          "sku": "c10-black-l",
+          "image": "/image/conf/black.png"
+        }
+      }
+    ],
+    "brand": 3
+  },
+  {
+    "type": "simple",
+    "id": 11,
+    "sku": "s8",
+    "title": "Product 11",
+    "regular_price": {
+      "currency": "USD",
+      "value": 92.32
+    },
+    "image": "/images/8.png",
+    "brand": 1
+  },
+  {
+    "type": "simple",
+    "id": 12,
+    "sku": "s9",
+    "title": "Product 12",
+    "regular_price": {
+      "currency": "USD",
+      "value": 53.40
+    },
+    "image": "/images/9.png",
+    "brand": 2
+  }
+]

assets/products.json

@@ -0,0 +1,110 @@
+[
+  {
+    "type": "simple",
+    "id": 1,
+    "sku": "s1",
+    "title": "Product 1",
+    "regular_price": {
+      "currency": "USD",
+      "value": 27.12
+    },
+    "image": "/images/1.png",
+    "brand": 9
+  },
+  {
+    "type": "simple",
+    "id": 2,
+    "sku": "s2",
+    "title": "Product 2",
+    "regular_price": {
+      "currency": "USD",
+      "value": 36.87
+    },
+    "image": "/images/2.png",
+    "brand": 8
+  },
+  {
+    "type": "simple",
+    "id": 3,
+    "sku": "s3",
+    "title": "Product 3",
+    "regular_price": {
+      "currency": "USD",
+      "value": 28.91
+    },
+    "image": "/images/3.png",
+    "brand": 2
+  },
+  {
+    "type": "simple",
+    "id": 4,
+    "sku": "s4",
+    "title": "Product 4",
+    "regular_price": {
+      "currency": "USD",
+      "value": 41.23
+    },
+    "image": "/images/4.png",
+    "brand": 7
+  },
+  {
+    "type": "simple",
+    "id": 5,
+    "sku": "s5",
+    "title": "Product 5",
+    "regular_price": {
+      "currency": "USD",
+      "value": 88.00
+    },
+    "image": "/images/5.png",
+    "brand": 3
+  },
+  {
+    "type": "simple",
+    "id": 6,
+    "sku": "s6",
+    "title": "Product 6",
+    "regular_price": {
+      "currency": "USD",
+      "value": 127.41
+    },
+    "image": "/images/6.png",
+    "brand": 6
+  },
+  {
+    "type": "simple",
+    "id": 7,
+    "sku": "s7",
+    "title": "Product 7",
+    "regular_price": {
+      "currency": "USD",
+      "value": 123.40
+    },
+    "image": "/images/7.png",
+    "brand": 5
+  },
+  {
+    "type": "simple",
+    "id": 8,
+    "sku": "s8",
+    "title": "Product 8",
+    "regular_price": {
+      "currency": "USD",
+      "value": 92.32
+    },
+    "image": "/images/8.png",
+    "brand": 1
+  },
+  {
+    "type": "simple",
+    "id": 9,
+    "sku": "s9",
+    "title": "Product 9",
+    "regular_price": {
+      "currency": "USD",
+      "value": 53.40
+    },
+    "image": "/images/9.png",
+    "brand": 2
+  }
+]