User Dashboard React

Тестовое React-приложение с авторизацией и защищенным dashboard-разделом для работы со списком пользователей из DummyJSON API.

Репозиторий: ImDoode/user-dashboard-react Демо: на GitHub Pages

Что реализовано

• открытая страница /login и защищенный раздел /dashboard/users;
• авторизация через DummyJSON с хранением сессии в localStorage;
• защита маршрутов для гостя и авторизованного пользователя;
• список пользователей с догрузкой по скроллу;
• фильтры с синхронизацией в URL;
• деталка пользователя как вложенный маршрут;
• TanStack Query для серверного состояния и кеширования;
• Vitest для модульных тестов и ESLint для обязательных проверок качества.

Выбор стека

Почему Vite + React 19 + TypeScript

• Vite дает быстрый цикл разработки и простую конфигурацию без лишней инфраструктуры.
• TypeScript держит API-контракты и роутинг в строго типизированном состоянии, что особенно важно при переносе с уже существующего Angular-приложения.

Почему React Router

• приложение уже естественно разбито на открытую и защищенную части, а деталка пользователя оформлена как вложенный маршрут;
• защита маршрутов и шаблоны страниц в роутере дают ту же ясность, что и конфигурация маршрутов в Angular;
• вложенные маршруты удобно описывают деталку пользователя без дублирования страницы списка.

Почему TanStack Query

• список пользователей и деталка являются серверным состоянием, а не локальным состоянием интерфейса;
• библиотека уже решает кеширование, повторные запросы, loading/error состояния и повторное использование данных;
• это лучше, чем вручную писать временное решение для кеша на уровне компонентов.

Почему Zustand

• для пользовательской сессии не нужен тяжелый глобальный менеджер состояния;
• Zustand дает маленький и прозрачный store без ceremony;
• persist-механизм естественно закрывает задачу хранения сессии между перезагрузками.

Почему react-hook-form + zod

• логин-форма компактная, но должна оставаться типобезопасной;
• react-hook-form минимизирует лишние повторные перерисовки;
• zod держит схему валидации рядом с контрактом формы.

Архитектура

Проект организован по модульным слоям:

• src/app — корневая сборка приложения: провайдеры, роутер, защита маршрутов.
• src/pages — контейнеры страниц для маршрутов.
• src/widgets — layout-слой и крупные UI-блоки страницы.
• src/features — пользовательские сценарии (auth, users).
• src/entities — доменные сущности (session, user) и их модели/API.
• src/shared — общие утилиты, конфигурация, базовый сетевой слой и настройка тестов.

Такое разбиение выбрано потому, что:

• роутинг и провайдеры не смешиваются с бизнес-логикой;
• API-контракты живут рядом с доменными сущностями, а не внутри компонентов;
• users flow изолирован в своей feature и может расширяться без расползания по всему проекту.

Перенос из Angular

Из Angular-версии сохранены:

• визуальная структура экранов;
• SCSS-стили страницы входа, шаблонов страниц, списка пользователей и деталки;
• API-контракты пользователей и сессии;
• поведенческая модель маршрутов и фильтров.

При этом React-реализация сознательно отличается:

• Angular facade заменен на сочетание хука уровня сценария и слоя запросов;
• interceptor заменен на централизованный помощник для запросов и чтение токена из хранилища сессии;
• signals и RxJS-оркестрация заменены на состояние роутера, кеш запросов и декларативные хуки.

Скрипты

npm install
npm run dev
npm run lint
npm run test
npm run build
npm run check

Дальнейшие улучшения

• добавить интеграционные тесты для входа и защищенной маршрутизации;
• вынести общие UI-примитивы в shared/ui, если приложение продолжит расти