Hotel-Booking/docs/tasks_2_Home_&_RoomSearch.md

Review System

Function 1: HomePage – Homepage displaying featured rooms

Objective

Create a homepage interface introducing featured rooms, banner and navigation to room list.

Detailed Tasks

1. Route: /
2. Banner:

   GET /api/banners?position=home
   

   • If no banner → display default image.
   • Can use Carousel or static image.
3. Featured rooms:

   GET /api/rooms?featured=true
   

   • Display 4–6 rooms using RoomCard component.
   • "View all rooms" button → navigate to /rooms.
4. Loading skeleton while waiting for data.

Expected Results

1. Homepage displays banner and featured room list clearly.
2. When no banner → fallback image is displayed.
3. Featured rooms load from API, limited to 4–6 rooms.
4. Smooth UX, with skeleton when loading.
5. "View all rooms" button navigates correctly to /rooms.

---

Function 2: RoomListPage – Room List & Filters

Objective

Display room list, allow users to filter by type, price, number of guests and pagination.

Detailed Tasks

1. Route: /rooms
2. Filters (RoomFilter component):
   • Filter fields: room type, min–max price, number of guests.
   • On submit → call API:

     GET /api/rooms?type=&minPrice=&maxPrice=&capacity=&page=
     

   • Save filters to URL query.
   • "Reset" button to clear all filters.
3. Pagination (Pagination component).
4. Display list using RoomCard.

Expected Results

1. Room list displays accurately according to filter.
2. Filters work smoothly, can reset easily.
3. Pagination displays correct page numbers.
4. Filters saved in URL (helps reload without losing).
5. Responsive interface, easy to read, no breakage.

---

Function 3: RoomDetailPage – Room Details & Reviews

Objective

Create a complete room detail page with information, images, amenities and review section.

Detailed Tasks

1. Route: /rooms/:id
2. Content section:
   • Room information (images, description, price, amenities)
   • RoomGallery: Image carousel
   • RoomAmenities: amenities list
   • "Book Now" button → navigate to /booking/:roomId
3. Review Section:
   • Get approved review list:

     GET /api/rooms/:id/reviews
     

   • If user has booked the room before:

     POST /api/reviews
     

4. RatingStars + ReviewForm component.
5. If not logged in → display "Please login to review".
6. Calculate average review rating.
7. Loading skeleton when waiting for reviews.

Expected Results

1. Displays complete images, description, room amenities.
2. Carousel works smoothly.
3. Reviews display correctly, with average star rating.
4. Users who have booked can write reviews (after approval).
5. "Book Now" button navigates correctly to booking form.
6. Skeleton displays when waiting for data.

---

Function 4: SearchRoom – Find available rooms

Objective

Allow users to find available rooms by date and room type.

Detailed Tasks

1. Search form (on HomePage or RoomListPage):
   • Input: arrival date (from), departure date (to), room type.
2. API:

   GET /api/rooms/available?from=&to=&type=
   

3. Validation:
   • from < to
   • from not less than today.
4. Results:
   • Display list using RoomCard.
   • If no results → "No matching rooms found".
5. Use react-datepicker or react-day-picker.
6. Loading spinner while searching.

Expected Results

1. Room search form works, validates correctly.
2. When clicking search → displays available room list.
3. If no results → friendly message.
4. Loading displays clearly while waiting.
5. Search by date & room type accurately from backend.

---

Function 5: Wishlist – Favorites list

Objective

Allow users to add, remove or view favorite rooms list.

Detailed Tasks

1. API:

   POST /api/favorites/:roomId   # Add
   DELETE /api/favorites/:roomId # Remove
   GET /api/favorites            # Get favorites list
   

2. UI:
   • FavoriteButton (icon ❤️):
     • If favorited → filled red
     • If not → gray border
   • Tooltip: "Add to favorites" / "Remove from favorites"
3. If not logged in:
   • Save temporarily in localStorage (guestFavorites)
   • When logged in → sync with server.
4. Toast notification when adding/removing favorites.

Expected Results

1. ❤️ button works correctly (red / gray).
2. Unauthenticated users can still save favorites temporarily.
3. When logged in → list syncs with backend.
4. Toast displays "Added to favorites" / "Removed from favorites".
5. API works correctly, no 401 error when logged in validly.

---

Function 6: UI/UX & Performance Optimization

Objective

Improve user experience, optimize loading speed and responsive display capability.

Detailed Tasks

1. Loading skeleton when fetching rooms or reviews.
2. Debounce when entering price to avoid continuous API calls.
3. Infinite scroll (optional) instead of pagination.
4. Responsive layout:
   • Desktop: 3–4 columns
   • Tablet: 2 columns
   • Mobile: 1 column
5. Empty states:
   • No rooms → display illustration + "No matching rooms found" message.
   • No reviews → "Be the first to review!".
6. Toast notifications when adding favorites, submitting reviews, network errors.

Expected Results

1. Page works smoothly, has skeleton when waiting for data.
2. Fast response speed (debounce works).
3. Responsive on all screen sizes.
4. Empty states display friendly.
5. Toast notifications clear, friendly UX.

---