Middle Frontend-розробник

Разрабатывали приложение “Конструктор лендингов” в команде спецпроектов.

Я отвечал за функциональную часть админ-панели, как fullstack разработчик.

Достижения:

Реализовал высоконагруженный компонент выбора шрифтов

• Использовал виртуализацию для плавного отображения большого списка шрифтов.

• Внедрил асинхронную загрузку при прокрутке списка шрифтов.

• Добавил debounce при вводе названия шрифта, минимизируя нагрузку на сервер.

• Использовал минимизированные легковесные шрифты, загружая только необходимые

символы (subset) для уменьшения объема передаваемых данных.

Итог: ускорена работа с UI, снижена нагрузка на сервер при поиске шрифтов.

Добавил статистику переходов по ссылкам и посещаемости сайта (Chart.js)

• Интегрировал сбор данных о переходах, отказах и времени на странице

• Настроил динамическую фильтрацию данных по временным периодам, устройствам и

географии пользователей.

• Оптимизировал загрузку данных с сервера, применяя кеширование запросов и сжатие

данных.

• Интегрировал экспорт данных в CSV/PDF, что упростило работу аналитиков и маркетологов.

Итог: маркетинговая команда получила инструмент для анализа эффективности лендингов.

Реализовал drag’n’drop систему управления ссылками и блоками лендинга

• Позволил пользователям добавлять, удалять, изменять ссылки. Ссылки сохраняются в статистике на 7 дней, с возможностью восстановления.

• Ссылки удаляются с помощью cron-задач (node-cron).

Внедрил темную/светлую тему в админке

• Добавил автоматическое переключение в зависимости от предпочтений системы пользователя

Итог:

• Добавил возможность изменения темы по кнопке, с использованием CSS Variables и Context

• Улучшил пользовательский опыт — 40% пользователей стали работать в темной теме.

• Увеличилось средняя продолжительность сессии в админке на 15%.

Наставничество и менторинг

• Помогал джуниор-разработчику в команде: давал код-ревью, объяснял сложные моменты,

помогал разбираться в архитектуре проекта.

Итог: ускорил его адаптацию, улучшил качество кода и взаимодействие в команде.

______________________________________________

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

просматривать товары, оформлять заказы и отслеживать доставку.

Достижения:

Добавил фильтрацию и сортировку товаров

• Реализовал фильтрацию по цене, категории, наличию, скидкам и рейтингу.

• Настроил сортировку по популярности, новизне, цене и количеству отзывов.

Итог: пользователи быстрее находят нужные товары, что увеличивает количество покупок.

Реализовал процесс оформления заказа в несколько шагов

• Разделил checkout на выбор товаров → ввод данных → выбор оплаты → подтверждение с

помощью React Router.

• Добавил индикатор прогресса с использованием Framer Motion.

• Интегрировал WebSocket API для обновления информации о доставке в реальном времени.

Итог: меньше незавершенных заказов, выше конверсия в покупки.

Реализовал систему отзывов и рейтингов

• Добавил возможность оставлять комментарии, ставить звезды и прикреплять фото.

• Реализовал сортировку отзывов по новизне, рейтингу и наличию фотографий.

Итог: товары с отзывами продаются лучше, повышается доверие клиентов.

Оптимизировал работу с приложением

• Разделил код на чанки с помощью React.lazy() + Suspense.

• Использовал React Query для кеширования и предзагрузки данных.

• Применил WebP-формат и Image CDN для уменьшения размера изображений.

• Внедрил lazy-loading с использованием React Suspense и Intersection Observer API.

Итог: приложение загружается быстрее, пользователи дольше остаются в нем.

Стек: React, Type, Redux Toolkit, React Query, React Router, Framer Motion, WebSocket API,

Intersection Observer API, React.lazy() + Suspense, Chart.js, Node.js

Разрабатывали приложение “Сервис внутренней аналитики для анализа эффективности работы сотрудников”.

Достижения:

Реализовал профиль сотрудника с возможностью редактирования и разграничением доступа

• Разработал интерфейс редактирования профиля сотрудников с учетом ролей и прав доступа, обеспечив гибкую настройку разрешений.

• Внедрил гранулярные права доступа: пользователи с разными ролями могут изменять только доступные им поля профиля.

• Использовал Yup и React Hook Form для валидации данных при редактировании.

• Реализовал автосохранение изменений с debounce-задержкой.

• Добавил историю изменений профиля с возможностью отката.

Переработал механизм авторизации с сессий на JWT

• Внедрил авторизацию через JWT, обеспечив безопасное хранение и передачу токенов без использования сессионных данных.

• Реализовал механизм обновления токенов (refresh token) для продления сессии без повторного входа.

• Настроил хранение токенов в HTTPOnly cookies для защиты от XSS-атак.

• Ввел ротацию refresh-токенов и их безопасное хранение в базе данных.

• Добавил логику автоматического выхода при компрометации токена.

• Оптимизировал процесс аутентификации.

Стек: React, Type, Redux Toolkit, React Hook Form, Yup, React Router, Tailwind CSS, JWT, Zustand, WebSocket API