Skip to content
Submitted about 2 years ago

React Product Preview Card Component

react, node
Oscar Vaquera•270
@vaqueraoscar0
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Technologies Used:

  • React
  • HTML5
  • CSS3

Challenges and Notes:

The development of this project was relatively easy, and I didn't encounter any significant issues. However, due to the limitations of the free account on Frontend Mentor, I didn't have access to the proper sizes for the product card. As a result, some adjustments may be needed to ensure the card's dimensions match the design specifications accurately.

Additionally, since the specific colors for buttons and text were not specified (didn't look accurate), I made assumptions and used default colors in the project.

Despite these minor challenges, the project progressed smoothly, leveraging React to create reusable components and CSS for styling. Overall, it was a great experience developing this product preview card component.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Jairo Valderrama•420
    @jairovg

    Hi @vaqueraoscar0, congrats on your solution; here are some comments that might help you to improve it:

    Accessibility and semantics

    • Take a look at how you can improve the component structure using semantic elements. Here is a blog post from freeCodeCamp that may help you.
    • You're setting the image base on some logic done in your JS code; even if it's not wrong, as it gets the goal, you can achieve the same result natively with the <picture> element. Here is the documentation from MDN.
    • Try to use the font sizes using rem units. You'll make the site more accessible to people who need it.
    • Try adding an alt text for the perfume describing the image, not just with product, as this will be the text used by the assistive technology.
    • Think if the cart icon is adding something to your content, if so, leave its alt text, otherwise convert the image to a decorative one or remove its alt text or handling as a background image.
    • This is your heading map:
    React App

1 Gabrielle Essence Eau De Parfum
5 $149.99
5 Add To Cart

    Think about headings as a table of content of your site, they need to have a hierarchy. Here you can read more about heading structure.

    The structure you're using injects an a11y issue: Heading levels should only increase by one. Here you can read more info about this issue.

    Styles

    • Take a look at xs devices, 320px, like iPhone SE. There is an issue with your component at that breakpoint.
    • I noticed you're trying to add a hover effect to the entire card. That's a good idea, but there is an issue with the implementation. With your current code, if you try to add the click handler to your <button>, if the user clicks outside this element, probably it won't take the action unless you add a click handler to the card also. You need to expand the button click zone, and it may be achieved using a pseudo-element.
    • Consider also adding a cursor pointer on hover and when the card has the cursor hover, change the button state to hover also.

    I hope you find it useful. I'm happy to take another look at your solution if you make some other changes.

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