Domain:
Frontend / UX

Difficulty:
Intermediate

Problem / steps to reproduce (for bugs)

• When a user performs a search on the search bar and the API returns an empty array, the results page currently shows nothing.
• This creates confusion because users cannot tell if:
  • The request failed
  • The API is still loading
  • Or simply no matching data was found

Expected outcome / task:

• When a search returns an empty array:
  • Display a clear, visible message such as “No data found”
• The message should appear in the results section where data would normally load.
• Use Tailwind CSS to ensure the message is centered, readable, and consistent with the app’s overall style.
• Ensure this message is only shown when:
  • API call completed successfully
  • Data array length is 0
• Do *not* hide this message when loading or when errors occur (those states should be handled separately).

Any links or references:

• React Conditional Rendering: https://react.dev/learn/conditional-rendering

Setup Steps (short):

1. Run the project (yarn install && yarn dev).
2. Go to the search results page component.
3. After fetching search results, check: `js if (data.length === 0) { /* show message */ }