Skip to content
Submitted almost 3 years ago

Ecommerce Page (React + Styled-Components) w/ Modal Design Pattern

Ben Andrew Merritt•345
@b-a-merritt
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

  1. Unless directly importing photos, why is it necessary to have the photos in the public/assets directory? And when deploying to GitHub, why is it necessary to add the slug of the repository to the relative path?

  2. On the styled-components, I used both the props and the classNames to change styles. Which do you think is more graceful? Any cumbersome CSS?

Thanks a ton!

Community feedback

  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    Hi! Ben, Wow, you did it really nice, so pretty. I saw your work, you implemented night mode feature too. In order to make it more better below are few things that I have noticed and you should have to improve it.

    (Desktop Mode)

    1. If we hover over the Avatar Image then we can clearly see you cart slighlty move towards left handside and come back to it original position as we left Avatar image. It should be fix.

    2. When we click on the thumbnail then slider visible, your sliders arrows are not aligned to center of the image.

    (Mobile View)

    1. You have not implemented the response design by adding media query, as it is required to atleast make design for 375px screen -width device.

      Suggestion Always try MFA (Mobile First Approach) it will make your work easy and you never forget to add media queries.

    Overall I liked your work but always keep in mind, requirement should be your first priority.

    Best Of Luck

    0

Please log in to post a comment

Log in with GitHub

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