Projects

Shopping Cart

2022·1 min read

React
TypeScript
Vite
GitHub

A learning project focused on modelling cart state with the React Context API in fully typed TypeScript, plus localStorage persistence so the cart survives page reloads.

A small storefront with a sliding cart drawer — built to practice typed React state.

A learning project focused on modelling cart state with the React Context API in fully typed TypeScript, plus localStorage persistence so the cart survives page reloads.

✨ Features

  • 🛍️ Browse a product grid with prices and images
  • ➕ Add, increment, decrement, and remove items
  • 🧾 Slide-out cart drawer (Bootstrap Offcanvas) with running total
  • 💾 Cart state persisted to localStorage via a typed useLocalStorage hook
  • 🧭 Multi-page layout (Home / Store / About) with React Router

🛠️ Tech Stack

  • Framework — React 18 + TypeScript
  • Build tool — Vite
  • State — React Context (ShoppingCartContext) + useState
  • Persistence — Custom useLocalStorage<T> hook
  • Routing — React Router v6
  • UI — React Bootstrap + Bootstrap 5
  • Data — Local items.json (no backend)

🙌 Credits

Built by Mohamed Gado.