user-list

Тестовая задача на middle frontend разработчика

Задача для middle frontend разработчика:

Необходимо создать веб-приложение, которое отображает список пользователей с возможностью их фильтрации и поиска. Пользователи должны загружаться с сервера, который будет имитирован с помощью JSON-файла на клиентской стороне.

Ожидаемый результат:

Список пользователей с соответствующими колонками (см. JSON-файл).

Клик по названию колонки сортирует по возрастанию значения выбранной колонки. Повторный клик по этому же названию сортирует список по убыванию. По умолчанию, сортировка по id по возврастанию.

Перед списком пользователей располагается форма фильтра (поиска). В фильтре должна быть возможность указать параметры по всем доступным полям пользователя (id, имя, email, возраст, пол). Для поля "Возраст" лучше использовать промежуток "от" и "до". Для поля "Пол" - radiobutton.

Клик по id или имени открывает модальное окно (или страницу) для просмотра карточки пользователя. В карточке пользователя выводятся все доступные поля.

Интерфейс предполагается читаемый и удобный для использования.

Подробности

Проект выполнен с помощью библиотеки компонентов PrimeVue, для хранения состояния используется composable.

На скриншоте внешний вид приложения. Адаптив естью

Можно добавить

начальную страницу авторизации

юнит-тесты

e2e тесты

деплой

Инструменты:

фреймворк (Vue.js 3)

TypeScript

CSS (допускается использование styled-components)

допускается использование UI toolkit-а

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint