AdaptHealth Marketplace

Buying a CPAP machine is not buying a product. It is buying a device, then a mask that fits both your face and that device, then the tubing and filters that fit the mask, then optionally a service plan — and every one of those choices constrains the next. Presented as a flat catalogue with variant dropdowns, it produces incorrect orders, and incorrect orders in medical supply are not a returns problem, they are a care problem.

I built the purchase as a guided three-step flow — device, then add-ons, then services — where each step only offers what is genuinely compatible with what came before, and the running configuration stays visible the whole way through. Selection state is held in a single store rather than in the URL or in the cart, so a customer can change their mind at step three without unwinding steps one and two.

The surrounding storefront stays server-rendered Liquid. Only the configurator itself is a React island, which keeps the JavaScript cost on the pages that need it instead of across the whole catalogue.

The buyer for durable medical equipment is frequently older, frequently on assistive technology, and frequently not the patient. Every step of the configurator is keyboard-operable, every selection change is announced, and focus is managed explicitly across step transitions — a multi-step flow that silently moves focus is unusable with a screen reader, no matter how correct the visuals are.