🌍 Triptyfy

🚀 Triptyfy is a modern travel planning and exploration web application built with React + React Router. It allows users to discover destinations, plan trips, and navigate seamlessly with a smooth UI featuring real-time Google Maps integration.

📸 Preview

(Add a screenshot of your app here, e.g., )

⚡ Features

🧭 Interactive UI – Responsive, modern design with smooth animations.

🗺️ Google Maps Integration – Real-time route visualization with directions API.

🤖 AI-Powered Trip Planning – Intelligent trip suggestions using Google Gemini AI.

🏝️ Explore Destinations – View and navigate to exciting travel spots with AI descriptions.

🎯 Smart Itineraries – AI-generated daily schedules with personalized recommendations.

🔗 Dynamic Routing – Powered by React Router for seamless navigation.

🎨 Beautiful UI – Tailwind CSS + custom styling.

🚀 Fast & Scalable – Built with React, optimized for performance.

🛠️ Tech Stack

Frontend: ⚛️ React.js 🌐 React Router DOM 🎨 Tailwind CSS 🗺️ Google Maps JavaScript API 📦 Vite

Backend: 🚀 Node.js & Express.js 🤖 Google Gemini AI 🗺️ Google Maps Services API 🌐 CORS enabled

� Project Structure

Capstone-Project/
├── README.md
├── package.json          # Root workspace configuration
├── .gitignore           # Root gitignore
├── frontend/            # React.js frontend application
│   ├── src/
│   ├── package.json
│   ├── .env             # Frontend environment variables
│   └── ...
└── backend/             # Express.js backend API
    ├── controllers/
    ├── routes/
    ├── services/
    ├── package.json
    ├── .env             # Backend environment variables
    └── server.js

🚀 Setup Instructions

1. Clone the repository

   git clone <your-repo-url>
   cd Capstone-Project

2. Install dependencies

   Option A - Install all at once:

   npm run install:all

   Option B - Install individually:

   # Frontend
   cd frontend
   npm install
   
   # Backend (in a new terminal)
   cd backend
   npm install

3. Set up APIs

   Google Maps API:

   • Go to Google Cloud Console
   • Create a new project or select an existing one
   • Enable the following APIs:
     • Maps JavaScript API
     • Geocoding API
     • Directions API
     • Places API
   • Create credentials (API Key)
   • Copy the API key

   Google Gemini AI API:

   • Go to Google AI Studio
   • Create a new API key for Gemini AI
   • Copy the API key

4. Environment Configuration

   Frontend (.env in frontend folder):

   VITE_GOOGLE_MAPS_API_KEY=your_actual_google_maps_api_key_here
   VITE_GEMINI_API_KEY=your_actual_gemini_api_key_here
   VITE_API_BASE_URL=http://localhost:3001
   

   Backend (.env in backend folder):

   GOOGLE_MAPS_API_KEY=your_actual_google_maps_api_key_here
   GEMINI_API_KEY=your_actual_gemini_api_key_here
   FRONTEND_URL=http://localhost:5173
   PORT=3001
   NODE_ENV=development
   

5. Run the application

   Start Backend (in one terminal):

   cd backend
   node server.js

   Start Frontend (in another terminal):

   cd frontend
   npm run dev

6. Build for production

   cd frontend
   npm run build

📋 Available Scripts

From the root directory, you can run:

• npm run install:all - Install dependencies for both frontend and backend
• npm run install:frontend - Install only frontend dependencies
• npm run install:backend - Install only backend dependencies
• npm run start:frontend - Start the frontend development server
• npm run start:backend - Start the backend server

🔑 Environment Variables

• VITE_GOOGLE_MAPS_API_KEY - Your Google Maps JavaScript API key
• VITE_GEMINI_API_KEY - Your Google Gemini AI API key

🤖 AI Features

Intelligent Trip Planning:

• AI-generated comprehensive itineraries using Google Gemini
• Personalized recommendations based on trip type and preferences
• Cultural insights and local tips powered by AI
• Smart activity descriptions with historical context
• Budget breakdown and packing suggestions

How AI Enhances Your Trip:

1. Smart Suggestions - AI analyzes your preferences and suggests relevant activities
2. Detailed Descriptions - Rich context about attractions, history, and cultural significance
3. Optimized Scheduling - AI considers travel time, opening hours, and logical flow
4. Local Insights - Cultural tips, language basics, and local customs
5. Personalized Experience - Tailored to your trip type (Adventure, Cultural, Business, etc.)

📝 Note

• Make sure to restrict your Google Maps API key to your domain in production for security
• Keep your Gemini API key secure and never expose it in client-side code
• The AI features require a valid Gemini API key to function properly