Add to Cart Task Using Modal

This ReactJS application allows users to browse products from the Fake Store API, add them to a cart, and view the cart in a modal interface. The app is responsive and works well on both desktop and mobile devices.

Features

• Fetches product data from the Fake Store API.
• Displays products with key information such as the product image, title, and price.
• Allows users to add products to the cart.
• Shows an alert if an item is already added to the cart.
• Displays the current cart item count in the Navbar.
• Opens a modal showing all products in the cart when the "Cart" button is clicked.
• The modal includes a "Remove from Cart" button to remove products from the cart.
• Responsively designed with Tailwind CSS for styling.

Technologies Used

• ReactJS - For building the UI components and handling the state.
• JavaScript - For the application logic, such as adding and removing products from the cart.
• HTML/CSS - For the page structure and basic styling.
• Tailwind CSS - For styling and responsive design.

Installation

1. Clone this repository:

   git clone [https://github.com/vaibhavapriya/ECommerce-page.git](https://github.com/vaibhavapriya/ECommerce-page.git)
   cd react
   

2. Install the dependencies:

   npm install

3.Run the development server:

npm run dev The app will be available at http://localhost:3173/.

Deployment

You can view the live application deployed on Netlify.

Usage

Navigate to the main page where products are displayed. Click the "Add to Cart" button to add products to the cart. The cart count will be displayed in the Navbar. Click the "Cart" button to view all added products in a modal. You can remove products from the cart within the modal.