Domain:
Coding

Difficulty:
Advanced

Problem / steps to reproduce (for bugs)

• On the homepage & results page, there is a search input field.
• Each time the user types a character, the app immediately triggers an API call.
• This results in many unnecessary/expensive API requests (one per keystroke).
• This behavior causes performance issues, slow UI, and unnecessary server load.

Expected outcome / task:
Implement a debounce mechanism on the homepage search input so that:

• The API call is not triggered on every keypress.
• Instead, the call is made only after the user stops typing for a defined timeout (e.g., 300–500ms).
• Ensure the search experience feels smooth and responsive.

Any links or references:

• https://lodash.com/docs/#debounce
• https://react.dev/reference/react/useCallback (if using React)
• https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

Setup Steps (short):

• Ensure the project runs locally (e.g., npm install + npm run dev).
• Locate the homepage search component.
• Add or import a debounce helper (custom or via lodash).
• Wrap the search API trigger inside the debounce function.
• Test by typing quickly in the search bar and confirm only one API call fires after typing stops.