use unsplash API to get photos

src/firebase.js

@@ -1,15 +1,15 @@
 import { initializeApp, getApps, getApp } from 'firebase/app';
 import { getDatabase } from 'firebase/database';
 
-// Your web app's Firebase configuration
+// Firebase configuration
 const firebaseConfig = {
-  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-  databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
+    databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
-  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-  appId: import.meta.env.VITE_FIREBASE_APP_ID
+    appId: import.meta.env.VITE_FIREBASE_APP_ID
 };
 
 // Initialize Firebase (with duplicate app prevention)

src/lib/components/AddPlaces.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { Loader } from '@googlemaps/js-api-loader';
+    import { fetchUnsplashPhoto } from '../../services/unsplash';
 
     // Extend the PlaceResult type to include our custom photoUrl
     interface ExtendedPlaceResult extends google.maps.places.PlaceResult {
@@ -58,25 +59,12 @@
             const autocomplete = new google.maps.places.Autocomplete(input, autocompleteOptions);
             autocomplete.setFields(['name', 'formatted_address', 'photos', 'place_id', 'geometry']);
 
-            autocomplete.addListener('place_changed', () => {
+            autocomplete.addListener('place_changed', async () => {
                 const place = autocomplete.getPlace() as ExtendedPlaceResult;
                 if (place && place.name) {
-                    // If the place has photos, get the URL for the first photo
+                    // Use Unsplash for the photo
-                    if (place.photos && place.photos.length > 0) {
+                    const unsplashUrl = await fetchUnsplashPhoto(place.name);
-                        try {
+                    place.photoUrl = unsplashUrl || '/placeholder.jpeg';
-                            const photoOptions = {
-                                maxWidth: 400,
-                                maxHeight: 300
-                            };
-                            place.photoUrl = place.photos[0].getUrl(photoOptions);
-                        } catch (error) {
-                            console.error('Error getting photo URL:', error);
-                            place.photoUrl = '/placeholder.jpeg';
-                        }
-                    }
-                    else {
-                        place.photoUrl = '/placeholder.jpeg';
-                    }
                     
                     selectedPlace = place;
                     lastSelectedPlaceName = input.value.trim();

src/lib/components/NewTripPopup.svelte

@@ -145,6 +145,28 @@
         }
     }
 
+    const UNSPLASH_ACCESS_KEY = import.meta.env.VITE_UNSPLASH_ACCESS_KEY;
+
+    async function fetchUnsplashPhoto(query: string): Promise<string | null> {
+        try {
+            const response = await fetch(
+                `https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&client_id=${UNSPLASH_ACCESS_KEY}`
+            );
+
+            if (!response.ok) {
+                console.error("Failed to fetch Unsplash photo");
+                return null;
+            }
+
+            const data = await response.json();
+            const firstPhoto = data.results?.[0];
+            return firstPhoto?.urls?.regular || null;
+        } catch (error) {
+            console.error("Error fetching Unsplash photo:", error);
+            return null;
+        }
+    }
+
     async function handleStart() {
         destinationError = !destination;
         startDateError = !startDate;
@@ -174,7 +196,7 @@
             const placeDetails = {
                 name: selectedPlace.name,
                 formatted_address: selectedPlace.formatted_address,
-                photo: selectedPlace.photos?.[0]?.getUrl(),
+                photo: await fetchUnsplashPhoto(destination) || '/placeholder.jpeg',
                 location: {
                     lat: selectedPlace.geometry.location.lat(),
                     lng: selectedPlace.geometry.location.lng()

src/routes/itinerary/[tid]/+page.svelte

@@ -22,6 +22,7 @@
     import RecommendationPopup from '$lib/components/RecommendationPopup.svelte';
     import LoadingOverlay from '$lib/components/LoadingOverlay.svelte';
     import TurnIntoItineraryPopup from '$lib/components/TurnIntoItineraryPopup.svelte';
+    import { fetchUnsplashPhoto } from '../../../services/unsplash';
     import type { Place } from '$lib/constants/Interfaces';
 
     let tripData: any = null;
@@ -288,12 +289,6 @@
         itinerary: true
     };
 
-    let recommendedPlaces = [
-        { name: "Place name" },
-        { name: "Place name" },
-        { name: "Place name" }
-    ];
-
     let placesToVisit: any[] = [];
 
     async function handleDeletePlace(index: number) {
@@ -419,12 +414,13 @@
 
                     if (results.length > 0) {
                         const place = results[0];
-                        const photoUrl = place.photos?.[0]?.getUrl();
+                        // Use Unsplash for the photo
-                        
+                        const unsplashUrl = await fetchUnsplashPhoto(place.name || rec.name);
+
                         const newPlace = {
                             name: place.name || rec.name,
                             desc: place.formatted_address || '',
-                            image: photoUrl || '/placeholder.jpeg',
+                            image: unsplashUrl || '/placeholder.jpeg',
                             geometry: place.geometry?.location ? {
                                 lat: place.geometry.location.lat(),
                                 lng: place.geometry.location.lng()

src/services/unsplash.ts

@@ -0,0 +1,21 @@
+const UNSPLASH_ACCESS_KEY = import.meta.env.VITE_UNSPLASH_ACCESS_KEY;
+
+export async function fetchUnsplashPhoto(query: string): Promise<string | null> {
+    try {
+        const response = await fetch(
+            `https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&client_id=${UNSPLASH_ACCESS_KEY}`
+        );
+
+        if (!response.ok) {
+            console.error("Failed to fetch Unsplash photo");
+            return null;
+        }
+
+        const data = await response.json();
+        const firstPhoto = data.results?.[0];
+        return firstPhoto?.urls?.regular || null;
+    } catch (error) {
+        console.error("Error fetching Unsplash photo:", error);
+        return null;
+    }
+}