Capsule — an online store of a supplement brand: storefront, checkout and account

The challenge

Build the whole store from the designs — from the storefront to the account — for integration into a 1C-Bitrix online store: a static multi-page site with no JS framework and events for connecting the API.

What the solution includes

• Markup for a 1C-Bitrix online store: static pages and plain TypeScript with no framework, to be moved into Bitrix templates.
• Built with Vite and Vituum: every page is a Pug template, shared blocks are mixins, styles follow BEM on Sass modules.
• Fluid typography: the root font size depends on the screen orientation and the input type — pure vw on touch screens, half through rem with a mouse so that browser zoom works.
• A product page with product forms and prices, a cart, checkout: contacts, delivery by courier or to a pickup point, payment by the fast payment system or card, spending bonus points.
• The account: personal data, orders with filters and repeat ordering, order details with statuses, the history of earned and spent points.
• Dialogs and forms emit events — submit, code confirmation, resend, profile save — for the API to connect to; the profile and the cart are kept in the browser.
• Icons are assembled into a sprite at load time, images are converted to AVIF and WebP by a sharp script.

A commercial project: I built the whole frontend from a ready design. Screenshots are from a local build with demo data; the name and logo of the brand are hidden.