Rocker — Furniture Store Front-End

Overview

Rocker is a premium furniture storefront written without a framework: no build step, no dependencies, just HTML, CSS and hand-written JavaScript modules across nine pages. It exists to prove the full e-commerce flow can be assembled from primitives — state, routing between pages, persistence, and validation all done by hand.

What it does

Storefront — hero carousel, featured category rail, and a most-popular collection on the landing page.

Catalogue — filter by category, price range, and minimum rating; sort; switch between grid and list layouts; paginate; and search across products.

Product detail — image, star rating with review count, discounted pricing, size and colour selection, quantity stepper, stock state, SKU, category and tags.

Wishlist — save and clear favourites, with add-to-cart directly from a saved item.

Cart — quantity editing, per-line removal, shipping selection, tax calculation, coupon entry, and a live order summary.

Checkout — a multi-step flow collecting shipping and billing details with same-as-shipping handling and an order summary alongside.

Accounts — sign in and register screens with inline field validation, remember-me, and a profile page.

Build notes

Each page has its own JS module (store.js, product.js, cart.js, checkout.js, favourite.js, search.js, profile.js, auth.js) sharing a common cart-manager.js and utils.js. Cart, wishlist and session state persist through browser storage, so the flow survives navigation and reloads without a backend. Layout is responsive from mobile to desktop off a normalised CSS baseline.