Under construction
This case study is being rewritten.
Experience · Jun – Aug 2026 · Austin, TX
ABC Fitness
Software Engineering Intern
Rebuilt the ABC Trainerize profile page from scratch, from jQuery to React. The platform serves 1.6M+ clients and 400,000+ fitness professionals, so the existing business logic was carried over carefully and backed by unit tests to roll out safely.
- React
- TypeScript
- RxJS
- Redux
- Jest
- LaunchDarkly
Results
- 7sections, one React layout
Header, contact, certifications, score and views, intro video, services, and photo feed, each a slot in one shared page layout.
- 8requests sent at once
The profile, its view counts, and six photos leave within 2 ms of each other and settle in about a quarter second.
- 0.00layout shift on load
Cards hold their final size while data arrives, so nothing on the page jumps. Measured in Chrome on the shipped page.
- 97%branch coverage
Jest tests for permissions, role-based access, conditional rendering, and overlapping upload and update requests.
Redesign · Before and after
One long form,
regrouped into cards.
The jQuery page stacked every field in a single column under an empty cover photo, with the score and view counts squeezed into a top bar. The React page leads with who the trainer is, then groups the rest into cards that each edit in a modal.
Before · jQuery
- An empty cover photo tops the page
- Every field in one long column
- Score and views squeezed into a top bar
After · React
- Photo, name, bio and public link up front
- Fields grouped into cards that edit in modals
- Score and weekly views get their own card
Screenshots from a test account, with its contact details and photo replaced.
Async · RxJS
Fire every request,
keep only the latest.
Profile data comes from several endpoints at once. On the shipped page, the profile, its view counts, and six photos all leave within 2 ms of each other. I coordinated them with RxJS so stale responses are dropped and edits never overlap with in-flight photo or video uploads.
switchMap — A new request cancels the stale one.
emitted 0completed 0dropped 0
[ hover the branches to fire requests ]
[ branch coverage of profile business logic · Jest ]
Interface · React
Rebuilt in React,
redesigned beyond scope.
Part of a company-wide move off jQuery. Beyond the migration, I reworked the page’s hierarchy into a streamlined header and seven grouped cards with modal editing. With a UX designer and a QA analyst, I added certification reordering that works by drag or by keyboard. The card here works the same way.
- Seven cards
- Modal editing
- Keyboard reorder
// the card on the right is live
const [order, setOrder] = useState(certs);
<Handle aria-pressed={lifted}
onKeyDown={liftMoveDrop}
onPointerMove={reorder} />
<Live /> // announces each move
Press Space to lift a certification, the arrow keys to move it, Space again to drop it, or Escape to cancel.
- Certified Personal TrainerACE
- Strength and Conditioning SpecialistNSCA
- Exercise Therapy CertificationISSA
- Sport Conditioning SpecialistCanFitPro
Orchestration · AI-assisted delivery
Split in parallel,
ship as one.
I built profile sections with multiple AI agents working in parallel Git worktrees, then landed the rewrite as independently reviewable stacked PRs behind a LaunchDarkly flag.
- Git worktrees
- Figma MCP
- Stacked PRs
- LaunchDarkly