React Technical Screen: Build a Rating Component and a Todo App

Assumptions and Setup

• Use React 18+ with functional components and hooks.
• Use JavaScript or TypeScript (you may choose).
• Testing with Jest + React Testing Library (or Vitest + RTL).
• No CSS framework required; inline styles or simple CSS are fine.

Task 1 — Reusable Rating Component

Implement a reusable rating component with the following features:

1. Display

• Configurable number of icons (default 5).
• Optional half-step selection (configurable step; default 1, allow 0.5).

2. Interactions

• Mouse, touch, and keyboard (Arrow keys, Home/End, Enter/Space).
• Proper focus management.

3. Accessibility

• Appropriate ARIA roles/labels.
• Screen-reader announcements of changes.

4. API

• Controlled and uncontrolled modes: value, defaultValue, onChange.
• readOnly and disabled support.
• Custom icon rendering.
• RTL support.

5. Tests

• Include basic unit tests.

Task 2 — Todo Application

Implement a Todo application with:

1. Core Features

• Add, edit, delete, and toggle completion of tasks.
• Filter by All / Active / Completed.
• "Clear completed" action.

2. Persistence and States

• Persist state to localStorage.
• Handle empty and error states.

3. Architecture

• Structure components and manage state with React hooks.
• If you use a state library, explain trade-offs.

4. Tests

• Include basic tests.

Follow-Ups

Discuss how you would further improve the Todo app in terms of:

• Performance: memoization, list virtualization, debounced updates.
• Accessibility: labels, keyboard shortcuts, live announcements.
• UX: inline editing, due dates, drag-and-drop.
• Scalability: API sync with optimistic updates.
• Code quality: TypeScript/PropTypes, error boundaries, testing strategy.