Vanity — a retail chain's promo website with cosmetics sets for receipts
A campaign of a chain of stores with a cosmetics brand: purchases of 600 ₽ or more with the loyalty card, or delivery orders of 1500 ₽ or more, are registered as receipts. The receipts add up and are exchanged for cosmetics sets, and they also give chances in weekly draws of a smartphone, earbuds, a smart speaker and a watch and in the draw for the main prize — a suitcase of cosmetics and gifts.
- Role
- Frontend developer
- Timeline
- 2026, October
The challenge
Build the campaign on a new Vue 3 and TypeScript base: show the Tilda landing inside the app without a frame, put the sets carousel into it, make the account with chances, the receipt history, prizes and a showcase, receipt registration and ordering prizes with delivery.
What the solution includes
- The landing from a Tilda export renders in a native custom element in shadow DOM: the export's styles are inlined with html and body moved to :host and @font-face to the document, scripts are recreated, and element lookups on document fall back to the shadow root — Tilda's scripts work as on a normal page.
- The sets carousel is a separate Vue custom element inside the landing: tabs by price in receipts, autoplay that moves to the next tab after the last slide, the stock and a progress bar, a query cache shared with the app.
- The account: chances and receipts to exchange with a hint, the rules for earning chances, the receipt history with the chances of each receipt and pagination, prizes with a delivery address form and a gift showcase with ordering.
- Receipt registration: a QR code through the camera, manual entry or a photo of the receipt; ordering a gift for receipts and the prize delivery address — with confirmation dialogs.
- Server data through TanStack Vue Query with caching and request deduplication, modals on the native <dialog>, a check for a new site version with auto-reload.
- Sign-in by phone with a confirmation code, participating regions, winners with a search by phone, a responsive layout.
A commercial team project: I built the whole frontend; the promo page is made in Tilda. Screenshots are from a local build with test data — the gifts and sets on them are test data too; the names and logos of the chain, the partner brand and the card are hidden, and the campaign name is blurred.