Список пользователей с редактированием

Тестовое задание: SPA-приложение на React для управления пользователями.

Описание

Приложение для просмотра и редактирования пользователей:

• Таблица пользователей с пагинацией
• Поиск по пользователям
• Страница детальной информации
• Редактирование через модальное окно
• Валидация формы

Технологический стек

• React 19 - библиотека для построения пользовательских интерфейсов
• TypeScript - типизированный JavaScript для безопасности кода
• Vite - современный сборщик проектов
• Mantine UI v8 - библиотека компонентов (Table, Pagination, Modal, Form, Notifications)
• Tanstack Query v5 - управление серверным состоянием, кэширование и мутации
• React Router v7 - клиентская маршрутизация
• Axios - HTTP-клиент для API запросов
• reqres.in - публичное mock API (требуется бесплатная регистрация)

Установка и запуск

Требования

• Node.js >= 20
• npm

Установка

npm install

Настройка

Создайте файл .env:

VITE_REQRES_API_KEY=reqres-free-v1

Запуск

npm run dev

Откройте http://localhost:5173

Сборка

npm run build

Структура проекта

src/
├── api/              # API запросы
├── components/       # React компоненты
├── hooks/            # Custom hooks
├── pages/            # Страницы
├── types/            # TypeScript типы
└── utils/

Функционал

Главная страница /

• Таблица пользователей (ID, First Name, Last Name, Email)
• Поиск
• Пагинация через URL (?page=1)
• Переход на страницу пользователя по клику на ID

Страница пользователя /users/:id

• Информация о пользователе
• Кнопка редактирования (открывает модальное окно)

Редактирование

• Модальное окно с формой
• Валидация полей (обязательные + email)
• Уведомления об успехе/ошибке

API

Используется reqres.in:

• GET /api/users?page=1 - список пользователей
• GET /api/users/:id - пользователь по ID
• PUT /api/users/:id - обновление пользователя

API ключ: reqres-free-v1 (передается через заголовок x-api-key)

Примечание: reqres.in не сохраняет изменения на сервере (mock API), но данные обновляются локально через инвалидацию кэша.

Технические детали

• Tanstack Query для управления состоянием и кэширования
• Пагинация через URL параметры
• Валидация форм через Mantine useForm
• TypeScript для типизации
• Обработка loading/error состояний