Apple Inside

Apple Inside is a working e-commerce store for Apple hardware — phones, Macs, watches at prices that make every detail on a product page matter. The job started as "build rich content pages" and turned into building the system that makes those pages, plus the tooling to develop them. That system is XRC — a semi-atomic design system for content-heavy product pages: tokens, a grid, atomic classes, cards, media and typography, versioned and documented with its own README. A single script drives video autoplay and viewport-based entrance animations through IntersectionObserver. Once it existed, a new product page — MacBook Pro, iPad Air, AirPods Max — dropped from around twelve hours of assembly to three, because the page is composed from the system instead of built from scratch. The store runs on Bitrix, which has no comfortable way to develop these pages locally. So I built one: a lightweight Flask backend that injects rich content by argument and refreshes the page live, plus a local emulation of the production lazy-loader so media behaves the same off-prod as on. Media gets the same obsessive care — HEVC encoding, a ProRes 4444 path for transparent video on Macs where HEVC won't encode from Windows, source-tag format selection, and skeleton placeholders that fade smoothly into the loaded media instead of popping in. The hardest single piece was the stories module on Swiper. Heights drifted under browser zoom and Windows scaling, so I dropped dvh entirely as unreliable and drove every height off a --real-vh measured in JS, added a chrome-height variable so content never exceeds the popup, and fixed hold-to-pause so it stops fighting swipe navigation. The result is a store where adding a flagship product is a few hours of composition, and the pages hold together under zoom, resize, and real traffic — which is the kind of thing nobody notices until it's missing.