E-commerceNext.jsПроизводительностьРассрочка

Anta.kz — интернет-магазин спортивного бренда

2023 — 2025 · Musan Group

Разработал интернет-магазин с нуля — от архитектуры до продакшена. Реализовал оплату и рассрочку, ускорил сайт до зелёной зоны Google по Core Web VitalsПоказатели скорости от Google — влияют на позиции в поиске, навёл порядок в каталоге из 700+ позиций материалов и цветов.

Работал в команде Musan Group: проектировал архитектуру, реализовывал функционал, поддерживал проект в продакшене.

Открыть сайт

Зелёная зона

Core Web Vitals — LCP, INP, CLS

417 + 300

материалов и цветов без дублей

Рассрочка

и онлайн-оплата с полным UX-флоу

С нуля до продакшена

Интернет-магазин — от идеи до работающего сайта

Next.jsTypeScriptRTK QueryTanStack Query

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

Функционал магазина

✓ Каталог с фильтрами и поиском✓ Корзина и оформление заказа✓ Личный кабинет✓ Система отзывов✓ Админ-панель

Стек

Next.js · TypeScriptRTK Query · TanStack QuerySentry · CI/CD

Оплата и заказы

Онлайн-оплата и рассрочка — полный цикл оформления заказа

Онлайн-оплатаРассрочкаREST APIUX

∗Внедрил полный цикл оформления заказа с онлайн-оплатой и рассрочкой через REST APIСтандартный способ обмена данными между сайтом и сервером.
∗Реализовал обработку всех статусов: ожидание, успех, ошибка, отмена — каждый с понятным экраном и следующим шагом для покупателя.
∗Устранил критичные баги в процессе оплаты: дублирование заказов при двойном нажатии, некорректное состояние корзины при возврате со страницы оплаты.

Путь покупателя

1. Корзина2. Выбор способа оплаты→ онлайн / рассрочка3. Переход на платёжную систему4. Обработка результата→ успех / ошибка / отмена5. Экран подтверждения заказа

Скорость сайта

Сайт перестал тормозить — Core Web VitalsПоказатели скорости от Google — влияют на позиции в поиске в зелёной зоне

LCPINPCLSПроизводительность

∗Перевёл Core Web Vitals (LCP, INP, CLS) из красной зоны в зелёную — это официальные метрики скорости от Google, влияющие на позиции в поиске.
∗Ускорил отклик страниц: устранение лишних перерисовок, разбивка кода на части — начальный бандлПакет кода, который браузер загружает при открытии сайта стал легче.
∗Устранил визуальные сдвиги контента при загрузке страницы.

До → После

LCP🔴 → 🟢

INP🔴 → 🟢

CLS🔴 → 🟢

Метрики скорости Google — влияют на позиции в поиске

Каталог

417 материалов и 300 цветов — без дублей

Нормализация данныхФильтрация

∗Сгруппировал 417 материалов и 300 цветов в единую структуру — устранил дублирование, упростил фильтрацию.
∗Один и тот же материал в базе мог называться по-разному: «Полиэстер», «полиестер», «Polyester». Фильтрация не работала корректно — покупатели не находили нужные товары.
∗После нормализации количество значений в фильтрах сократилось с ~700 до ~50 уникальных — UX фильтрации кардинально улучшился.

Пример дублей

ПолиэстерполиестерPolyester100% полиэстер

→ Полиэстер ✓

~700 дублей → ~50 уникальных значений

Стабильность

CI/CDАвтоматическая проверка и деплой кода при каждом обновлении и мониторинг

CI/CDSentryGitHub Actions

∗Настроил CI/CD: автоматическая проверка и деплой при каждом обновлении кода.
∗SentryСервис для автоматического отслеживания ошибок — присылает уведомление, когда что-то сломалось у пользователя — мониторинг ошибок в продакшене и алерты на критичные места в процессе оплаты.
∗Устранил критичные баги в оформлении заказа, localStorageДанные, сохранённые прямо в браузере пользователя — например, содержимое корзины и на финальном экране после покупки.

Автодеплой

обновление кода→ проверка типов→ линтинг→ сборка→ деплой

Sentry — алерты на ошибки в оплате

Нужна помощь с вашим проектом?

Есть опыт в разработке интернет-магазинов — от архитектуры до оплаты и производительности.