Reckful — крупный российский бренд спортивного питания и мерча с собственной витриной на Nuxt 4. На проект я заходил дважды: в июне собрал поиск в шапке и страницу выдачи, потом уволился из студии из-за сессии и переезда, а в октябре команда позвала вернуться — проект готовили к оценке на отраслевом конкурсе, нужно было в сжатые сроки закрыть большой пул сложных накопившихся задач и доработок, а рук не хватало.
Работа строилась вокруг непрерывного потока задач из канбана и чата. Контекст часто приходилось собирать на ходу: обсуждать в переписках и на коротких созвонах с ПМ и дизайнером, уточнять краевые случаи по макетам и параллельно выяснять у бэкендера, в каком виде приходят данные. Чтобы не простаивать, пока бэкенд и админка ещё в работе, я собирал интерфейс на заглушках, а когда эндпоинт появлялся на тестовом стенде — узнавал у бэка итоговую структуру ответа и переключал типы. Так мы за сутки выкатили срочную акционную механику на категории и обновили корзину: применение промокода я встроил прямо в кнопку оформления заказа с плавной сменой состояния, убрав лишнюю кнопку и дублирующие тосты.
Самой объёмной задачей стало новое четырёхуровневое меню каталога, которое за две недели прошло через два редизайна. В первой итерации логику обхода дерева, восстановления пути по роуту и задержки сброса я вынес в композабл useCatalogMenu, а ко второму редизайну пересобрал структуру вокруг общего компонента HeaderCatalogSection для десктопа и мобилки, переведя адаптив на общие флюидные миксины. Когда на проде плоский список категорий сменился на вложенный, заложил обработку обоих форматов ответа, чтобы интерфейс не зависел от состояния базы, и закрыл краевые случаи с длинными названиями и битыми картинками из админки. Попутно при переносе макетов нашлось несколько слепых зон: из-за того, что корневой пункт стал выпадающим списком, пропал переход во весь каталог, а в мобильной версии выпал блок авторизации — единственный способ войти в аккаунт с телефона. Подсветил это ПМ и дизайнеру, согласовал решение и вернул недостающие элементы на место.
Часть визуальных эффектов — неоновое зачёркивание пунктов меню и искрящийся при наведении логотип — приходила от дизайнера и ПМ в виде сгенерированных HTML-прототипов. Скриптовый цикл, который гонял молнии по SVG-контуру, я переписал в компонент с мгновенной остановкой при уходе курсора, а росчерк зачёркивания вынес в единый переиспользуемый ассет для шапки и футера. В сторис подружил автопрокрутку с ручным перетаскиванием мышью и тачем, добавив бросок по инерции с затуханием и плавное торможение на ховере. Во всех анимациях учёл prefers-reduced-motion, клавиатурный фокус и ограничил ховер-эффекты устройствами с курсором. Заодно пересобрал страницу «О бренде», вынес формулы флюидов с фиксом расчёта rem в общий _fluid.scss и починил разъезжающиеся плитки категорий на промежуточных разрешениях.
Поскольку готовые задачи просили выкатывать на бой сразу по мере приёмки, сначала я переносил их из dev в main точечно через cherry-pick. Со временем тестовый и боевой контуры начали расходиться по коду и данным: например, свёрстанная мной по макету разбивка корзины на несколько заказов ушла на прод, но при проверке на живых товарах двух юрлиц выяснилось, что заказы делить не нужно — только платежи, — так что согласовали и убрали её. В итоге обсудили проблему с бэкенд-разработчиком, сверили расхождения и синхронизировали ветки, чтобы дальше выкатывать релизы предсказуемо.