oldvine/SETUP_GUIDE.md

The Old Vine Hotel - Complete Website Solution

🏨 Project Overview

A comprehensive, production-ready hotel website built with modern technologies, featuring advanced booking capabilities, PMS integration, and multi-platform connectivity. This solution provides everything needed for a luxury hotel's digital presence.

✨ Key Features

🎯 Core Functionality

• Modern Responsive Design - Elegant UI with mobile-first approach
• Real-time Booking Engine - Complete reservation system with availability checking
• Secure Payment Processing - Stripe integration for safe transactions
• Multi-language Support - English, Arabic, French with easy expansion
• Guest Management System - Comprehensive profile and loyalty program management
• Admin Dashboard - Full control panel for hotel operations

🔗 Enterprise Integrations

• Opera PMS Integration - Real-time synchronization with hotel management system
• Booking Platform APIs - Ready connections to Booking.com, Trip.com, Expedia
• Channel Manager Ready - Synchronized rates and availability across all platforms
• Revenue Management - Advanced analytics and reporting capabilities

🛡️ Security & Performance

• JWT Authentication - Secure user sessions and API access
• Rate Limiting - Protection against abuse and attacks
• Input Validation - Comprehensive data sanitization
• Error Handling - Robust error management and logging
• Performance Optimization - Caching, compression, and efficient queries

🚀 Technology Stack

Frontend

• React.js 18 - Modern UI framework
• Material-UI (MUI) - Professional component library
• Framer Motion - Smooth animations and transitions
• React Query - Efficient data fetching and caching
• React Router - Client-side routing
• i18next - Internationalization framework
• Axios - HTTP client for API calls

Backend

• Node.js - Server runtime
• Express.js - Web application framework
• MongoDB - NoSQL database with Mongoose ODM
• JWT - JSON Web Token authentication
• Stripe - Payment processing
• Nodemailer - Email service
• Winston - Logging framework
• Helmet - Security middleware

Integrations

• Opera PMS - Property Management System
• Booking.com API - OTA integration
• Expedia EQC - Channel connectivity
• Trip.com API - Asian market integration
• Google Maps - Location services
• WhatsApp Business - Customer communication

📋 Prerequisites

Before installation, ensure you have:

• Node.js (v16 or higher)
• MongoDB (v5 or higher)
• npm or yarn package manager
• Stripe Account (for payments)
• Email Service (Gmail, SendGrid, etc.)
• Google Maps API Key

🛠️ Installation Guide

1. Clone and Setup

# Clone the repository
git clone <repository-url>
cd old-vine-hotel-website

# Install all dependencies
npm run install-all

2. Environment Configuration

Server Environment (.env)

# Copy the example file
cp server/.env.example server/.env

# Edit with your configuration
nano server/.env

Client Environment

# Create client environment file
cp client/.env.example client/.env

# Add your configuration
echo "REACT_APP_API_URL=http://localhost:5000" > client/.env
echo "REACT_APP_STRIPE_PUBLISHABLE_KEY=pk_test_..." >> client/.env

3. Database Setup

# Start MongoDB service
sudo systemctl start mongod

# Create database and seed initial data
cd server
npm run seed

4. Start Development Servers

# Start both frontend and backend
npm run dev

# Or start individually:
# Backend only
npm run server

# Frontend only
npm run client

5. Access the Application

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000
• Health Check: http://localhost:5000/health

🔧 Configuration Guide

Payment Setup (Stripe)

1. Create a Stripe account at https://stripe.com
2. Get your API keys from the dashboard
3. Add to your environment files:

   STRIPE_SECRET_KEY=sk_test_...
   REACT_APP_STRIPE_PUBLISHABLE_KEY=pk_test_...
   

Email Configuration

Using Gmail

EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-app-password  # Use App Password, not regular password

Using SendGrid

EMAIL_HOST=smtp.sendgrid.net
EMAIL_PORT=587
EMAIL_USER=apikey
EMAIL_PASS=your-sendgrid-api-key

Google Maps Integration

1. Get API key from Google Cloud Console
2. Enable Maps JavaScript API
3. Add to environment:

   GOOGLE_MAPS_API_KEY=your-api-key
   

Opera PMS Integration

OPERA_PMS_URL=https://your-opera-server.com/api
OPERA_PMS_USERNAME=your-username
OPERA_PMS_PASSWORD=your-password
OPERA_PMS_PROPERTY_CODE=your-property-code

Booking Platform APIs

Booking.com

BOOKING_COM_API_URL=https://distribution-xml.booking.com
BOOKING_COM_USERNAME=your-username
BOOKING_COM_PASSWORD=your-password
BOOKING_COM_HOTEL_ID=your-hotel-id

Expedia

EXPEDIA_EQC_URL=https://services.expediapartnercentral.com
EXPEDIA_USERNAME=your-username
EXPEDIA_PASSWORD=your-password
EXPEDIA_HOTEL_ID=your-hotel-id

🗂️ Project Structure

