Shopping Cart

A small storefront written to practise typed React state rather than to sell anything.

The cart is a context holding CartItem[] — just { id, quantity } — with increaseCartQuantity, decreaseCartQuantity and removeFromCart exposed as functions and the running total derived with a reduce on every render rather than stored. Deriving it is the right call at this size: a cached total is a second source of truth that can disagree with the array it summarises.

The genuinely instructive piece is useLocalStorage<T>, which backs the cart so it survives a reload. It is generic, and it is worth understanding exactly how far that generic goes: JSON.parse returns any, and the hook hands that straight back as T. So the type parameter documents and constrains every call site, while the value that actually arrives from storage is unchecked at runtime. Change the shape of CartItem, ship it, and a returning user's old cart deserialises into something the compiler swears is valid and is not. Validating on read — with Zod, or a hand-written guard — is what closes that gap.

React 18 and TypeScript on Vite, React Bootstrap's Offcanvas for the drawer, React Router for the three pages, and a local JSON file standing in for a backend.

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.