Puck — a promo website of a retail chain and a hockey club with match ticket draws

The challenge

Build the promo website on the same base as «Match»: embed the Tilda landing into a Vue app with sign-in, receipt registration and the account, connect the landing's buttons to the app's dialogs and keep the winners page going until the end of the season, adding ticket draws for new matches.

What the solution includes

• The landing from a Tilda export in a frame inside the app: the «Register a receipt» and «Account» buttons pass clicks through postMessage, and the app opens the sign-in or the receipt registration.
• Three ways to register a receipt: a QR code through the camera, manual entry of the date, time, sum and fiscal numbers (FN, FD, FP) with a calendar and field checks, or photos of the receipt — up to five parts of a long one.
• The account: the receipt history with statuses and rejection reasons, an «in the draw» mark on accepted receipts, counters of checked and pending receipts, the participant's prizes.
• Winners: a search by phone, a switch between the main prize and the regular draws, a filter by prize — tickets to a particular match or merchandise — and pagination.
• The list of matches grew until the end of the season: playoff tickets were added to the winners filter, and the week filter was removed once it was no longer needed.
• Sign-in by phone with an SMS code, a responsive layout for phones.

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 chain and the club are hidden, and the landing is not shown.