Interactive rating component using Grid, Animations, React, TS...

Hello there,

This is my #5 challenge 🎉 Is there anything I could optimize in my code? Any feedback is greatly appreciated 😊

I choose to do this project in TypeScript language and with the framework React and in to deepen my skills in these fields. This challenge also allowed me to deepen my knowledge of Grid and Styled Component for the layout part of this project.

I also challenged myself with this project to add some CSS animations to smoother the UI experience. I choose to add some animations for the entrance of the RatingCard and the ThankYouCard, as well as some animations for the submit button and the figure elements of the RatingCard, and finally for the shown of the alert message.

Here are some example of the other custom features I added to this project:

• ⭐ An animation on the star icon
• ⚠️ A custom alert message for the scoreboard component. When the user clicks the submit button without having selected a number, the button disappears and instead displays a "Please select a value" alert message.
• 📈 One more hover feature on figure inputs with transform: scale(1.10)

🤔 With the border-radius property the branchs of the star icon are a little bit cut, is anyone have an any to how fix this please ?

Thank you for reviewing my code, I am happy to hear any suggestions! 🙏

Claire