Flex Living Reviews Dashboard - Technical Documentation

🔗 Live Demo: https://flex-living-dashboard-3xbs.vercel.app/properties

1. Project Overview

The Flex Living Reviews Dashboard is a comprehensive review management system that enables property managers to curate and publish guest reviews for their premium properties. The system integrates with the Hostaway Reviews API (mocked) and provides both manager-facing and guest-facing interfaces.

2. Tech Stack

Frontend

• Next.js 15 (App Router) - React framework with server-side rendering
• React 18 - UI component library
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Icon library

Backend

• Next.js API Routes - Serverless functions for API endpoints
• Local Storage - Persistence layer for published reviews (demo purposes)

Development Tools

• ESLint - Code linting
• TypeScript (optional) - Type safety

3. Architecture & Design Decisions

3.1 Component Architecture

app/
├── api/reviews/hostaway/    # API endpoint for review data
├── components/              # Reusable UI components
│   ├── Dashboard.js        # Manager dashboard
│   ├── ReviewCard.js       # Modular review display
│   └── Navigation.js       # App-wide navigation
├── dashboard/              # Manager dashboard route
├── properties/             # Public property listing
├── property/[id]/          # Individual property pages
└── utils/                  # Helper functions

3.2 Key Design Decisions

1. Mock API Integration

• Created realistic API responses matching Hostaway structure
• Normalized review data for consistent frontend consumption
• Added property ID mapping for reliable navigation

2. Modular Review Display

• ReviewCard component with multiple display variants (table/card)
• Reusable across dashboard and property pages
• Consistent styling and behavior

3. Persistent Review Publishing

• LocalStorage for demo (easily replaceable with database)
• Reviews remain published across sessions
• Manager can update selections anytime

4. Role-Based Access

• Simple localStorage-based authentication for demo
• Separate navigation for managers vs. guests
• Protected dashboard routes

4. API Behaviors

GET /api/reviews/hostaway

Purpose: Fetches and normalizes review data

Response Structure:

{
  "status": "success",
  "result": [
    {
      "id": 7453,
      "type": "guest-to-host",
      "status": "published",
      "rating": 8,
      "publicReview": "Great stay!",
      "categories": [...],
      "propertyId": 848961949,
      "guestName": "John Doe",
      "listingName": "2B N1 A - Shoreditch",
      "channel": "Airbnb",
      "isSelected": false
    }
  ]
}

Data Transformations:

• Calculates average ratings from category ratings
• Maps property names to consistent IDs
• Normalizes channel data
• Converts ratings to 5-star scale for display ( still buggy *_^ )

5. Feature Implementation

5.1 Manager Dashboard Features

Property Performance

• Displays review counts and average ratings per property
• Visual hierarchy for easy scanning
• Search functionality for large property lists

Filtering & Sorting

• Multi-criteria filtering: property, rating, channel, date range
• Bidirectional sorting: date, rating
• Real-time filter updates
• Persistent filter states during session

Trend Analysis

• Identifies recurring issues from low-rated reviews
• Keyword extraction from review text
• Category performance tracking

Review Publishing

• Checkbox selection with visual feedback
• Bulk publish/unpublish operations
• Published status indicators
• Confirmation dialogs for destructive actions

5.2 Guest-Facing Features

Property Browsing

• Responsive grid layout
• Filtering (price, guests, type)
• Search by location or property name
• Sort by price, rating, or featured

Property Details

• Flex Living branded design (alittle bit poor due to time constraints)
• Only shows manager-approved reviews
• Guest-to-host reviews only (relevant content)
• Rating display converted to 5-star scale ( Also still buggy _ )

6. Google Reviews Integration (Exploration)

Findings:

Google Places API can provide review data through:

• Places Details endpoint
• Requires API key and Place ID
• Returns maximum 5 most relevant reviews
• Real-time data but limited quantity

Implementation Considerations(challenges):

• Cost: Pay-per-request pricing model
• Rate Limits: Quotas on API calls
• Data Limitations: Only 5 reviews, no historical data
• Authentication: Requires Google Cloud setup
• Place ID Mapping: Each Flex Living property must be mapped to corresponding Google Place ID
• Limited Business Profiles: Short-term rental properties often lack established Google Business listings or have inconsistent presence
• Data Inconsistency: Property names in Google may not match internal Flex Living naming conventions
• Review Attribution: Difficulty in matching Google reviews to specific booking periods or guest stays

Alternative Approaches Considered

• 1. Web Scraping Pros: Could potentially access full review data Cons: Legally risky 😔

• 2. Manual Data Entry Pros: Simple Cons: Time-consuming, prone to errors, and not scalable

Recommendation:

1. Primary reviews from Hostaway (comprehensive)
2. Google Reviews integration should be considered as a future enhancement once:

• Core dashboard is stable and proven valuable
• Property-to-Place ID mapping is established
• Caching Google data to minimize API costs is implemented

7. Setup Instructions

Prerequisites:

• Node.js 16+ installed
• npm or yarn package manager

Installation:

# Clone the repository
git clone [repository-url]

# Navigate to project
cd flex-living-dashboard

# Install dependencies
npm install

# Run development server
npm run dev

# Open browser to http://localhost:3000

Environment Setup:

No environment variables required for demo.

8. Testing the Application

Manager Flow:

1. Navigate to /properties
2. Click "Manager Login" and confirm
3. Access Dashboard from navigation
4. Select reviews to publish
5. Click "Publish Selected Reviews"
6. View published reviews on property pages

Guest Flow:

1. Browse properties at /properties
2. Use filters to find suitable properties
3. Click property to view details
4. See only manager-approved reviews

9. Key Features Implemented

Requirements Checklist:

• ✅ Hostaway API integration (mocked)
• ✅ Review normalization and data parsing
• ✅ Per-property performance metrics
• ✅ Multi-criteria filtering and sorting
• ✅ Trend analysis and issue detection
• ✅ Review selection and publishing
• ✅ Flex Living branded property pages
• ✅ Manager-controlled review display
• ✅ Google Reviews exploration documented

Additional Features:

• 🎯 Property search functionality
• 🎯 Responsive design for all devices
• 🎯 Role-based navigation
• 🎯 Persistent review publishing
• 🎯 Quick property navigation from dashboard
• 🎯 Visual status indicators

10. Future Enhancements

Production Readiness:

1. Replace localStorage with database
2. Implement proper authentication
3. Add real Hostaway API integration
4. Implement caching strategy
5. Add error boundaries and loading states
6. presist the "clear all selection" button state
7. Fix current bugs (most noticed one -> rating display converted to 5-star scale)

Feature Additions:

1. Review response functionality
2. Automated review quality scoring
3. Email notifications for new reviews
4. Advanced analytics dashboard
5. Multi-language support

11. Problem-Solving Initiatives

Dynamic Property ID Mapping

• Problem: Inconsistent property identification
• Solution: Created utility function to generate consistent IDs
• Impact: Reliable navigation between all pages

Review Relevance Filtering

• Problem: Host reviews shown to guests in the property page
• Solution: Filtered by review type on property pages
• Impact: More relevant content for potential guests

Persistent Publishing State

• Problem: Review selections lost on refresh
• Solution: LocalStorage persistence with state synchronization
• Impact: Better user experience for managers

12. Code Quality

Structure:

• Modular component architecture
• Reusable utility functions
• Consistent naming conventions

Best Practices:

• React hooks for state management
• Responsive design patterns

Documentation:

• Inline code comments
• Setup and deployment guides

---

Project developed by: Ziad Rohayiem ft. The Great Performer: Claude Opus 4 Date: 25/09/2025 Version: 1.0.0