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

Уровень: L2 (детали) | Вверх: ../README.md

Основные технологии¶

React 18.3 — библиотека пользовательского интерфейса¶

React выбран как наиболее зрелая библиотека с крупнейшей экосистемой компонентов, хуков и инструментов. Версия 18 предоставляет Concurrent Features, автоматический батчинг обновлений состояния и поддержку Suspense, что критично для offline-first приложения с фоновой синхронизацией.

TypeScript 5.6 — статическая типизация¶

TypeScript обеспечивает типобезопасность на уровне компиляции, что снижает количество runtime-ошибок и упрощает рефакторинг. Строгий режим (strict: true) активирован для максимальной надёжности. Используется bundler module resolution для совместимости с Vite.

Vite 5.4 — сборщик¶

Vite обеспечивает мгновенный холодный старт dev-сервера за счёт нативных ES-модулей и предварительной сборки зависимостей через esbuild. Для production используется Rollup с оптимизациями: tree-shaking, code splitting, минификация. Интегрирован плагин vite-plugin-pwa для генерации Service Worker.

Ant Design 5.22 — компонентная библиотека¶

Ant Design предоставляет обширный набор готовых компонентов (Button, Form, Input, Select, Drawer, Modal, Tag) с поддержкой кастомизации через Design Token System. Выбран за зрелость, качество документации, встроенную поддержку локализации (русский язык) и гибкую систему тем.

React Router 7.13 — маршрутизация¶

Декларативная маршрутизация с поддержкой вложенных маршрутов, lazy-loading и protected routes. Используется BrowserRouter с двумя группами маршрутов: защищённые (с AppLayout) и публичные (авторизация, shared-контент).

TanStack Query 5.90 — серверное состояние¶

Управление серверным состоянием: кэширование, инвалидация, фоновая синхронизация, бесконечная пагинация. Настроен с staleTime: 5 мин и networkMode: 'always' для работы в offline-режиме. Используются useQuery, useMutation, useInfiniteQuery.

Zustand 5.0 — клиентское состояние¶

Минималистичный менеджер состояния без бойлерплейта. Используется для двух сторов: authStore (аутентификация) и outfitBuilderStore (конструктор образов). Выбран за простоту API, отсутствие необходимости в провайдерах и малый размер бандла (~1 KB).

Axios 1.13 — HTTP-клиент¶

HTTP-клиент с поддержкой интерцепторов для автоматической инъекции Bearer-токенов и прозрачного обновления (refresh) при 401-ответах. Типизированные ответы через дженерики TypeScript.

Dexie.js 4.4 — IndexedDB обёртка¶

Обёртка над IndexedDB для offline-хранения данных гардероба, образов, медиа и очереди синхронизации. Поддерживает миграции схемы (v1–v4), составные индексы и транзакции.

Lucide React 1.7 — иконки¶

SVG-иконки с tree-shaking: в бандл попадают только используемые. Единый стиль: strokeWidth: 2.1, размеры 16–28px.

Fontsource — шрифты¶

Self-hosted шрифты без зависимости от CDN: Funnel Sans (display), Geist Sans (body), Geist Mono (data). Подключаются как npm-пакеты, что обеспечивает стабильность и контроль версий.

Инструменты разработки¶

Инструмент	Версия	Назначение
Playwright	1.59	E2E-тестирование
Allure	2.38	Отчёты по тестам
vite-plugin-pwa	1.2	Генерация Service Worker и PWA-манифеста

Связь технологий¶

graph LR
    subgraph Build["Сборка"]
        Vite["Vite 5.4"]
        TS["TypeScript 5.6"]
        PWA["vite-plugin-pwa"]
    end

    subgraph Runtime["Runtime"]
        React["React 18.3"]
        Router["React Router 7"]
        AntD["Ant Design 5"]
        Lucide["Lucide Icons"]
    end

    subgraph State["Состояние"]
        Zustand["Zustand 5"]
        TQ["TanStack Query 5"]
    end

    subgraph Data["Данные"]
        Axios["Axios 1.13"]
        Dexie["Dexie.js 4.4"]
    end

    TS --> Vite
    PWA --> Vite
    Vite --> React
    React --> Router
    React --> AntD
    AntD --> Lucide
    React --> Zustand
    React --> TQ
    TQ --> Axios
    Axios -->|"REST API"| Backend["Kotlin Backend"]
    Dexie -->|"IndexedDB"| Browser["Browser Storage"]
    TQ --> Dexie

Диаграмма

-> Детальное сравнение с альтернативами: comparison-table.md