Skip to content
Submitted over 2 years ago

E-comerce

bootstrap, react, next
Ambadi M P•380
@Soaphub
A solution to the E-commerce product page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Did some changes to the initial design. Please let me know the responsive design.

Code

Please log in to post a comment

Log in

Community feedback

  • Zeyad Mohamed•320
    @ZeyadMohamed1805

    Great work right there! I do have some observations I'd like to share with you:

    1. While hovering on the thumbnail images, I noticed that it was shaking. The reason its doing that is because normally it doesn't have a border, so when you hover the border is added, which increases the size of the image. A quick fix for that is to actually add the border to the image before hovering, and make its color transparent. Then when you hover, just change the border's color to orange and it will hopefully not shake.
    2. I noticed that the images overlapp with the header in the mobile app. I don't have a fix for that but I just wanted to point it out in case you didn't notice.

    Other than that, I think you did a great job on this project! Keep it up and I hope this feedback will be beneficial!

    Marked as helpful
  • j0sephh123•140
    @j0sephh123

    • There is duplicated code in pages/. You can look into _app.js how to have a single layout

    • To load a global css - you can use this article

    • Avoid accessing the DOM directly. For example in Cart.js you can set directly in the JSX <p id="title-cart">{'set the stuff here'}</p>, which you are currently doing inside useEffect

    Marked as helpful

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