React Technical Screen: Implement and Improve React Components

This technical screen assesses your ability to implement robust, accessible, and performant React components and applications. You will be asked to build two distinct features: a reusable rating component and a Todo application.

Assumptions and Setup

• Use React 18+ with functional components and hooks.
• You may choose to use JavaScript or TypeScript.
• Testing should be implemented with Jest + React Testing Library (RTL) or Vitest + RTL.
• No specific CSS framework is required; inline styles or simple CSS are acceptable.

Task 1: Reusable Rating Component

Implement a highly reusable rating component with the following features:

Display

• Configurable Icons: Allow the number of icons to be configured, with a default of 5.
• Half-Step Selection: Support optional half-step selection. The step increment should be configurable (default 1, allow 0.5).

Interactions

• Comprehensive Input Support: Handle mouse, touch, and keyboard interactions.
• Keyboard Navigation: Specifically support Arrow keys, Home/End, Enter/Space for selection.
• Focus Management: Implement proper focus management for accessibility and usability.

Accessibility

• ARIA Roles/Labels: Utilize appropriate ARIA roles and labels to convey component state and functionality.
• Screen-Reader Announcements: Ensure changes to the rating are announced to screen readers.

API

• Controlled and Uncontrolled Modes: Support both controlled (value, onChange) and uncontrolled (defaultValue) modes.
• State Management: Include readOnly and disabled props.
• Customization: Allow custom icon rendering.
• RTL Support: Ensure the component functions correctly in Right-to-Left (RTL) locales.

Tests

• Unit Tests: Include basic unit tests for the component's functionality.

Task 2: Todo Application

Implement a Todo application with the following requirements:

Core Features

• CRUD Operations: Allow users to add, edit, delete, and toggle completion status of tasks.
• Filtering: Provide options to filter tasks by "All", "Active", and "Completed" states.
• Batch Action: Implement a "Clear completed" action.

Persistence and States

• Local Storage: Persist the application's state to localStorage.
• Error Handling: Handle empty and error states gracefully.

Architecture

• React Hooks: Structure components and manage state primarily using React hooks.
• State Library Trade-offs: If you choose to use an external state management library, be prepared to discuss the trade-offs involved.

Tests

• Basic Tests: Include basic tests for the application's functionality.

Follow-Up Discussion

Be prepared to discuss how you would further improve the Todo application in the following areas:

• Performance: Strategies like memoization, list virtualization, and debounced updates.
• Accessibility: Enhancing labels, keyboard shortcuts, and live announcements.
• User Experience (UX): Features such as inline editing, due dates, and drag-and-drop functionality.
• Scalability: Integrating with an API, including considerations for optimistic updates.
• Code Quality: Best practices including TypeScript/PropTypes, error boundaries, and a comprehensive testing strategy.