The Man with the Cart
During my co-op at Whoop, I took ownership of all cart management in our new Join Flow. Initially, our cart system was frontend-driven, with the cart's state temporarily held in React. This approach proved suboptimal because it lacked persistence—any disruption like a browser refresh could lead to loss of cart data, adversely affecting the user experience. To address these challenges, we transitioned the cart storage to the backend. This shift not only ensured data persistence across sessions but also enhanced security and allowed for seamless cart access across different devices and platforms. Additionally, leveraging commercetools for backend cart management improved our ability to integrate with other systems like inventory and pricing, streamlining operations and maintenance while providing a more robust and scalable solution. This backend-driven approach significantly enhanced the reliability and functionality of our e-commerce platform.
Part 0: Research & Tech Planning
Developed Whoop's largest tech plan during the first quarter of my co-op (~ 1.5 months)
Led planning of the initial draft while other team members were occupied
Focused on key problems and objectives, high-level summaries, comprehensive API contracts, implementation proposals, and detailing any issues to be concerned about
Later adopted more ownership of specific milestones by researching with my supervisor and re-defining how we thought about the product catalog and cart management
Part 1: 12 Tickets
Further specific cart research, referencing old Join Flow
Add a cart item using our new commerce-service backend
Cart design v1
Cart Items
Billing Details
CTA Buttons
Introduce API response parsing
Part 2: 10 Tickets
Visually remove all old cart instances from the UI
Update a cart item using our new commercetools-driven backend
Remove a cart item using our new commercetools-driven backend
Update the cart in the top navigation bar
Introduce custom toast component using new UI library
Part 3: 8 Tickets
Add error state for failed cart request
Introduce loading states for cart interactions
Fix edge cases and conditional rules for cart interactions
Cart design v2
Responsiveness
Code cleanup
Trial Memberships
Receipt Page
Create and rebuild the receipt page using the new architecture
E2E Testing
Write initial end-to-end tests using Playwright for the new web app
Resolve Cloudflare automated testing issue
