Таблица пользователей

Демо: https://yanakris.github.io/users-table/

Тестовое задание: одностраничное приложение на React, отображающее таблицу пользователей из DummyJSON API с сортировкой, фильтрацией, пагинацией, модальным окном и изменением ширины колонок.

Стек

• React 19 — функциональные компоненты и Hooks
• JavaScript (без TypeScript)
• Vite — сборка и dev-сервер
• Vitest + React Testing Library — тесты
• CSS Modules (CSS3) — стили
• Fetch API — работа с сетью

Запуск

npm install      # установка зависимостей
npm run dev      # dev-сервер (http://localhost:5173)
npm run build    # production-сборка в dist/
npm run preview  # локальный просмотр собранного билда

Тесты и линтер

npm test         # тесты в watch-режиме
npm run test:run # однократный прогон (для CI)
npm run lint     # проверка ESLint

Ограничения API и решения

• Нет «отчества». Англоязычный API отчества не содержит. Единственное дополнительное имя-поле — maidenName (девичья фамилия). Решение. В колонку «Отчество» поместить maidenName. Колонка обязательна по ТЗ.

• Сортировка телефона — строковая. DummyJSON сортирует поле phone (sortBy=phone) как строку, а не как число: номера хранятся в форматированном виде +<код> NNN-NNN-NNNN. Решение. Оставлена серверная сортировка. Для данных API результат корректен и интуитивен: формат единообразный, поэтому внутри одного кода страны строковый порядок совпадает с числовым, а сами коды (+1, +44, +49, +61, +81, +91, +92) в строковом порядке идут так же, как в числовом.

• Поиск — только по английскому тексту. Поиск идёт серверным запросом GET /users/search?q=, который ищет лишь по строковым текстовым полям (имя, фамилия, email…). По числам он не находит (q=29 для возраста → 0 результатов, фрагмент телефона → 0), по кириллице — тоже 0: в данных API кириллицы нет, русский текст присутствует только в клиентском отображении пола (male → «Мужской»). Решение. Оставлен серверный поиск как основной сценарий — он быстрый и работает вместе с серверной пагинацией и сортировкой. Длина запроса ограничена 50 символами (maxLength). Поиск по числам (возраст, телефон) и по кириллице потребовал бы разовой загрузки всех пользователей и полностью клиентской фильтрации/сортировки/пагинации.