✈️ Destinix AI Travel

Destinix AI Travel is a state-of-the-art, premium AI-powered travel planning and package booking platform. Designed with sleek dark aesthetics, micro-animations, and interactive layouts, it offers users seamless itinerary generation, curated travel package exploring, email-verified booking engines, and personal travel assistant chats.

🌐 Demo / Deployment: Destinix on Vercel (Host URL managed by Project Admin)

---

🎨 Design & Visual Aesthetics

Destinix is built to feel highly premium:

• Glassmorphism Layouts: Utilizing blur backdrops, thin white borders, and vibrant glow shadows.
• Sleek Dark Mode: Rich #030712 (gray-950) backgrounds combined with Indigo and Violet accents.
• Micro-Animations: Powered by motion (Framer Motion v12) for page transitions, navbar selection tabs, and button hover states.
• Typography: Elegant font pairings featuring modern serif headings and clean sans-serif bodies.

---

🚀 Key Features

• 🤖 Gemini AI Travel Planner: Input your destination, budget, duration, and style. Our customized Gemini API integrations compile day-by-day itineraries with travel highlights.
• 💱 Budget & Expense Tracker with Currency Conversion: Set a home currency and an overall trip budget in your profile, log itemized expenses (flights, stays, activities, etc.), and see a live budget-vs-spending breakdown on both the Profile and Booking screens with prices converted to your home currency.
• 🏝️ Curated Experiences Catalog: Filter through domestic, international, and luxury packages with real-time detail showcases, highlights, and cost structures.
• 💬 Live Advisor Chatbot: Chat directly with an interactive travel assistant to ask questions about your trip, suggestions, or help with booking.
• 🔒 Firebase Authentication: Fully secure client-side user accounts allowing bookmarked trips, saved plans, and customized profile updates.
• 🎫 Secure Booking & Receipts: A booking flow with Gmail SMTP integration to send customized PDFs and transaction details directly to the user's inbox.
• 💸 Price Drop Alerts: Set targeted budget alerts for packages (stored in the PriceAlert model — user, package, target price, and a notifiedAt flag). A node-cron job in server.ts re-checks all pending alerts against current package prices every hour and emails users via the existing Gmail/SMTP setup when a target price is met; failures are logged per-alert so one bad alert can't block the rest of the batch.

---

🛠️ Technology Stack

• Frontend Framework: React 19 (TypeScript, React Router DOM v7)
• Design & Styling: Tailwind CSS, Motion (Framer Motion), Lucide Icons
• Backend Runtime: Node.js, Express (using tsx for TypeScript execution)
• Database & Services: Firebase Client SDK (Authentication), PostgreSQL via Prisma ORM (Bookings)
• Integrations: Google Gemini Developer API (@google/genai), Razorpay SDK, Nodemailer (SMTP configuration)

---

📂 Project Structure

Destinix-AI-Travel-main/
├── api/                   # (Optional) Cloud function adapters or specific API code
├── components/            # React Components
│   ├── About.tsx          # About page component
│   ├── AIPlanner.tsx      # Gemini AI planner view
│   ├── AdvisorChat.tsx    # Floating chatbot assistant
│   ├── Auth.tsx           # Firebase login / registration modal
│   ├── BookingPage.tsx    # Booking inputs & receipts
│   ├── CTASection.tsx     # Hero Call-to-action
│   ├── Hero.tsx           # Premium landing hero
│   ├── Navbar.tsx         # Animated responsive navigation
│   └── Profile.tsx        # Saved plans & price alerts dashboard
├── services/              # External API connectors
│   ├── authService.ts     # Firebase auth queries
│   └── geminiService.ts   # Gemini generation endpoints
├── prisma/                # Database schema and Prisma configuration
├── utils/                 # General helpers
├── types.ts               # Shared TypeScript schemas
├── constants.tsx          # Package database & category structures
├── server.ts              # Express.js backend (Vite middleware for HMR dev)
├── App.tsx                # Main Router layout
├── index.html             # Vite entry layout
├── index.tsx              # React bootstrap
├── tsconfig.json          # TS config
├── vite.config.ts         # Vite bundler properties
└── package.json           # Scripts and dependency lists

---

⚙️ Environment Variables Setup

Create a .env file at the root of the project (you can use .env.example as a template):

