183 lines
5.4 KiB
Markdown
183 lines
5.4 KiB
Markdown
# 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.
|
||
|
||
---
|