/Add_To_Cart-using-React-Modal

A simple and responsive ReactJS application that fetches product data from the Fake Store API, displays them in a card layout, and allows users to add or remove products from a shopping cart via a modal interface.

Primary LanguageHTML

🛒 Add to Cart Using React Modal

A simple and responsive ReactJS application that fetches product data from the Fake Store API, displays them in a card layout, and allows users to add or remove products from a shopping cart via a modal interface.

📎 API Used:

Fake Store API: https://fakestoreapi.com/products

📋 Features:

  • ✅ Fetch products from the Fake Store API.

  • 🖼️ Displaying product category, image, title, rating, count and price in a user-friendly layout.

  • ➕ Add products to cart with a button.

  • ⚠️ Alert user if the item is already in the cart.

  • 🛍️ Cart item count shown in the Navbar.

  • 🪟 Modal displays all products in the cart.

  • ❌ Remove products directly from the cart modal.

  • 🔄 Dynamic cart updates based on user interaction.

  • 📱 Fully responsive design for mobile and desktop.

  • 🧼 Clean, well-documented and maintainable code.

🧪 Key Functionalities:

  • ✅ Fetch product data on load using useEffect.

  • ✅ Add items to cart using useState and prevent duplicates.

  • ✅ Show alert message ("Item already added to the cart") for duplicates.

  • ✅ Display cart modal on click of a cart button.

  • ✅ Remove individual products from the cart.

  • ✅ Recalculate cart count dynamically.

🛠 Tech Stack:

Technology Description
ReactJS JavaScript library for building UI
JavaScript (ES6+) Logic and state management
Tailwind CSS Utility-first CSS framework
HTML5/CSS3 Markup and styling
Fake Store API External API for product data

📦 Component Breakdown:

  • App.jsx – Main component that manages global state (cart, products).

  • Navbar.jsx – Displays the application name and a cart button displaying the cart count.

  • ProductList.jsx – Maps and displays all products.

  • ProductItem.jsx – Displays individual product with add-to-cart functionality.

  • CartModal.jsx – Modal for displaying and removing cart items.

🔄 State Management & Data Flow:

  • The cart state is managed in the App.jsx using React's useState hook.

  • Product data is fetched via useEffect in the ProductList.

  • Props are passed down from App.jsx to child components (Navbar, ProductList, and CartModal).

💻 Responsive Design:

  • Built with Tailwind CSS.

  • Mobile-first approach.

  • Flexbox & grid layout for adaptive design.

✂️ Future Improvements:

  • Add quantity management per cart item.

  • Persist cart in local storage or use Redux for larger applications.

  • Integrate user authentication and backend.

🙋‍♂️ Author & Contact: