🛒 React Modal Cart App

A sleek, responsive e-commerce UI built using ReactJS(React Hooks), Tailwind CSS and the Fake Store API.

✨ Features

• ✅ Product Listing from Fake Store API
• 🔍 Search bar with useRef focus on page load
• 📁 Filter by category
• ➕ Add to Cart modal with item count
• ❌ Remove from Cart button to remove the product(item) from Cart.
• ⚠ Alert Message will show if the product is already added to cart.
• 💾 Local Storage to preserve cart items across refresh
• ⚡ Responsive Design using Tailwind CSS
• 🧠 React Hooks: useState, useEffect, useRef

⚙ Technologies Used

• ⚛ ReactJS
• 🎨 Tailwind CSS
• 📦 Fake Store API
• 📂 localStorage for data persistence

🧪 How It Works

• 🔃 On page load, the search input auto-focuses using useRef.
• 🔎 Products are filtered based on search and selected category.
• 👆 Clicking "Cart" icon opens a modal, disables background interaction.
• ➕ "Add to Cart" button adds the item to Cart and ⚠ Alert Message shown if the product is already added to Cart
• ❎ "Remove from Cart" button deletes item from the Cart
• 💾 Cart state is stored and retrieved using LocalStorage.

🌟 UI Highlights

• 🧹 Clean Cart Layout 📃
• ➡ Aligned Buttons using Flexbox
• 🔍 Search Icon added using Heroicons
• 🖼 Responsive Grid for products