Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 3 years ago

React + Tailwind CSS Solution - fully interactive! INTERVIEW PROBLEM?

react, tailwind-css
Kyle Johnson•250
@11kyle
A solution to the Interactive rating component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Part of me wishes the dimensions were given in the free version but part of me is okay with not having them. When developing real-life products, you don't have a design with dimensions so not having them here is identical.

This is my favorite project so far! It uses JavaScript but at a Junior level. The JS that is needed is needed in almost every application too. Makes this a great interview project in my opinion.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Amélie•330
    @aweliego
    Posted almost 3 years ago

    Hi Kyle!

    I can't speak to Tailwind, but as far as I can tell, you did a good job building this app with React! I also liked that project, very simple in appearance but makes you revisit a lot of frequently used functionalities indeed. Like you, I found it a bit frustrating to see the difference between the dimensions of my solution and those of the design after submitting my solution, but then again, it is in my opinion not crucial to the quality of the project.

    I also enjoyed reading your README by the way. It was interesting to read your thought process about the challenge and what you learned :)

    Upon testing your solution I wanted to share with you the following suggestions/feedback:

    • I would give the 'cursor' property a value of 'pointer' for the rating and submit buttons, so it's clear that these are clickable elements.
    • If I submit without having selected a score, I get a 'You selected 0 out of 5', which makes sense since the rating state is initialised with 0. I suppose this is not the intended behaviour, so it would be nice to have some logic to prevent that from happening. [I am totally cheating a bit here, because I also just submitted my solution on this challenge yesterday and someone pointed out to me that my rating is 'undefined' when clicking Submit without selecting a rating - so I'm just passing this very good feedback around I guess 😆]

    And as part of your continued development, why not add some transition when switching from the rating component to the thank you card? :)

    Well done again! 👏

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub