/Ecommerce-product-page

Frontend Mentor E-commerce product page. A single page with product preview carousel with image slider, and cart modal.

Primary LanguageJavaScript

Desktop Mobile

Frontend Mentor - E-commerce product page solution

This is a solution to the E-commerce product page challenge on Frontend Mentor.It is a responsive product page with interactive active states and responsive components.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Open a lightbox gallery by clicking on the large product image
  • Switch the large product image by clicking on the small thumbnail images
  • Add items to the cart
  • View the cart and remove items from it

Links

  • Solution URL: Repository
  • Live Site URL: Ecommerce-product-page

My process

Built with

What I learned

while building this solution I have learned to effectively use react-modal and styling with tailwind to produce the lightbox gallery for the product image,handling closing and opening of Modal and aligning items.icons relative to an image.

<Modal
      isOpen={toggleView}
      contentLabel="product preview"
      onRequestClose={toggleModal}
      className="ProductModal bg-transparent  w-[60vw]"
      style={{
        border: 0,
        transition: "none",
      }}
      overlayClassName="fixed top-0 left-0 w-full h-full bg-black bg-opacity-85 flex justify-center items-center"
      shouldCloseOnOverlayClick={true}
    >
      <>
        <div className="relative h-[25rem] md:w-[30rem] mx-auto ">
          <button onClick={toggleModal} className="absolute top-[-2rem] right-0">
            <IconClose />
          </button>
          <img
            className="h-full w-full object-cover md:rounded-lg"
            src={selectedImage}
            alt="Selected Product"
          />
          <button
            onClick={previousImg}
            className="absolute top-[11rem] left-[-1.5rem] bg-white rounded-full p-4"
          >
            <IconPrevious />
          </button>
          <button
            onClick={nextImg}
            className="absolute top-[11rem] right-[-1.5rem] bg-white rounded-full p-4"
          >
            <IconNext />
          </button>
        </div>
        {/* carousel slider */}
      </>
    </Modal>

Continued development

On this project I plan to expand by adding

  • Refactor to Add state management with context/react toolkit
  • Add a backend api to manage e-commerce inventory

Author

Acknowledgments

I would like to thank for providing the challenge and the design and resource.