Season — a summer promo: a Shadow DOM widget with an account and achievements

The challenge

Build the embeddable campaign app from scratch — sign-up and sign-in with phone confirmation, receipt registration, an account with achievements and prize claiming, a winners table — and embed it into a Tilda page without the styles clashing.

What the solution includes

• Embedding with a single script: the loader takes the current files from version.json, mounts the app in Shadow DOM and moves to the page what does not work inside a shadow tree — @font-face, the rem base, CSS variables; CSS is split at build time with PostCSS, and the loader modules are covered by tests.
• The winners table is a separate app in its own Shadow DOM, mounted into any #winners block on the page: filters by date and prize, a search by phone, cards on phones.
• Sign-up and sign-in by phone: a confirmation code and, after a timer, confirmation by a call with the status polled every 3 seconds; password recovery.
• Receipt registration: a QR code through the camera with a torch, QR recognition on an uploaded photo, manual entry; resubmitting a rejected receipt with corrected data.
• The account: the receipt history with filters, prizes, achievements in a carousel draggable on phones and claiming prizes for achievements with delivery details.
• Document links come from the API and are put into both the app and the Tilda page; feedback with subjects from the API.

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 of the brand and the company are hidden.