No framework, no problem

Notes on building a working storefront cart and product pages with plain HTML, CSS, and JavaScript.

Starting without a framework

It's easy to reach for React by default. Building the storefront without one meant writing my own render function: whenever the cart state changed, I just re-built the relevant chunk of the DOM from scratch and swapped it in.

The cart

Cart state lives in a single JavaScript object keyed by product ID, with a quantity per entry. Every "add to cart" click updates that object and re-renders the cart summary — no diffing, just a full re-render of a small piece of UI.

Where it gets harder

The trade-off shows up once the UI grows: without a framework, you're responsible for remembering which parts of the page depend on which piece of state. For a storefront this size it was manageable, but I can see why frameworks exist once the page gets bigger.

See the full source in the E-commerce site project page.