Star Rating Challenge

Problem Description

Create a reusable star rating component that allows users to select a rating between 1 and 5 stars. The component should provide both interactive functionality and visual feedback.

Requirements

• The component must accept a rating prop, which specifies the current rating as a number (1-5).
• It should provide an onChange prop, a callback function that is invoked whenever the user changes the rating.
• Stars should have three visual states:
  1. Empty (default/unselected state)
  2. Filled (selected state)
  3. Highlighted (hover state)
• While hovering over a star, all stars up to the hovered one should visually indicate the hover state by changing color to yellow.
• Clicking on a star should update the rating corresponding to the clicked star.

Example Usage

Bonus

• Add animation/transition effects when changing star states
• Accessibility Features:
  • The component should be navigable using keyboard (Arrow keys)
  • Implement proper ARIA labels and roles for screen readers
• Make the component customizable (size, number of stars)
• Write unit tests (eg: using vitest)

Getting Started

You can create a new project or use our CLI tool to use the starter template.

First Time Setup

Start Working

Solution

To view the reference solution:

How to Review Your Solution

• axe-core is pre-integrated in the starter template. To use it:

1. Open your browser's Developer Tools (F12)
2. Check the Console tab while using your app
3. Review and fix accessibility errors that appear (ignore minor errors)

• Test your app with keyboard to ensure full keyboard navigation (if applicable)

• Add ARIA labels to make your app understandable by screen readers

• Use Claude for a final accessibility & quality check.

  Example Prompt for Claude:

  Then paste your code..

How to Share Your Solution

If you used the CLI tool

1. Fork the frontend-challenges repository
2. Add your fork as a new remote to your existing solution:

3. Open a pull request (PR) from your fork to the main repository.

If you started from scratch

1. Fork the frontend-challenges repository and clone it
2. Navigate to the solution directory:

3. Add your solution files in this directory
4. Push your changes to your fork
5. Open a pull request (PR) to contribute your solution

Need help?

• Follow this guide to making a pull request to an open-source project
• OR, create an issue at frontend-challenges