Тестовое задание на позицию React Frontend Developer

Задача: разработать приложение для работы с данными (продуктами). Необходимо вывести два списка: продукты полученные по api и продукты добавленный через форму. Страницы для отображения продукта, создание и редактирование продукта.

Для решения задачи необходимо использовать Redux. Для запросов к api необходимо использовать online json api. Можно использовать любой сервис. Например: https://fakestoreapi.com/ (Документация – ссылка).

Можно использовать ui библиотеки, библиотеки для работы с формой. 

Будет оцениваться подход к заданию, качество и структура кода, внимательность.

Выложить на гитхаб. Сказать сколько примерно времени заняло.

API url – https://fakestoreapi.com/products

Приложение должно иметь небольшой layout с минимальным хедером приложения, контентом и навигацией.

Задача 1. Вывести список продуктов

На странице /products в отдельной табе вывести список продуктов.

1. На странице /products вывести список карточек продуктов по несколько в ряд. Должны отображаться картинка, название и цена.
2. Реализовать api запрос
3. При первоначальной загрузке, вывести 8 продуктов
4. Добавить три кнопки для загрузки разного количества товаров. 
   1. кнопка  – 8 продуктов
   2. кнопка – 16 продуктов
   3. кнопка – все продукты (или 20 штук)
5. Сделать переходы на страницу продукта

Задача 2. Страница продукта

На странице /products/:id вывести более подробную информацию о продукте

Задача 3. Создание продукта

На отдельной странице реализовать создание продукта.

1. Создать форму с полями: название, цена, описание, опубликован (чекбокс/свитч). Поля обязательные и с минимальной валидацией. Сохранить дату создания
2. Использовать API запрос
3. После успешной отправки формы, сохранить данные (введенные поля в форме) для вывода в списке.

Задача 4. Список созданных продуктов

На странице /products вывести таблицу созданных продуктов в отдельном табе. Важно иметь возможность переключаться между списками.

1. Вывести таблицу продуктов со всеми полями.
2. На этом табе добавить переключатель (switch), который будет фильтровать продукты, которые опубликованы и нет. Бонус: сделать переключать опубликованности на одном уровне с табами списков
3. Список сохранятеся при перезагрузки страницы
4. Добавить переход на экран редактирования продукта

Задача 5. Редактирование продукта

На отдельной странице реализовать редактирование продукта.

1. Использовать api запрос
2. Обновить список продуктов

Задача 6. Удаление продукта

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

1. Необходимо использовать api запрос для эмуляции удаления
2. Удаление на экране редактирования
3. Удаление в таблице созданных продуктов
4. Подтверждение удаления

Бонусы

Если поддерживает api service и др.

1. Реализовать сортировку, пагинацию списоков
2. Реализовать фильтрацию
3. Реализовать поиск (без кнопки отправки)
4. Реализовать минимальную авторизацию, которая дает доступ к страницам

Срок: 2 дня

Необходимо загрузить на свой сервер, а также на github для просмотра качества кода