Studio project · Consumer Electronics Retail
VoltCrate
Most e-commerce demos are a homepage and a promise. We built the whole store — eight pages, a working cart, faceted filtering, English and Arabic — so the question stops being whether we can and starts being when.
Visit the live site (opens in a new tab)
- 8Pages, all working
- EN / ARStorefront mirrored for RTL
- 251 KBEntire image set, WebP
Overview
The brief
A storefront is not a page, it is a system — a catalogue, a way to narrow it, a cart that remembers, and a checkout path that never loses the customer. So we invented a Dubai consumer-electronics retailer and built the whole thing: eighteen products with real specifications, faceted filters with live counts, persistent cart, product pages, blog and brand index, in English and Arabic, on a dark emerald interface.
The work
02Categories and Top PicksFour category routes and a curated rail carrying NEW, BESTSELLER and SALE badges, with live AED pricing and the discount worked out against the struck-through original. 
03Faceted filteringCategory, availability, price and rating filters, each showing a live count that recalculates as the result set narrows. Every filter state is a shareable URL. 
04Product detailThumbnail gallery with cursor-tracked zoom, real stock count, a quantity stepper and collapsible specification panels — plus a related-products rail derived from the same data file. 
05A cart that remembersPersisted to local storage, so it survives a refresh and follows the customer between pages. The header badge, the slide-out drawer and this page all read one source of truth. 
06Arabic, fully mirroredNot a translation layer. Logical CSS properties flip the entire storefront — navigation, hero, badges, filter rail and numerals — rather than patching a left-to-right layout.
How it was built
The detail
The catalogue is one data file, and everything else derives from it — the filter counts, the sort orders, the related-products rail, the deep links that let a category or a brand be shared as a URL. The cart persists to local storage, so it survives a refresh and follows the customer across pages, with the drawer, the cart page and the header badge all reading from a single source of truth. Product photography was commissioned as a matched set, emerald rim light on near-black, then converted to WebP — 4.3 MB of source renders down to 251 KB shipped. Every layout property is logical rather than physical, so Arabic mirrors the whole storefront instead of patching it, and the interface was checked against WCAG AA on every text pairing before it shipped.