{"id":15844411,"url":"https://github.com/elrouss/valantis-test-assignment","last_synced_at":"2026-05-01T09:32:01.196Z","repository":{"id":226882472,"uuid":"768807966","full_name":"elrouss/valantis-test-assignment","owner":"elrouss","description":"Список товаров в виде таблицы с пагинацией и фильтрацией данных","archived":false,"fork":false,"pushed_at":"2024-03-10T14:14:47.000Z","size":411,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T17:53:23.299Z","etag":null,"topics":["axios","elrouss","react-vite","scss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elrouss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-07T19:14:30.000Z","updated_at":"2024-03-10T09:46:14.000Z","dependencies_parsed_at":"2024-12-10T20:31:41.343Z","dependency_job_id":"7d65ce3d-fe22-4755-ba1a-7ea0cfd20c84","html_url":"https://github.com/elrouss/valantis-test-assignment","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"0f2aba0d9324e7cfbd7aceb03d4ea6e40141fa51"},"previous_names":["elrouss/valantis-test-assignment"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/elrouss/valantis-test-assignment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fvalantis-test-assignment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fvalantis-test-assignment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fvalantis-test-assignment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fvalantis-test-assignment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elrouss","download_url":"https://codeload.github.com/elrouss/valantis-test-assignment/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fvalantis-test-assignment/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32492148,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","elrouss","react-vite","scss","typescript"],"created_at":"2024-10-05T17:22:08.455Z","updated_at":"2026-05-01T09:32:01.181Z","avatar_url":"https://github.com/elrouss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eТестовое задание на должность \"Frontend-разработчик\" в ювелирной мастерской \u003ca href=\"https://valantis.store/\"\u003eValantis\u003c/a\u003e\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg width=\"575\" alt=\"Главная страница приложения\" src=\"https://github.com/elrouss/valantis-test-assignment/assets/108838349/b60e118c-c801-4928-8bf2-68977357b4bc\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003ca name=\"summary\"\u003e\n  \u003cdetails\u003e\n    \u003csummary\u003eОглавление\u003c/summary\u003e\n    \u003col\u003e\n      \u003cli\u003e\u003ca href=\"#project-description\"\u003eКраткое описание проекта\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#technologies\"\u003eСтек технологий\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#installation\"\u003eУстановка и запуск приложения\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#peculiarProperties\"\u003eОсобенности работы приложения\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#enhancement\"\u003eУлучшение\u003c/a\u003e\u003c/li\u003e\n    \u003c/ol\u003e\n  \u003c/details\u003e\n\u003c/a\u003e\n\n\u003ca name=\"project-description\"\u003e\u003ch2\u003e1. Краткое описание проекта\u003c/h2\u003e\u003c/a\u003e\nПроект представляет собой страницу со списком товаров в виде таблицы с пагинацией в обе стороны. Для каждого товара отображаются 4 поля: id, название, цена и бренд. Список возможно фильтровать по 3 последним полям, используя механизм стороннего API, а также сбрасывать фильтры до исходного значения\n\n\u003cb\u003eСсылки на проект:\u003c/b\u003e\n\u003cbr\u003e\nЗадание: https://github.com/ValantisJewelry/TestTaskValantis/blob/main/README.md\n\u003cbr\u003e\nДеплой: https://elrouss.github.io/valantis-test-assignment/\n\u003cbr\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"technologies\"\u003e\u003ch2\u003e2. Стек технологий\u003c/h2\u003e\u003c/a\u003e\n\u003cspan\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\" alt=\"Иконка 'React'\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vite-B73BFE?style=for-the-badge\u0026logo=vite\u0026logoColor=FFD62E\" alt=\"Иконка 'React Vite'\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/axios-671ddf?\u0026style=for-the-badge\u0026logo=axios\u0026logoColor=white\" alt=\"Иконка 'Axios'\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" alt=\"Иконка 'TypeScript'\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white\" alt=\"Иконка 'Sass (SCSS)'\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" alt=\"Иконка 'HTML5'\"\u003e\n\u003c/span\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"installation\"\u003e\u003ch2\u003e3. Установка и запуск приложения\u003c/h2\u003e\u003c/a\u003e\n\n1. `git clone https://github.com/elrouss/valantis-test-assignment.git` - клонировать репозиторий (HTTPS)\n2. `npm i` - установить зависимости\n3. `npm run prepare` - установить \u003ca href=\"https://typicode.github.io/husky/\"\u003ehusky\u003c/a\u003e\n4. Добавить в корне проекта файл `.env` и скопировать в него содержимое `.env.example`\n5. `npm run dev` - запустить приложение и перейти по ссылке `http://localhost:5173/valantis-test-assignment/`\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\n\u003ca name=\"peculiarProperties\"\u003e\u003ch2\u003e4. Особенности работы приложения\u003c/h2\u003e\u003c/a\u003e\n\n- На странице выводится до 50 товаров с фильтрацией дублирующихся товаров по id, которые возвращаются с сервера. Максимальное количество товаров можно переопределить в переменной `MAX_ITEMS` внутри файла `src/utils/variables.ts`. При работе с фильтрацией по параметрам в случае отсутствия данных в таблице отобразится соответствующий текст\n- В случае возникновения серверной ошибки срабатывает механизм повторных запросов в количестве 5 попыток; если все 5 попыток неудачные, то на экране появляется сообщение о серверной ошибке с предложением пользователю обновить страницу либо попробовать зайти на сайт позже (первоначальная идея о реализации 3-го запроса по второму урлу невозможна в связи с незащищенным протоколом http у API)\n- Для получения серверных данных требуется передавать особое значение \u003cb\u003eX-Auth\u003c/b\u003e, в которое входит сегодняшняя дата: она высчитывается на устройстве пользователя автоматически. Однако замечено, что после полуночи (по мск) в течение некоторого времени сервер отказывается принимать актуальную дату. В качестве временного решения данной проблемы в файле `src/helpers/getCurrentTimestamp.ts` можно вручную перевести дату на день назад; как вариант - подменить метку в механизме повторных запросов в случае возвращения 401-й ошибки в файле `src/helpers/fetchData.ts`. Тем не менее, на данном этапе было принято решение не фиксить данную проблему. В случае ошибки авторизации на экране пользователя появится соответствующий текст\n- В приложение не заложен отзывчиво-адаптивный интерфейс (будет плохо отображаться в портретной и некорректно - в пейзажной ориентации на планшетах и мобильных телефонах)\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"enhancement\"\u003e\u003ch2\u003e5. Улучшение\u003c/h2\u003e\u003c/a\u003e\n\n- В случае с разрастанием приложения и его \"подтормаживанием\" можно попробовать изменить структуру компонент и/или оптимизировать ререндеры таблицы через мемоизацию\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrouss%2Fvalantis-test-assignment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felrouss%2Fvalantis-test-assignment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrouss%2Fvalantis-test-assignment/lists"}