Back to projects

e-Cart - React Shopping App

A clean React shopping page built to practice global cart state using Context API and LocalStorage without relying on external libraries.

https://e-cart-alpha.vercel.app/

The Problem

In e-commerce apps, you need your shopping cart data everywhere: on product cards, inside the navbar counter, on the checkout page, and saved when someone refreshes the tab. Passing that cart data up and down through 10 different components ("prop drilling") gets messy very fast.

How It Solves It

e-Cart solves this by managing the cart globally with React Context and a custom reducer. When you add or remove products, every component on the page updates cleanly, and your items stay in your cart even if you close or refresh the browser.

How It's Built

  • React Context & useReducer: Centralizes actions like ADD_TO_CART, REMOVE_ITEM, and UPDATE_QUANTITY.
  • LocalStorage Sync: Saves cart items automatically so nothing is lost on page reload.
  • React Router: Clean URL routes for browsing products and viewing the cart.

What It Means

A focused project that proved the fundamentals of global state management in React without needing heavy external libraries.