sameerkali / react_coding_round_practice

⭕ practice front-end machine coding round : prerequisite html css javascript react

Technical Round Prepraction

table of content

Easy:

• Stop Watch ✅
• Password Generator ✅
• Color Changing Button ✅
• Tabs Composition ✅
• Breadcrumbs ✅
• OTP Login
• Dark mode Light mode

Medium:

• Selectable Grid ✅
• Progress Bar ✅
• Infinite Scroll ✅
• Search Suggestions ✅
• Holy Grail Layout ✅
• useEffect Hook Polyfill✅ 😢
• useMemo Hook Polyfill
• useThrottle Hook
• Like Button - GreatFrontEnd
• Multi-Select Search
• Comment Section using React (Recursion and DFS in React)
• Modal as a functional component
• Blink game (Rowdi Coder) ✅

Hard:

• Job Board - GreatFrontEnd (Hacker News API) ✅ 😢
• Stepper Component (RoadSide Coder && Learners Bucket)
• Quiz App
• Drag and Drop Notes
• Tic Tac Toe
• Step-by-step website walk-through helper in JavaScript
• Detect overlapping circles (Learners Bucket)

other

Frontend Machine Coding Questions:

1. Implement Star Rating functionality
2. Create a reusable modal component with open and close functionality.
3. Design a Pop Over component
4. Create an Accordion UI component
5. Build a table that supports sorting columns and filtering rows based on user input.
6. Create an image carousel with next, previous, and auto-play functionality.
7. Implement a counter with increment and decrement buttons and display the current count.
8. Create a form with real-time validation for fields like email, password, and confirm password.
9. Build a grid using HTML/CSS and JavaScript with search, sort, and event bubbling (Amazon onsite)
10. Design a responsive NavBar
11. Implement Infinite Scroll feature
12. Develop Typeahead/Autocomplete functionality using a trie data structure
13. Implement a shopping cart where users can add items, remove items, and view the total price.
14. Build a Tic Tac Toe game
15. Create a Snake and Ladder board game
16. Make a Calendar of any month like a Date Picker
17. Create custom Higher Order Functions like Map, Reduce, Filter, and Sort
18. Design an analog clock
19. Implement a file upload component with progress indication.
20. Create a component that fetches data from an API and displays it in a list.
21. Build a Todo List application
22. Implement functionality to change all text on a page to different translations
23. Develop a Giphy image search and display feature (using the Giphy API) in a responsive format
24. Create a list where items can be reordered using drag and drop.
25. Build a Connect Four game
26. Implement Nested Checkboxes where parent and children checkboxes are synchronized
27. Create a poll widget
28. Build an auto-complete search input that suggests results as the user types by querying an API.
29. Implement a resizable split pane where users can adjust the width of two panels.
30. Implement a search input that debounces API calls to avoid excessive requests.
31. Create an image gallery where images are lazy-loaded as they come into the viewport.
32. Build a tabs component where content changes based on the selected tab.
33. Implement a simple markdown editor that displays formatted text as you type.
34. Create a basic chat interface with a message input, send button, and message display area.
35. Implement a form that is fully accessible, including proper ARIA roles and keyboard navigation.

Done:

• Stop Watch : ✅
• Selectable Grid : ✅
• Password Generator : ✅
• Progress Bar : ✅
• Infinite Scroll : ✅
• Search Suggestions : ✅
• Color Changing Button : ✅
• Holy Grail Layout : ✅
• Tabs Composition : ✅
• useEffect Hook Polyfill✅ 😢
• Job Board - GreatFrontEnd (Hacker News API) ✅ 😢
• Blink game (Rowdi Coder) ✅