Variable	Description	Example / Location
DATABASE_URL	PostgreSQL connection string (Transaction pooler)	postgresql://postgres...:6543/postgres
DIRECT_URL	PostgreSQL direct connection string (Session pooler)	postgresql://postgres...:5432/postgres
GEMINI_API_KEY	Google AI Studio Key	Get API Key
VITE_GOOGLE_MAPS_API_KEY	(Optional) Google Maps JavaScript API key for the AI Planner's itinerary map. Without it, the map falls back to the free OpenStreetMap view.	Google Cloud Console — enable "Maps JavaScript API"
VITE_FIREBASE_API_KEY	Firebase API Client Key	Firebase console -> Project Settings
VITE_FIREBASE_AUTH_DOMAIN	Firebase Domain	<project-name>.firebaseapp.com
VITE_FIREBASE_PROJECT_ID	Firebase ID	Project identifier
VITE_FIREBASE_STORAGE_BUCKET	Firebase storage URL	<project-name>.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID	Firebase sender ID	12-digit number
VITE_FIREBASE_APP_ID	Firebase App identifier	1:xxx:web:xxx
SMTP_USER / EMAIL_USER	Gmail Address for Nodemailer	your-email@gmail.com
SMTP_PASS / EMAIL_PASS	Gmail App Password	Gmail Settings -> App Passwords
RAZORPAY_KEY_ID	Razorpay API Public Key	Razorpay Settings
RAZORPAY_KEY_SECRET	Razorpay API Secret	Razorpay Key Secret

---

💱 Currency Conversion & Budget Tracking

Users can set a home currency and an overall trip budget on the Profile → Profile Settings tab. These are persisted on the User model via Prisma (preferredCurrency, tripBudget).

• Rate source: Live rates are fetched from the free, keyless @fawazahmed0/currency-api (https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/{base}.json), which requires no signup or API key. See services/currencyService.ts (convertAmount, convertToINR).
• Refresh interval: Fetched rate tables are cached in-memory per base currency for 1 hour (CACHE_TTL_MS in services/currencyService.ts) to avoid re-fetching on every render; after that they're refetched on the next conversion.
• Fallback: If the live request fails (network error, rate limiting, etc.), conversion falls back to the static table in utils/currency.ts (CONVERSION_RATES, pivoted through INR). If neither is available for a currency pair, the converted amount is simply omitted from the UI — a failed fetch never breaks the page.
• Where it shows up:
  • Profile → Expense Tracker (components/ExpenseTracker.tsx): total spend converted to your home currency, plus a budget-used progress bar (green/amber/red) once a trip budget is set.
  • Booking page (components/BookingPage.tsx): the price summary shows the booking total converted to your home currency (when different from the package's currency) and how much of your remaining trip budget this booking would use.
• Supported currencies: INR, USD, EUR, GBP, AED, SGD (SUPPORTED_CURRENCIES in services/currencyService.ts).
• No new environment variable is required — the currency API is public and keyless.

Note for deployers: after pulling schema changes that add preferredCurrency/tripBudget to User, run npx prisma generate and then npx prisma migrate dev (or db push) against a real database — this was not run against a live DB in development since no DATABASE_URL was configured in this environment.

---

🏁 Local Installation & Development

1. Prerequisites

Make sure you have Node.js (version 18 or higher) installed.

2. Clone the Repository

git clone https://github.com/MistryVishwa/Destinix-AI-Travel.git
cd Destinix-AI-Travel

3. Install Dependencies

npm install

4. Setup the Database

Generate the Prisma Client and push the schema to your PostgreSQL database:

npx prisma generate
npx prisma db push

5. Run the Project

Start both the Express backend server and the Vite frontend HMR server simultaneously:

npm run dev

Open http://localhost:3000 in your browser.

6. Build for Production

To test the built bundle locally:

npm run build
npm run preview

---

🗺️ Future Enhancements & Roadmap

• Google Maps API: Embed active mapping routes directly onto generated AI itineraries.
• Collaborative Planning: Invite friends to view, edit, and co-book custom itineraries.
• Expense Tracker: Add a currency-converter enabled budgeting calculator for booking.
• Offline Mode: Allow PDF itinerary downloading and local cached viewing of trip bookings.

---

🤝 Contribution Guidelines

Interested in contributing to Destinix AI Travel? Read our CONTRIBUTING.md to understand SSoC rules, branch names, coding standards, and how to submit a pull request.