Sample 2
App
Overview
Modals surface many hidden UI challenges:
- Focus trapping
- Escape key handling
- Scroll locking
- Controlled vs uncontrolled state
This component was first implemented in Vanilla JS to understand DOM-level concerns, then rebuilt in React to explore declarative state management.
Key Challenges
- Preventing background interaction
- Returning focus on close
- Avoiding layout shift when locking scroll
Vanilla JS vs React
Vanilla JS forced explicit DOM handling and event cleanup.
React simplified:
- State transitions
- Conditional rendering
- Component composition
But the underlying problems remained the same.
What I Learned
- Accessibility should be designed first, not added later
- React helps organize logic, but doesn’t solve UX automatically