Macumba Travel Frontend - Vue.js Travel Search Interface¶

┌─────────────────┐
│   App.vue       │  Root application component
│                 │  Navigation, routing, global state
└─────────────────┘
         │
         ▼
┌─────────────────┐
│  Components     │  Reusable UI components
│                 │  SearchForm, RecommendationCard, etc.
└─────────────────┘
         │
         ▼
┌─────────────────┐
│   Services      │  API communication layer
│                 │  HTTP requests, authentication
└─────────────────┘
         │
         ▼
┌─────────────────┐
│   Store         │  State management (Pinia)
│                 │  Global application state
└─────────────────┘

User Interaction → Component Event → Store Action → API Service → Backend
                                  ↑                              ↓
UI Updates ← Reactive Data ← Store State ← HTTP Response ← Backend Response

frontend/
├── public/                      # Static files served directly
│   ├── favicon.ico             # Website icon
│   └── index.html              # Main HTML template
│
├── src/                        # Source code
│   ├── main.js                 # Application entry point
│   ├── App.vue                 # Root Vue component
│   │
│   ├── components/             # Reusable Vue components
│   │   ├── SearchForm.vue      # Main travel search form
│   │   ├── RecommendationCard.vue  # Individual destination display
│   │   ├── LoadingSpinner.vue  # Loading state indicator
│   │   ├── ErrorMessage.vue    # Error display component
│   │   ├── Navigation.vue      # Site navigation bar
│   │   ├── AuthForms.vue       # Login/register forms
│   │   └── TripManager.vue     # Saved trips interface
│   │
│   ├── services/               # API communication layer
│   │   ├── api.js              # Main HTTP client with axios
│   │   ├── auth.js             # Authentication services
│   │   └── config.js           # Environment configuration
│   │
│   ├── store/                  # State management (Pinia)
│   │   ├── recommendations.js  # Travel recommendations state
│   │   ├── auth.js             # User authentication state
│   │   ├── savedTrips.js       # Saved trips management
│   │   └── ui.js               # UI state (loading, errors)
│   │
│   ├── assets/                 # Static assets
│   │   ├── styles/             # CSS and styling files
│   │   │   ├── main.css        # Global styles
│   │   │   └── tailwind.css    # Tailwind CSS imports
│   │   └── images/             # Image assets
│   │
│   └── utils/                  # Utility functions
│       ├── formatters.js       # Data formatting helpers
│       ├── validators.js       # Form validation functions
│       └── constants.js        # Application constants
│
├── .env.development.local      # Local development (localhost:8000)
├── .env.development            # Dev deployment (api-dev.macumbatravel.com)
├── .env.production             # Production (api.macumbatravel.com)
├── firebase.json               # Firebase hosting configuration
├── package.json                # Dependencies and scripts
├── vite.config.js             # Vite build configuration
├── tailwind.config.js         # Tailwind CSS configuration
└── postcss.config.js          # PostCSS configuration

<template>
  <form @submit.prevent="handleSearch" class="space-y-6">
    <!-- Budget Slider -->
    <div class="budget-section">
      <label>Total Budget: ${{ budget }}</label>
      <input type="range" v-model="budget" min="500" max="10000" step="100">
    </div>

    <!-- Date Selection -->
    <div class="date-section">
      <input type="date" v-model="fromDate" :min="today">
      <input type="date" v-model="toDate" :min="fromDate">
    </div>

    <!-- Travelers Selection -->
    <div class="travelers-section">
      <select v-model="numAdults">
        <option v-for="n in 8" :key="n" :value="n">{{ n }} Adult{{ n > 1 ? 's' : '' }}</option>
      </select>
      <select v-model="numChildren">
        <option v-for="n in 6" :key="n-1" :value="n-1">{{ n-1 }} Children</option>
      </select>
    </div>

    <!-- Preferences -->
    <div class="preferences-section">
      <label v-for="pref in availablePreferences" :key="pref">
        <input type="checkbox" :value="pref" v-model="selectedPreferences">
        {{ pref }}
      </label>
    </div>

    <button type="submit" :disabled="isLoading">
      {{ isLoading ? 'Searching...' : 'Find Destinations' }}
    </button>
  </form>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRecommendationsStore } from '@/store/recommendations'

const recommendationsStore = useRecommendationsStore()

// Form data
const budget = ref(1500)
const fromDate = ref('')
const toDate = ref('')
const numAdults = ref(2)
const numChildren = ref(0)
const selectedPreferences = ref([])

// Computed properties
const today = computed(() => new Date().toISOString().split('T')[0])
const isLoading = computed(() => recommendationsStore.isLoading)

// Form submission
const handleSearch = async () => {
  const searchParams = {
    budget: budget.value,
    fromDate: fromDate.value,
    toDate: toDate.value,
    numAdults: numAdults.value,
    numChildren: numChildren.value,
    preferences: selectedPreferences.value,
    departureCity: "Sydney, New South Wales, Australia" // Would be from autocomplete
  }

  await recommendationsStore.searchRecommendations(searchParams)
}
</script>

