Build a Poll Widget with Live Results & Confetti | Interview Question

Q: Build a Poll Widget with Live Results & Confetti

**Target Audience:** React developers who can already build a basic poll and want the production version: live data, optimistic updates, persistence and a small hand-made animation. If percentages and single-vote guards are new, start with [Build a Poll / Voting widget](/interview-question/build-a-poll-voting-widget). **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output was printed by the real solution in React 19.3.1 under `StrictMode` in jsdom, against a simulated server that pushes a vote from "other people" every 1000 ms. Nothing touches the network. ## 1. Why This Even Matters — A Story First Imagine a live TV talent show. Votes come in from viewers the whole time and the bars on screen keep creeping. You text your vote; the bar for your act jumps at once and a little firework plays. But suppose your phone network rejected the text. The show must take back **your** vote, and only yours. If it

The problem

Question presented to candidate: "Our team-lunch poll shows results live as colleagues vote. Build the widget: results update by themselves, your vote appears instantly and is saved to the server, a failed save rolls back cleanly, the widget remembers that you voted after a reload, and a successful vote gets a little confetti burst. No animation libraries."

Requirements:

Load the poll from a simulated server (no network); show a loading state.
Subscribe to live votes from other people (pushed as "someone voted for X") and update counts, percentages and total as they arrive; unsubscribe on unmount.
One-click voting on an option: optimistic +1, pressed and disabled states, a "Saving your vote..." status.
On server failure: undo only your own +1 (keep live votes that arrived meanwhile), show an error, re-enable voting. A "make the next vote fail" toggle demonstrates it.
On success: persist the chosen option in localStorage under the poll id, restore it on mount, and play a hand-made confetti burst (about 30 CSS-animated pieces, removed afterwards, skipped for reduced motion).

What a strong answer should cover:

Why rollback must apply an inverse delta rather than restore a snapshot when live updates are flowing.
Subscribing after the initial snapshot loads, guarding against unmount before load, and cleaning up the subscription (including under React StrictMode).
Persisting only what the server accepted, with localStorage wrapped in try/catch.
A confetti effect built from spans, CSS custom properties and one keyframe; aria-hidden, pointer-events: none, cleanup of its timer and a prefers-reduced-motion check.
Accessible live data: announce your own result and errors, not every pushed vote.

Clarifying questions expected:

"Does the server push deltas or full snapshots? That changes how rollback and reconciliation work."
"Should results be visible before voting, or hidden to avoid bias?"
"Is localStorage enough to stop repeat votes, or does the server enforce one vote per user?"

Code / implementation expected: Yes. A working widget with the simulated live server, optimistic vote with rollback, persistence and confetti.

React
Poll
Widget
Animation
Optimistic

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: React developers who can already build a basic poll and want the production version: live data, optimistic updates, persistence and a small hand-made animation. If percentages and single-vote guards are new, start with Build a Poll / Voting widget. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. The Verified output was printed by the real solution in React 19.3.1 under StrictMode in jsdom, against a simulated server that pushes a vote from "other people" every 1000 ms. Nothing touches the network.

1. Why This Even Matters — A Story First

Imagine a live TV talent show. Votes come in from viewers the whole time and the bars on screen keep creeping. You text your vote; the bar for your act jumps at once and a little firework plays. But suppose your phone

The solution is hidden so you can try first

12 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 LivePoll from "./src/components/LivePoll";
import { server } from "./src/api/pollServer";

export default function App() {
  // Changing the key unmounts and remounts the widget: a cheap "page reload".
  const [mountKey, setMountKey] = useState(0);
  return (
    <main className="app">
      <LivePoll key={mountKey} server={server} />
      <button
        className="link"
        data-testid="remount"
        onClick={() => setMountKey((k) => k + 1)}
      >
        Remount widget (simulates a reload)
      </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.