Frontend Challenge — DOM Flag Extraction + React Wordle

The frontend OA: a React + TypeScript + Mocha challenge. Extract a hidden flag scattered across wildcard-attributed DOM nodes via a custom query selector, then build a simplified Wordle in React whose answer is fetched from the recovered URL. Requirements A React + TypeScript + Mocha take-home-style challenge (~90 minutes), graded by an automated harness. Tasks include: Recover a hidden value from the DOM. A URL/flag is split character-by-character and buried across deeply-nested elements with wildcard data-* attributes. Write a custom query selector that matches the pattern, where * means zero, one, or many characters. DOM shape: <section data-id="23*"> <article data-class="*45"> <div data-tag="*78*"> <b class="ref" value="<part of the URL>"></b> </div> </article> </section> Load the flag over HTTP inside a React component, then reveal it with a typewriter effect (one character at a time), ensuring the animation runs exactly once. Build a simplified Wordle in React whose target answer is fetched from the URL recovered in step 1. No styling required. Make the harness pass — Mocha + TS tests, with attention to browser-vs-Node environment differences and module-system quirks. Examples One assessment used SPEND as the secret word, five guesses, and five-letter input. Its reference implementation colored an exact-position match green, a letter present elsewhere yellow, and an absent letter red. Input was uppercased, stripped of non-letters, and truncated to five characters before submission. Notes The provided unit tests frequently do not pass out of the box, and the instructions don't explain how to make them pass. In at least one case the harness's own import/module syntax was broken: a file using CommonJS module.exports had to be switched to an ESM export { obj } to stop the test from erroring. Read the harness's imports before assuming your code is wrong. Passing every visible test has still ended in rejection, so document your reasoning and don't assume green tests guarantee a pass. Treat instructions like "only change this one string, don't touch anything else" literally first, and only deviate when the harness is provably broken. "Animation runs exactly once" points at React effect-dependency correctness (an effect that shouldn't re-fire on re-render) — a deliberate Hooks check. Preparation Implement a wildcard attribute-matching selector and a one-time typewriter reveal in a React component, testing that the effect fires exactly once. Build a minimal Wordle (guess grid + per-letter correct/present/absent state) that fetches its answer over HTTP, and practice wiring a Mocha + TS test that runs in both browser and Node contexts.