https://github.com/elrouss/valantis-test-assignment
Список товаров в виде таблицы с пагинацией и фильтрацией данных
https://github.com/elrouss/valantis-test-assignment
axios elrouss react-vite scss typescript
Last synced: 3 months ago
JSON representation
Список товаров в виде таблицы с пагинацией и фильтрацией данных
- Host: GitHub
- URL: https://github.com/elrouss/valantis-test-assignment
- Owner: elrouss
- Created: 2024-03-07T19:14:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-10T14:14:47.000Z (over 2 years ago)
- Last Synced: 2025-04-01T17:53:23.299Z (over 1 year ago)
- Topics: axios, elrouss, react-vite, scss, typescript
- Language: TypeScript
- Homepage:
- Size: 401 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Тестовое задание на должность "Frontend-разработчик" в ювелирной мастерской Valantis
Оглавление
- Краткое описание проекта
- Стек технологий
- Установка и запуск приложения
- Особенности работы приложения
- Улучшение
1. Краткое описание проекта
Проект представляет собой страницу со списком товаров в виде таблицы с пагинацией в обе стороны. Для каждого товара отображаются 4 поля: id, название, цена и бренд. Список возможно фильтровать по 3 последним полям, используя механизм стороннего API, а также сбрасывать фильтры до исходного значения
Ссылки на проект:
Задание: https://github.com/ValantisJewelry/TestTaskValantis/blob/main/README.md
Деплой: https://elrouss.github.io/valantis-test-assignment/
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`. Тем не менее, на данном этапе было принято решение не фиксить данную проблему. В случае ошибки авторизации на экране пользователя появится соответствующий текст
- В приложение не заложен отзывчиво-адаптивный интерфейс (будет плохо отображаться в портретной и некорректно - в пейзажной ориентации на планшетах и мобильных телефонах)
- В случае с разрастанием приложения и его "подтормаживанием" можно попробовать изменить структуру компонент и/или оптимизировать ререндеры таблицы через мемоизацию
