Frontend Mentor - E-commerce product page solution

This is my solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• 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
• 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 URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• JavaScript
• Mobile-first workflow
• Tailwind CSS - UI library
• React - JS library
• Vite - Build tool

What I learned

1. useRef: This React hook allows for DOM manipulations and lets you persist values between renders without causing a re-render. I utilized it to manage the visibility of the cartBox across components, enhancing the user experience.

2. createContext & useContext: These React hooks facilitate the sharing of values between components without prop drilling. They helped organize my states and props, maintaining clean and efficient code.

3. Touch Events: This project marked my first experience with touch events. I implemented onTouchStart, onTouchMove, and onTouchEnd to enable image swiping on mobile screens.

4. Math.abs: This function returns the absolute value of a number. It was essential for accurately calculating swipe distances.

5. Early Return Statements: Previously unfamiliar with their benefits, I now appreciate how early return statements allow for early condition checks and function exits. This practice helps avoid executing unnecessary logic.

6. Toast Notifications: Always admired, I implemented Toast notifications using the Toastify React library. These brief messages provide user feedback in an engaging manner.

Continued development

I am enthusiastic about advancing my journey through building projects with complex functionalities and logic. This approach not only reinforces my existing skills but also provides opportunities to tackle and solve challenging problems. I am particularly eager to explore and implement innovative solutions, continually enhancing my learning experience and honing my problem-solving abilities

Author

• Linkedin - Martins Ogundipe
• Frontend Mentor - Martinsgundi
• Twitter - Martinsgundi1

Acknowledgments

I acknowledge God for granting me the wisdom and understanding to execute the logic and functionalities of this project.