Skip to content

README.md

Latest commit

 

History

History
54 lines (35 loc) · 1.37 KB

README.md

File metadata and controls

54 lines (35 loc) · 1.37 KB
Raw

🛒 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