Sports nutrition store on Nuxt 4. Catalog, cart, and promos.2026

Reckful

Nuxt 4Vue 3TypeScriptSCSSGitLab CISwiperA11y

Reckful is a major Russian sports nutrition and merch brand with its own direct-to-consumer storefront built on Nuxt 4. I joined the project twice: in June, I built the header search and the search results page, then left the studio due to exams and relocation. In October, the team invited me back — the site was being prepared for an industry award review, there was a large backlog of complex tasks and UI fixes to clear on a tight deadline, and they were short on hands.

Day-to-day work revolved around a steady stream of tickets from the Kanban board and team chat. Context often had to be pieced together on the fly: jumping on quick calls and threads with the PM and designer, clarifying layout edge cases, and checking in with the backend developer on data shapes. To avoid sitting idle while backend endpoints and admin views were still in progress, I built the UI against mocks and placeholders; once an endpoint hit the staging server, I checked the final response structure with the backend and switched the types over. That workflow let us ship an urgent category-wide discount mechanic within 24 hours and overhaul the cart: I baked promo code application directly into the checkout button with a smooth state transition, dropping the separate apply button and duplicate error toasts.

The largest piece of work was a new four-level catalog menu that went through two redesigns in two weeks. In the first iteration, I extracted tree traversal, route-based path restoration, and reset cooldowns into a useCatalogMenu composable; for the second redesign, I rebuilt the structure around a shared HeaderCatalogSection component for both desktop and mobile, moving the responsive layout to shared fluid mixins. When the production API switched from a flat category list to a nested tree, I added support for both response formats so the UI wouldn't depend on database state, and handled edge cases around long admin titles and broken banner images. Translating the Figma specs also exposed a few blind spots: turning the root item into a dropdown removed the link to the main catalog page, and the mobile layout was missing the auth block — the only way to log in from a phone. I flagged both issues to the PM and designer, agreed on a fix, and put the missing elements back.

Some of the visual effects — a neon strikethrough on menu items and a logo that sparks on hover — came from the designer and PM as generated HTML prototypes. I rewrote the script loop that drove lightning bolts along the SVG path into a component that stops immediately on mouse leave, and extracted the strikethrough stroke into a single reusable asset for the header and footer. For the stories carousel, I combined auto-scroll with manual mouse and touch dragging, adding momentum throwing with decay and smooth deceleration on hover. Across all animations, I respected prefers-reduced-motion, supported keyboard focus, and scoped hover effects to pointer devices. Along the way, I rebuilt the About page, extracted fluid math with a rem calculation fix into a shared _fluid.scss, and fixed category tiles overflowing the grid on intermediate viewports.

Because approved tasks had to go live as soon as they passed review, I initially cherry-picked them one by one from dev into main. Over time, the staging and production environments drifted apart in both code and database state: for example, a multi-order cart split I had built from an older Figma spec made it to production, only for live testing across two legal entities to reveal that only payments needed splitting, not orders — so we agreed to strip it out. Afterward, I synced up with the backend developer to audit the diff between branches and align dev and main for predictable releases going forward.

Open project