Ersa-tech/ai-airbnb-search

AI-Powered Airbnb Search Application

A comprehensive AI-powered Airbnb search application with natural language processing capabilities, built with React frontend, Flask backend, and MCP server integration.

🏗️ Architecture Overview

• Frontend: React with TypeScript, mobile-first design
• Backend: Flask API with OpenRouter LLM integration
• MCP Server: Containerized Airbnb data service
• Deployment: Render.com with GitHub CLI workflow

📁 Project Structure

ai-airbnb-search/
├── backend/                 # Flask API server
│   ├── services/           # Business logic services
│   ├── tests/              # Backend tests
│   ├── app.py              # Main Flask application
│   └── requirements.txt    # Python dependencies
├── frontend/               # React application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── services/       # API services
│   │   └── utils/          # Utility functions
│   ├── public/             # Static assets
│   └── package.json        # Node.js dependencies
├── mcp-server/             # MCP server implementation
│   ├── src/                # MCP server source
│   ├── tests/              # MCP server tests
│   ├── Dockerfile          # Container configuration
│   └── package.json        # Node.js dependencies
├── docs/                   # Documentation
├── scripts/                # Build and deployment scripts
└── render.yaml             # Render.com deployment config

🚀 Features

• Natural Language Search: AI-powered search using OpenRouter LLM
• Mobile-First Design: Optimized for mobile devices with touch gestures
• Property Carousel: Displays exactly 5 properties with swipe navigation
• Real-time Data: Live Airbnb property data via MCP server
• Responsive UI: Works seamlessly across all device sizes

🛠️ Technology Stack

Frontend

• React 18 with TypeScript
• Tailwind CSS for styling
• React Query for state management
• Lucide React for icons

Backend

• Flask with Python 3.11+
• OpenRouter API integration
• Gunicorn for production
• Comprehensive error handling

MCP Server

• Node.js with TypeScript
• Docker containerization
• HTTP wrapper for API access
• Airbnb data integration

🔧 Development Setup

Prerequisites

• Node.js 18+
• Python 3.11+
• Docker
• GitHub CLI

Installation

1. Clone the repository

   git clone https://github.com/Ersa-tech/ai-airbnb-search.git
   cd ai-airbnb-search
   

2. Backend Setup

   cd backend
   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   pip install -r requirements.txt
   python app.py
   

3. Frontend Setup

   cd frontend
   npm install
   npm start
   

4. MCP Server Setup

   cd mcp-server
   npm install
   npm run build
   docker build -t ai-airbnb-mcp .
   docker run -p 8080:8080 ai-airbnb-mcp
   

🌐 Deployment

The application is configured for deployment on Render.com with three services:

1. MCP Server: Docker service
2. Backend: Web service (Flask)
3. Frontend: Static site (React)

Deploy using the provided render.yaml configuration.

📱 Mobile Optimization

• Touch targets minimum 44px
• Swipe gestures for carousel
• Progressive enhancement
• Dark mode support
• Optimized for 320px+ screens

🔐 Security

Configured for internal use with simplified security:

• CORS disabled for internal access
• Environment-based configuration
• Secure API key management

📊 Performance

• Lazy loading for images
• Optimized bundle sizes
• Efficient API caching
• Mobile-first loading strategies

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is for internal use only.

🆘 Support

For issues and questions, please refer to the documentation in the docs/ directory.