Machine Coding

🔹 Core UI / Component Building

1. Debounce & Throttle utility (reusable implementation)
2. Custom Modal / Dialog component
3. Custom Dropdown / Select component (with search, keyboard navigation)
4. Accordion / Tabs
5. Tooltip / Popover
6. Carousel / Image Slider
7. Infinite Scroll / Virtualized List
8. Pagination Component
9. Star Rating Component
10. Autocomplete / Typeahead Search

---

🔹 State & Data Handling

1. Counter App with Increment/Decrement
2. Todo List with CRUD
3. Shopping Cart (Add/Remove/Quantity Update)
4. Form with Validations (including async validation)
5. Multi-step Form Wizard
6. Table with Sorting, Filtering, Pagination
7. Data Fetching Component (API + Loader + Error State)

---

🔹 Custom Implementations (Polyfill / Utilities)

1. Custom Promise.all, Promise.race
2. Custom map, filter, reduce
3. Custom bind, call, apply
4. Event Emitter / Pub-Sub System
5. Retry API call with exponential backoff
6. Custom useState or useEffect Hook (React)

---

🔹 Real-World Features

1. Drag and Drop (Kanban Board / Trello-style)
2. File Upload with Progress Bar
3. Clipboard Copy (Custom hook / component)
4. Dark Mode Toggle (with localStorage)
5. Undo/Redo functionality
6. Rate Limiter (API calls)
7. Search + Highlight text in results

---

🔹 System Design (Frontend-focused)

1. Design a Notification System (real-time via polling/websocket)
2. Design a Chat UI (one-to-one messaging)
3. Design a Polls / Voting app
4. Design a YouTube-like Video Player (play, pause, seek)
5. Design a Calendar Component
6. Design a Dashboard (widgets, charts, filters)

---

✅ Most frequently asked (top priority for practice):

• Debounce + Throttle
• Todo List / Cart
• Autocomplete / Search with API
• Table (Sorting + Filtering + Pagination)
• Event Emitter
• Infinite Scroll / Virtual List
• Drag and Drop (Kanban)
• Promise.all polyfill

---