// services/api.js
import axios from 'axios'

// Create axios instance with base configuration
const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL, // Environment-specific API URL
  timeout: 30000, // 30 second timeout for travel recommendations
  headers: {
    'Content-Type': 'application/json'
  }
})

// Request interceptor - adds auth token to requests
apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => Promise.reject(error)
)

// Response interceptor - handles common errors
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Token expired or invalid
      localStorage.removeItem('authToken')
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

// API service methods
const apiService = {
  // Travel recommendations
  async getRecommendations(searchParams) {
    const response = await apiClient.post('/travel/recommendations', searchParams)
    return response.data
  },

  async enrichRecommendation(recommendationId) {
    const response = await apiClient.get(`/travel/${recommendationId}/enrich`)
    return response.data
  },

  // Authentication
  async login(credentials) {
    const response = await apiClient.post('/auth/login', credentials)
    return response.data
  },

  async register(userData) {
    const response = await apiClient.post('/auth/register', userData)
    return response.data
  },

  async getCurrentUser() {
    const response = await apiClient.get('/users/me')
    return response.data
  },

  // Saved trips
  async saveTrip(recommendationId, tripData) {
    const response = await apiClient.post(`/travel/${recommendationId}/save`, tripData)
    return response.data
  },

  async getSavedTrips() {
    const response = await apiClient.get('/users/me/trips')
    return response.data
  },

  async deleteTrip(tripId) {
    await apiClient.delete(`/trips/${tripId}`)
  },

  // Rate limiting
  async getRateLimitStatus() {
    const response = await apiClient.get('/travel/rate-limit')
    return response.data
  }
}

export default apiService

// store/recommendations.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import apiService from '@/services/api'

export const useRecommendationsStore = defineStore('recommendations', () => {
  // State
  const recommendations = ref([])
  const isLoading = ref(false)
  const error = ref(null)
  const searchParams = ref(null)
  const rateLimitInfo = ref(null)

  // Getters (computed properties)
  const hasRecommendations = computed(() => recommendations.value.length > 0)
  const sortedRecommendations = computed(() => {
    return [...recommendations.value].sort((a, b) => a.cost - b.cost)
  })
  const budgetFilteredRecommendations = computed(() => {
    if (!searchParams.value?.budget) return recommendations.value
    const maxCostPerPerson = searchParams.value.budget / getTotalTravelers()
    return recommendations.value.filter(rec => rec.cost <= maxCostPerPerson)
  })

  // Actions
  const searchRecommendations = async (params) => {
    isLoading.value = true
    error.value = null
    searchParams.value = params

    try {
      // Transform frontend format to API format
      const apiParams = {
        budget: params.budget,
        from_date: params.fromDate,
        to_date: params.toDate,
        departure_city: params.departureCity,
        preferences: params.preferences,
        max_travel_time: params.maxTravelTime || 24,
        num_adults: params.numAdults,
        num_children: params.numChildren,
        with_pets: params.withPets || false
      }

      const data = await apiService.getRecommendations(apiParams)

      // Transform API response to frontend format
      recommendations.value = data.map(rec => ({
        id: rec.id,
        destination: rec.destination,
        country: rec.country,
        cost: rec.cost, // Per person cost
        totalCost: rec.cost * getTotalTravelers(), // Calculate total cost
        travelTimeHours: rec.travel_time_hours,
        activities: rec.activities || [],
        imageUrl: rec.image_url,
        description: rec.description
      }))

    } catch (err) {
      error.value = err.response?.data?.detail || 'Failed to get recommendations'
      console.error('Search recommendations error:', err)
    } finally {
      isLoading.value = false
    }
  }

  const clearRecommendations = () => {
    recommendations.value = []
    error.value = null
    searchParams.value = null
  }

  // Helper functions
  const getTotalTravelers = () => {
    if (!searchParams.value) return 1
    return (searchParams.value.numAdults || 0) + (searchParams.value.numChildren || 0)
  }

  return {
    // State
    recommendations,
    isLoading,
    error,
    searchParams,
    rateLimitInfo,

    // Getters
    hasRecommendations,
    sortedRecommendations,
    budgetFilteredRecommendations,

    // Actions
    searchRecommendations,
    clearRecommendations
  }
})

// .env.development.local (for local development)
VITE_API_URL=http://localhost:8000/api/v1

// .env.development (for staging deployment)  
VITE_API_URL=https://api-dev.macumbatravel.com/api/v1

// .env.production (for production deployment)
VITE_API_URL=https://api.macumbatravel.com/api/v1

