# sauwin/trip-planner-frontend architecture

> Architecture diagram of the GitHub repository sauwin/trip-planner-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sauwin/trip-planner-frontend
- Repository: https://github.com/sauwin/trip-planner-frontend

## Overview

This is a Vue travel-planning frontend: visitors discover destinations, express preferences and interactions, organize trips, track expenses, and review spending activity. The router selects views and protects authenticated routes; views own domain operations and call API modules, while the shared HTTP layer is represented as the transport boundary. Several feature views and API implementations were not sampled, so their capabilities are represented from the tree, but uncertain call wiring is omitted.

Main entry points: [`src/router/index.ts`](https://github.com/sauwin/trip-planner-frontend/blob/main/src/router/index.ts) (Route dispatcher), [`src/views/trip-detail/pages/TripDetailView.vue`](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/trip-detail/pages/TripDetailView.vue) (Trip workspace), [`src/views/destination-detail/pages/DestinationDetailView.vue`](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/destination-detail/pages/DestinationDetailView.vue) (Destination detail), [`src/views/login/pages/LoginView.vue`](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/login/pages/LoginView.vue) (Login and registration)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_router["Route dispatcher<br/>[index.ts]"]
  node_approot["App shell<br/>[App.vue]"]
  node_authstore[("Auth state<br/>[auth.store.ts]")]
  node_login["Login and registration<br/>[LoginView.vue]"]
end

subgraph group_discovery["Destination discovery"]
  node_home["Home view<br/>[HomeView.vue]"]
  node_destinations["Destination browse"]
  node_filters["Feature filters"]
  node_destinationdetail["Destination detail"]
  node_recommendations["Recommendations"]
end

subgraph group_planning["Trip planning"]
  node_trips["Trip list<br/>[TripsView.vue]"]
  node_tripdetail["Trip workspace<br/>[TripDetailView.vue]"]
end

subgraph group_insights["Account and insights"]
  node_dashboard["Spending dashboard<br/>[DashboardView.vue]"]
  node_preferences["Preferences"]
end

subgraph group_transport["API transport"]
  node_destinationapi["Destination API"]
  node_interactionapi["Interaction API"]
  node_metaapi["Metadata API<br/>[meta.api.ts]"]
  node_tripapi["Trip API<br/>[trips.api.ts]"]
  node_expenseapi["Expense API<br/>[expenses.api.ts]"]
  node_authapi["Authentication API<br/>[auth.api.ts]"]
  node_http["HTTP client<br/>[http.ts]"]
end

node_traveler(("Traveler"))
node_backend{{"Backend service"}}

node_traveler -->|"opens pages"| node_router
node_router -->|"renders route"| node_approot
node_router -->|"checks access"| node_authstore
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_destinations
node_router -->|"routes to"| node_destinationdetail
node_router -->|"routes to"| node_recommendations
node_router -->|"routes to"| node_trips
node_router -->|"routes to"| node_tripdetail
node_router -->|"routes to"| node_dashboard
node_router -->|"routes to"| node_preferences
node_router -->|"routes to"| node_login
node_destinations -->|"uses filters"| node_filters
node_filters -->|"loads categories"| node_metaapi
node_destinationdetail -->|"loads destination"| node_destinationapi
node_destinationdetail -->|"records interactions"| node_interactionapi
node_trips -->|"lists and creates"| node_tripapi
node_tripdetail -->|"manages trip"| node_tripapi
node_tripdetail -->|"loads destinations"| node_destinationapi
node_tripdetail -->|"manages expenses"| node_expenseapi
node_login -->|"authenticates"| node_authapi
node_authapi -->|"sends requests"| node_http
node_backend -->|"serves responses"| node_http

click node_router "https://github.com/sauwin/trip-planner-frontend/blob/main/src/router/index.ts"
click node_approot "https://github.com/sauwin/trip-planner-frontend/blob/main/src/App.vue"
click node_authstore "https://github.com/sauwin/trip-planner-frontend/blob/main/src/stores/auth.store.ts"
click node_home "https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/home/pages/HomeView.vue"
click node_destinations "https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/destinations/pages/DestinationsView.vue"
click node_filters "https://github.com/sauwin/trip-planner-frontend/blob/main/src/components/DestinationFilters.vue"
click node_destinationdetail "https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/destination-detail/pages/DestinationDetailView.vue"
click node_recommendations "https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/recommendations/pages/RecommendationsView.vue"
click node_destinationapi "https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/destinations.api.ts"
click node_interactionapi "https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/interactions.api.ts"
click node_metaapi "https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/meta.api.ts"
click node_trips "https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/trips/pages/TripsView.vue"
click node_tripdetail "https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/trip-detail/pages/TripDetailView.vue"
click node_tripapi "https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/trips.api.ts"
click node_expenseapi "https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/expenses.api.ts"
click node_dashboard "https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/dashboard/pages/DashboardView.vue"
click node_preferences "https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/preferences/pages/PreferencesView.vue"
click node_login "https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/login/pages/LoginView.vue"
click node_authapi "https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/auth.api.ts"
click node_http "https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/http.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_router,node_approot,node_authstore,node_login toneBlue
class node_home,node_destinations,node_filters,node_destinationdetail,node_recommendations toneAmber
class node_trips,node_tripdetail toneMint
class node_dashboard,node_preferences toneRose
class node_destinationapi,node_interactionapi,node_metaapi,node_tripapi,node_expenseapi,node_authapi,node_http,node_traveler,node_backend toneIndigo
```

## Components

### Application shell

- [Route dispatcher](https://github.com/sauwin/trip-planner-frontend/blob/main/src/router/index.ts): `src/router/index.ts`
- [App shell](https://github.com/sauwin/trip-planner-frontend/blob/main/src/App.vue): `src/App.vue`
- [Auth state](https://github.com/sauwin/trip-planner-frontend/blob/main/src/stores/auth.store.ts): `src/stores/auth.store.ts`
- [Login and registration](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/login/pages/LoginView.vue): `src/views/login/pages/LoginView.vue`

### Destination discovery

- [Home view](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/home/pages/HomeView.vue): `src/views/home/pages/HomeView.vue`
- [Destination browse](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/destinations/pages/DestinationsView.vue): `src/views/destinations/pages/DestinationsView.vue`
- [Feature filters](https://github.com/sauwin/trip-planner-frontend/blob/main/src/components/DestinationFilters.vue): `src/components/DestinationFilters.vue`
- [Destination detail](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/destination-detail/pages/DestinationDetailView.vue): `src/views/destination-detail/pages/DestinationDetailView.vue`
- [Recommendations](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/recommendations/pages/RecommendationsView.vue): `src/views/recommendations/pages/RecommendationsView.vue`

### Trip planning

- [Trip list](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/trips/pages/TripsView.vue): `src/views/trips/pages/TripsView.vue`
- [Trip workspace](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/trip-detail/pages/TripDetailView.vue): `src/views/trip-detail/pages/TripDetailView.vue`

### Account and insights

- [Spending dashboard](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/dashboard/pages/DashboardView.vue): `src/views/dashboard/pages/DashboardView.vue`
- [Preferences](https://github.com/sauwin/trip-planner-frontend/blob/main/src/views/preferences/pages/PreferencesView.vue): `src/views/preferences/pages/PreferencesView.vue`

### API transport

- [Destination API](https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/destinations.api.ts): `src/api/destinations.api.ts`
- [Interaction API](https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/interactions.api.ts): `src/api/interactions.api.ts`
- [Metadata API](https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/meta.api.ts): `src/api/meta.api.ts`
- [Trip API](https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/trips.api.ts): `src/api/trips.api.ts`
- [Expense API](https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/expenses.api.ts): `src/api/expenses.api.ts`
- [Authentication API](https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/auth.api.ts): `src/api/auth.api.ts`
- [HTTP client](https://github.com/sauwin/trip-planner-frontend/blob/main/src/api/http.ts): `src/api/http.ts`

### Other components

- **Traveler**
- **Backend service**

## Connections

- Traveler → Route dispatcher: opens pages
- Route dispatcher → App shell: renders route
- Route dispatcher → Auth state: checks access
- Route dispatcher → Home view: routes to
- Route dispatcher → Destination browse: routes to
- Route dispatcher → Destination detail: routes to
- Route dispatcher → Recommendations: routes to
- Route dispatcher → Trip list: routes to
- Route dispatcher → Trip workspace: routes to
- Route dispatcher → Spending dashboard: routes to
- Route dispatcher → Preferences: routes to
- Route dispatcher → Login and registration: routes to
- Destination browse → Feature filters: uses filters
- Feature filters → Metadata API: loads categories
- Destination detail → Destination API: loads destination
- Destination detail → Interaction API: records interactions
- Trip list → Trip API: lists and creates
- Trip workspace → Trip API: manages trip
- Trip workspace → Destination API: loads destinations
- Trip workspace → Expense API: manages expenses
- Login and registration → Authentication API: authenticates
- Authentication API → HTTP client: sends requests
- Backend service → HTTP client: serves responses