Для справки пример логина/пароля: emilys/emilyspass
Проект изначально небольшой и время на его реализацию ограничено, поэтому считаю, что это некоторого рода MVP. Считаю, что особенно важно агрессивно рефакторить проект на ранних этапах, и так как я работаю над ним один и технологические ограничения в контексте дополнительных фреймворков/т.п. отсутствуют -- я выбрал сделать тонкий клиент средствами React без каких-либо дополнительных клиентских пакетов.
Т.к. это тестовое задание, по-моему нецелесообразно занимать чужое время вопросами о том, как что-либо должно работать, к тому же кажется более важным показать мое чувство вкуса и ценности, поэтому я принимал решения о различных вещах самостоятельно, например:
- Т.к. сервер dummyjson отвечает заголовком
Access-Control-Allow-Origin: *, автоматическая установка cookies при кроссдоменных запросах невозможна, поэтому токен авторизации хранится в sessionStorage и передается вручную. Длительно информация об авторизации хранится в localStorage. - Состояние сортировки так же хранится в localStorage, но прямые ссылки с параметрами имеют над ним приоритет и переопределяют его
- Каждый новый запрос товаров отменяет предыдущий
- Вместо некого глобального прогрессбара я сделал индикацию прогресса там, где пользователь взаимодействовал с интерфейсом (внутри поля, на кнопках). Если ответ от сервера задерживается, то таблица становится полупрозрачной, если же ответ пришел быстро – то содержимое отображается сразу
- Добавил стрелки текущего состояния сортировки в заголовки таблицы
- Чекбоксы работают только в рамках текущей страницы – решил оставить так, т.к. неизвестно их предназначение
- Изображения товаров выбрал оставить на сером фоне, хотя вполне вероятно, что в макете показан плейсхолдер
- В пагинации использовал основной цвет вместо более светлого, при загрузке он как раз становится светлым, закрепил ее в нижней части окна
- При обновлении таблицы по нажатию на кнопку показывается уведомление, что таблица успешно обновлена
И многое другое. В реальном проекте разумеется подобные вопросы обсуждаются с коллегами, в зависимости от предоставляемой свободы :-)
Вот еще пара моментов касательно текущего задания, которые вы возможно захотите поправить:
- В макете в Figma шрифт в некоторых местах отличается от основного Inter – вместо него иногда встречается Cairo – я выбрал проигнорировать Cairo и везде использовать Inter.
- В постановке говорится о том, что нужно подсвечивать красным оценку ниже 3х; в макете же подсвечено красным значение выше 3х. Я выбрал следовать постановке.
Спасибо вам за ваше внимание и время!