<!-- Example component with Tailwind classes -->
<template>
  <div class="max-w-4xl mx-auto p-6">
    <!-- Card container -->
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
      <!-- Header with gradient background -->
      <div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6">
        <h2 class="text-2xl font-bold">Travel Recommendations</h2>
      </div>

      <!-- Content area -->
      <div class="p-6 space-y-4">
        <!-- Loading state -->
        <div v-if="isLoading" class="flex items-center justify-center py-8">
          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
          <span class="ml-3 text-gray-600">Finding destinations...</span>
        </div>

        <!-- Recommendations grid -->
        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <RecommendationCard 
            v-for="rec in recommendations" 
            :key="rec.id" 
            :recommendation="rec"
            class="transform hover:scale-105 transition-transform duration-200"
          />
        </div>
      </div>
    </div>
  </div>
</template>

# 1. Install dependencies
cd frontend
npm install

# 2. Set up environment for local development
# Create .env.development.local for localhost backend
echo "VITE_API_URL=http://localhost:8000/api/v1" > .env.development.local

# 3. Start development server
npm run dev

# The frontend will be available at:
# http://localhost:5173 (or next available port)

# Build for development/staging
npm run build:dev
# Uses .env.development file (api-dev.macumbatravel.com)

# Build for production
npm run build:prod  
# Uses .env.production file (api.macumbatravel.com)

# Preview production build locally
npm run preview

# Deploy to staging
npm run deploy:dev
# 1. Builds with development environment
# 2. Deploys to Firebase hosting:development target

# Deploy to production
npm run deploy:prod
# 1. Builds with production environment  
# 2. Deploys to Firebase hosting:production target

// store/auth.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import apiService from '@/services/api'

export const useAuthStore = defineStore('auth', () => {
  // State
  const user = ref(null)
  const token = ref(localStorage.getItem('authToken'))
  const isLoading = ref(false)

  // Getters
  const isAuthenticated = computed(() => !!token.value && !!user.value)

  // Actions
  const login = async (credentials) => {
    isLoading.value = true
    try {
      const response = await apiService.login(credentials)

      // Store token and user data
      token.value = response.access_token
      user.value = response.user

      // Persist token to localStorage
      localStorage.setItem('authToken', response.access_token)

      return { success: true }
    } catch (error) {
      return { 
        success: false, 
        error: error.response?.data?.detail || 'Login failed' 
      }
    } finally {
      isLoading.value = false
    }
  }

  const logout = () => {
    user.value = null
    token.value = null
    localStorage.removeItem('authToken')
  }

  return {
    user,
    token,
    isLoading,
    isAuthenticated,
    login,
    logout
  }
})

<template>
  <!-- Mobile-first grid system -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
    <!-- Cards stack on mobile, become grid on larger screens -->
  </div>

  <!-- Responsive navigation -->
  <nav class="flex flex-col md:flex-row md:items-center justify-between p-4">
    <!-- Mobile: stacked vertically, Desktop: horizontal -->
  </nav>

  <!-- Mobile-friendly form inputs -->
  <input 
    type="range" 
    class="w-full h-2 bg-gray-200 rounded-lg slider:bg-blue-600"
    :class="{ 'h-8': isMobile }" 
  >
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const isMobile = ref(false)

const checkMobile = () => {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

// Enable Vue devtools in development
if (import.meta.env.DEV) {
  window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.__VUE_DEVTOOLS_GLOBAL_HOOK__ || {}
}

// API request logging
apiClient.interceptors.request.use((config) => {
  if (import.meta.env.DEV) {
    console.log('API Request:', config.method?.toUpperCase(), config.url, config.data)
  }
  return config
})

apiClient.interceptors.response.use(
  (response) => {
    if (import.meta.env.DEV) {
      console.log('API Response:', response.status, response.data)
    }
    return response
  },
  (error) => {
    if (import.meta.env.DEV) {
      console.error('API Error:', error.response?.status, error.response?.data)
    }
    return Promise.reject(error)
  }
)

# Development server with hot reload
npm run dev

# Build and preview production bundle
npm run build:prod
npm run preview

# Check for JavaScript/TypeScript errors
npm run lint

# Clear node_modules and reinstall (if having issues)
rm -rf node_modules package-lock.json
npm install

// Lazy load components for better performance
const SearchForm = defineAsyncComponent(() => import('@/components/SearchForm.vue'))
const RecommendationCard = defineAsyncComponent(() => import('@/components/RecommendationCard.vue'))

// Lazy load pages with routing
const routes = [
  {
    path: '/search',
    component: () => import('@/pages/SearchPage.vue')
  },
  {
    path: '/dashboard', 
    component: () => import('@/pages/Dashboard.vue')
  }
]

<template>
  <!-- Responsive images with loading states -->
  <img 
    :src="optimizedImageUrl"
    :alt="destination"
    loading="lazy"
    class="w-full h-48 object-cover"
    @load="imageLoaded = true"
    @error="handleImageError"
  >
</template>

<script setup>
const optimizedImageUrl = computed(() => {
  if (!props.recommendation.image_url) return defaultImage

  // Add image optimization parameters
  const url = new URL(props.recommendation.image_url)
  url.searchParams.set('w', '400') // Width for card display
  url.searchParams.set('q', '80')  // Quality
  return url.toString()
})
</script>