E-commerce Product Page

Community feedback

• 

  Jenny Eikens•250

  @Jenny-EikensPosted 4 months ago

  Hey Andres,

  congrats on completing the challenge! :)

  Here's some ideas on how you could improve your code:

  • You might want to consider limiting the width of the main content (your Product component). Currently, the design ends up looking too stretched out on very large screens because the gap between your .product-images and .product-info is allowed to grow wider and wider.

  • This point is something I learned from feedback someone gave me on one of my solutions: Don't hard-code data into your website, as this will very much hinder maintainability (i.e. if you want to showcase a different pair of shoes and thus have to change the product title, description, pricing etc., you'd have to go into the actual code and change the data in the relevant places). A better solution to this is to put all data that is subject to change in the future into separate JSON files to reference in your code (like you already did with your images). That way, you could just call something like {product.description} in your code, and have the actual description in a separate file where you could easily change it in the future.

  • The close button when the overlay is open doesn't work. I think this is because of event propagation of the click event. When the button is clicked, its onClick handler is invoked first, but then the event bubbles up to the overlay and its onClick handler gets triggered too, causing setImageSelected(null) to be called twice. Instead, try defining a separate handleButtonClick function that stops event propagation and looks something like this:

  const handleButtonClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
    e.stopPropagation();
    setImageSelected(null);
  };
  

  • Lastly, the thumbnails aren't centered underneath the main image. (This only becomes noticable starting at a screen width of about 1,970px). To fix this, simply add align-items: center to your .product-images.

  Hope this feedback helps :)

  0