As a user, I want to search for campsites by entering keywords on the home page, so that I can easily find specific campsites that match my interests.
Acceptance Criteria:
Search Input:
There is a search input box on the home page where users can type in keywords.
Placeholder text in the search box reads “Search campsites by title.”
Matching Campsites Display:
When the user enters a keyword, the app should query the database for campsites whose titles contain the keyword (case-insensitive).
Search results should display campsites that match the keywords in real-time as the user types.
If no campsites match the search, display a message: “No campsites found.”
Search Result Layout:
The matching campsites should be displayed in the same grid format (3 campsites across) as all campsites.
Ensure that the search results are mobile-friendly.
Clear Search:
Users should be able to clear the search results and return to the full list of campsites by clearing the search input.
Tasks:
Frontend:
Add a search input box to the home page (in the CampList component).
Implement a search query handler that filters campsites as the user types.
Ensure that search results are displayed dynamically without page refresh.
Style the search bar and ensure the layout remains responsive across different device sizes.
Backend:
Modify the backend API to accept query parameters for filtering campsites by title.
Implement the logic in the backend to return only campsites whose titles match the given keyword (case-insensitive).
Database:
Ensure that the campsite titles are indexed in the database for optimized search queries.
Testing:
- Unit test the backend route that handles keyword search queries.
- Create integration tests to verify that the frontend can fetch and display filtered search results properly.
- Perform manual testing on both desktop and mobile views to ensure responsiveness and proper functionality.
Testing Scenarios:
Scenario 1: Search by Keyword
Given: The user is on the home page.
When: The user types in a keyword in the search box.
Then: Campsites with matching titles should be displayed in real-time.
Scenario 2: No Matching Campsites
Given: The user types a keyword with no matching campsites.
When: The search returns no matches.
Then: The message “No campsites found” should be displayed.
Scenario 3: Clear Search
Given: The user has entered a search query.
When: The user clears the search input.
Then: The full list of campsites should be displayed again.
Scenario 4: Mobile Responsiveness
Given: The user is on a mobile device.
When: The user performs a search.
Then: The layout should adjust to display search results in a mobile-friendly grid.
User Story:
As a user, I want to search for campsites by entering keywords on the home page, so that I can easily find specific campsites that match my interests.
Acceptance Criteria:
Search Input:
There is a search input box on the home page where users can type in keywords.
Placeholder text in the search box reads “Search campsites by title.”
Matching Campsites Display:
When the user enters a keyword, the app should query the database for campsites whose titles contain the keyword (case-insensitive).
Search results should display campsites that match the keywords in real-time as the user types.
If no campsites match the search, display a message: “No campsites found.”
Search Result Layout:
The matching campsites should be displayed in the same grid format (3 campsites across) as all campsites.
Ensure that the search results are mobile-friendly.
Clear Search:
Tasks:
Frontend:
Add a search input box to the home page (in the CampList component).
Implement a search query handler that filters campsites as the user types.
Ensure that search results are displayed dynamically without page refresh.
Style the search bar and ensure the layout remains responsive across different device sizes.
Backend:
Modify the backend API to accept query parameters for filtering campsites by title.
Implement the logic in the backend to return only campsites whose titles match the given keyword (case-insensitive).
Database:
Testing:
Testing Scenarios:
Scenario 1: Search by Keyword
Given: The user is on the home page.
When: The user types in a keyword in the search box.
Then: Campsites with matching titles should be displayed in real-time.
Scenario 2: No Matching Campsites
Given: The user types a keyword with no matching campsites.
When: The search returns no matches.
Then: The message “No campsites found” should be displayed.
Scenario 3: Clear Search
Given: The user has entered a search query.
When: The user clears the search input.
Then: The full list of campsites should be displayed again.
Scenario 4: Mobile Responsiveness
Given: The user is on a mobile device.
When: The user performs a search.
Then: The layout should adjust to display search results in a mobile-friendly grid.