Тестовое задание на должность "Frontend-разработчик" в ювелирной мастерской Valantis

Оглавление

1. Краткое описание проекта
2. Стек технологий
3. Установка и запуск приложения
4. Особенности работы приложения
5. Улучшение

1. Краткое описание проекта

Проект представляет собой страницу со списком товаров в виде таблицы с пагинацией в обе стороны. Для каждого товара отображаются 4 поля: id, название, цена и бренд. Список возможно фильтровать по 3 последним полям, используя механизм стороннего API, а также сбрасывать фильтры до исходного значения

Ссылки на проект:
Задание: https://github.com/ValantisJewelry/TestTaskValantis/blob/main/README.md
Деплой: https://elrouss.github.io/valantis-test-assignment/

(к оглавлению)

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

(к оглавлению)

3. Установка и запуск приложения

1. git clone https://github.com/elrouss/valantis-test-assignment.git - клонировать репозиторий (HTTPS)
2. npm i - установить зависимости
3. npm run prepare - установить husky
4. Добавить в корне проекта файл .env и скопировать в него содержимое .env.example
5. npm run dev - запустить приложение и перейти по ссылке http://localhost:5173/valantis-test-assignment/

(к оглавлению)

4. Особенности работы приложения

• На странице выводится до 50 товаров с фильтрацией дублирующихся товаров по id, которые возвращаются с сервера. Максимальное количество товаров можно переопределить в переменной MAX_ITEMS внутри файла src/utils/variables.ts. При работе с фильтрацией по параметрам в случае отсутствия данных в таблице отобразится соответствующий текст
• В случае возникновения серверной ошибки срабатывает механизм повторных запросов в количестве 5 попыток; если все 5 попыток неудачные, то на экране появляется сообщение о серверной ошибке с предложением пользователю обновить страницу либо попробовать зайти на сайт позже (первоначальная идея о реализации 3-го запроса по второму урлу невозможна в связи с незащищенным протоколом http у API)
• Для получения серверных данных требуется передавать особое значение X-Auth, в которое входит сегодняшняя дата: она высчитывается на устройстве пользователя автоматически. Однако замечено, что после полуночи (по мск) в течение некоторого времени сервер отказывается принимать актуальную дату. В качестве временного решения данной проблемы в файле src/helpers/getCurrentTimestamp.ts можно вручную перевести дату на день назад; как вариант - подменить метку в механизме повторных запросов в случае возвращения 401-й ошибки в файле src/helpers/fetchData.ts. Тем не менее, на данном этапе было принято решение не фиксить данную проблему. В случае ошибки авторизации на экране пользователя появится соответствующий текст
• В приложение не заложен отзывчиво-адаптивный интерфейс (будет плохо отображаться в портретной и некорректно - в пейзажной ориентации на планшетах и мобильных телефонах)

(к оглавлению)

5. Улучшение

• В случае с разрастанием приложения и его "подтормаживанием" можно попробовать изменить структуру компонент и/или оптимизировать ререндеры таблицы через мемоизацию

(к оглавлению)