Build an Avatar Group | Interview Question

Q: Build an Avatar Group

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML, CSS and JavaScript; React ideas are explained as they come up. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output comes from mounting the solution with React 19.3.1 inside <StrictMode> in jsdom. jsdom never downloads images and has no layout, so the image error was fired by the driver and the overlap itself was not measured; the doc says where. ## 1. Why This Even Matters — A Story First Think of the photo board outside a team's office: a row of faces, slightly overlapping so the whole team fits on one strip, with "and 3 others" at the end. One person never sent a photo, so there is a card with their initials instead. You glance at it and know who works there. An avatar group is that strip. It is an easy question with a surprising number of small decisions: how many to show and wha

The problem

Question presented to candidate: "On our project cards we want to show who is on the team as a row of small overlapping profile pictures. Show at most four, then a +N bubble for the rest. Some people have no photo, and some photo URLs are broken, so fall back to their initials. Hovering or focusing an avatar should show the person's name, and clicking +N should list the hidden people."

Requirements:

Overlapping circular avatars; the first one sits on top.
At most max (4) avatars, then a +N bubble; never a +1 bubble (just show the last person).
Photo when available; initials on a colour derived from the name when there is no photo or the image fails to load.
A name tooltip on hover and on keyboard focus.
The +N bubble is a button that toggles a list of the hidden names; Escape closes it.

What a strong answer should cover:

Slicing into visible and hidden people as derived values from people and max, including the +1 rule.
Image error handling with an onError / @error / (error) handler and per-avatar failed state that resets when the URL changes.
Initials and a deterministic colour from the name; handling single names and extra spaces.
Stacking with a negative margin and explicit z-index, plus a raised z-index for the hovered avatar so its tooltip is not covered.
Accessibility: each avatar exposed as one labelled image (role="img" + aria-label), a list with a count label, and a real button for +N with aria-expanded.

Clarifying questions expected:

"Should the +N bubble be interactive, or is a tooltip with the names enough?"
"Which avatar should be on top: the first or the last?"
"Do avatars link to profiles?"

Code / implementation expected: Yes. A reusable avatar group with an avatar child component (or equivalent) in the framework of your choice.

React
UI
Avatars

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: Beginners preparing for a frontend machine coding round. Assumes basic HTML, CSS and JavaScript; React ideas are explained as they come up. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts. The Verified output comes from mounting the solution with React 19.3.1 inside <StrictMode> in jsdom. jsdom never downloads images and has no layout, so the image error was fired by the driver and the overlap itself was not measured; the doc says where.

1. Why This Even Matters — A Story First

Think of the photo board outside a team's office: a row of faces, slightly overlapping so the whole team fits on one strip, with "and 3 others" at the end. One person never sent a photo, so there is a card with their initials instead. You glance at it and know who works there.

An avatar group is that strip. It is an easy ques

The solution is hidden so you can try first

10 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 AvatarGroup from "./src/components/AvatarGroup";
import { people } from "./src/data/people";

export default function App() {
  return (
    <main className="app">
      <h1>Avatar group</h1>
      <section className="card" data-testid="team">
        <h2>Project team</h2>
        <AvatarGroup people={people} max={4} label="Project team" />
      </section>
      <section className="card" data-testid="small">
        <h2>Reviewers</h2>
        <AvatarGroup people={people.slice(0, 5)} max={4} label="Reviewers" />
      </section>
    </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.