Skip to main content
Back to Projects

StayChat AI

an intelligent hotel communication platform.

TypeScript
View on GitHub

StayChat AI - Hotel Communication Dashboard

An exact visual replica of the StayChat AI dashboard for hotel communication management. Built with Next.js, TypeScript, Tailwind CSS, and modern React patterns.

Features

  • Modern Dashboard UI: Dark-themed interface with glassmorphism effects
  • Real-time Chat Preview: AI-powered conversation monitoring
  • KPI Metrics: Track bookings, response rates, active chats, and revenue
  • Performance Analytics: Guest interaction charts and hotel rankings
  • Responsive Design: Optimized for desktop, tablet, and mobile devices
  • Smooth Animations: Framer Motion for subtle hover and transition effects

Tech Stack

  • Framework: Next.js 16 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • UI Components: shadcn/ui
  • Icons: Lucide React
  • Animations: Framer Motion
  • Charts: Recharts

Getting Started

Installation

  1. Install dependencies:
npm install

Development

Run the development server:

npm run dev

Open http://localhost:3000 in your browser to view the dashboard.

Build

Build the application for production:

npm run build

Start Production Server

npm start

Project Structure

├── app/
│   ├── layout.tsx          # Root layout with sidebar and topbar
│   ├── page.tsx            # Main dashboard page
│   └── globals.css         # Global styles and custom utilities
├── components/
│   ├── ui/                 # shadcn/ui base components
│   ├── Sidebar.tsx         # Navigation sidebar
│   ├── Topbar.tsx          # Top navigation bar
│   ├── StatCard.tsx        # KPI metric cards
│   ├── ChartCard.tsx       # Guest interactions chart
│   ├── HotelsList.tsx      # Top performing hotels list
│   └── ChatPreview.tsx     # Real-time chat preview
├── lib/
│   ├── data.ts             # Static mock data
│   └── utils.ts            # Utility functions
└── tailwind.config.ts      # Tailwind configuration with custom theme

## Design Specifications

### Colors

- **Background**: #0B0F14 (near-black blue)
- **Panels**: #0F151C, #0E131A
- **Accent Colors**:
  - Cyan: #06B6D4
  - Mint: #14E5B6
  - Green: #22C55E
  - Blue: #3B82F6

### Layout

- **Sidebar Width**: 280px
- **Right Column Width**: 420px
- **Topbar Height**: 68px
- **Card Border Radius**: 22px
- **Grid Gaps**: 24px

### Typography

- **Font**: Inter (400/500/600/700)
- **Base Tracking**: tight
- **Antialiasing**: enabled

## Responsive Breakpoints

- **≤1280px**: Reduced right column (360px), smaller font sizes
- **≤1024px**: Hidden right column, collapsed sidebar (72px icon bar)
- **≤768px**: Stacked KPI cards (1 column), full-width search

## Features by Component

### Sidebar
- Navigation with active states
- Cyan/mint glow on active item
- "Live" badge on Chat item
- AI Assistant presence indicator

### Topbar
- Global search input
- Notification bell with badge
- User profile with avatar

### KPI Cards
- Gradient backgrounds with noise texture
- Icon with glow effect
- Percentage change indicators
- Hover animations with shadow lift

### Chart Card
- Time range selector (7D/30D/90D)
- Recharts area chart with grid
- Styled dark theme

### Hotels List
- Ranked items with gradient badges
- Satisfaction and message metrics
- Divider lines between items

### Chat Preview
- User and AI message bubbles
- Timestamps on messages
- Live status indicator
- Disabled input (monitoring mode)

## License

MIT

## Author

Built with ❤️ for hotel communication excellence