Fieldhouse, Outdoor Gear Shop

The brief and the build

Brief: Keep the shopper on the page. Filter and sort the catalogue, add to a cart drawer, adjust quantities, and complete a mock checkout without a reload.

The cart is a modal drawer, not a page. Focus moves into it on open, stays inside while it is open, closes on Escape, and returns to the button that opened it. Quantity changes are announced, and the shipping line switches to “Free” at $150 so the threshold is visible while shopping.

Catalogue data is a plain array, so swapping in a headless commerce API is a change to one function. Output is escaped, and the email field validates before the order is accepted.

Light is a conventional store. Dark is an editorial layout with a sticky filter rail and a bottom-sheet cart. Creative is a loud, sticker-style take with an offset-shadow grid.

Results

• Problem: Shoppers dropped out between the product grid and checkout because the cart was a separate page.
• Built: A storefront with filter and sort, a focus-trapping cart drawer, quantity changes and a mock checkout, all without a page reload.
• Lighthouse, light design, mobile profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100. Largest contentful paint 0.9 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100.
• Weight: page, stylesheet and script total 11.8 KB (4.8 KB gzipped). The script alone is 7.3 KB (3.0 KB gzipped).
• Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
• Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs score 100 and 96 for accessibility (100 in the other three categories); the gap is colour contrast.

Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.

Stack

Highlights

• Cart drawer
• Focus trap
• Filter and sort
• Free-shipping threshold