Skip to content

A Star rating component built with React/TypeScript, Tailwindcss and some system design in the mix

Notifications You must be signed in to change notification settings

ronnypdev/Star-Rating-Component

Repository files navigation

Start Rating Component

About the Challenge

In this frontend challenge, you'll build a Star Rating Component. This challenge is perfect for you if you're interested in building front-end web components and taking your front-end skills to the next level!

You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this might be a great way to push yourself.

Challenge Requirements

  • The Star Rating component should display a set of stars that can be clicked or hovered over to select a rating.
  • The component should be customizable, with an option to change the number of stars to be displayed.
  • When the user clicks on a star to select a rating, the rating should be updated, and a corresponding message should be displayed.
  • The component should ensure that hovering over the third star after selecting the fourth star highlights only the first, second and third stars.
  • Show the hover state of all the elements.
  • The component should be responsive and display correctly on different screen sizes.
  • Make this landing page look as close to the design as possible.

(Bonus)

The component should allow users to select half-ratings (e.g., 4.5 stars).

About

A Star rating component built with React/TypeScript, Tailwindcss and some system design in the mix

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published