Sweatshirt — a pet food maker's promo website: points for receipts and tasks, a prize shop with the pet's photo
From September to November, purchases of the brand's food of 1500 ₽ or more in pet stores were registered on the site: every full 1500 ₽ in a receipt gave 2 points. Tasks added points — a pet questionnaire, a story about the pet, a photo of the pet and two games. For 3 points a participant could get a guaranteed prize at once, and saved-up points were exchanged for prizes from the catalogue — books about cats and dogs, wallpapers and stickers with the pet, an online vet consultation, T-shirts and sweatshirts with a photo of their own pet. Every month the receipts also entered a draw for a valuable prize.
- Role
- Frontend developer
- Timeline
- 2026, July — October
The challenge
Build the frontend of the campaign on a new base — Vue 3, TypeScript and an API layer typed from OpenAPI: sign-up and sign-in, receipt registration, points, the prize shop, tasks with the pet, games, an account with prizes and the pet gallery.
What the solution includes
- A base on Vue 3 and TypeScript: API types from the OpenAPI spec, axios refreshing the token on a 401 response and retrying the request, Pinia with the profile persisted, an own modal plugin with a promise interface, error logging, type checks and linters in pre-commit, versioned releases.
- Sign-up with a phone, an email and a password: the number confirmed by an incoming call or SMS, the email confirmed with a code from a letter that earns points, password recovery, sign-in with an activation token from a link.
- Receipt registration: a QR scanner, manual entry or a photo; the QR code is searched for on the uploaded photo right in the browser (BarcodeDetector or its WASM polyfill) and checked against the fiscal data format.
- The prize shop for points: the price, the stock, ordering with a confirmation; in the account, an instant exchange of 3 points for a guaranteed prize, the request status of a physical prize, a variant choice and a check of the pet's photo for personalised items, pop-up notices about new prizes.
- Tasks with the pet: a questionnaire with breeds from a reference list, a story of 500 characters or more, a photo upload with a canvas editor — dragging and zoom, JPG and PNG only, up to 10 MB; a «True or myth?» quiz of 10 statements with explanations; a match-three game in a frame, linked with the site through postMessage.
- The pet photo gallery, winners with a search, FAQ, a "coming soon" mode before the start, analytics goals including scroll depth, a responsive layout.
A commercial team project: I built the whole frontend from a ready design; the match-three game is a separate build by another developer. Screenshots are from a local build with test data — the prizes and their pictures are test data too; the brand's logos and name are hidden, and its products and partner shops are not shown.