🚀 Interactive Rating Component

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

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

---

💡 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

Screenshots

active state

submitted state

Links

• Solution URL: GitHub
• Live Site URL: Vercel

---

🎯 My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React – JS library
• Next.js – React framework
• Chakra UI – For styles

What I learned

In this code challenge, I learned how to work with Chakra UI, a React component library that provides pre-styled UI components. I gained an understanding of its concepts, such as components, styles, and themes.

The main takeaway for me was learning how to create a foundation for larger scale projects using Chakra UI as a starter point, particularly when using custom theming. This knowledge will be valuable for future projects as I can use Chakra UI to efficiently create UIs, and focus more on the functional aspects of my application.

Useful resources

• Next.js Documentation
• React Documentation
• Chakra UI Documentation

---

👨‍💻 Author

• Website – www.jakubjirous.cz
• Frontend Mentor – @jakubjirous
• LinkedIn – jakubjirous