Build Tic-Tac-Toe | Interview Question

Q: Build Tic-Tac-Toe

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic HTML, CSS and JavaScript and a first look at React components; no game-programming background needed. **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. All code excerpts are copied from the runnable solution on this page, and the Verified section quotes what that solution printed when a test driver clicked through real games on React 19.3.1. ## 1. Why This Even Matters — A Story First Picture two kids playing Tic-Tac-Toe on a napkin. Nobody writes down "it is O's turn now" or "nobody has won yet". They just look at the napkin. If there are as many Xs as Os, X goes next. If three marks line up, the game is over. Everything you need to know is already *on the paper*. That is the whole lesson of this question. A weak solution keeps a pile of

The problem

Question presented to candidate: "Build a playable Tic-Tac-Toe game for two people sharing one screen. Show a 3 by 3 board, let X and O take turns, announce the winner or a draw, highlight the winning line, and give me a way to start again. Keep the game rules testable on their own."

Requirements:

A 3 x 3 board of clickable cells; X always moves first, then the players alternate.
A filled cell cannot be played again, and no moves are accepted once the game is over.
Detect a win (three in a row, column or diagonal) and highlight the winning cells; detect a draw when the board is full.
A status line: whose turn it is, who won, or that it is a draw.
A Restart button that clears the board.

What a strong answer should cover:

A minimal state model: the nine cells are the only state; whose turn it is, the winner and the draw are derived from them.
The win check as a list of the 8 winning lines, written as a pure function outside the component.
Immutable updates: a move returns a new board array instead of changing the old one.
Guarding illegal moves in the logic, not only by disabling buttons.
Accessibility: real buttons, a label per cell that includes its contents, and a status region that screen readers announce.
How it would extend: move history and time travel, bigger boards, a computer opponent.

Clarifying questions expected:

"Is it two humans on one device, or should one side be a computer player?"
"Do you want move history or undo, or just restart?"
"Should the board size be fixed at 3 x 3?"

Code / implementation expected: Yes. A working component in the chosen framework, with the win check as a separate pure function, in about 30-40 minutes.

React
Game
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 candidates preparing for a machine coding round. Assumes basic HTML, CSS and JavaScript and a first look at React components; no game-programming background needed. 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. All code excerpts are copied from the runnable solution on this page, and the Verified section quotes what that solution printed when a test driver clicked through real games on React 19.3.1.

1. Why This Even Matters — A Story First

Picture two kids playing Tic-Tac-Toe on a napkin. Nobody writes down "it is O's turn now" or "nobody has won yet". They just look at the napkin. If there are as many Xs as Os, X goes next. If three marks line up, the game is over. Everything you need to know is already *on

The solution is hidden so you can try first

13 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 { useState } from "react";
import Board from "./src/components/Board";
import { emptyBoard, getWinner, getStatus, isDraw, playMove } from "./src/utils/game";

export default function App() {
  // The only state: nine cells. Everything else is derived on each render.
  const [board, setBoard] = useState(emptyBoard);

  const win = getWinner(board);
  const status = getStatus(board);
  const gameOver = Boolean(win) || isDraw(board);

  return (
    <main className="ttt">
      <h1>Tic-Tac-Toe</h1>
      <p className="status" data-testid="status" aria-live="polite">
        {status}
      </p>
      <Board
        board={board}
        winLine={win ? win.line : []}
        gameOver={gameOver}
        onPlay={(i) => setBoard((b) => playMove(b, i))}
      />
      <button
        type="button"
        className="restart"
        data-testid="restart"
        onClick={() => setBoard(emptyBoard())}
      >
        Restart
      </button>
    </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.