React Machine Coding
Practical UI challenges for frontend interviews
Practical challenges that test your ability to build real-world components from scratch.
1. Simple Counter with Step
Build a counter that increments/decrements based on a user-defined "step" value input.
- Focus: State management, controlled inputs.
2. Dynamic Search (Typeahead)
Search through a list of items and display matches in real-time. Use fetch from an API.
- Focus:
useEffect,fetch, debouncing (Advanced Axiom).
3. Modal / Popup Component
Create a reusable modal that can be opened/closed. It should close when the "X" is clicked or the user clicks outside.
- Focus:
useRef, Portals, Event listeners.
4. Accordion Component
A set of vertical tabs that expand/collapse. Only one should be open at a time.
- Focus: Lifted state (managing which one is active).
Next Step: Learn Advanced Patterns.