Front End Mentor - Project 030 - Interactive Pricing Component

This is a solution to the Interactive Pricing Component challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Screenshot

• Desktop

• Mobile

Links

• Solution URL: https://github.com/rashidshamloo/fem_030_interactive-pricing-component/
• Live Site URL: https://rashidshamloo.github.io/fem_030_interactive-pricing-component/

My process

Built with

• Vite / React.js
• TypeScript
• Material-UI
• SASS/SCSS
• Semantic HTML5 markup

What I learned

• Setting up a global SCSS import in Vite to remove the need of using @import in every file

css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@import "./src/styles/colors";',
    },
  },
},

• Using list-style-position:inside; in CSS to bring the list bullet points inside the flow
• In-depth customization of Material-UI components
• Setting aria-label attribute for Material-UI components using inputProps = {{ 'aria-label': 'LABEL' }}

Author

• Portfolio - rashidshamloo.ir
• Frontend Mentor - @rashidshamloo
• Twitter - @rashidshamloo