Portfolio

Overview:

This EC site is built with React and Redux for state management, ensuring a scalable and efficient solution for managing product data and user interactions. React Router is used to handle navigation, allowing users to switch between pages (product list, cart, and product details) without reloading the entire application.

Screenshots

Key Features:

1. Product List:

Displays all products with images, names, prices, and truncated descriptions for a clean, organized view.

2. Product Details Page:

Allows users to view detailed product information.

3. Cart Management:

Users can add products to their cart, update quantities, and remove items easily.

4. Cart Summary with Total Cost:

Provides a breakdown of items in the cart and calculates the total cost in real-time.

5. Redux

• Global State Management:
  • Redux manages the cart’s state globally, ensuring that product data and cart actions are consistent across all components like the Product List, Product Details, and Cart pages.
• Actions:
  • Actions like ADD_TO_CART, REMOVE_FROM_CART, and UPDATE_QUANTITY are dispatched to modify the cart state, making it easy to handle user interactions.
• Reducers:
  • Reducers handle these actions and update the state in a predictable manner, ensuring the application responds correctly to cart updates and maintains a clean state.
• Selectors:
  • Redux selectors, accessed via useSelector, allow components to retrieve specific data from the global state, such as cart items and the total cost, ensuring dynamic updates in real time.
• Dispatch:
  • Using useDispatch, actions are dispatched from various components (e.g., adding items to the cart or adjusting quantities) to modify the global state.

Category:

Tags:

Links: