DME App Migration
Building a modern React 19 application to replace the legacy DME ordering platform, featuring React Router v7, React Hook Form, and a complete architecture overhaul with CloudFront CDN for assets.
The Challenge
Our legacy DME ordering platform was built with outdated patterns that hindered development velocity, user experience, and scalability.
Legacy Architecture
Class components, manual form state management, and Bootstrap styling created maintenance burden and inconsistent UX
Poor Developer Experience
No type safety, scattered validation logic, and complex authentication flows made feature development slow and error-prone
Scalability Limitations
Hardcoded static assets and lack of CDN infrastructure limited performance and content management flexibility
The Solution
I'm leading a ground-up rebuild with modern tooling, focusing on developer experience, type safety, and scalable infrastructure for 1H 2026.
Modern React Stack
React 19 with React Router v7 (SPA mode), leveraging concurrent features and modern routing patterns for optimal performance
Type-Safe Forms
React Hook Form + Zod validation replacing manual state management, cutting form code by ~50% while adding full TypeScript support
CloudFront CDN Architecture
Migrating 59 static assets to S3 with CloudFront CDN, GraphQL API for content, and MongoDB for flexible content management
My Role
As project lead for 1H 2026, I'm driving the architecture decisions, implementing core features, and coordinating the migration from the legacy codebase.
Architecture & Planning
- Designed the migration strategy from class components to modern functional patterns with React Hook Form
- Planned CloudFront CDN infrastructure with Pulumi, S3 bucket policies, and GraphQL integration
- Established form validation patterns using Zod schemas with reusable validation utilities
- Documented authentication flows for passwordless checkout supporting both regular and guest users
Technical Implementation
- Building multi-step form flow (Information -> Address -> Insurance) with sessionStorage persistence
- Implementing Headless UI components with Tailwind CSS v4 and full Storybook documentation
- Creating GraphQL queries for dynamic hero content, carousel items, and logo assets
- Setting up Vitest testing infrastructure with component-level Storybook integration
Architecture Overview
A modern, scalable architecture built for performance, developer experience, and future extensibility.
Tech Stack
- React 19 – latest concurrent features with React Router v7 SPA mode
- Tailwind CSS v4 – utility-first styling replacing Bootstrap
- React Hook Form + Zod – type-safe form validation with 50% less code
- Apollo Client – GraphQL data fetching with caching
- CloudFront CDN – global edge caching for static assets
- Headless UI – accessible, unstyled components
Strategic Decisions
- Prioritized breast pump ordering flow as MVP, deferring other product offerings to future phases
- Chose CloudFront CDN over direct S3 URLs for better global performance despite higher complexity
- Implemented passwordless auth with guest checkout for frictionless UX, accepting duplicate user record trade-off
The Impact
Building the foundation for Bump Health's biggest revenue driver in 2026.
Looking Back
Reflections on the development process and improvements for future projects.
Migration Strategy Matters
Breaking the rebuild into phases (core forms -> asset CDN -> checkout redesign) allows shipping value incrementally while building toward the complete vision.
Simplify Auth with Purpose-Built Tools
The dual-user-type authentication (regular vs guest) created subtle bugs around isTemporary flags. Future iterations should leverage tools like Stytch to handle passwordless auth, reducing custom logic and improving security.
Invest in Developer Experience
React Hook Form + Zod eliminates entire categories of bugs (type mismatches, forgotten validation) while making the codebase more approachable for the team.
Explore more case studies and technical projects