Avoid duplicate cart updates
The cart deduplicates identical queued updates to avoid repeating the same change.
ENGINEERING CASE STUDY · FRAMAR
One cart.
Several purchase paths.
A React and TypeScript cart interface for subscriptions, upsells, promotional gifts, and discounts that carry through checkout.
The engineering problem
Customers can choose a subscription, accept an upsell, qualify for a gift, and apply a discount. Those choices need to stay in sync as the cart updates and still be reflected when the customer enters checkout.
I focused on keeping cart state consistent, handling repeated updates, and testing subscription prices.
What I implemented
- React and TypeScript cart behavior supporting one-time and subscription choices.
- Upsell and promotional-gift flows alongside the cart’s existing items.
- Persistent discount codes and checkout handoff.
- Cart mutation deduplication and automated tests for subscription pricing.
- Keyboard navigation and focus management for cart dialogs.
Implementation decisions
Test the purchase rules
Automated tests cover subscription pricing and cart updates, so changes to these rules can be checked consistently.
Support keyboard use
I added keyboard navigation and focus handling for cart dialogs so customers can interact with them without a mouse.
My contribution
I implemented the cart interactions and logic that connect customer choices with subscription prices, promotions, and checkout. That includes React and TypeScript development, automated tests, and accessible dialogs.
Next: full-stack distributor ordering ↗