https://github.com/balamurugan-annadurai/react-shopping-cart-with-product-management

A responsive shopping website built with React.js, featuring dynamic product management and an interactive shopping cart. Users can add, remove, and update product quantities, with real-time updates on total price and stock availability. Enjoy a seamless shopping experience on any device!
https://github.com/balamurugan-annadurai/react-shopping-cart-with-product-management

bootstrap css3 html5 javascript jsx react responsive-web-design

Last synced: 9 days ago
JSON representation

A responsive shopping website built with React.js, featuring dynamic product management and an interactive shopping cart. Users can add, remove, and update product quantities, with real-time updates on total price and stock availability. Enjoy a seamless shopping experience on any device!

• Host: GitHub
• URL: https://github.com/balamurugan-annadurai/react-shopping-cart-with-product-management
• Owner: balamurugan-annadurai
• Created: 2024-07-05T13:50:23.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-11T02:24:13.000Z (7 months ago)
• Last Synced: 2024-11-15T12:15:27.257Z (2 months ago)
• Topics: bootstrap, css3, html5, javascript, jsx, react, responsive-web-design
• Language: JavaScript
• Homepage: https://smart-cart-using-react.netlify.app
• Size: 923 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🛒 Shopping Website

Welcome to the Shopping Website! This repository contains a responsive web application built with React.js, designed to provide a seamless shopping experience. Users can easily add and remove products to/from the cart, navigate to the cart to see added products, edit the number of products needed, and get real-time updates on the total selected price and product count. The application also handles stock availability.

## ✨ Features

- **📱 Responsive Design**: Optimized for various devices, ensuring accessibility and user satisfaction.

- **➕ Add and Remove Products**: Easily add and remove products from the cart.

- **🛍️ Cart Management**: View added products in the cart and edit the number of products needed.

- **⚠️ Stock Availability**: Get notified if the selected quantity exceeds stock availability.

- **🔄 Real-Time Updates**: Instantly see changes in cart contents without refreshing the page.

- **💰 Total Price Calculation**: Display the total price and product count in the cart.

## 🛠️ Technologies Used

- **⚛️ React**

- **🟨 JavaScript**

- **🌐 HTML**

- **🎨 CSS**

## 🛠️ Usage

1. **Adding Products**: Click on the "Add to Cart" button to add a product to the cart.

2. **Removing Products**: Click on the "Remove" button to remove a product from the cart.

3. **Editing Product Quantity**: In the cart, update the quantity of a product as needed. If the selected quantity exceeds stock availability, a notification will be displayed.

4. **Viewing Cart**: Navigate to the cart to view added products, total price, and product count.

## 🤝 Connect with Me

💼 **LinkedIn:** [Balamurugan A](https://www.linkedin.com/in/balamurugan-a/)