Faeze Amini - Portfolio

Case Study

Sneakers Company

This platform is designed to make your shopping experience easier and more enjoyable.

IndustryWeb Store
Year2024
ServiceWeb application
imageSneakersCompany

Challenge

This platform displays all the information related to the product. You can select the quantity of orders and add them to your shopping cart, built using React.

  • Image Selection and Rotation: Allow users to select any product image and rotate through them during the display.
  • Modal for Cart Display: Create a modal to show the shopping cart.
  • Order Quantity Selection: Enable users to select the quantity of items to order and add them to the cart.
  • Remove Selected Product from Cart: Provide functionality to remove a selected product from the cart and reset the order quantity to zero.
  • Dark and Light Mode: Implement a toggle for dark and light modes within the platform.

Solution

- Image Activation with useRef: Utilize the useRef hook to activate the display of each selected product image.

- Redux for Cart Modal State: Create a variable using Redux to manage the visibility of the cart modal.

- Redux for Order Quantity: Establish a variable in Redux to track and display the quantity of items added to the cart.

- Method for Removing Products: Implement a method in Redux to remove products from the cart, effectively resetting the quantity to zero.

- Dark/Light Mode with Redux and Tailwind CSS: Implement dark and light mode functionality using Redux for state management and Tailwind CSS for styling.

Technologies

HTML

CSS

ReactJS

react-redux

tailwindcss

Github

Git

main*
Go Live