Frontend Mentor - E-commerce product page solution

This is a solution to the E-commerce product page challenge on Frontend Mentor

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

Screenshot

Links

• Solution: frontendmentor.io

• Live Site: cloudflare

My process

• Install React+Vite, Prepare assets, Initial git
• Identify components (These components may change during creation)
  • Layout
    • Wrapper
  • Header
  • Menu
  • Cart
  • Product (page)
  • Slider (fade)
  • ProductSlider
  • Modal
  • Backdrop
  • LightBox (with slider capability)
  • ProductLightBox
• Create components
• Work on:
  • Mobile design based on design folder (375px)
  • bigger reselotion based on design folder (>375px)

Built with

• React
• Framer Motion
• CSS Module
• Mobile first workflow

What I learned

Reusability thought in react is the crucial part of react, Knowing how to play with that is more crucial.

Continued development

more on React and Framer motion

Useful resources

• Framer Motion Image Gallery

• React Easy Slider with Framer Motion Tutorial

• Animate Menu

Author

• Frontend Mentor - @siavhnz

• github - @siavhnz

Acknowledgments

Thanks To

Frontendmentor.io - for their Excitement challenges

Perfect Pixel - for such a great extension