Flex Living Reviews Dashboard - Frontend

Next.js frontend application for managing and displaying property reviews.

Overview

A modern, responsive web application built with Next.js 14, React 18, and TailwindCSS. The frontend provides two main views: the Manager Dashboard for reviewing and approving guest feedback, and Property Display Pages for showing approved reviews to the public.

Tech Stack

• Framework: Next.js 14 (App Router)
• UI Library: React 18
• Styling: TailwindCSS + shadcn/ui
• Language: TypeScript
• State Management: React Hooks
• Maps: Google Maps Embed API

Project Structure

frontend/
├── app/
│   ├── page.tsx                      # Dashboard page
│   ├── layout.tsx                     # Root layout
│   ├── globals.css                    # Global styles
│   └── property/
│       └── [listingId]/
│           └── page.tsx              # Property detail page
├── components/
│   ├── dashboard/                     # Dashboard components
│   ├── property-header.tsx           # Property header
│   ├── property-reviews.tsx          # Reviews section
│   ├── property-map.tsx              # Google Maps
│   └── ui/                           # shadcn/ui components
├── hooks/
│   ├── use-reviews.ts                # Reviews data hook
│   ├── use-review-filters.ts        # Filter state
│   └── use-properties.ts             # Properties hook
├── lib/
│   ├── api/
│   │   └── reviews.ts                # API client
│   └── utils/
│       └── cn.ts                     # Utilities
├── types/
│   └── review.ts                     # TypeScript types
├── public/                           # Static assets
└── package.json

Features

Manager Dashboard

• View and filter reviews across all properties
• Real-time analytics and statistics
• Approve/disapprove reviews with instant feedback
• Advanced filtering by rating, category, date, channel
• Property-specific views

Property Display Pages

• Public-facing property listings
• Shows only approved reviews
• Interactive Google Maps
• Responsive design for all devices
• Dynamic content based on property

Setup Instructions

Prerequisites

• Node.js 18+ installed
• npm installed

Installation

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Create environment file: Create .env.local in the frontend directory:

   NEXT_PUBLIC_API_BASE_URL=http://localhost:3001
   NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

4. Run development server:

   npm run dev

5. Build for production:

   npm run build
   npm start

Environment Variables

Variable	Description	Required
NEXT_PUBLIC_API_BASE_URL	Backend API URL	Yes
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY	Google Maps API key	Optional

Getting Google Maps API Key

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable APIs:
   • Maps JavaScript API
   • Geocoding API
   • Places API
4. Create API Key in Credentials section
5. Add to .env.local

Development

Available Scripts

• npm run dev - Start development server (port 3000)
• npm run build - Build for production
• npm start - Run production server
• npm run lint - Run ESLint

Key Components

Hooks:

• useReviews - Manages review data and stats
• useReviewFilters - Handles filtering state
• useProperties - Fetches property list

Pages:

• / - Dashboard (manager view)
• /property/[listingId] - Property detail page

Components:

• DashboardStats - Analytics cards
• ReviewsList - Review listing with cards
• PropertyMap - Google Maps integration
• PropertyReviews - Approved reviews display

Styling

The project uses:

• TailwindCSS for utility-first styling
• shadcn/ui for accessible component library
• CSS Variables for theme customization
• Responsive design with mobile-first approach

API Integration

The frontend communicates with the backend via the API client in lib/api/reviews.ts.

Key functions:

• getHostawayReviews(listingId) - Fetch reviews
• getStats(listingId) - Get statistics
• approveReview(reviewId, isApproved) - Update approval
• getProperties() - Get property list

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers

Performance

• Server-side rendering with Next.js
• Image optimization
• Code splitting
• Lazy loading for maps
• Memoization for expensive calculations

Troubleshooting

Issue: Cannot connect to backend Solution: Check NEXT_PUBLIC_API_BASE_URL and ensure backend is running

Issue: Map not displaying Solution: Add NEXT_PUBLIC_GOOGLE_MAPS_API_KEY to .env.local

Issue: Build errors Solution: Delete .next folder and node_modules, reinstall

Issue: CORS errors Solution: Verify backend CORS configuration allows frontend domain

Related Documentation

• Backend README
• Frontend Deployment Guide
• Backend Deployment Guide
• Main README

License

Proprietary software developed for Flex Living.