Skip to content

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

Notifications You must be signed in to change notification settings

sameerkali/React_coding_round_practice

Repository files navigation

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) ✅