Skip to content
Submitted 18 days ago

Rating Component with React, TypeScript, and Tailwind CSS

accessibility, react, tailwind-css, typescript, vite
P
Kyle Mulqueen•400
@kmulqueen
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm most proud of how quickly this came together. I'm also proud of implementing Context-API, even though it may be overboard for this app. I just wanted to practice and am grateful that it came together.

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

Implementing Context-API was a bit challenging, but that is why I decided to try. I need more practice. I referenced some of my other projects that use context-api and modeled this after those projects.

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

Context-API and state management patterns. Also I would appreciate feedback on my Tailwind CSS usage. I think that has been improving but I'm still not sure I'm using utility and component classes correctly.`

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Darkstar•1,350
    @DarkstarXDD

    Any reason why you are not allowing the ref to be passed in for types? I see you use ComponentPropsWithoutRef in most places. I understand for most elements you may not need a ref, but i don't see a reason why it shouldn't be allowed in a case where the consumer may want to pass it. I would generally use ComponentProps<"element type">.

    Any reason why you are writing all your tailwind classes separately from the components and inside a separate CSS file? You are basically going back to vanilla CSS up to a certain extent with that approach. If it's intentional then fine, but usually people use tailwind classes inline, inside the component, so the structure, logic and styles are all contained in one place.

    Also what's the idea behind the CardText and Container components? They don't seem to be having any default styles or logic. The styles are defined by the consumer. So i currently don't see a reason why they are needed.

    BTW i am not saying any of these are wrong or right. Your solution looks nice. I just read others code and try to understand any patterns that i am not familiar with.

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