Interactive rating component

Frontend Mentor Challenge

View Demo · View on frontend mentor

My process

Built with

• Vite - development environment
• React - JS library
• GSAP - animation library
• Emotion - CSS-in-JS library
• Sass - CSS preprocessor
• PostCSS - CSS postprocessor
• Eslint - linter
• Prettier - code formatter

What I learned

• React Basics
• CSS-in-JS
• setting constants and mixins for applying styles
• ajax post request, error handling, loading animation
• form validate

Continued development

• CSS Interaction
• CSS Grid
• Svg icons, image
• GSAP animation
• Switch favicon between dark and light modes
• Displaying webfont using webfont loader
• Issue-driven development

Useful resources

• styled-components
  • media query
    • Media queries with styled components
    • How to use media queries with styled components
  • mixin
    • Advanced Mixins in Styled-Components
• api mock
  • jsonplaceholder
• emotion
  • After updating eslint-plugin-react, many emotion-related errors occurred.
  • How to use emotion css prop in vite.
• ESLint Error
  • resolve Component definition is missing display name
• transitions when switching components
  • React Transition Group
  • How to pass the ref attribute to your own components
  • resolve Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of Link.
  • Component definition is missing display name in React
• gsap on react
  • Getting Started with GSAP + React.
  • GSAP + React, Advanced Animation Techniques.
• animation reference
  • The Future of Car Servicing is Here | SPARQ