Implement a React flag loader with typewriter effect

Q: Implement a React flag loader with typewriter effect

This question evaluates front-end engineering skills including React and TypeScript component design, DOM inspection and extraction, HTTP fetching and parsing, asynchronous timing for typewriter animations, resource cleanup, and testability with Mocha; domain: Software Engineering Fundamentals; level: practical application.

Q: How do I approach Software Engineering Fundamentals interview questions?

Software Engineering Fundamentals questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master software engineering fundamentals interviews.

Q: What difficulty level is this interview question?

This is a medium difficulty Software Engineering Fundamentals question, commonly asked during Take-home Project rounds at Ramp.

Q: What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Ramp during technical interviews.

Question

Scenario

You are given a small React + TypeScript project with a Mocha test runner (and an autograder). The task is a practical front-end mini-project (not algorithm-heavy).

Requirements

Implement a React component (and any helper utilities you need) to retrieve and display a hidden flag.

1) Retrieve the flag

Support both retrieval modes:

DOM mode: Extract the flag from the current document.
- The flag is stored in an element that matches:
  - data-flag="..." (attribute contains the full flag string), OR
  - an element with id="flag" whose textContent is the flag.
- The element may be hidden (e.g., display:none , hidden , etc.). You must still find it.
HTTP mode: Fetch the flag from a URL.
- GET <flagUrl> returns either:
  - JSON: { "flag": "FLAG{...}" } , or
  - plain text: FLAG{...}

2) Display the flag using a typewriter effect

Once the flag is obtained, display it character-by-character in the UI.

Render output in a container like: <div data-testid="flag-output">...</div>
Typewriter speed: one character every 50ms (you may expose this as a prop for testability).
When typing finishes, the full flag must remain visible.

3) Ensure the animation runs only once

Even if the component re-renders (state/props changes), the typewriter animation must not restart once it has completed.

4) Engineering constraints

Avoid memory leaks: timers and in-flight requests must be cleaned up on unmount.
Be mindful of browser vs Node test environments (e.g., document may not exist in some tests).

5) Testing (Mocha + TypeScript)

Write Mocha tests (or structure your code so it passes an autograder) to validate:

DOM extraction works for both data-flag and #flag cases.
HTTP mode parses both JSON and plain-text responses.
Typewriter effect reveals characters over time and completes.
Animation runs only once (does not restart after re-render).

Deliverables

A React component (e.g., FlagViewer ) and helper functions.
Mocha tests (or equivalent verification hooks) ensuring the behavior above.