Rating System: Build an Interactive Star-Rating Component with Hover and Submission State

Question

## Round 1 - Frontend

## Problem

Build a `StarRating` component in React. It renders 5 stars. On hover, stars up to the hovered index light up. On click, the rating is locked in and a confirmation message appears. Provide a callback `onRate(rating: number)` prop.

```tsx
function StarRating({
  onRate,
  defaultRating = 0,
}: {
  onRate: (rating: number) => void;
  defaultRating?: number;
}) {
  // implement
}
```

**Requirements:**
- Hover state is separate from submitted state.
- After submission the stars are read-only.
- Stars are keyboard-accessible (arrow keys change selection, Enter submits).
- No external icon library; use Unicode stars or SVG.

## Follow-ups
1. How do you make the component controlled vs. uncontrolled? Which is better for a form?
2. Add half-star precision. How does the event handling change?
3. The rating must round-trip from a backend. How do you handle a stored value of `3.7` -- snap to nearest half?
4. Write a unit test using React Testing Library that verifies clicking the 4th star fires `onRate(4)`.

Rating System: Build an Interactive Star-Rating Component with Hover and Submission State

Question Details

Full Details

Topics

More from Sofi