Build an Image Gallery with lightbox | Interview Question

Q: Build an Image Gallery with lightbox

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes basic React (`useState`, props, refs); dialogs, focus management and portals are explained from zero. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain words, then tagged with 📌 Interview term: so you learn the vocabulary an interviewer expects. The output in section 6 was produced by running the solution on React 19.3.1 in jsdom and in headless Chromium 141. ## 1. Why This Even Matters — A Story First Picture a museum. The gallery wall holds small framed prints; when something catches your eye, a guide takes you into a quiet viewing room with the full-size piece, a label, and doors to the previous and next rooms. When you leave, the guide walks you back to the exact print you came from, not to the museum entrance. A lightbox is that viewing room. The grid is the wall. The hard parts are the guide's manners: take the visitor in (move focus into the d

The problem

Question presented to candidate: "Build a photo gallery page: a responsive grid of thumbnails, and clicking one opens it full screen in a lightbox. In the lightbox the user can go to the previous or next photo, use the arrow keys, see a caption and a '3 / 9' counter, and close it with Escape, a close button or a click on the dark background. It must be usable with a keyboard and a screen reader."

Requirements:

A CSS grid of thumbnail buttons that reflows from one column on a phone to many on a desktop.
A lightbox overlay with the large photo, caption, counter, previous / next (wrapping) and close.
Keys inside the lightbox: Left / Right, Escape, and Tab that stays inside the dialog.
Opening moves focus into the dialog; closing returns focus to the thumbnail that opened it.
The page behind does not scroll while the lightbox is open; neighbouring photos are preloaded.

What a strong answer should cover:

One piece of shared state, the open index (or null for closed), owned by the gallery and passed to the lightbox: a controlled component.
Dialog semantics: role="dialog", aria-modal="true", aria-labelledby pointing at the caption.
Focus management: initial focus, a focus trap for Tab and Shift+Tab, and focus restore on close.
Scroll lock that saves and restores the previous body overflow, and cleanup on unmount.
Rendering the overlay at the end of body (portal / Teleport) or an equivalent, and why stacking contexts make that useful.
Preloading neighbours with new Image() and lazy-loading thumbnails.

Clarifying questions expected:

"Should the browser Back button close the lightbox (URL state), and should a photo be linkable?"
"Do we need swipe or pinch-zoom on touch devices?"
"Can we use the native <dialog> element, or must it support older browsers?"

Code / implementation expected: Yes. A gallery and lightbox component with keyboard support, focus trap and restore, scroll lock and wrap-around navigation.

React
Gallery
Lightbox

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 React (useState, props, refs); dialogs, focus management and portals are explained from zero. Difficulty: Medium

How to read this doc: Each idea is explained in plain words, then tagged with 📌 Interview term: so you learn the vocabulary an interviewer expects. The output in section 6 was produced by running the solution on React 19.3.1 in jsdom and in headless Chromium 141.

1. Why This Even Matters — A Story First

Picture a museum. The gallery wall holds small framed prints; when something catches your eye, a guide takes you into a quiet viewing room with the full-size piece, a label, and doors to the previous and next rooms. When you leave, the guide walks you back to the exact print you came from, not to the museum entrance.

A lightbox is that viewing room. The grid is the w

The solution is hidden so you can try first

11 min read · 10 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 Gallery from "./src/components/Gallery";
import { photos } from "./src/data/photos";

export default function App() {
  return (
    <main className="app">
      <h1>Photo gallery</h1>
      <p className="hint">
        Click a photo. In the lightbox use the arrows or Left / Right keys, Esc
        or the backdrop to close.
      </p>
      <Gallery items={photos} />
    </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.