PROJECT OVERVIEWWEB APPLICATION
Race — a quiz for a running event promo with a runner card
A small embeddable app for the website of a running event: a participant picks runner or fan, enters a name and a start number, answers five questions and gets a card with their runner type to download.
- Role
- Frontend developer
- Timeline
- 2026, July
The challenge
Build the quiz from the design in two days and embed it into the event site so that it does not depend on the page's styles and updates with no changes on its side.
What the solution includes
- Embedding with a single script: the loader takes the current files from version.json and mounts the app in Shadow DOM.
- Styles inside Shadow DOM: fonts are registered on the host page, CSS variables are carried over from :root, relative url() values are rewritten to absolute ones.
- A step-by-step quiz: a role choice with illustrations, a form with a gender switch, a name and a start number (or «No number yet»), questions with a counter.
- The result from the backend: a personal picture with the name and the number, a photo download and a retake.
- A responsive layout for phones.
A commercial team project: I built the whole frontend from a ready design. Screenshots are from a local build with test data; the names of the event and the brand are hidden.