Frontend React разработчик

ControlHub — приложение, которое используется для настройки конфигурации серверов, управления подключённым оборудованием и мониторинга его работы в реальном времени.

⦾ Создал gRPC-клиент на @grpc/grpc-js с полноценными стримами и подписками на серверные события. Добавил автоматическую отправку изменений конфигурации, проверку схем и надёжный механизм переподключения при обрывах связи — теперь соединение держится даже в самых нестабильных сетях.

⦾ Сделал приложение полностью мультиязычным: подключил i18next, настроил определение языка браузера и удобный переключатель. Благодаря этому удалось без боли выкатить продукт на международный рынок.

⦾ Спроектировал систему уведомлений о критических событиях через React-Toastify + gRPC-стримы. Теперь пользователи видят важные алерты буквально в ту же секунду, как они происходят на сервере.

⦾ Построил гибкую систему ролей (админ / оператор / наблюдатель) на @casl/ability и @casl/react. Всё управление доступом теперь в одном месте, легко расширяется и читается.

⦾ Разработал расширенную фильтрацию журнала событий (по дате, типу, статусу, источнику и ID) при помощи TanStack Query. Ускорил поддержку и аналитику, повысил качество администрирования.

⦾ Добавил экспорт конфигураций в JSON, XML и CSV с клиентской валидацией через Zod — миграция данных между системами теперь занимает минуты вместо часов.

⦾ Провёл онбординг нового разработчика: подробно объяснил архитектуру приложения, особенности работы с gRPC-стримами, процессы разработки (Scrum, код-ревью, демо).

⦾ Спроектировал и реализовал механизм синхронизации состояния Redux между окнами Electron-приложения с использованием межпроцессного взаимодействия. Решение обеспечило единый источник правды для всех окон.

⦾ Перевёл фронтенд на Feature-Sliced Design — код стал значительно чище и предсказуемее. Плюс подключил Steiger в CI, чтобы автоматически следить за соблюдением архитектурных правил.

⦾ Разработал React-компонент дерева устройств для диагностики и настройки оборудования. Это позволило пользователям быстро находить и настраивать устройства в сложных системах.

Стек: React, TypeScript, Redux Toolkit (RTK), React Query (TanStack Query), React Router DOM, FSD, Electron, Vite, React Window, CSS Modules, SCSS, Storybook, React Testing Library, Vitest, Zod, i18next, React-Toastify, @grpc/grpc-js, @casl/ability, @casl/react, Steiger, React Transition Group

UpMenu — универсальная B2B-система для ресторанов: программа лояльности с бонусами и акциями, аналитика продаж и поведения гостей, а также QR-меню с заказом прямо из браузера.

⦾ Провел оптимизацию приложения, внедрив TanStack Query для эффективного управления данными и кэшированием, а также виртуализацию списков при помощи react-window, для сокращения времени загрузки.

⦾ Создал персональный профиль клиента с историей заказов и программой лояльности используя TanStack Query и React-Toastify, что увеличило средний чек за счёт персональных предложений.

⦾ Для ускорения разработки новых модулей и стандартизации UI/UX был разработан и задокументировал набор компонентов для клиентского приложения в Storybook, включая подробные сторисы.

⦾ Спроектировал архитектуру динамической темизации (Theming) для QR-меню, используя нативный подход (CSS Modules + SCSS Variables). Реализовал механизм загрузки конфигураций тем, что позволило ресторанам адаптировать вид приложения под свой бренд.

⦾ Внедрил функционал выбора адреса доставки на основе Yandex Maps API с автоподсказками и debounce ввода. Добавил проверку зоны доставки, что значительно ускорило процесс оформления заказа.

⦾ Разработал модуль конфигурации товаров с модификаторами и допами на Redux Toolkit, с динамическим пересчётом через reselect. Обеспечил мгновенный отклик, прозрачность цен и рост среднего чека.

⦾ Настроил комплексное покрытие юнит- и интеграционными тестами для модуля оформления заказов через браузер, используя React Testing Library и Vitest. что минимизировало баги при обновлениях.

Стек: React, TypeScript, Redux Toolkit (RTK), TanStack Query (React Query), React Router DOM, FSD, Vite, CSS Modules, Storybook, React Testing Library, Vitest, React Transition Group, ООП, React-Toastify, React Window, react-qr-code (React QR Code), react-input-mask (React Input Mask), Yandex Maps API, Telegram API, REST