Context API Shopping Website with Cart Functions

Table of Contents

• Context API Shopping Website with Cart Functions
  • Table of Contents
  • Netlify Deployed URL
  • Features
  • Getting Started
  • Usage with Screenshots
    • 1. Browse the home page to view available products.
    • 2. Click "Add to Cart" to add a product to the cart.
    • 3. Navigate to the cart page to manage your cart contents.
    • 4. Adjust product quantities using the "+" and "-" buttons.
    • 5. Click "Remove from Cart" to remove a product from the cart.
    • 6. Click in the Apple Logo or SHOP Cart Page to go to the Home Page.
    • 7. Click in the Continue Shopping on the Cart Page to go to the Home Page.
  • Technologies Used

Netlify Deployed URL

🔸Check out My ContextAPI Shopping Cart Here👉🏻

Features

• Product display with details and images.
• Cart functionality: add and remove products, adjust quantities.
• Navigation between home and cart pages.
• Total price calculation based on cart contents.

Getting Started

1. Clone the repository:

   git clone https://github.com/Harsha-2324/ReactTask_5.git
   

2. Install dependencies:

   cd ReactTask_5
   npm install 
   npm install react-router-dom
   npm install axios
   npm install --save phosphor-react
   

3. Start the development server:

   npm run dev
   

4. Open your browser and navigate to http://localhost:3000 to view the app.

Usage with Screenshots

1. Browse the home page to view available products.

2. Click "Add to Cart" to add a product to the cart.

3. Navigate to the cart page to manage your cart contents.

4. Adjust product quantities using the "+" and "-" buttons.

5. Click "Remove from Cart" to remove a product from the cart.

6. Click in the Apple Logo or SHOP Cart Page to go to the Home Page.

7. Click in the Continue Shopping on the Cart Page to go to the Home Page.

Technologies Used

• React
• React Router
• Context API for state management
• HTML/CSS
• Bootstrap for styling