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

Разработка веб-приложения для мониторинга инцидентов в московском метрополитене и
контроля дорожного движения города. Интерактивные карты с live-отображением 1000+
объектов, стриминговое видео для анализа дорожных ситуаций в реальном времени. Команда:
5 frontend, 5 backend, 1 mobile, 3 QA, 2 тимлида, 1 DevOps, 2 дизайнера.

Стек: React 18, TypeScript, Redux Toolkit, React Router v6, WebSocket (SignalR), MapLibre, Vite,
Webpack 5, REST API, Axios, Sentry, GitLab CI/CD, Next.js 14, Docker, BuildX, Jest, Vitest, Ionic,
Capacitor, PWA, SCSS, ESLint, react-window, i18n, Feature-Sliced Design (FSD), Core Web Vitals (INP),
Lighthouse

- Написал Redux Toolkit middleware для SignalR-потока координат. Входящие буферизуются,
throttle адаптивный — 5 с в браузере, 15 с на мобайле, апдейты батчатся по 3 секунды. 1000+
одновременно движущихся объектов на карте больше не роняют рендер.
- Спроектировал reconnect SignalR так, чтобы на время разрыва входящие события вставали в
очередь, а после восстановления пропущенное соединения автоматически догонялось. Для
системы мониторинга инцидентов это критично — потеря события при коротком обрыве
означала бы пропущенный инцидент в метро.
- Тимлид фронтенд-направления (2 человека): принимал архитектурные решения по проекту,
ревьюил код, вёл онбординг новых разработчиков. Выстроил Next.js-приложение по
Feature-Sliced Design — слои kernel / shared / entities / features, новый модуль встраивается без
переработки соседних.
- Собрал интерактивную карту мониторинга на MapLibre (canvas). Объекты разнесены по
независимым слоям — инциденты, транспорт, дорожная обстановка — каждый включается
отдельно. 1000+ маркеров кластеризуются по зуму, иначе карта превращается в кашу из
иконок. Клик по кластеру разворачивает группу, клик по объекту открывает карточку с
историей.
- Встроил стриминговое видео с камер для анализа дорожной обстановки. Несколько потоков на
одном экране, переключение между камерами без перезагрузки плеера, выбранная камера
синхронизируется с объектом на карте. Поток подгружается лениво — пока оператор не открыл
камеру, трафик не тратится.
- Собрал переиспользуемый компонент таблицы на react-window: виртуализация DOM,
бесконечная прокрутка, автозапрос следующей страницы в конце списка. Сколько бы записей
ни пришло — в DOM только видимые строки.
- Закрыл тестами на Jest и Vitest критический путь: обработка SignalR-потока, reconnect-логика,
рендер таблицы под нагрузкой. Регрессии в реалтайме перестали всплывать на демо.
- Поднял Sentry с нуля — трейсинг переходов по роутам, привязка сессий, выгрузка sourcemaps
на этапе CI. Ошибки воспроизводимы по истории действий пользователя, инциденты в проде
ловим раньше, чем оператор успевает написать тикет.
- Layout перемонтировался на каждом переходе — sidebar мигал, INP держался около 800 мс.
Поднял Layout в родительский роут, конфигурацию React Router v6 свёл воедино. INP упал
примерно до 200 мс, мерцание ушло.
- Настроил GitLab CI/CD с четырьмя стадиями — lint → test → test-build → build. Docker-сборка
трёхстадийная на BuildX с registry-кешем, sourcemaps выгружаются в Sentry условно по флагу
окружения.
- Разработал с нуля MVP мобильного приложения под Android на Ionic + Capacitor и довёл до
публикации сборки. Сделал WebView-версию поверх той же бизнес-логики — дублировать код
между вебом и мобайлом не пришлось.

Разработка CRM-системы для управления клиентской базой и автоматизации бизнес-процессов
B2B-компании. SPA с ролевой моделью доступа, дашбордами аналитики и интеграцией с
внешними сервисами. Команда: 3 frontend, 4 backend, 2 QA, 1 аналитик. Kanban.

Стек: React 18, TypeScript, Redux Toolkit, Zustand, React Router v6, TanStack Query (React Query),
React Hook Form, Zod, REST API, Axios, Webpack 5, SCSS, Material UI, Jest, React Testing Library,
Storybook, Playwright, Feature-Sliced Design, Git, ESLint, Prettier, Figma, i18n

- С нуля поднял frontend-инфраструктуру MVP — FSD-архитектура, перенос UI-kit со смежного
проекта, Webpack, ESLint, тесты и CI/CD через GitHub Actions + Docker.
- Разработал модуль фильтрации и сортировки на Zustand + TanStack Query с серверной
пагинацией, и в итоге количество обращений к API при навигации срезалось в 3 раза.
- Перевёл формы на React Hook Form + Zod — единая схема валидации для клиента и сервера,
условные поля по ролям. Время создания новой формы упало с 2 дней до 4 часов.
- Оптимизировал рендеринг дашбордов через useMemo, React.memo и декомпозицию на
lazy-компоненты, в результате главный экран стал грузиться с 3.1с до 1.4с.
- Покрыл авторизацию и управление ролями unit-тестами на Jest + RTL, coverage вырос с 0% до
~65%.
- Подключил Storybook и скриншотные тесты на Playwright — подход к разработке компонентов
стал единым, визуальная регрессия автоматизирована.

Разработка frontend платформы для управления контентом B2B-стартапа: две CMS (общая и
партнёрская с ограниченным доступом) и лендинг для оплаты с упором на mobile-first.

Миграция проекта с Vue.js на React. Команда: 2 frontend, 4 backend, 2 QA, 1 аналитик.
Стек: React 18, TypeScript, Redux Toolkit, React Router v6, React Hook Form, REST API, Axios, Webpack
5, SCSS, Ant Design, Jest, React Testing Library, Storybook, Git, ESLint, Prettier, Figma, i18n (i18next)

- Реализовал кеширование иконок в sessionStorage — при первом обращении грузится через
API и конвертируется в base64, при повторных переходах отдаётся из памяти. На медленных
соединениях это заметно, не приходилось трогать то, что уже работало.
- Написал pre-build скрипт, который вычисляет SHA-256-хэш каталога локализации и
встраивает его в конфигурацию i18next. Кейсы, когда переводы оставались прежними после
деплоя, исчезли.
- Реализовал синхронизацию URL-параметров с состоянием приложения — фильтры,
сортировка и номер страницы теперь выживают при обновлении браузера и работают по
прямой ссылке.
- Собрал базовый UI-kit на Ant Design, унифицировав форм-контролы под единый дизайн-язык.
Стилевые расхождения между страницами ушли, дублирование кода сократилось примерно
вдвое.