Frontend/Fullstack

Участие в полном цикле разработки проектов различного масштаба — от лендингов и интернет-магазинов до сложных SaaS-платформ и внутренних систем управления.
https://gkmaximum.ru/ | https://enitorg.ru/ | https://проверкачека.рф/

Ключевые направления и вклад:

Разработка сложных UI/UX решений: создавал многошаговые и динамические формы (с изменяемой структурой в зависимости от условий) с кастомной валидацией, сохранением промежуточного состояния в localStorage (восстановление при перезагрузке страницы). Реализовывал нативные и GSAP-анимации, компоненты с перетаскиванием (DnD), виртуализацию больших списков.

Расширенный поиск и фильтрация: разрабатывал сложные системы фильтрации с более чем 20 полями (комбинированные типы, диапазоны, множественный выбор, полнотекстовый поиск) с синхронизацией состояния фильтров через URL (query parameters) — что позволяет сохранять результаты поиска при перезагрузке страницы и делиться ссылками.

Медиа и аппаратные возможности: интегрировал работу с камерой (getUserMedia), реализовывал сканирование QR-кодов и штрихкодов, обработку полученных данных (редиректы, подстановка в формы, проверка инвентаря).

Производительность и качество кода: внедрял code splitting и lazy loading, оптимизировал рендеры (мемоизация, устранение лишних ререндеров), что привело к улучшению метрик LCP и Lighthouse Performance. Выстраивал расширяемую архитектуру приложений. Проводил код-ревью, исправлял баги различной сложности, сопровождал миграцию проектов с JS на TypeScript.

Управление состоянием и работа с данными: работал с глобальным состоянием (Redux, Zustand), управлял кэшем API-запросов (TanStack Query), применял оптимистичные обновления для улучшения UX. Реализовывал авторизацию по JWT и сессионную стратегии.

Верстка и интеграции: верстал адаптивные шаблоны писем для email-рассылок, настраивал уведомления в Telegram (боты, API).

Серверная часть и инфраструктура: под руководством старших разработчиков участвовал в разработке RESTful API на Node.js (NestJS/Express). Активно использовал Docker и Docker Compose для локальных сред, что упростило onboarding новых членов команды. Участвовал в настройке пайплайнов CI/CD (GitLab CI/GitHub Actions) для автоматического тестирования (unit, e2e), сборки и деплоя. Получил базовый опыт настройки Nginx для раздачи статики и деплоя приложений на production-серверах с использованием PM2.

Стек технологий:
Git • Linux • Docker • REST • CI/CD • Nginx • PM2 • Next.js (App Router, SSR, ISR) • Express • NestJS • React • TypeScript • HTML • CSS • TailwindCSS • SCSS • Redux • Zustand • TanStack Query • GSAP

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

Employee Portal - персональный кабинет сотрудника с возможностью просмотра и использования бонусов.

HR Admin Panel - централизованная система управления программой.

Основные функциональные возможности:
- Персонализированный каталог бонусов и скидок с геозависимым отображением (учет региона сотрудника).
- Механизм подачи заявок на подключение новых партнеров к программе лояльности.
- Гибкая система настройки правил начисления и списания бонусов.

Основной функционал:
- Персонализированный каталог бонусов и скидок с геозависимым отображением (учет региона сотрудника);
- Механизм подачи заявок на подключение новых партнеров
- Ключевые задачи и реализованный функционал;
- Гибкая система настройки правил начисления и списания бонусов

Детали реализации и ключевые решения (Employee Portal):
1. Разработка пользовательского интерфейса:

Разработка нового функционала:

- Реализация страницы обратной связи для сотрудников.

- Создание таблицы с бесконечной прокруткой и возможностью фильтрации данных.

- Разработка системы уведомлений (toast) для важных событий, таких как появление новых предложений в регионе сотрудника (использованы веб-сокеты).

Исправление ошибок (багфиксинг):

- Устранение некорректной логики закрытия всплывающих окон.

- Исправление неверного отображения состояний формы авторизации.

- Рефакторинг и исправление логики работы, устранение лишних рендеров и ошибок в компонентах UI-библиотеки (select, checkbox, input, маски для input, dropdown, popup).

- У странение ошибок верстки и CSS-анимации.

- Устранение пропущенных ранее ошибок типов и линтера.

- Исправление проблем с тач-событиями, увеличение кликабельных зон иконок, устранение “залипания” ховеров.

- Обработка и корректное отображение контента при получении некорректных данных с бэкенда (null, undefined).

2. Рефакторинг и улучшение архитектуры приложения:

- Переработка формы авторизации: удалены лишние рендеры, сокращен объем кода, исключены хуки useEffect, добавлено отображение ошибок.

- Внедрение ленивой загрузки страниц (lazy loading) для оптимизации начальной загрузки приложения.

- Настройка husky pre-commit и pre-push для автоматической проверки кода перед коммитом и отправкой.

- Инициация добавления в CI-пайплайн задач по запуску линтера и тестов.

- Предложение и реализация добавления слагов для категорий.

3. Адаптивная разработка:

- Разработка адаптивного интерфейса для мобильной версии приложения.

4. Код-ревью:

- Проведение ревью кода коллег.

2. Админ-панель:

Разработка архитектуры:

- Участие в разработке архитектуры приложения. Выбор модульной архитектуры, оптимальной для админ-панели, обеспечивающей масштабируемость и поддерживаемость без излишнего усложнения.

- Настройка окружения разработки:

- Настройка окружения разработки и конфигурация необходимых библиотек и инструментов (Vite, ESLint, Prettier, Vitest, Husky, Zustand, React Query).

Реализация авторизации:

- Разработка логики авторизации на основе JWT (JSON Web Token), с использованием access и refresh токенов, а также формы восстановления пароля с отображением ошибок.

Интеграция UI-библиотеки:
- Интеграция библиотеки PrimeReact для создания пользовательского интерфейса.
- Стилизация компонентов в соответствии с дизайн-макетом.

Разработка таблицы:

- Разработка универсальной, строго типизированной таблицы на базе PrimeReact с возможностями фильтрации, выполнения действий и пагинации. Структура таблицы определяется через объект конфигурации, обеспечивая динамическое отображение необходимых полей и данных.

Форма изменения статуса бенефита:

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

Форма создания бенефита:

- Разработка сложной многоступенчатой формы создания бенефита с валидацией на каждом шаге и зависимыми полями (диапазон дат и скидок, зависимость от типа скидок, региона и т.д.). Состояние формы сохраняется в локальном хранилище (localStorage).

Коммуникация и сотрудничество:

- Активное взаимодействие с разработчиками бэкенда и DevOps-инженерами для решения технических проблем и повышения эффективности процесса разработки.

Задачи отслеживались в Jira.

Технологический стек:
HTML, CSS, SCSS, JavaScript, TypeScript
React, Redux, RTK Query, Vite, Zustand, React Query, React Hook Form, Zod
PrimeReact, Git, GitHub, GitLab, Jira, Docker, Nginx, Husky, WebSockets.


Спасибо за внимание!
С уважением, Артем.