UI Patterns
Portals, modals, focus traps, infinite scroll, drag-drop and virtualization.
- Hard~35 min
Portal with Event Handling
A modal rendered via Portal doesn't close when clicking outside because the click event doesn't bubble…
- Portals
- Events
Start Challenge - Medium~20 min
Portal for Modal Overlay
The modal renders inside a deeply nested component, causing z-index and overflow issues. The modal gets…
- Portals
Start Challenge - Medium~20 min
Infinite Scroll with IntersectionObserver
The list loads all items at once, causing slow initial load and poor performance with large datasets.
- IntersectionObserver
Start Challenge - Hard~35 min
Drag and Drop Reorderable List
Create a list where items can be reordered by dragging. Use the native HTML5 Drag and Drop API.
- Drag & Drop
Start Challenge - Hard~35 min
Virtualized List for Large Data
The list renders 10,000 items causing the browser to freeze. Implement virtualization to only render visible…
- Virtualization
Start Challenge - Hard~35 min
Focus Trap for Accessible Modal
When a modal is open, the user can still Tab into elements behind it — a real accessibility bug. Implement a…
- A11y
Start Challenge - Medium~20 min
Global Toast Notification System
Build a toast notification system that any component can trigger via a useToast() hook. Toasts auto-dismiss…
- Toasts
Start Challenge - Hard~35 min
Kanban Board: Search, Undo Toast & Priorities
Build three features on top of a working Kanban board. The baseline already ships: four columns rendered from…
- Undo/Redo
- Toasts
Start Challenge - Hard~35 min
Data Table Pro: Sorting, Comparators & GroupBy Footer
Build three features on a working employee table rendered from a COLUMNS config.
- React
Start Challenge - Hard~35 min
Faceted Filter Panel with Live Counts
A product catalog with a facet sidebar (brand / category / color) generated from config. The baseline wires…
- React
Start Challenge - Hard~35 min
Week Scheduler: Drag Ranges & Overlap Guard
A Mon–Fri × hourly grid where the baseline already works: type a title, click a cell, a one-hour event…
- Drag & Drop
Start Challenge - Hard~35 min
Spreadsheet Lite: Formulas, Refs & Cycle Detection
A 4×5 spreadsheet with a formula bar: click a cell, type raw content, and the Σ footer sums plain numbers…
- Forms
Start Challenge - Hard~35 min
Command Palette: Fuzzy Search, Keyboard & Recents
An editor mock with a working ⌘K / Ctrl+K palette — but it is mouse-only and its filter is a strict substring…
- React
Start Challenge