Tripzio — AI-Powered Travel Planning & Multi-Vendor Booking Platform

Tripzio is a modern SaaS platform that helps travelers plan, organize, and book complete trips using artificial intelligence. The system generates personalized travel itineraries based on user preferences such as destination, budget, dates, and travel style, allowing users to plan complex trips within seconds.

AI travel planners typically create day-by-day itineraries, recommend attractions, and integrate booking options for flights, hotels, and activities in one unified platform.

Tripzio is a comprehensive, production-ready travel platform built with React 18, TypeScript, Tailwind CSS, and Supabase. It combines AI-powered itinerary generation, a full multi-vendor marketplace, subscription billing, and a powerful admin panel into a single deployable application. Whether you’re building a travel startup, a tour aggregator, or a white-label booking solution, Tripzio gives you everything out of the box.

Live Demo

Demo URL: https://tripzio.wrapcoders.com

Admin: admin@demo.com / Admin123!
Guide: guide@demo.com / Guide123!
User: user@demo.com / User123!

Key Highlights

• AI Itinerary Generator — Travelers enter a destination, dates, budget, and interests, and the platform generates a detailed day-by-day itinerary using integrated AI models (Google Gemini & OpenAI GPT). Itineraries include activities, estimated costs, and an interactive map view.
• Multi-Vendor Marketplace — Hotels, flights, car rentals, tour packages, and local guides are all managed by independent service providers. Each provider has a dedicated dashboard with earnings tracking, commission tiers, and listing management.
• Full Admin Panel — A complete back-office with user management, revenue analytics, provider verification, commission configuration, blog CMS, newsletter campaigns, promo codes, SEO settings, legal pages editor, multi-language/translation management, and platform branding customization.
• Subscription & Payment System — Stripe and PayPal integration with configurable subscription plans (Free, Pro, Business), usage limits, commission discounts, and full billing history.
• Role-Based Access Control — Three roles (Admin, Moderator, User) stored in a dedicated user_roles table with PostgreSQL Row-Level Security (RLS) policies and a SECURITY DEFINER helper function to prevent privilege escalation.

Technology Stack

<thead> </thead> <tbody> </tbody>

Complete Feature List

Traveler Features

• AI-powered trip planning with day-by-day itineraries
• Interactive itinerary map with route visualization
• Hotel search, filtering, and booking
• Flight search with airline details, stops, and class filters
• Car rental browsing with category, fuel type, and transmission filters
• Tour package discovery with highlights, inclusions, and difficulty levels
• Local guide hiring with availability calendars, specialties, and reviews
• Wishlist system across all listing types (hotels, flights, cars, tours, guides)
• Booking confirmation with PDF export
• Trip sharing via unique share tokens
• Review and rating system for all services and guides
• Promo code redemption at checkout
• Booking history with status tracking
• Profile management (avatar upload with image compression, bio, contact info)
• GDPR data export (JSON) and account deletion
• Cookie consent banner with granular preferences
• Newsletter subscription

Service Provider Features

• Dedicated provider registration and onboarding
• Provider dashboard with earnings overview, commission breakdown, and payout history
• Listing management for hotels, flights, vehicles, and tour packages
• Featured image upload with drag-and-drop and image compression
• Revenue charts with monthly/yearly views
• Booking management and status updates
• Commission tier system — rates decrease as revenue grows

Local Guide Features

• Guide registration with specialties, languages, experience, and hourly rate
• Booking calendar with pending/confirmed/completed views
• Earnings chart and profile summary widget
• Review management and rating display
• Availability toggle

Admin Panel Features

