Skip to content
Submitted about 1 year ago

My React Ecommerce Product Page

react, tailwind-css
Aecio Neto•340
@aecio-neto
A solution to the E-commerce product page 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 found a notes extension for VS Code that helped me organize what to do. Next time, I’ll start with a more detailed step-by-step plan and implement things gradually.

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

Biggest challenge: Lightbox Component/Effect - It wasn’t difficult to implement, but I had to pause for a bit to think and reflect on how to do it. In the end, I found the code repetitive, but it worked well.

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

How to think and plan the components? My impression is that they ended up too fragmented, but there's a logic behind them.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Alex•3,130
    @Alex-Archer-I

    Hi!

    I have notice that the arrow buttons on the image isn't positioned on the center. There are two reasons for it.

    At first when you use top: 50% the element located just behind the 50% line i.e. the top of the element hits the middle but not the center. To fix it you should add transform: translateY(-50%) property.

    The second is that you use that whole container (image + thumbnails) as relative container, so it's more difficult to center them inside the image. So I suggest you to separate image with arrows and thumbnails as different components.

    Alas, I can't see the source code to answer your question about the components structure - the link leads to 404.

    But hope you'll still find that helpful =)

    Congrats with difficult challenge, good luck =)

    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