Build a Poll / Voting widget | Interview Question

Q: Build a Poll / Voting widget

**Target Audience:** Beginners to intermediate React developers. Assumes you know what a component and `useState` are; everything else, including how to make percentages add up, is explained from zero. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer expects. The Verified output was printed by the real solution in React 19.3.1 under `StrictMode` in jsdom, driven by a script that clicks the radios and the Vote button. This is the fundamentals version; the live, persisted version with confetti is [Build a Poll Widget with Live Results & Confetti](/interview-question/build-a-poll-widget-with-live-results-confetti). ## 1. Why This Even Matters — A Story First Think of a show of hands in a classroom. The teacher asks "pizza or pasta for the class party?", counts the hands, and writes the result on the board. Three rules make it fair: everyone gets one vote, the counts on the board mus

The problem

Question presented to candidate: "Build a small poll widget: a question, four options and a Vote button. After voting, the user sees each option's share as a bar with a percentage and a count, their own choice highlighted, and the total. A user must not be able to vote twice."

Requirements:

Options start with existing vote counts; the user picks one option, then submits.
The Vote button is disabled until something is selected.
After voting: results view with a bar, percentage and count per option, "your vote" marker and the total. Bars animate their width with CSS.
One vote only: the voting controls disappear, and the vote function itself refuses a second vote (even two clicks in the same tick).
Percentages are whole numbers that add up to exactly 100.

What a strong answer should cover:

Separating state (counts, chosen option, voted option) from derived values (total, percentages), which are computed, never stored.
Updating counts immutably and guarding the vote with the latest state, not a stale value.
Why Math.round can give 99 or 101 and how the largest remainder method fixes it.
Native radio inputs in a fieldset with a legend for free keyboard support and screen-reader grouping.
Results announced politely and bars marked decorative because the text already says the number.

Clarifying questions expected:

"Should results be visible before voting, or only after?"
"Can a user change their vote, or is it final?"
"Does the vote need to survive a reload or be saved to a server in this version?"

Code / implementation expected: Yes. A working widget with the single-vote rule and correct percentages.

React
State
Data

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 to intermediate React developers. Assumes you know what a component and useState are; everything else, including how to make percentages add up, is explained from zero. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer expects. The Verified output was printed by the real solution in React 19.3.1 under StrictMode in jsdom, driven by a script that clicks the radios and the Vote button. This is the fundamentals version; the live, persisted version with confetti is Build a Poll Widget with Live Results & Confetti.

1. Why This Even Matters — A Story First

Think of a show of hands in a classroom. The teacher asks "pizza or pasta for the class party?", counts the hands, and writes the result on t

The solution is hidden so you can try first

9 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 Poll from "./src/components/Poll";

const OPTIONS = [
  { id: "react", label: "React", votes: 12 },
  { id: "vue", label: "Vue", votes: 7 },
  { id: "angular", label: "Angular", votes: 5 },
  { id: "svelte", label: "Svelte", votes: 3 },
];

export default function App() {
  return (
    <main className="app">
      <Poll
        question="Which framework do you reach for first?"
        options={OPTIONS}
      />
    </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.