A modern, feature-rich travel planning assistant built with React, TypeScript, Supabase, and Capacitor for Android/iOS.
- Personalized Itineraries — Generate day-by-day travel plans using advanced LLMs (Gemini/Groq)
- Customizable Preferences — Tailor trips by budget (Economy, Luxury), travel style (Active, Relaxing, Cultural), and group size
- Smart Recommendations — Discover hidden gems, optimal routes, and local dining spots instantly
- Live Mapping — Deep Leaflet map integration to search and explore any global destination
- Point-to-Point Routing — Draw routes and measure distances seamlessly
- Street View Integration — Jump directly into Google Street View for any map coordinate on Earth
- Context-Aware Checklists — Dynamically generated packing lists based on your destination's weather and planned activities
- Cost Estimation — Instantly estimate budget breakdowns across categories like flights, hotels, and food
- Violet-indigo gradient accents with smooth rounded corners
- Glassmorphism cards and subtle backdrop blur effects
- Smooth micro-animations and hover transitions
- Dark mode–compatible color scheme
- Mobile-first responsive design
- Secure Authentication via Supabase Auth
- Centralized database storage for all your saved trips and itineraries
- Row Level Security (RLS) on all user data
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript + Vite |
| Styling | Tailwind CSS + shadcn/ui |
| Backend | Supabase (Auth, Database, Edge Functions) |
| Maps | React-Leaflet + Leaflet Routing Machine |
| Icons | Lucide React |
| Mobile | Capacitor (Android + iOS) |
- Node.js 18+
- npm or yarn
- A Supabase project
# 1. Clone the repo
git clone https://github.com/pranay9981/Travel-Comapanion.git
cd Travel-Comapanion
# 2. Install dependencies
npm install
# 3. Set up environment variables
# Create a .env file in the root with:
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
# 4. Run the dev server
npm run devOpen http://localhost:8080 in your browser.
# Build the web app
npm run build
# Sync with Capacitor
npx cap sync
# Open in Android Studio
npx cap open android
# Build APK: Android Studio → Build → Build APK(s)TravelAI/
├── src/
│ ├── components/ # Reusable UI components (forms, dialogs, nav)
│ ├── hooks/ # Custom React hooks (e.g., use-mobile)
│ ├── integrations/ # Supabase client setup
│ ├── lib/ # Utilities, Tailwind merges, formatting
│ └── pages/ # Page components
│ ├── Auth.tsx # Login / Signup
│ ├── Index.tsx # Home landing page with trending destinations
│ ├── TripPlanner.tsx # Core AI generation interface
│ ├── Packing.tsx # Dynamic checklists
│ ├── MapExplore.tsx # Live interactive map routing
│ ├── Explore.tsx # Destination search history & details
│ ├── MyTrips.tsx # Saved itineraries dashboard
│ └── Profile.tsx # User profile
├── supabase/ # Supabase edge functions backend config (Chat, AI endpoints)
├── android/ # Capacitor Android project
├── ios/ # Capacitor iOS project
├── capacitor.config.ts # Capacitor configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── vite.config.ts # Vite build configuration
| Variable | Description |
|---|---|
VITE_SUPABASE_URL |
Your Supabase project URL |
VITE_SUPABASE_ANON_KEY |
Your Supabase anon/public key |
(Note: Edge Functions require GROQ_API_KEY or Gemini keys configured natively inside Supabase).
| Script | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
npm run cap:sync |
Sync web assets to native projects |
npx cap open android |
Open Android project in Android Studio |
npx cap open ios |
Open iOS project in Xcode |
Pranay Bagaria
This project is licensed under the MIT License — feel free to use, modify, and distribute this project.
See the LICENSE file for details.
Built with ❤️ by Pranay Bagaria using React, Supabase & Capacitor