Understanding how frontend systems evolve under pressure.
Most frontend systems do not begin with architecture. They begin with delivery.
Systems rarely fail because of patterns.
They fail because prior decisions stop holding under new pressure.
A new requirement arrives: the cart summary must appear in the navbar.
What was once isolated to a single surface now spans multiple components.
Subtotal: $0
Shipping: $0
Total: $0
Cart-derived values now exist in multiple places without a shared source of truth.
Co-location previously guaranteed alignment. That guarantee is now gone.
A change in pricing logic now affects multiple UI surfaces.
If one surface updates logic and another does not, totals silently diverge.
// Navbar
const itemCount = cart.reduce((acc, item) => acc + item.quantity, 0)
// Checkout
useEffect(() => {
let newSubtotal = 0
cart.forEach(item => {
newSubtotal += item.price * item.quantity
})
...
}, [cart, discountCode])Product decides to change shipping logic.
Checkout updates to: free shipping over $150.
Navbar logic remains unchanged.
Users see inconsistent totals across surfaces.
No runtime error. No crash. Silent inconsistency.
The first crack is not failure. It is divergence.