<aside> 📦 Starter kit: github.com/Figr-design/frontend-engineer-assignment
Submit here: join.figr.design/r/kdqVkj
</aside>
You're building the viewer for a design tool. A board shows live previews of web pages. Each preview is an <iframe> showing a page served from a different origin than your app. Users point at elements inside any preview. Your app, the page that contains the previews (the "host"), draws the outlines and labels on top of each preview. It also shows a layers panel and an inspector for whatever is selected.
Use any framework, language, library, AI tool or workflow you like.
Fork the starter kit and run the backend with Node 18+: npm run backend
http://localhost:4001: page-1.html to page-6.html, plus page-6-next.html, which page 6 links to. You may add one <script> tag to each page. You may not change anything else in them.http://localhost:4000. Every route accepts ?latency=<ms>&fail=<0..1>. A failed request returns either a 5xx or a 200 with a malformed body.
GET /screens returns [{ id, name, url }]: 24 screens, which reuse the 6 pages.GET /elements/:key returns { component, description, status, owner } for elements that carry a data-key attribute. It returns 404 when there are no details for that key.report(error, context) in frontend/report.js: a stub error reporter that logs every call.<html> and <body>.data-name if it has one, otherwise tag plus first class (button.primary) or tag plus id (div#hero), otherwise the tag alone.GET /screens as a preview, 1280×800 each, in a grid, with the screen name above it.