old-vine-hotel-website/
├── client/                 # React frontend
│   ├── public/            # Static assets
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   │   ├── common/    # Shared components
│   │   │   └── layout/    # Layout components
│   │   ├── pages/         # Page components
│   │   ├── services/      # API service functions
│   │   ├── utils/         # Utility functions
│   │   ├── locales/       # Translation files
│   │   └── styles/        # CSS and theme files
│   └── package.json
├── server/                # Node.js backend
│   ├── controllers/       # Route controllers
│   ├── models/           # Database models
│   ├── routes/           # API routes
│   ├── middleware/       # Custom middleware
│   ├── services/         # Business logic services
│   ├── utils/            # Utility functions
│   └── package.json
├── docs/                 # Documentation
├── deployment/           # Deployment configurations
└── README.md

📚 API Documentation

Authentication Endpoints

• POST /api/auth/register - Guest registration
• POST /api/auth/login - Guest login
• GET /api/auth/me - Get current user
• POST /api/auth/forgot-password - Password reset

Booking Endpoints

• GET /api/rooms - List available rooms
• GET /api/rooms/:id - Get room details
• POST /api/rooms/:id/availability - Check availability
• POST /api/bookings - Create booking
• GET /api/bookings/:bookingNumber - Get booking details
• PUT /api/bookings/:bookingNumber/cancel - Cancel booking

Integration Endpoints

• GET /api/integrations/health - Check integration status
• POST /api/integrations/opera/sync-rooms - Sync with Opera PMS
• POST /api/integrations/sync-rates - Update rates across platforms
• GET /api/integrations/analytics/revenue - Revenue analytics

Contact & Information

• POST /api/contact - Send contact message
• POST /api/contact/newsletter - Newsletter subscription
• GET /api/contact/info - Hotel information

🔒 Security Features

Authentication & Authorization

• JWT-based authentication with secure token management
• Role-based access control (Guest, Admin)
• Password hashing with bcrypt
• Email verification for new accounts

API Security

• Rate limiting to prevent abuse
• CORS configuration for cross-origin requests
• Input validation and sanitization
• SQL injection prevention
• XSS protection headers

Data Protection

• Encrypted sensitive data storage
• Secure payment processing with Stripe
• GDPR compliance features
• Audit logging for admin actions

📊 Performance Optimization

Frontend Optimization

• Code splitting and lazy loading
• Image optimization and caching
• Gzip compression
• Service worker for offline capability
• React Query for efficient data fetching

Backend Optimization

• Database indexing for fast queries
• Response caching with Redis
• Connection pooling
• Efficient aggregation pipelines
• Background job processing

🌐 Deployment Options

Docker Deployment

# Build and run with Docker Compose
docker-compose up -d

Manual Deployment

Frontend (Netlify/Vercel)

cd client
npm run build
# Deploy dist folder

Backend (Heroku/DigitalOcean)

cd server
npm start

Environment-Specific Configurations

Production Environment

• Use production database
• Enable SSL/HTTPS
• Configure CDN for assets
• Set up monitoring and alerts
• Enable backup strategies

Staging Environment

• Use staging database
• Enable detailed logging
• Test payment integrations
• Validate third-party APIs

🎨 Customization Guide

Theme Customization

The design uses a sophisticated color palette that can be easily customized:

// client/src/theme.js
const theme = createTheme({
  palette: {
    primary: {
      main: '#8B4513', // Change to your brand color
    },
    secondary: {
      main: '#D4AF37', // Change accent color
    },
  },
});

Logo Integration

1. Replace logo files in client/public/
2. Update logo references in Header component
3. Adjust sizing and positioning as needed

Content Management

• Room information: Update server/models/Room.js
• Hotel details: Modify server/routes/contact.js
• Translations: Edit files in client/src/locales/

Email Templates

Customize email templates in server/utils/sendEmail.js:

• Booking confirmations
• Cancellation notifications
• Newsletter templates
• Contact form responses

🧪 Testing

Running Tests

# Backend tests
cd server
npm test

# Frontend tests
cd client
npm test

Test Coverage

• Unit tests for models and utilities
• Integration tests for API endpoints
• End-to-end tests for booking flow
• Payment integration testing

📈 Monitoring & Analytics

Application Monitoring

• Winston logging for error tracking
• Performance metrics collection
• Health check endpoints
• Integration status monitoring

Business Analytics

• Booking conversion tracking
• Revenue analytics
• Guest behavior insights
• Platform performance comparison

🆘 Troubleshooting

Common Issues

Database Connection Issues

# Check MongoDB status
sudo systemctl status mongod

# Restart if needed
sudo systemctl restart mongod

Payment Processing Errors

• Verify Stripe API keys
• Check webhook configurations
• Validate test card numbers

Integration Failures

• Test API credentials
• Check network connectivity
• Verify webhook endpoints

Getting Help

• Check logs in server/logs/
• Review API responses
• Test with curl commands
• Contact support team

🔄 Maintenance

Regular Updates

• Update dependencies monthly
• Review security patches
• Monitor API changes
• Backup database regularly

Performance Monitoring

• Database query optimization
• API response times
• Error rate tracking
• User experience metrics

📞 Support

For technical support and questions:

• Documentation: Check this README and code comments
• Issues: Create GitHub issues for bugs
• Features: Submit feature requests
• General: Contact the development team

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Developed by MiniMax Agent - A comprehensive hotel management solution designed for modern hospitality businesses.

Experience luxury and elegance with The Old Vine Hotel - where technology meets hospitality.