JeanMieses/E-commerce-product-redux

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
• 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: (https://github.com/JeanMieses/E-commerce-product-redux)
• Live Site URL: (https://jean-ecommerce-product.netlify.app/)

My process

Built with

• Flexbox
• CSS module
• Mobile-first workflow
• Redux
• Redux Toolkit
• React - JS library
• Splide -lightweight, flexible and accessible slider/carousel

What I learned

I learned how to use Redux Toolkit to handle the App Wide States by creating reducers (functions) to handler functionalities such as adding an item to the cart or removing it.

Useful resources

• Splide Docs - This helped me a lot in understanding how to work with Splide carousel.

Author

• Frontend Mentor - @JeanMieses
• Twitter - @JeanTheDev