Skip to content
Submitted almost 2 years ago

Ecommerce product page (React and Tailwind)

react, tailwind-css, accessibility
Abhijith Muthyala•760
@abhijithmuthyala
A solution to the E-commerce product page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Technologies / Concepts used:

  • React:
    • State, reducers, effects, context, custom hooks.
    • Composition pattern to decrease prop-drilling.
    • Kept state close to the components that directly need it, to decrease unnecessary rerenders.
  • Tailwind- I initially started out with sass, but it quickly became a pain to handle so many different files for components and styles. I've been using some reusable classes like .align-center in the challenges done so far, so switching to tailwind felt natural. Also, no more thinking hard for a class name on a div that is used just for layout!
  • Browser API's:
    • dialogElement.showModal() and dialogElement.close(): For better accessibility, as recommended by MDN
    • window.matchMedia: To conditionally render the lightbox component.
Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Abhijith Muthyala•760
    @abhijithmuthyala

    Update: Added the experimental view transitions and just like that, the links menu, cart and lightbox all animate with a nice default fade animation! Works in chrome 111+.

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