Skip to content
Submitted over 1 year ago

Tailwind + TypeScript + React.js | E-commerce Product Page

react, redux-toolkit, tailwind-css, typescript, accessibility
Better5afe•850
@better5afe
A solution to the E-commerce product page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there!

This project took me a little bit longer than I expected, the autumn weather definitely does not help with my coding motivation :D

To summarize, the users are able to:

  • Add and remove items from the cart.
  • Update quantity of the cart items.
  • View the cart's content.
  • Open a modal gallery carousel by clicking on the large product image and interact with it.
  • Switch the large product image by clicking on the small thumbnail image.
  • Interact with mobile gallery by tapping the arrow buttons or swiping right or left.
  • View the optimal layout for the site depending on their device's screen size.
  • See hover states for all interactive elements on the page.

In addition to this:

  • The cart is stored within local storage, so it's fetched from there as soon as the page reloads.
  • Users can swipe between slides on mobile devices - I used React Swipeable library to implement this feature.

As always, I'll be grateful for any feedback.

Thanks & Happy Coding! 🎃

Code

Please log in to post a comment

Log in

Community feedback

  • solitary_coder•1,000
    @kabir-afk

    Was working on the same challenge , would be helpful to compare our codes when I'm done

  • Rafael Sequeira Sandoval•270
    @RafaelSS427

    Hi Better5afe, I really enjoyed your work! I would like to share with you 2 possible improvements you could implement.

    1. It would be great to pause the animation of your image carousel when the user's cursor is over it.
    2. Every time the user changes image, you could reset the time it takes for the carousel to go to the next image, this will avoid abrupt jumps between images.

    As you can see these are improvements related to the user experience. I hope my observations are helpful! :D

  • Marvellous Obatale•520
    @MARVELGARR

    nice, only there is a small responsive error in mobile view... i need to go and update min cause i left out some features like hover and favicon

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