Submitted 2 months ago

My React Ecommerce Product Page

Aecio Neto• 340

@aecio-neto

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

E-commerce product page

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

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.

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted 2 months ago

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

Aecio Neto• 340

@aecio-neto

Posted about 1 month ago

@Alex-Archer-I

Thanks for taking the time to analyze my code. I'll check it out.

Alex• 3,130

@Alex-Archer-I

Posted about 1 month ago

@aecio-neto

Hey, you're welcome =)

Please log in to post a comment

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