This project implements a shopping cart functionality using React with TypeScript and Vite. It allows users to add, remove, and manage items in their shopping cart, as well as apply discount offers to items in the cart.
👉 Add and Remove Items: Users can easily add items to their shopping cart by increasing the quantity or remove them by decreasing the quantity or removing them completely.
👉 View Cart Quantity: The cart displays the total quantity of items added to the cart for easy reference.
👉 Discount Offers: Users can toggle discount offers, such as buy one get one free on apples or three for two on oranges, which dynamically affects the total price of items in the cart.
👉 Persistent Storage: The shopping cart items are stored in the browser's local storage, ensuring persistence even after refreshing the page or closing the browser.
- ShoppingCart: This component renders the shopping cart interface, displaying the list of items in the cart along with their quantities and prices.
- CheckOutCart: This component provides the checkout functionality, allowing users to view the total price of items in the cart, apply discount offers, and proceed to payment.
- CartItem: Represents an individual item in the shopping cart, displaying its details and providing options to increase, decrease, or remove it from the cart.
- ShoppingCartContext: Utilizes React's context API to manage the state and provide functionality to interact with the shopping cart across components.
- useState: Manages the state of the shopping cart, including whether it's open or closed, the list of cart items, and any applied discount offers.
- useLocalStorage: Custom hook used to persist the shopping cart items in the browser's local storage.
- Adding Items: Users can add items to the cart by increasing the quantity or directly adding new items.
- Removing Items: Items can be removed from the cart either by decreasing the quantity to zero or removing them completely.
- Discount Offers: Users can toggle discount offers, which dynamically adjust the total price of items in the cart based on the applied offer rules.
- Calculating Total: The total price of items in the cart is calculated dynamically, considering the quantity of each item and any applied discount offers.
- Persistence: Shopping cart items are stored in the browser's local storage, ensuring persistence across sessions.
- React: A JavaScript library for building user interfaces.
- TypeScript: A statically typed superset of JavaScript that adds optional static typing.
- Vite: A fast, opinionated frontend build tool that serves as a replacement for Create React App.
- React Hot Toast: A toast notification library for React applications.
- Custom Hooks: UseLocalStorage is a custom hook created to manage local storage operations efficiently.
- TailwindCSS A CSS framework used to style Web AAppliactions
- Clone the repository:
git clone <repository_url> - Install dependencies:
npm install - Start the development server:
npm run dev - Open your browser and navigate to
http://localhost:3000to view the application.
- Implement user authentication to manage individual shopping carts for different users.
- Enhance the checkout process with payment integration and order confirmation.
- Improve the user interface and add animations for a smoother user experience.
- Add unit tests to ensure the reliability of the application.