update README

README.md

@@ -1,6 +1,19 @@
-# Triptide
+<p align="center">
+    <a href="https://triptide.netlify.app">
+      <img src="static/README/header.png" alt="Home Page Screenshot">
+    </a>
+</p>
+<p align="center">
+    <img src="https://img.shields.io/badge/SvelteKit-FF3E00?style=for-the-badge&logo=svelte&logoColor=white" alt="SvelteKit"/>
+    &nbsp;&nbsp;
+    <img src="https://img.shields.io/badge/Firebase-FFCA28?style=for-the-badge&logo=firebase&logoColor=black" alt="Firebase"/>
+    &nbsp;&nbsp;
+    <img src="https://img.shields.io/badge/OpenAI-412991?style=for-the-badge&logo=openai&logoColor=white" alt="OpenAI"/>
+    &nbsp;&nbsp;
+    <img src="https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white" alt="Netlify"/>
+</p>
 
-## Student Information
+# Student Information
 
 Name: Adelia Putri  
 Student ID: 20210782  
@@ -11,27 +24,25 @@ Student ID: 20230412
 Email: kazed0102@kaist.ac.kr
 
 Git Repository: [Triptide](http://git.prototyping.id/20210782/travel-app)  
-
+Live Demo: [Triptide](https://triptide.netlify.app)  
 Demo Video:
 
-## Table of Contents
+# Table of Contents
-- [Triptide](#triptide)
+- [Student Information](#student-information)
-  - [Student Information](#student-information)
+- [Table of Contents](#table-of-contents)
-  - [Table of Contents](#table-of-contents)
+- [App Description](#app-description)
-  - [App Description](#app-description)
+- [How to Run Locally](#how-to-run-locally)
-  - [How to Start](#how-to-start)
+- [Core Features](#core-features)
-  - [App Feature](#app-feature)
+  - [Planner: Plan Your Next Adventure](#planner-plan-your-next-adventure)
-    - [Planner](#planner)
+    - [Home Page](#home-page)
-      - [Home Page](#home-page)
+    - [Itinerary Page](#itinerary-page)
-      - [Itinerary Page](#itinerary-page)
+    - [My Trips Page](#my-trips-page)
-      - [My Trips Page](#my-trips-page)
+  - [Memory: Relive Your Journeys](#memory-relive-your-journeys)
-    - [Memory](#memory)
+    - [Home Page](#home-page-1)
-      - [Home](#home)
+    - [View Photos by Location Page](#view-photos-by-location-page)
-      - [View photos by location Page](#view-photos-by-location-page)
+    - [My Memories Page](#my-memories-page)
-      - [My Memories Page](#my-memories-page)
+- [Code Organization](#code-organization)
-  - [App Features](#app-features)
+  - [Tech Stack](#tech-stack)
-  - [Code Organization](#code-organization)
-    - [Tech Stack](#tech-stack)
     - [Component \& File Structure](#component--file-structure)
   - [Design Patterns](#design-patterns)
     - [MVC (Model-View-Controller)](#mvc-model-view-controller)
@@ -41,36 +52,60 @@ Demo Video:
   - [Limitations](#limitations)
   - [Acknowledgement](#acknowledgement)
 
-## App Description
+# App Description
 
-**Triptide** is an intelligent travel planner that helps users create personalized itineraries by learning from their past trips. The app connects memories with future plans, allowing users to revisit previous journeys through photos and color mood boards, while planning new adventures based on those experiences. TravelApp leverages AI-powered recommendations, interactive maps, and seamless photo management to make travel planning both enjoyable and meaningful.
+**Triptide** isn't just a planner, it's your personal travel story. It weaves together the memories of where you've been with the excitement of where you'll go next. Relive your journeys through vibrant photo galleries and color mood boards, then let those experiences inspire your next adventure through AI-powered recommendations.
 
-## How to Start
+# How to Run Locally
 
-1. **Clone the repository:**
+1. **Prerequisites**
+   - Node.js (v18 or later)
+2. **Clone the repository**
    ```bash
    git clone http://git.prototyping.id/20210782/travel-app
    cd travel-app
    ```
-2. **Install dependencies:**
+3. **Install dependencies**
    ```bash
    npm install
    ```
-3. **Set up environment variables:**
+4. **Set up environment variables**  
-   - Fill in the required API keys (Firebase, Google, Unsplash, Uploadcare) in .env file
+   Create a `.env` file in the project root and add the following API keys.
-4. **Run the development server:**
+   ```bash
+    # Firebase Configuration
+    VITE_FIREBASE_API_KEY="your_firebase_api_key"
+    VITE_FIREBASE_AUTH_DOMAIN="your_firebase_auth_domain"
+    VITE_FIREBASE_DATABASE_URL="your_firebase_database_url"
+    VITE_FIREBASE_PROJECT_ID="your_firebase_project_id"
+    VITE_FIREBASE_STORAGE_BUCKET="your_firebase_storage_bucket"
+    VITE_FIREBASE_MESSAGING_SENDER_ID="your_firebase_messaging_sender_id"
+    VITE_FIREBASE_APP_ID="your_firebase_app_id"
+
+    # Google Maps API
+    VITE_GOOGLE_MAPS_API_KEY="your_google_maps_api_key"
+
+    # OpenAI API
+    VITE_OPENAI_API_KEY="your_openai_api_key"
+
+    # Unsplash API
+    VITE_UNSPLASH_API_KEY="your_unsplash_api_key"
+
+    # Uploadcare API
+    VITE_UPLOADCARE_PUBLIC_KEY="your_uploadcare_public_key"
+    ```
+5. **Run the development server**
    ```bash
    npm run dev
    ```
-5. **Open the app:**
+6. **Open the app**
    - Visit [http://localhost:5173](http://localhost:5173) in your browser.
 
-## App Feature
+# Core Features
 
-### Planner
+## Planner: Plan Your Next Adventure
 
-#### Home Page
+### Home Page
-On the home page, users can view a summary of their past trips. Locations visited are marked on a world map. Clicking a marker reveals a list of trips to that location; clicking a trip label navigates directly to the detailed itinerary page for that trip.
+Visualize your global travel history on an interactive world map. Markers indicate every location you've visited. Clicking a marker reveals a list of trips to that location and clicking a trip label navigates directly to the detailed [itinerary page](#itinerary-page) for that trip.
 
 <p align="center">
     <img src="static/README/HomePage.png" alt="Home Page Screenshot">
@@ -78,64 +113,56 @@ On the home page, users can view a summary of their past trips. Locations visite
 
 Users can add a new trip by clicking the `Plan a new trip` button at the bottom right and filling out the trip creation form.
 
-#### Itinerary Page
+### Itinerary Page
-Plan your trip by requesting AI-generated recommendations for places to visit. If you have previously visited the destination, the system will ask for your preference regarding the type of recommendations (new, old, or mixed).
+Plan your trip by requesting AI-generated recommendations for places to visit. If you have previously visited the destination, **Triptide** will ask for your preference regarding the type of recommendations (new, old, or mixed).
 
 <p align="center">
     <img src="static/README/RecommendationPopup.png" alt="Recommendation Popup Screenshot">
 </p>
 
-After receiving recommendations, **TravelApp** helps you organize them by dividing the places into your trip days, optimizing for travel time and location using OpenAI's itinerary division.
+After receiving recommendations, **Triptide** helps you organize them by dividing the places into your trip days, optimizing for travel time and location with a help from LLM.
 
-#### My Trips Page
+### My Trips Page
-View all your ongoing and past trips in one place.
+View all your upcoming and past trips in one place.
 
 <p align="center">
     <img src="static/README/MyTrips.png" alt="My Trips Screenshot">
 </p>
 
-### Memory
+## Memory: Relive Your Journeys
 
-#### Home
+### Home Page
 On the map, you can see all the locations where you've added photos. Additionally, if there are trips planned through the Triptide Planner that haven’t had any photos added yet, they will appear as markers. This visual connection between the planner and memory sections helps transform your travel plans into lasting memories.
 
 <p align="center">
     <img src="static/README/MemoryHome.png" alt="Memory Home Screenshot">
 </p>
 
-#### View photos by location Page
+### View Photos by Location Page
 You can collect and revisit your travel photos all in one place. By uploading your images, you can visualize the mood of your journey through colors. When you’ve visited the same place more than once, you can compare each set of photos side by side, exploring visual similarities through shared color tones. This page offers a new, engaging way to reflect on your travels—through a uniquely visual and interactive experience.
 
 <p align="center">
     <img src="static/README/ViewImage.png" alt="View Photos Screenshot">
 </p>
 
-#### My Memories Page
+### My Memories Page
-Here, you can browse through the photo decks of all your trips.
+Browse a gallery of all your past trips, each represented by a photo deck.
 
 <p align="center">
     <img src="static/README/MyMemory.png" alt="View My Memories Screenshot">
 </p>
 
-## App Features
+# Code Organization
 
-- Smart suggestions for places to visit based on your travel history
+## Tech Stack
-- AI-powered itinerary generation, dividing recommended places into daily plans
-- Add and manage memories for each trip, including photo uploads and color mood boards
-- Visualize your travel history on an interactive world map, with clickable markers and trip summaries
-- Seamless integration of past experiences into future travel planning
-
-## Code Organization
-
-### Tech Stack
 - **Frontend:** SvelteKit
 - **Database:** Firebase Realtime Database
-- **Hosting:** Vercel
+- **Hosting:** Netlify
 - **Libraries:**
-  - D3.js for the map in `WorldMap.svelte`
+  - D3.js to render the interactive `WorldMap.svelte`
 - **APIs Used:**
-  - Google Places API for autocomplete
+  - [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview) for Place Autocomplete widget
-  - Google Maps API for map visualizations
+  - [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/overview) for map visualizations
   - [OpenAI API](https://openai.com/index/openai-api/) (GPT-4.1 mini) for place recommendations and itinerary division
   - [Uploadcare](https://uploadcare.com) for uploading and converting photos to URLs
   - [Unsplash API](https://unsplash.com/developers) for fetching location-based photos
@@ -192,12 +219,18 @@ The observer pattern is used for real-time data updates:
 - The Firebase app instance is implemented as a singleton in `firebase.js`, ensuring only one instance is used throughout the app.
 
 ### Service Pattern
-- API integrations (OpenAI, Unsplash, Uploadcare) are abstracted into service modules, promoting code reuse and separation of concerns.
+- API integrations (OpenAI, Unsplash) are abstracted into service modules in `src/services`, promoting code reuse and separation of concerns.
 
 ## Limitations
 
-- **Image API Limitation:** Unsplash's free API restricts requests to 50 images per hour, which may affect the user experience when generating mood boards or searching for location-based images. Due to limitations of the free version of Uploadcare, EXIF metadata (such as timestamp and location) is stripped during image upload. As a result, we were unable to provide contextual information extracted from images.
+- **API Rate Limiting:** The Unsplash free tier limits API calls to 50 requests/hour, which can temporarily disrupt the image-fetching feature during heavy use.
-- **Map Interactions:** Currently, markers on the map in the itinerary page are not clickable or interactive, limiting direct navigation from the map to trip details.
+- **UAPI Rate Limiting:** Due to limitations of the free version of Uploadcare, EXIF metadata (such as timestamp and location) is stripped during image upload. As a result, we were unable to provide contextual information extracted from images.
+- **Map Interactions:** Markers on the itinerary page map are currently for display only and are not clickable.
 - **Memory Photo Limit:** Adding a large number of photos to a trip can result in slow page rendering and decreased performance.
 
 ## Acknowledgement
+- Logo icons were obtained from [Font Awesome](https://fontawesome.com)
+- The world map GeoJSON data was retrieved from [GeoJSON Maps](https://geojson-maps.kyd.au)
+- The implementation of the Place Autocomplete widget was guided by the official [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/place-autocomplete-new?_gl=1*bm2lge*_up*MQ..*_ga*MTIzMjUwMzgwNS4xNzQ4Njk3OTgw*_ga_NRWSTWS78N*czE3NDg3NTIwMTkkbzMkZzAkdDE3NDg3NTIwMTkkajYwJGwwJGgwv)
+- Cursor was used for initial page scaffolding from Figma designs and for generating code comments to improve readability.
+- The official [SvelteKit Docs](https://svelte.dev/docs/kit/introduction) were an essential resource for resolving deprecation problems

src/lib/components/ItineraryDate.svelte

@@ -3,22 +3,12 @@
   import AddPlaces from "./AddPlaces.svelte";
   import { slide } from 'svelte/transition';
   import { quintOut } from 'svelte/easing';
+  import type { Place } from "$lib/constants/Interfaces";
 
   export let date;
   export let isExpanded = true;
   export let countryCode = 'tw'; // Default to Taiwan if not provided
   
-  interface Place {
-    name: string;
-    desc?: string;
-    image?: string;
-    time?: string;
-    geometry?: {
-      lat: number;
-      lng: number;
-    };
-  }
-
   export let places: Place[] = [];
   export let onPlacesUpdate: (places: Place[]) => void;
 

src/lib/components/Nav.svelte

@@ -43,8 +43,10 @@
 
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <nav class:dark-mode={darkMode}>
-    <div class="logo">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="logo" onclick={() => handleNavigation("Planner")}>
         <img src="/logo.png" alt="Logo" class="logo-img" />
         {title}
     </div>
@@ -97,6 +99,10 @@
         font-size: 1.5rem;
     }
 
+    .logo:hover {
+        cursor: pointer;
+    }
+
     .logo-img {
         width: autopx;
         height: 32px;

src/lib/components/PlaceCard.svelte

@@ -1,14 +1,8 @@
 <script lang="ts">
     import { fade } from 'svelte/transition';
+    import type { Place } from '$lib/constants/Interfaces';
 
-    type Place = {
+    const defaultPlace: Place = {
-        name: string;
-        desc?: string;
-        image: string;
-        time?: string;
-    };
-
-    const defaultPlace: Omit<Place, 'desc'> = {
         name: 'PlaceName',
         image: '/placeholder.jpeg',
         time: 'Add Time'

src/routes/trips/+page.svelte

@@ -90,7 +90,7 @@
             <button 
                 class:active={activeTab === "Ongoing Trips"} 
                 onclick={() => handleTabChange("Ongoing Trips")}>
-                Ongoing Trips
+                Upcoming Trips
             </button>
             <button 
                 class:active={activeTab === "Past Trips"}