Build a simplified Wordle game in React

Q: Build a simplified Wordle game in React

This question evaluates a candidate's competency in React-based front-end development, covering component design, state management, asynchronous HTTP fetching, keyboard and form input handling, UI rendering, and algorithmic game logic such as per-letter feedback and duplicate-letter handling.

Q: How do I approach Coding & Algorithms interview questions?

Coding & Algorithms questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master coding & algorithms interviews.

Q: What difficulty level is this interview question?

This is a medium difficulty Coding & Algorithms 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

Loading...

Problem: Implement a simplified Wordle in React

Build a small Wordle-like game UI using React.

Requirements

The game chooses a single answer word by fetching it from an HTTP endpoint:
- The endpoint URL is obtained from Question 1 (treat it as given here).
- Assume the endpoint returns a JSON payload containing the answer word (e.g., { "answer": "react" } ) or a plain text word (state your assumption in code).
The answer word length is fixed (commonly 5), and the player has a fixed number of attempts (commonly 6).

Gameplay

The player enters guesses one row at a time.
On submitting a guess:
- If the guess length is not exactly the answer length, show an error or ignore submission.
- Otherwise compute per-letter feedback:
  - Correct : letter is in the correct position.
  - Present : letter exists in the answer but in a different position.
  - Absent : letter not in the answer.
- Handle duplicate letters correctly (Wordle-style counting).
End conditions:
- If the guess equals the answer → player wins, stop accepting further input.
- If attempts are exhausted → player loses, reveal the answer.

UI expectations (flexible, but must be testable)

Render a grid of attempts × word length.
Render current typing state and committed guesses.
Provide either:
- an on-screen keyboard, or
- capture physical keyboard input (letters, Backspace, Enter).

Deliverable

Implement the React component(s) and supporting logic so the game works end-to-end (fetch answer → play rounds → render feedback).

Notes

You may use React hooks ( useState , useEffect , etc.).
No need for styling beyond what is required for functional rendering.