Тестовое задание
React, Front dev
Благодарим за проявленный интерес!

Идет поиск сотрудника на проект "ЦЕЗИО" - https://cezyo.space
Собственная разработка (In-house), являемся участником "Московского инновационного кластера"

Сейчас разработкой Frontend JS занимаются 2 программиста, идёт усиление одного из участков. Работа c NDA

Чтобы понять возможность подключения и навыки предлагается прохождение тестового задания, которое представлено ниже.
Тестовое задание: React, Front dev middle

1 Тестовое задание

Необходимо написать простое приложение на React.js с использованием https://redux-orm.github.io/redux-orm/ ** и TypeScript, которое получало бы список товаров и категорий по сети, выводило бы их на экране и предоставляло возможность добавлять их в корзину и создавать заказ.

Корзина и заказ, ради простоты реализации, должны просто храниться локально.

Внешний вид - https://www.figma.com/

**- Redux ORM - обязательное условие. Проверяем возможность разобраться с фреймворком. Предполагаем что он будет незнакомым.

1.1 Данные

Данные - несколько категорий, содержащие товары.

Для получения данных реализован простой REST интерфейс.

Для получения списка сущностей используется GET запрос вида

https://test2.sionic.ru/api/{model}

Где {model} - название сущности

Параметры запроса передаются виде json кодированной строки. Доступны следующие параметры запроса:

filter - фильтрация по любому свойству сущности, например filter={"category_id":20} для модели Products вернет нам все товары категории с id=20. Также значения можно указывать виде массива, если нужно отфильтровать несколько id, например filter={"category_id":[20,21,22]}

sort - сортировка сущностей по любому свойству, например sort=["name","ASC"] для модели Products отсортирует товары по имени по возрастанию

range - выборка из диапазона, например range=[0,24] вернет нам все сущности с 0-й по 24-ю, всего 25.

За один запрос возвращается не более 50 записей.

Общее количество записей возвращается виде заголовка, например:

Content-Range: Products 0-24/319

Для получения одной записи по ее id используется запрос вида

https://test2.sionic.ru/api/{model}/{id}

Где {model} - название сущности, а {id} - ее id


Доступны следующие методы:

Категории:

GET https://test2.sionic.ru/api/Categories?sort=["name","ASC"]&range=[0,24]

GET https://test2.sionic.ru/api/Categories/21

Свойства:

name - название категории


Товары:

GET https://test2.sionic.ru/api/Products?sort=["name","ASC"]&range=[0,24]&filter={"category_id":20}

GET https://test2.sionic.ru/api/Products/2001

Свойства:

name - название товара

category_id - id категории

description - описание товара

Изображения товаров:

GET https://test2.sionic.ru/api/ProductImages?sort=["image_name","ASC"]&range=[0,24]&filter={"product_id":1001}

GET https://test2.sionic.ru/api/ProductImages/3001


Свойства:

image_name - имя файла изображения

product_id - id товара

image_url - ссылка на изображение

Вариации товаров:

GET https://test2.sionic.ru/api/ProductVariations

GET https://test2.sionic.ru/api/ProductVariations/1

product_id - id товара

price - цена данной вариации товара

stock - количество в наличии


Свойства вариаций:

GET https://test2.sionic.ru/api/ProductVariationProperties

GET https://test2.sionic.ru/api/ProductVariationProperties/1


Свойства:

name - название свойства

type - тип свойства: 0 - строка, 1 - целое число, 2 - число с плавающей точкой, 3 - значение из списка

Значения списков свойств вариаций:

GET https://test2.sionic.ru/api/ProductVariationPropertyListValues

GET https://test2.sionic.ru/api/ProductVariationPropertyListValues/1


Свойства:

product_variation_property_id - id свойства вариации

title - заголовок значения

value - значение


Значения свойств вариаций:

GET https://test2.sionic.ru/api/ProductVariationPropertyValues

GET https://test2.sionic.ru/api/ProductVariationPropertyValues/1


Свойства:

product_variation_id - id свойства вариации

product_variation_property_id - id свойства вариации

value_string - значение типа строка

value_int - значение типа целое число

value_float - значение типа число с плавающей точкой

product_variation_property_list_value_id - id значения свойства вариации из списка



1.2 Приложение

Приложение должно быть написано на React, запускаться на современных браузерах. При старте приложения открывается экран со списком категорий и товаров. Каждый товар можно положить в корзину и, в итоге, сделать заказ. Также должен быть экран вывода списка созданных заказов.

Корзину и заказ нет необходимости реализовывать через сеть, достаточно просто хранить их в local storage.

Будут ли сделаны экраны с данными разными компонентами, одним компонентом или как-то ещё - на усмотрение исполнителя.

На всех экранах приложения должна быть кнопка перехода в корзину, а также кнопка перехода к списку созданных заказов.


1.2.1 Категории

На экране категорий должны выводиться все категории, полученные с сервера, с возможностью выбрать одну из них и показать товары только одной категории. У категорий выводятся названия.На списке товаров для конкретной категории выводится, собственно, список товаров, принадлежащих данной категории. Около каждого товара выводится его название, цена и свойства, а также кнопка добавления в корзину. При нажатии на неё товар добавляется в корзину.



1.2.2 Товар

На списке товаров для конкретной категории выводится, собственно, список товаров, принадлежащих данной категории. Около каждого товара выводится его название, минимальная цена (цена самой дешевой вариации) и свойства, а также кнопка добавления в корзину. При нажатии на неё пользователь выбирает вариацию, которую хочет добавить в корзину.

В карточке товара необходимо отобразить кнопки выбора вариации по ее свойствам. При нажатии на кнопку добавления в корзину, добавляется конкретно выбранная пользователем вариация товара.


1.2.3 Заказ


На экране оформления заказа находится форма с текстовыми полями:

- Имя
- Адрес
- Телефон
- Время

Все поля обязательны. После заполнения всех полей пользователь может нажать на кнопку "Оформить заказ", создастся новый заказ с содержимым текущей выбранной корзины, а сама корзина очистится.


1.2.4 История заказов


На данном экране выводится список всех созданных заказов пользователя, с их содержимым (корзина) и датой создания.


1.3 Дополнительно


Необходимо реализовать:

- Вывод товаров с подгрузкой (infinite scroll)
- Фильтры в категориях по названиям товаров и цене.
- Адаптивную верстку для мобильных устройств.

Дополнение 01/2024 - делаем вариант с 0% скидкой. Скидку никак не обрабатываем.


Готово?
Результат задания ожидаем по e-mail [email protected]

Сроки
Задание не должно занимать более 3 рабочих дней.
Ожидаем выполнения в течение недели с момента отправки тестового задания.
Срок рассмотрения составляет до 5 рабочих дней.
В письме укажите время потраченное на выполнение.

Оформление
Тема письма: "10002-1 Frontend JS"
В письме должны быть файлы исходного кода или ссылка на репозиторий. Если представлено ссылкой на репозиторий, то он должен быть приватным.

Если необходимы комментарии по реализации, пожалуйста приложите файл readme.txt в корне.