StaySwift 🏨

A modern hotel search and booking application powered by LiteAPI, featuring interactive maps, real-time hotel data, and seamless booking experiences across web and mobile platforms.

🌟 Features

• LiteAPI Widget Integration: Complete widget suite including search bars, hotel lists, and interactive maps
• Smart Hotel Search: Real-time search with destination autocomplete and live availability
• Interactive Maps: Explore hotels with integrated LiteAPI maps and location-based filtering
• Mobile-First Design: Responsive UI optimized for all devices with touch-friendly interfaces
• Direct Booking Integration: Seamless booking flow with StaySwift branded domains
• Travel Amenities: Uber vouchers and eSIM data plans for enhanced travel experience
• Professional UI: Clean, modern interface with teal brand colors and smooth animations
• Help & Support: Comprehensive help center with FAQ and multiple contact options

🚀 Tech Stack

Frontend

• React 19 with TypeScript for modern development
• Vite for lightning-fast development and building
• Tailwind CSS with custom StaySwift theme (rgb(8, 126, 139))
• React Router for client-side navigation
• LiteAPI SDK for hotel widgets and real-time data
• Lucide React for consistent iconography

Core Architecture

• Frontend-Only Architecture: Streamlined deployment with direct LiteAPI integration
• Domain Strategy: Smart domain selection for optimal hotel data access
• Component-Based: Modular React components for maintainability
• TypeScript: Full type safety and enhanced developer experience

📱 Pages & Features

Core Pages

• Homepage (/): Welcome section with featured hotels and search widget
• Hotels Page (/hotels): Browse hotels with interactive map and filtering
• Amenities (/amenities): Travel add-ons including Uber vouchers and eSIM plans
• Destinations (/destinations): Popular destination showcases
• Help Center (/help): FAQ, support options, and search functionality
• Contact Us (/contact): Multiple contact methods and support channels

Special Pages

• Booking Success (/booking-success): Post-booking confirmation and next steps
• Welcome Back (/welcome-back): Returning user experience

🛠️ Installation & Setup

Prerequisites

• Node.js 18+ and npm
• Git for version control
• Modern web browser with JavaScript enabled

Quick Start

# Clone the repository
git clone https://github.com/yosephdev/StaySwift.git
cd StaySwift/frontend

# Install dependencies
npm install

# Start development server
npm run dev

Runs on: http://localhost:5175 (auto-detects available port)

🔧 Configuration

Environment Variables

Create .env files in the frontend directory:

Frontend (.env)

VITE_WHITELABEL_DOMAIN=stayswift.nuitee.link
VITE_BOOKING_DOMAIN=stayswift.nuitee.link

LiteAPI Integration

• Uses production LiteAPI SDK from CDN
• Smart domain selection for optimal hotel data access
• Branded booking URLs with StaySwift domain
• Automatic widget initialization and error handling

📁 Project Structure

StaySwift/
├── frontend/                    # React TypeScript frontend
│   ├── src/
│   │   ├── components/         # Reusable UI components
│   │   │   ├── Header.tsx      # Navigation header
│   │   │   ├── Footer.tsx      # Site footer
│   │   │   ├── LiteAPIMap.tsx  # Interactive hotel map
│   │   │   ├── LiteAPISearchWidget.tsx  # Hotel search
│   │   │   └── ErrorBoundary.tsx        # Error handling
│   │   ├── pages/              # Page components
│   │   │   ├── HomePage.tsx    # Main landing page
│   │   │   ├── HotelsPage.tsx  # Hotel browsing with map
│   │   │   ├── AmenitiesPage.tsx       # Travel add-ons
│   │   │   ├── HelpCenterPage.tsx      # Support center
│   │   │   └── ContactUsPage.tsx       # Contact forms
│   │   ├── services/           # API and utility services
│   │   │   ├── liteAPIService.ts       # LiteAPI integration
│   │   │   └── graphqlClient.ts        # GraphQL client
│   │   ├── types/              # TypeScript definitions
│   │   ├── styles/             # CSS and theme files
│   │   └── config/             # App configuration
│   ├── public/                 # Static assets
│   │   ├── StaySwift_logo.png  # Brand logo
│   │   └── favicon-stayswift.png       # Site favicon
│   ├── docs/                   # Integration documentation
│   ├── tailwind.config.js      # Tailwind configuration
│   └── vite.config.ts          # Vite configuration
├── docs/                       # Project documentation
│   ├── LITEAPI_INTEGRATION.md  # LiteAPI setup guide
│   ├── LITEAPI_WIDGETS.md      # Widget implementation
│   └── whitelabel-config.md    # Domain configuration
└── README.md                   # This file

🎯 Key Components

LiteAPI Widget Integration

• LiteAPISearchWidget: Hotel search with destination autocomplete and date selection
• LiteAPIMap: Interactive map with hotel markers and booking integration
• SimpleHotelsList: Hotel listings with real-time pricing and availability
• Smart Domain Handling: Automatic domain selection for optimal performance

Core Features

• Responsive Design: Mobile-first approach with Tailwind CSS
• Error Handling: Comprehensive error boundaries and user feedback
• Loading States: Smooth loading experiences across all components
• Brand Consistency: Custom teal color theme (rgb(8, 126, 139)) throughout

Pages Architecture

• Homepage: Featured hotels, search widget, and welcome section
• Hotels Page: Interactive map integration with hotel browsing
• Support System: Help center with FAQ and multiple contact channels
• Travel Services: Uber vouchers and eSIM data plan integrations

🚀 Deployment

Vercel Deployment (Recommended)

# Build for production
npm run build

# Deploy to Vercel (automatic from GitHub)
# Environment variables configured in Vercel dashboard

Manual Deployment

# Build static files
npm run build

# Deploy dist/ folder to any static hosting provider
# (Netlify, Surge, GitHub Pages, etc.)

🔗 Live Demo

• Production URL: [Deployed on Vercel]
• Features: All LiteAPI widgets functional with real hotel data
• Mobile: Fully responsive across all devices
• Performance: Optimized for fast loading and smooth interactions

📊 API Integration

LiteAPI Endpoints

• Real-time hotel search and availability
• Interactive map with hotel markers
• Direct booking integration with branded URLs
• Destination autocomplete and place search

GraphQL Support

• Optional GraphQL client for extended functionality
• Prepared for additional data sources and APIs
• Type-safe operations with generated types

🎨 Design System

Brand Colors

• Primary: #087e8bff - Teal brand color
• Secondary: Complementary teal variations (50-900)
• Consistent: Applied across all interactive elements

Typography

• Font: Inter, system fonts for optimal loading
• Scale: Tailwind typography scale for consistency
• Responsive: Adaptive sizing across breakpoints

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

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

🙏 Acknowledgments

• LiteAPI for comprehensive hotel data and widgets
• Vercel for seamless deployment platform
• Tailwind CSS for utility-first styling
• React for modern component architecture
• Vite for fast development experience

📞 Contact

Developer: Yoseph Berhane Gebremedhin
Repository: https://github.com/yosephdev/StaySwift
Demo: [Live on Vercel]

---

⭐ Star this repository if you found it helpful!