Build Wordle | Interview Question

Q: Build Wordle

**Target Audience:** Frontend developers preparing for a machine coding round. You know React components and useState ; the game rules and the scoring algorithm are explained from zero. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The Verified section is real output from booting the solution on React 19.3.1 in StrictMode and typing guesses into it with a script. ## 1. Why This Even Matters — A Story First A friend thinks of a five-letter word. You guess "speed". For each letter they hold up a coloured card: green means right letter, right place; yellow means the letter is in the word but elsewhere; grey means it is not there. Six guesses to get it. Now the friend's word is "abide", which has **one** E. Your "speed" has **two**. Should both Es be yellow? A careful friend says no: there is only one E to find, so on

The problem

Question presented to candidate: "Build a Wordle clone. The player has six tries to guess a five-letter word. After each guess, colour every letter: green if it is in the right spot, yellow if it is in the word but somewhere else, grey if it is not in the word. Support the physical keyboard and an on-screen keyboard that shows the best colour found for each letter."

Requirements:

A 6 by 5 grid; letters fill the current row as the player types; Backspace deletes; Enter submits.
Reject guesses that are too short ("Not enough letters") or not in the word list ("Not in word list") without using up a try.
Score each guess with correct duplicate-letter rules (for example guess "speed" against the answer "abide" gives one yellow E, not two).
An on-screen keyboard that types too and shows each letter's best state (green beats yellow beats grey).
Win and loss messages; the answer is revealed on a loss; New game picks another word.

What a strong answer should cover:

A pure score(guess, answer) with the two-pass algorithm: mark exact matches first, count the remaining answer letters, then hand out yellows left to right while copies remain.
Tricky test cases: "speed" vs "abide", "geese" vs "those", "lolly" vs "hello".
One applyKey entry point shared by the physical and the on-screen keyboard; a window keydown listener that ignores Ctrl, Meta and Alt combinations.
Game state as one object (guesses, current text, status, message), with the board rows and keyboard colours derived.
Injected randomness for picking the answer (a seeded RNG), and accessible output (row labels, a live region for messages).

Clarifying questions expected:

"Where do the answers and the list of allowed guesses come from, and how big are they?"
"Do you want hard mode, where revealed hints must be reused?"
"Should the game persist across reloads, or be one word per day?"

Code / implementation expected: Yes. A playable game in the framework of your choice, with the scoring function separate and tested on duplicate-letter cases.

Games
Keyboard
State

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend developers preparing for a machine coding round. You know React components and useState; the game rules and the scoring algorithm are explained from zero. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The Verified section is real output from booting the solution on React 19.3.1 in StrictMode and typing guesses into it with a script.

1. Why This Even Matters — A Story First

A friend thinks of a five-letter word. You guess "speed". For each letter they hold up a coloured card: green means right letter, right place; yellow means the letter is in the word but elsewhere; grey means it is not there. Six guesses to get it.

Now the friend's word is "abide", which has one E. Your "speed" has two. Should both

The solution is hidden so you can try first

11 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useEffect, useState } from "react";
import Board from "./src/components/Board";
import Keyboard from "./src/components/Keyboard";
import {
  FIRST_SEED,
  applyKey,
  boardRows,
  createGame,
  isGameKey,
  letterStates,
} from "./src/utils/wordle";

export default function App() {
  const [game, setGame] = useState(() => createGame(FIRST_SEED));
  const onKey = (key) => setGame((g) => applyKey(g, key));

  useEffect(() => {
    const handler = (e) => {
      // leave browser shortcuts alone
      if (e.ctrlKey || e.metaKey || e.altKey) return;
      // the button click handles it
      if (e.target instanceof HTMLButtonElement && e.key === "Enter") return;
      if (isGameKey(e.key)) {
        e.preventDefault();
        setGame((g) => applyKey(g, e.key));
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, []);

  return (
    <main className="wordle">
      <div className="top">
        <span data-testid="game">Game #{game.seed}</span>
        <h1>WORDLE</h1>
        <button
          type="button"
          onClick={() => setGame((g) => createGame(g.seed + 1))}
        >
          New
        </button>
      </div>
      <Board rows={boardRows(game)} guesses={game.guesses} />
      <p className="message" role="status" data-testid="message">
        {game.message}
      </p>
      <Keyboard states={letterStates(game.guesses)} onKey={onKey} />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.