Мы ищем лучшего — того, кто готов превзойти все ожидания и сделать проект интересным.

Если вы стремитесь к идеальности в каждой строке кода, если ваша цель — не просто выполнить задачу, а сделать ее наилучшим образом.

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

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

Описание методов:

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 egor@sionic.ru

Проверяет тестовые задания CEO проекта: Зубов Егор

Сроки

Задание не должно занимать более 2 рабочих дней.

Ожидаем выполнения в течение недели с момента отправки тестового задания.

Срок рассмотрения составляет до 5 рабочих дней.

В письме укажите время потраченное на выполнение.

Оформление

Тема письма: "10002-1 Frontend JS"

В письме должны быть файлы исходного кода или ссылка на репозиторий. Если представлено ссылкой на репозиторий, то он должен быть приватным.

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