Build Connect Four | Interview Question

Q: Build Connect Four

**Target Audience:** Frontend candidates preparing for a machine coding round. Comfortable with React components, props and useState ; no game-programming background needed. **Difficulty:** Hard > **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. Excerpts come from the runnable solution on this page, and the Verified section quotes what it printed on React 19.3.1 when a driver played real games. ## 1. Why This Even Matters — A Story First Connect Four is Tic-Tac-Toe that obeys gravity. You never choose a *cell*; you choose a *column* and let the disc fall. That one change is what makes the question interesting: the player's input (a column) is not the same as the thing that changes (a slot at the bottom of the stack), and your code has to translate between them. Think of a vending machine coil. You press "column 3", the machine works out whic

The problem

Question presented to candidate: "Build Connect Four for two players on one screen. It is a 7 column by 6 row board standing upright: you pick a column, the disc falls to the lowest free spot, and the first player to line up four discs in any direction wins. Show whose turn it is, highlight the winning four, and handle full columns and a full board."

Requirements:

A 7 x 6 board; Red moves first, then Red and Yellow alternate.
Choosing a column drops the disc into the lowest empty slot of that column; a full column refuses the move.
Detect four in a row horizontally, vertically or on either diagonal, and highlight those four discs.
Detect a draw when all 42 slots are filled with no winner.
A status line, a screen-reader announcement of each move, and a New game button.

What a strong answer should cover:

Board representation (a flat array or rows of columns) and the "lowest empty row" gravity function.
A win check that only looks at lines through the disc just dropped: 4 directions, both ways, O(1) for a fixed board.
Immutable updates: each drop returns a new game object; illegal drops return the same one.
Draw detection by move count, and turn switching that stops on a win.
Accessible input: one button per column with a label like "Column 3, 4 empty", and focus that survives a column filling up.

Clarifying questions expected:

"Should the board size and the number to connect be configurable?"
"Do you want a drop animation, or is an instant drop fine for now?"
"Is undo or a move history needed?"

Code / implementation expected: Yes. A working board with gravity and win detection; the interviewer usually asks you to explain the win check and its cost.

React
Game
Algorithms

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. Comfortable with React components, props and useState; no game-programming background needed. Difficulty: Hard

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. Excerpts come from the runnable solution on this page, and the Verified section quotes what it printed on React 19.3.1 when a driver played real games.

1. Why This Even Matters — A Story First

Connect Four is Tic-Tac-Toe that obeys gravity. You never choose a cell; you choose a column and let the disc fall. That one change is what makes the question interesting: the player's input (a column) is not the same as the thing that changes (a slot at the bottom of the stack), and your code has to translate between them.

Think o

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 Column from "./src/components/Column";
import {
  COLS,
  announce,
  columnLabel,
  drop,
  isOver,
  landingRow,
  newGame,
  statusText,
} from "./src/utils/connect4";

export default function App() {
  const [game, setGame] = useState(newGame);
  const over = isOver(game);
  const winLine = game.winner ? game.winner.line : [];

  return (
    <main className="c4">
      <h1>Connect Four</h1>
      <p
        className={"status " + game.current.toLowerCase()}
        data-testid="status"
      >
        {statusText(game)}
      </p>
      <div
        className="grid"
        role="group"
        aria-label="Connect Four board, 7 columns by 6 rows"
      >
        {Array.from({ length: COLS }, (_, col) => (
          <Column
            key={col}
            col={col}
            board={game.board}
            winLine={winLine}
            label={columnLabel(game, col)}
            disabled={over || landingRow(game.board, col) === -1}
            onDrop={(c) => setGame((g) => drop(g, c))}
          />
        ))}
      </div>
      <p className="sr-only" data-testid="announce" aria-live="polite">
        {announce(game)}
      </p>
      <button
        type="button"
        className="restart"
        data-testid="restart"
        onClick={() => setGame(newGame())}
      >
        New game
      </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.