• Dashboard: Real-time stats — total users, bookings, revenue, active providers, subscription distribution
• User Management: List all users, assign/revoke roles (admin, moderator, user), suspend accounts, create users via Edge Function
• Revenue Analytics: Transaction logs, commission earned, provider payouts, filterable by date range and provider type
• Listings Management: CRUD for hotels, flights, vehicles, and tour packages with publish/unpublish controls
• Guide Management: Approve/reject guides, view profiles and reviews
• Subscription Plans: Create and edit plans with pricing (monthly/yearly), feature lists (JSON), usage limits, and commission discounts
• Commission Tiers: Configure tiered commission rates per provider type with min/max revenue thresholds
• Promo Codes: Create discount codes (percentage or fixed), set validity periods, usage limits, minimum order amounts, and applicable service types
• Blog CMS: Rich-text blog editor with categories, excerpts, featured images, slug management, and publish/draft controls
• Newsletter Manager: Compose and send HTML email campaigns to all subscribers via Edge Function with delivery tracking
• Announcements: Create platform-wide banners with type (info, warning, success), expiry dates, and active/inactive toggle
• Legal Pages: WYSIWYG editor for Terms of Service, Privacy Policy, and custom legal pages with last-updated labels
• SEO Manager: Per-page meta titles, descriptions, and OG image URLs for all public routes
• Language Manager: Add languages, set default, toggle active status, configure RTL direction
• Translation Manager: Namespace-based translation keys with completeness tracking per language and auto-translate via AI Edge Function
• Currency Manager: Configure supported currencies with exchange rates and symbols
• Payment Settings: Toggle Stripe/PayPal, configure API keys and webhook secrets
• Branding & Theming: Brand color picker (auto-derives full HSL palette for light/dark modes), heading & body font selection (5 Google Fonts), border radius slider, site name, tagline, hero text, and auth page customization
• Documentation: Built-in docs link opens a standalone HTML documentation site

Security & Authentication

• Email/password authentication with email verification
• Password reset flow with dedicated reset page
• Row-Level Security (RLS) on every database table
• Role-based access via SECURITY DEFINER function — no client-side role checks
• Separate user_roles table (never stored on profiles)
• Protected routes with auth guards and role-based redirects
• GDPR-compliant data export and account deletion via Edge Function
• Cookie consent with configurable preferences
• Secret keys stored as environment variables, never in source code

Internationalization

• Multi-language support with database-driven translations
• RTL layout support for Arabic, Hebrew, etc.
• Language switcher in the header
• AI-powered auto-translation via Edge Function
• Translation completeness tracking per language
• Namespace-based key organization

Theming & Design System

• Light and dark mode with system preference detection
• Admin-configurable brand color that auto-generates a full HSL palette (primary, secondary, accent, ring, sidebar tokens)
• 5 selectable Google Fonts for headings and body text
• Configurable border radius
• Semantic CSS custom properties throughout — fully tokenized design system
• shadcn/ui component library with custom variants
• Framer Motion animations on hero section and page transitions
• Fully responsive from mobile (360px) to ultrawide (2560px+)

Edge Functions (Serverless Backend)

<thead> </thead> <tbody> </tbody>

Database Schema (25+ Tables)

Fully normalized PostgreSQL schema including:

• profiles — User profiles with avatar, bio, location
• user_roles — Role assignments (admin, moderator, user)
• trips — Saved trips with AI-generated itineraries (JSON)
• hotel_listings, flight_listings, vehicle_listings, tour_packages — Multi-vendor inventory
• local_guides — Guide profiles with specialties and pricing
• guide_bookings, guide_reviews — Booking and review system
• listing_reviews — Universal review system for all listing types
• service_providers — Provider accounts with commission tracking
• marketplace_transactions — Full transaction ledger
• commission_tiers — Tiered commission configuration
• payouts — Provider payout records
• subscription_plans, user_subscriptions, subscription_events — SaaS billing
• platform_settings — Key-value configuration store
• legal_pages, page_seo — CMS content
• blog_posts — Blog CMS
• announcements, notifications — Communication
• newsletter_subscribers, newsletter_campaigns — Email marketing
• promo_codes — Discount system
• wishlists — Saved items
• languages, translations — i18n system
• supported_currencies — Multi-currency support

Quick Start

1. Clone the repository
2. Run npm install
3. Configure your Supabase project URL and anon key in .env
4. Run database migrations (supabase db push)
5. Deploy Edge Functions (supabase functions deploy)
6. Run npm run dev to start development
7. Complete the first-run Setup Wizard to create the admin account
8. Build for production with npm run build

Documentation

A complete standalone documentation site is included in the docs/ directory covering installation, architecture, database schema, RLS policies, Edge Function API reference, feature guides, theming, i18n, troubleshooting, and the full v1.0.0 changelog.

What’s Included

• Full React + TypeScript source code
• All Supabase migrations and Edge Functions
• Standalone HTML documentation
• Production-ready Vite build configuration
• shadcn/ui component library (40+ components)
• Responsive design for all screen sizes
• Dark mode support
• SEO optimized with meta tags, JSON-LD ready, semantic HTML