Frontend-разработчик (React, TypeScript)

Разработка внутренних корпоративных web-систем: LMS-платформа для обучения сотрудников и система электронного документооборота.
Работал в команде из 5 человек: 2 frontend, 2 backend, QA. Взаимодействовал с аналитиками и дизайнером, участвовал в декомпозиции задач, code review и релизах. Процессы по Scrum, настроен CI/CD.
Стек: React, TypeScript, Redux Toolkit, RTK Query, React Router, React Hook Form, Zod, Webpack, REST API, Axios, SCSS, CSS Modules, Tailwind CSS, Jest, React Testing Library, Storybook, Docker, ESLint, Prettier, GitLab CI/CD, Sentry.

Проект: LMS-платформа для обучения сотрудников
Платформа для обучения сотрудников с каталогом учебных материалов, системой тестирования, личным кабинетом и панелью администратора. Отвечал за ключевые разделы: каталог учебных материалов, систему тестирования, личный кабинет сотрудника и панель администратора.

Достижения:
- Разработал модуль тестирования с нуля: реализовал одиночный выбор, множественный выбор, сопоставление, таймер, автопроверку и экран результатов. Логику прохождения теста вынес в Redux Toolkit slices, а UI разбил на небольшие React-компоненты на TypeScript, чтобы упростить поддержку и добавление новых типов вопросов.
- Настроил сохранение прогресса при прохождении тестов: ответы пользователя хранятся в Redux store и синхронизируются с sessionStorage через middleware. Благодаря этому пользователь не теряет результат при обновлении страницы, случайном переходе или возврате к тесту.
- Переработал каталог учебных материалов под новую структуру данных, чтобы методисты и преподаватели могли использовать одни и те же материалы в разных курсах без дублирования контента. Состояние фильтров по темам, должностям и навыкам вынес в Redux Toolkit, загрузку и обновление списка организовал через RTK Query.
- Разработал личный кабинет сотрудника с персональной траекторией обучения: назначенные курсы, факультативы, история тестов и прогресс. Экран разделил на независимые feature-модули, подключил lazy loading, skeleton-экраны и загрузку данных через RTK Query, чтобы пользователь быстрее видел актуальное состояние обучения.
- Реализовал панель администратора с ролевой моделью доступа: централизованный slice авторизации, защита маршрутов через React Router route guards, условный рендеринг UI по роли и фильтрация данных на уровне API-запросов. Это позволило разграничить доступ к разделам и действиям без дублирования проверок в компонентах.
- Написал универсальный рендерер учебного контента для 5 форматов: текст, презентация, видео, инфографика и внешние ресурсы. Решение построил через component registry, поэтому новый формат можно добавить регистрацией React-компонента без изменения основного рендерера.
- Внедрил feature flags для поэтапного запуска новых модулей LMS. Это позволило открывать функциональность ограниченной группе пользователей, тестировать изменения безопаснее и управлять доступностью фич без повторного деплоя.

Проект: Система электронного документооборота
Система для согласования документов, управления задачами и работы с ролевыми сценариями. Работал с цепочками согласования, UI-состояниями, legacy-кодом и внутренним UI Kit.

Достижения:
- Разработал интерфейс цепочки согласования документов: участники процесса, текущие статусы и доступные действия - подписание, отклонение, делегирование. Состояние согласования и асинхронную работу с REST API реализовал через Redux Toolkit. Пользователь видел актуальный этап документа, а интерфейс показывал только действия, доступные для текущего статуса.
- Расширил внутренний UI Kit под задачи документооборота: добавил новые React-компоненты, адаптировал существующие элементы под сценарии согласования и описал единые контракты пропсов на TypeScript. Это упростило переиспользование компонентов и снизило количество кастомной логики в продуктовых экранах.
- Провёл поэтапную миграцию legacy-кода с классовых компонентов на функциональные React-компоненты. В первую очередь переводил модули с наибольшей частотой изменений, чтобы быстрее снизить технический долг и упростить дальнейшую доработку активных частей системы.
- Оптимизировал production-сборку Webpack: проанализировал bundle через Bundle Analyzer, убрал тяжёлые зависимости и настроил code splitting по роутам. Основной bundle сократился с 3.2 MB до 1.7 MB, что уменьшило объём загружаемых ресурсов и ускорило первоначальную загрузку приложения.
- Покрыл основные бизнес-сценарии unit-тестами на Jest и React Testing Library, а компоненты описал в Storybook. Это упростило проверку разных UI-состояний и снизило риск регрессий при изменении сценариев согласования.
- Настроил мониторинг production-ошибок через Sentry с интеграцией в GitLab CI/CD. Ошибки стали быстрее попадать в разбор с привязкой к релизу, stack trace и конкретному пользовательскому сценарию.

Разработка внутренней корпоративной web-системы учёта и поверки средств измерений. Работал с большими реестрами оборудования, карточками объектов, фильтрами, динамическими формами и справочниками.
Работал в команде из 5 человек: 2 frontend, 2 backend, QA. Участвовал в code review, декомпозиции задач и планировании спринтов по Scrum.

Стек: Vue 3, TypeScript, Pinia, Vue Router, Vite, REST API, Axios, Vitest, SCSS, CSS Modules, ESLint, Prettier, Husky, GitLab CI/CD, Docker.

- Переделал работу с реестрами средств измерений на 100000+ позиций через универсальный компонент таблицы: добавил многоуровневую фильтрацию, сортировку, пагинацию и оптимизацию загрузки и рендера. Компонент переиспользовался в нескольких разделах приложения, поэтому похожие таблицы не собирались заново. Состояние фильтров вынес в Pinia-store с persist-механизмом - параметры сохранялись при навигации между разделами.
- Спроектировал динамические формы на основе конфигурационной схемы: вместо отдельных форм под разные сценарии использовался общий компонент, который рендерил поля из конфига и централизованно валидировал данные перед отправкой.
- Стандартизировал архитектуру state-management: разделил серверное и клиентское состояние, унифицировал структуру store во всех основных модулях приложения. Это сделало работу с данными предсказуемее и упростило поддержку проекта.
- Оптимизировал загрузку приложения через Vite: настроил lazy loading маршрутов, code splitting, tree shaking и сжатие ассетов. В результате уменьшился объём загружаемых ресурсов и ускорилась первоначальная загрузка.
- Настроил ESLint, Prettier и pre-commit hooks через Husky. Это помогло выровнять code style в команде и сократить количество замечаний на code review.