Ecommerce Product Page

• Live website -(https://cpwd-ecommerce-product-page.netlify.app/)

Table of contents

• The challenge
• Screenshot
• My process
  • Built with
  • What I learned
  • Useful resources

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

My process

Screenshot

Built with

• React.js
• Redux
• CSS custom properties

What I learned

• This was a very challenging project. It's the first time I implemented the Redux javascript library in order to manage the state for my cart. I became more comfortable with React hooks and can comfortably navigate and implement functions through out my project.

Useful resources

• Redux For Beginners | React Redux Tutorial - this tutorial taught me how to setup redux and implement it into my react project

• zalmoxisus/redux-devtools-extension - This is a repository that demonstrate how to download and use the chrome redux devtools extension into your browser

• Debugging JavaScript in Visual Studio Code and Google Chrome - this video taught me how to debug my javascript using the debugger tool in developer tools

Author

• Website - Carlos Perez
• Frontend Mentor - @Carlos-A-P
• Twitter - @WDCarlosP