victorbatischev/react-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Victor 2023-03-29 14:01:16 +03:00
commit 3d19c6cdd5
22 changed files with 711 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
README.md Normal file
View File

@ -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``` сборка версии для продакшн

56
assets/brands.json Normal file
View File

@ -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"
}
]

BIN
assets/images/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
assets/images/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
assets/images/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
assets/images/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
assets/images/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
assets/images/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
assets/images/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
assets/images/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
assets/images/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
assets/images/cart-level-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
assets/images/cart-level-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
assets/images/catalog-level-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
assets/images/catalog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
assets/images/conf/black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
assets/images/conf/blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
assets/images/conf/default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/images/conf/red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

485
assets/level3/products.json Normal file
View File

@ -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
}
]

110
assets/products.json Normal file
View File

@ -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
}
]