E-Commerce Product Page with Cart Functionality

[PMS61]

Build a dynamic e-commerce product page where users can:

• View a list of products fetched from a mock API (e.g., FakeStoreAPI or a JSON file).
• Add products to a cart with a button.
• Remove products from the cart from both the product listing and cart preview.
• See a floating cart preview that updates in real-time when items are added or removed.
• Use localStorage to persist the cart items across page reloads.
• Quantity Selector: Allow users to increase/decrease item quantity inside the cart.
• Total Price Calculation: Display the total cost of items in the cart.
• Toast Notifications: Show a small alert (e.g., "Item added to cart") when a product is added.

Requirements & Technologies
React: Use functional components and hooks (useState, useEffect).
Tailwind CSS: Style the product grid, buttons, and floating cart using Tailwind’s utility classes.
LocalStorage: Store cart data so that users don’t lose their cart on refresh.
Mock API (FakeStoreAPI or JSON file): Fetch product data dynamically instead of hardcoding it.