Domain:
Coding / UX

Difficulty:
Intermediate

Problem / steps to reproduce (for bugs)

• When the user is on any page other than the homepage (e.g., search page, results page, etc.), clicking the logo redirects them to the homepage.
• If the user has unsaved changes or is in the middle of a search, these actions are lost without warning.
• This can lead to frustration and accidental loss of user input.

Expected outcome / task:
Implement a confirmation alert when a user clicks the logo from any page that is not the homepage, such that:

• The alert informs the user they will be redirected to the homepage.
• The alert also notifies them that any unsaved changes or search data will be lost.
• The user has the option to confirm the navigation or cancel to stay on the current page.

Any links or references:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
• https://react.dev/reference/react/useNavigate (if using React Router)
• General UX guidelines on unsaved changes alerts: https://uxdesign.cc/unsaved-changes-user-experience-48c24a5a5f7d

Setup Steps (short):

• Ensure the project runs locally (npm install + npm run dev).
• Identify the logo component/link used for homepage navigation.
• Add an event listener to intercept clicks on the logo.
• Show a confirmation alert if the user is not on the homepage.
• Proceed to redirect to the homepage only if the user confirms.
• Test by making changes or performing a search on a non-homepage, clicking the logo, and verifying the alert appears and works correctly.