Scratch — a promo website of a bank card campaign in a retail chain: promo codes from scratch cards
A purchase of 700 ₽ or more in the chain's stores brings a draw card with a scratch-off layer and a promo code. The code is registered on the site and enters the draw of its week — certificates for purchases, a smartphone, a tablet and a smartwatch — and holders of the chain's bank card also enter the draw for the main prize of 1,000,000 ₽.
- Role
- Frontend developer
- Timeline
- 2026, May — June
The challenge
Build a new base for the campaigns on Vue 3 and TypeScript and make on it an app for the Tilda landing: promo code registration with sign-in in one dialog, an account with promo codes by week, the winners list inside the landing and feedback.
What the solution includes
- A new base on Vue 3 and TypeScript: a typed API layer, data models, an own modal plugin with a promise interface, versioned releases.
- Promo code registration with sign-in in one dialog: a guest enters the code from the card and the phone and confirms the number with the last four digits of an incoming call or an SMS code; a participant gets a dialog of their own, plus success and code error dialogs.
- The account: promo codes by the six weeks with dates and the number of codes in the week's draw, the chances in the main draw and the prizes won with a claim dialog.
- The winners list is a separate Vue app mounted into a block of the landing: the app's styles are copied into the frame and kept in sync through a MutationObserver; a prize filter on the server, a search by phone, pagination.
- The link with the landing through postMessage: Tilda buttons open the promo code, sign-in and question dialogs and external links; the list of participating stores is a full-screen dialog with a grid of regions.
- Sign-out on an expired session by event, errors sent to a log server, 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 names and logos of the card, the chain and the loyalty programme are hidden, and the landing under the dialogs is blurred.