Тестовое задание на позицию junior frontend разработчика

Стек технологий

React, TypeScript, React Hook Form, Redux Toolkit.

Задание

Создать веб-приложение согласно дизайн макету в Figma. Веб-приложение состоит из 3 страниц:

• Главная страница со списком выпускаемой продукции;
• Страница создания типа продукции;
• Страница редактирования типа продукции.

Взаимодействие с сервером

Все данные хранятся в бэкенде. В качестве API тестового задания используется json-server. Чтобы запустить сервер, необходимо выполнить:

# Переход в папку api
cd ./api

# Установка зависимостей
npm i

# Запуск сервера (будет развернут на http://localhost:8081)
npm start

Список допустимых запросов к серверу можно просмотреть в Postman - нужно импортировать файл FakeApi.postman_collection.json, или обратиться к списку ниже.

Получение всех типов продукции

Method: GET

URL: http://localhost:8081/productTypes

Получение типа продукции по ID

Method: GET

URL: http://localhost:8081/productTypes/{productTypeId}

Создание типа продукции

Method: POST

URL: http://localhost:8081/productTypes

Body (пример):

{
  "packsNumber": 15,
  "packageType": "компрессия",
  "isArchived": false,
  "description": "Описание продукции\nВ несколько строк"
}

Редактирование типа продукции

Method: PATCH

URL: http://localhost:8081/productTypes/{productTypeId}

Body (пример):

{
  "packsNumber": 15,
  "packageType": "компрессия",
  "isArchived": false,
  "description": "Описание продукции\nВ несколько строк"
}

Удаление типа продукции

Method: DELETE

URL: http://localhost:8081/productTypes/{productTypeId}

Задачи

Главная страница

• В таблице на главной странице отображается список типов продукции, отсортированный по дате "От нового к старому"
• При клике на кнопку "Создать тип продукции" происходит переход на соответствующую страницу
• При клике на иконку "Инфо" появляется тултип с описанием продукции
• При клике на иконку "Карандаш" открывается страница редактирования типа продукции
• При клике на иконку "Корзина" пользователь должен подтвердить желание удалить тип продукции в модальном окне, после чего происходит запрос на удаление
• После обновления данных (создание/редактирование/удаление) список на главной должен обновляться

Страница создания/редактирования

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

Структура данных

База данных содержит только одну сущность - тип продукции (productTypes). Данные в тестовой БД можно посмотреть в файле api/db.json. Типы данных:

• id: string
• packsNumber: number (int)
• packageType: string (компрессия/некомпрессия)
• isArchived: boolean
• description: string (optional)
• createdAt: string (ISO date time format)