PROJECT OVERVIEWWEB APPLICATION
Celebration — a pharmacy chain promo: Tilda inside a Vue app
A super draw for the opening of an anniversary pharmacy of the chain: customers register receipts, get a discount promo code and take part in weekly draws and the main one, a travel certificate. The chain's second campaign, «Jubilee», was later built on this project.
- Role
- Frontend developer
- Timeline
- 2026, September — October
The challenge
Turn a static export of the Tilda page into an app: embed it, connect its buttons to the dialogs of the app, build receipt registration, winners and the account from the design and connect the campaign API — working as a widget on the chain's site too.
What the solution includes
- A base from scratch: Vue 3, Vite, TypeScript and TanStack Query; one codebase builds both a website and a widget in Shadow DOM.
- Embedding Tilda: first as a web component with Shadow DOM, then by inserting the HTML directly — Tilda scripts need the real document; clicks on its buttons reach the app by postMessage.
- A winners table with a prize filter and a search by phone, mounted right into the Tilda page.
- Sign-in through the customer's account of the chain (SSO) passing UTM tags, Metrika goals in receipt registration and the forms.
- The account: the receipt history with the draws each receipt is in, prizes with promo codes, notifications from the backend one at a time and skeletons while loading.
- Receipt registration: a QR code through the camera, a photo or the data typed by hand.
- The API contract in OpenAPI and tests of the API layer without a browser or a backend.
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 name and logo of the chain are hidden.