Mini E‑Commerce Demo — Portfolio Project

Products

Built with CSS variables for easy theming

This demo keeps logic intentionally small and local — add to cart, adjust quantities, and simulate checkout. Products are defined in the JS for clarity.

README — Project notes & instructions

Mini E-Commerce Demo (for portfolio)

Files & structure:
 - single HTML file (this) — contains CSS + JS for easy sharing
 - Edit colors and spacing in the :root CSS variables at the top.

How it works (quick overview):
 - Products are a small JS array (id, title, price, image, description)
 - Add to cart stores data in localStorage and updates cart UI
 - Cart supports quantity change, remove, and a mock checkout
 - No backend — this is a front-end demonstration of UX & states

What to edit to show employers you understand e-commerce:
 - Move product data to a JSON file or simple backend to demonstrate architecture
 - Integrate a payments sandbox (Stripe Checkout test mode) to show real flows
 - Add user sign-in and order history to illustrate persistence & auth

How to run:
 - Save this file (ecommerce-demo.html) and open in a browser
 - Or serve from local static server (e.g. npx http-server)