🛒 Elegant Context Shopping Cart

A simple and elegant shopping cart app built with React, using Context API and useReducer for global state management.

📋 Description

This project demonstrates a modular and scalable way to handle a global shopping cart state using React's Context and useReducer hook. It allows users to:

• Add products to the cart
• View items in a modal
• Update item quantities (+ / -)
• See a real-time cart total

It features a clean UI and is great for learning or starter projects in React with global state.

---

🚀 Features

• View a list of products with title, price, description
• Add products to a shopping cart
• View the cart in a modal popup
• Increment and decrement item quantities
• Auto-remove item from cart if quantity is reduced to zero
• Real-time cart total calculation

---

🧠 Topics Covered

• ✅ React Functional Components
• ✅ React Context API (createContext, useContext)
• ✅ useReducer for global state management
• ✅ useRef and useImperativeHandle for controlling modal behavior
• ✅ createPortal for modal rendering
• ✅ Prop Drilling avoidance with Context
• ✅ Component reusability and separation of concerns

---

---

📦 Getting Started

1. Clone this repository

   git clone https://github.com/BekaluEshete/elegant-app.git
   cd shopping
   npm install
   npm run dev