Machine Coding Challenges
Browse every challenge in one place. Read the full walkthrough, then jump into the playground to build it yourself.
Skeleton Loader
Build a skeleton loader that shows animated placeholder shapes while a user profile card loads.
Live Markdown Editor
Build a split-pane markdown editor with real-time preview. Write your own markdown-to-HTML parser — no libraries.
Autocomplete / Typeahead
Build an autocomplete input with debounced API calls, keyboard navigation, and highlighted matching text.
Server-Side Todo App
Build a full-stack todo app with server-side rendering, API routes, and client-side interactivity.
Custom Debounce
Implement a debounce function from scratch and wire it to a search input with an event log.
Infinite Scroll
Build an infinite scroll feed using IntersectionObserver with a paginated API.
Multi-Select Dropdown
Create a multi-select dropdown with search, keyboard navigation, and ARIA attributes.
Image Carousel
Build an image carousel with smooth transitions, auto-play, pause on hover, and keyboard support.
Breadcrumb Navigation
Build a file explorer with breadcrumb navigation through a nested folder structure.
Countdown Timer
Build a countdown timer with start, pause, and reset controls using refs and intervals.
Drag & Drop Zone
Create a drag-and-drop file upload zone with visual feedback and file list management.
Highlight Search Component
Build a search component that highlights matching text within a list of items.
Highlight Search Text
Implement text highlighting that marks matching substrings within a paragraph of text.
OTP Input
Build a one-time password input with auto-focus, paste support, and keyboard navigation.
Toast / Notification System
Build a toast notification system with auto-dismiss, stacking, and different severity types.
Virtualized List
Implement a virtualized list that efficiently renders thousands of items by only mounting visible rows.