Practise makes perfect!
- Опыт работы
- 6 лет
- На сайте с
- 2021 года
- Юридический статус
- Самозанятый
«ВеземКолеса» — интернет-магазин шин и дисков с большим каталогом товаров и полноценным процессом оформления заказа.
Основной задачей на проекте было развитие и техническая модернизация существующего frontend-приложения. На момент работы часть проекта была реализована на Vue 2 и требовала постепенного перехода на современный стек без остановки работы действующего интернет-магазина.
Необходимо было повысить производительность сайта, упростить дальнейшее развитие и поддержку кодовой базы, улучшить работу каталога с большим количеством товаров, а также сделать процесс оформления и оплаты заказа более стабильным и удобным для пользователя.
Отдельными задачами были интеграция платежных сервисов, улучшение валидации форм и обработки ошибок API, а также повышение надежности критичных пользовательских сценариев.
Работал над frontend-частью проекта и постепенно модернизировал существующую архитектуру.
Поддерживал legacy-код на Vue 2 и параллельно переносил ключевые модули на Vue 3 с использованием Composition API, TypeScript и Pinia. Общую бизнес-логику выносил в переиспользуемые компоненты и composables, участвовал в проектировании новой frontend-архитектуры.
Большое внимание уделял производительности интернет-магазина. Реализовывал SSR-компоненты и клиентскую логику, внедрял lazy loading и code splitting, оптимизировал сборку и работу тяжелых зависимостей.
Для работы с серверными данными провел рефакторинг и внедрил TanStack Query: настроил кеширование API-запросов, повторное использование данных, централизованную работу с состояниями загрузки и ошибок.
В каталоге с большим количеством товаров использовал виртуализацию списка через TanStack Virtual, благодаря чему браузеру не требовалось одновременно рендерить весь ассортимент.
Также занимался пользовательским сценарием оформления заказа:
интегрировал Yandex Pay API;
дорабатывал формы с использованием Vee-Validate и Zod;
централизовал обработку REST API ошибок через Axios interceptors;
улучшал сценарии авторизации и валидации данных.
Для повышения надежности проекта писал unit-тесты на Vitest и E2E-тесты на Playwright. Работал через Git с PR, rebase и code review, документировал технические решения и согласовывал API-контракты с backend-разработчиками.
В результате удалось постепенно модернизировать frontend интернет-магазина без необходимости полностью переписывать работающий продукт.
После оптимизации производительности показатель LCP на ключевых страницах сократился примерно с 3,2 до 1,1 секунды — примерно на 65%, благодаря чему каталог и карточки товаров стали заметно быстрее для пользователей.
Виртуализация каталога и оптимизация работы с серверным состоянием снизили количество лишних запросов и нагрузку на рендеринг при работе с большим ассортиментом. Код работы с данными стал проще поддерживать и масштабировать.
Переход на Vue 3, Composition API, TypeScript и Pinia позволил сделать кодовую базу более структурированной и поддерживаемой, а переиспользуемые компоненты и composables сократили дублирование логики.
После доработки процесса оформления заказа и интеграции Yandex Pay конверсия оплат выросла примерно на 18%. Для пользователей путь от корзины до оплаты стал короче и понятнее.
Unit- и E2E-тестирование критичных сценариев позволило надежнее проверять функциональность перед релизами, а согласование API-контрактов и централизованная обработка ошибок упростили взаимодействие frontend- и backend-частей проекта.
В итоге интернет-магазин получил более быстрый и стабильный frontend, современную архитектуру и техническую основу для дальнейшего развития каталога, оформления заказов и новых пользовательских функций.
