Interactive rating component in React and Tailwind CSS v4

What are you most proud of, and what would you do differently next time?

I'm proud that I decided to go beyond the original design by adding buttons to open and close the rating component, turning it into a more interactive experience. I challenged myself to build a simple modal, and I’m happy I was able to implement it successfully. However, looking back, I realise that I used <button> elements to capture the user's selected rating, which isn't the most semantic choice. Next time, I would use <input type="radio"> elements instead, as they are more appropriate for this kind of selection and improve accessibility.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges I faced was learning Tailwind CSS for the first time, just as version 4 was released. Most tutorials I found were based on version 3, and even ChatGPT often gave outdated suggestions. I got through it by using the official docs and finding updated YouTube tutorials

What specific areas of your project would you like help with?

I’d appreciate feedback on how I can improve my code, especially in terms of best practices and structure. I'm also looking for guidance on accessibility, as I haven’t focused on it yet but plan to make it a priority in future projects.