wowgeekyboy / e-commerce-app

E-Commerce App

E-commerce Website

Overview

The E-commerce Website is a full-fledged online shopping platform built using React and Redux. It provides a seamless shopping experience for users to browse through a wide range of products, view detailed information about each product, add items to the cart, and proceed to checkout for making purchases. The website is designed with a clean and intuitive user interface to enhance the user experience.

Features

1. Browse Products

• Users can explore a diverse collection of products listed on the website.
• The products are organized in a grid layout with responsive columns for optimal viewing on different screen sizes.

2. View Product Details

• By clicking on a product, users can view its detailed information, including product name, description, image, and price.
• The product details page uses animations for a smooth transition effect.

3. Sort Products

• Users can sort the products based on price, either from low to high or high to low.
• Sorting options are available in a dropdown menu for easy selection.

4. Filter by First Letter

• A unique feature allows users to filter products by the first letter of their names.
• The dropdown filter contains all the unique alphabet letters present in the product names.

5. Add to Cart

• Users can add their favorite products to the shopping cart with a single click.
• The shopping cart icon displays the total number of items added.

6. Toast Notification

• A toast notification pops up whenever a product is successfully added to the cart.
• The toast notification informs users about the name of the product added and disappears after a few seconds.

7. Proceed to Checkout

• The website offers a smooth checkout process for users to review their selected items and proceed to payment.

8. Responsive Design

• The website is fully responsive and works seamlessly on various devices, including desktops, tablets, and smartphones.

Technologies Used

• React: JavaScript library for building user interfaces.
• Redux: State management library for managing the global application state.
• React Router: Library for handling navigation and routing in a React application.
• Chakra UI: UI component library for building responsive and accessible UIs.
• Framer Motion: Animation library for creating smooth and interactive animations.