Frontend Mentor - Interactive rating component solution

This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Instructions
• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Instructions

To run this project in your local environment, do the following:

1. Clone this repository git clone https://github.com/SeJunB/interactive-rating-component
2. cd interactive-rating-component && npm install
3. npm run dev

To run the tests in Cypress, do the following:

1. Execute command npx cypress open
2. Click "Component Testing"
3. Select a browser and click "Start Component Testing". This should open a new browser window.
4. Click "Specs" -> "App.cy.tsx" to run the tests.

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Select and submit a number rating
• See the "Thank you" card state after submitting a rating

Links

• Solution URL: https://github.com/SeJunB/interactive-rating-component
• Live Site URL: https://sejunb.github.io/interactive-rating-component/

My process

Built with

• HTML5
• React
• Tailwind CSS
• Testing done with cypress

What I learned

• CSS Mask Property
• Component Composition and Prop Drilling, an anti-pattern
• Cypress

Useful resources

• mask property - Introduced me to the mask property and how we can use this to "color" svg.

Author

• Frontend Mentor - @SeJunB