Logo
  1. Home
  2. Portfolio
  3. Beanbag Coffee Co.

© Joshua R. Lehman

Full Stack Developer

Crafted with passion • Built with modern web technologies

2025 • All rights reserved

BEANBAG COFFEE CO.

Headless storefront focused on a clean product experience — built for performance, composability, and smooth conversions on mobile and desktop.

Headless CommercePersistent CartSSR & SEO
Beanbag Coffee — Hero
CODELIVESEE MORE

PROJECT DETAILS

Beanbag Coffee Co. is a composable, Medusa-backed storefront that prioritizes product clarity and fast discovery. The front-end focuses on small, reusable UI primitives that make merchandising and variant handling straightforward.

Background

Built as a reference storefront for headless commerce patterns — demonstrates product catalogs, carts with persistence, and accessible checkout flows.

Approach

Use SSR for critical product pages, keep the runtime JS footprint minimal, and compose UI from tiny, accessible primitives so pages remain fast and maintainable.

E-COMMERCEHEADLESS DESIGN
TYPESCRIPTTAILWINDCSSPOSTGRESQLHEADLESS DESIGNREDISNEXTJS

What I built

  • Product catalog and variant handling with composable product primitives.
  • Persistent shopping cart backed by server sessions (Redis).
  • SSR product pages with image optimization for fast first paint and SEO.
  • Authentication and order history for returning customers.

Implementation highlights

  • Composable product primitives for merchandising and variant handling.
  • Persistent cart sessions backed by Redis to maintain carts across devices.
  • SSR for product pages with optimized images for fast first paint.

Design & Performance

Emphasized semantic HTML, accessible controls, and a minimal critical JS bundle. Hydration is scoped to interactive widgets to keep time-to-interactive fast.

Accessibility

  • Keyboard-first flows for product browsing and cart management.
  • ARIA roles for dialogs, forms, and product options.

SCREENS

Beanbag Coffee — Hero
Beanbag Coffee — Product Grid