# nielsgrrr/clubmedclientv2 architecture

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

- Interactive diagram: https://gitdiagram.com/nielsgrrr/clubmedclientv2
- Repository: https://github.com/nielsgrrr/clubmedclientv2

## Overview

This Vue application supports resort discovery, account access, reservation creation, cart checkout and resort administration. The main customer journey is browsing destinations or offers, progressing through reservation steps, then reviewing and paying for pending reservations. The graph reflects routing and service calls visible in the supplied excerpts; reservation-step internals and several view implementations were not sampled, so their internal wiring is omitted.

Main entry points: [`src/router/index.ts`](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/router/index.ts) (Route guards), [`src/stores/adminResorts.ts`](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/stores/adminResorts.ts) (Resort state), [`src/stores/auth.ts`](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/stores/auth.ts) (Authentication state), [`src/services/panierService.ts`](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/panierService.ts) (Cart and payment service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["Vue application<br/>[App.vue]"]
  node_router["Route guards<br/>[index.ts]"]
end

subgraph group_discovery["Resort discovery"]
  node_destinations["Destinations"]
  node_offers["Offer listings<br/>[AnnoncesList.vue]"]
  node_offer_detail["Offer detail<br/>[AnnonceDetail.vue]"]
  node_room_types["Room types"]
  node_club_lookup["Club discovery<br/>[useClubs.js]"]
  node_location_service["Location service"]
  node_announcement_service["Club and offer API<br/>[AnnonceService.js]"]
end

subgraph group_booking["Booking and payment"]
  node_reservation_steps["Reservation steps"]
  node_reservation_service["Reservation service"]
  node_cart["Cart and bookings<br/>[PanierView.vue]"]
  node_cart_service["Cart and payment service<br/>[panierService.ts]"]
  node_api_client["API client<br/>[api.ts]"]
end

subgraph group_identity["Accounts"]
  node_login["Login<br/>[LoginView.vue]"]
  node_register["Registration<br/>[RegisterView.vue]"]
  node_profile["Customer profile<br/>[ProfileView.vue]"]
  node_auth_store[("Authentication state<br/>[auth.ts]")]
end

subgraph group_admin["Resort administration"]
  node_admin_login["Admin login<br/>[AdminLoginView.vue]"]
  node_admin_dashboard["Resort dashboard"]
  node_admin_create["Create resort"]
  node_admin_edit["Edit resort<br/>[ResortEditView.vue]"]
  node_admin_store[("Resort state<br/>[adminResorts.ts]")]
  node_admin_service["Resort API service<br/>[adminService.ts]"]
end

node_visitor(("Customer"))
node_backend[("Backend API")]
node_stripe["Stripe checkout"]

node_visitor -->|"uses"| node_app
node_app -->|"renders routes"| node_router
node_router -->|"dispatches"| node_destinations
node_router -->|"dispatches"| node_offers
node_router -->|"dispatches"| node_offer_detail
node_router -->|"dispatches"| node_room_types
node_router -->|"dispatches"| node_reservation_steps
node_router -->|"dispatches"| node_cart
node_router -->|"dispatches"| node_login
node_router -->|"dispatches"| node_register
node_router -->|"dispatches"| node_profile
node_router -->|"dispatches"| node_admin_login
node_router -->|"dispatches"| node_admin_dashboard
node_router -->|"dispatches"| node_admin_create
node_router -->|"dispatches"| node_admin_edit
node_router -->|"checks access"| node_auth_store
node_club_lookup -->|"loads locations"| node_location_service
node_club_lookup -->|"loads clubs"| node_announcement_service
node_reservation_steps -->|"creates reservations"| node_reservation_service
node_cart -->|"manages cart"| node_cart_service
node_cart_service -->|"requests data"| node_api_client
node_reservation_service -->|"requests data"| node_api_client
node_api_client -->|"sends requests"| node_backend
node_cart_service -->|"creates checkout session"| node_stripe
node_login -->|"sets session"| node_auth_store
node_register -->|"sets session"| node_auth_store
node_profile -->|"uses session"| node_auth_store
node_admin_dashboard -->|"manages resorts"| node_admin_store
node_admin_create -->|"creates resort"| node_admin_store
node_admin_edit -->|"updates resort"| node_admin_store
node_admin_edit -->|"uploads photos"| node_admin_service
node_admin_store -->|"accesses resort API"| node_admin_service
node_admin_service -->|"sends requests"| node_backend
node_announcement_service -->|"sends requests"| node_backend

click node_app "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/App.vue"
click node_router "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/router/index.ts"
click node_destinations "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/LocalisationList.vue"
click node_offers "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/AnnoncesList.vue"
click node_offer_detail "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/AnnonceDetail.vue"
click node_room_types "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/TypeChambreList.vue"
click node_club_lookup "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/stores/useClubs.js"
click node_location_service "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/LocalisationService.js"
click node_announcement_service "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/AnnonceService.js"
click node_reservation_steps "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/ReservationStep1.vue"
click node_reservation_service "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/reservationService.ts"
click node_cart "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/PanierView.vue"
click node_cart_service "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/panierService.ts"
click node_api_client "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/api.ts"
click node_login "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/LoginView.vue"
click node_register "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/RegisterView.vue"
click node_profile "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/ProfileView.vue"
click node_auth_store "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/stores/auth.ts"
click node_admin_login "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/admin/AdminLoginView.vue"
click node_admin_dashboard "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/admin/DashboardResortsView.vue"
click node_admin_create "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/admin/ResortCreateView.vue"
click node_admin_edit "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/admin/ResortEditView.vue"
click node_admin_store "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/stores/adminResorts.ts"
click node_admin_service "https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/adminService.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_app,node_router toneBlue
class node_destinations,node_offers,node_offer_detail,node_room_types,node_club_lookup,node_location_service,node_announcement_service,node_backend toneAmber
class node_reservation_steps,node_reservation_service,node_cart,node_cart_service,node_api_client toneMint
class node_login,node_register,node_profile,node_auth_store toneRose
class node_admin_login,node_admin_dashboard,node_admin_create,node_admin_edit,node_admin_store,node_admin_service,node_visitor,node_stripe toneIndigo
```

## Components

### Application shell

- [Vue application](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/App.vue): `src/App.vue`
- [Route guards](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/router/index.ts): `src/router/index.ts`

### Resort discovery

- [Destinations](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/LocalisationList.vue): `src/views/LocalisationList.vue`
- [Offer listings](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/AnnoncesList.vue): `src/views/AnnoncesList.vue`
- [Offer detail](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/AnnonceDetail.vue): `src/views/AnnonceDetail.vue`
- [Room types](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/TypeChambreList.vue): `src/views/TypeChambreList.vue`
- [Club discovery](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/stores/useClubs.js): `src/stores/useClubs.js`
- [Location service](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/LocalisationService.js): `src/services/LocalisationService.js`
- [Club and offer API](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/AnnonceService.js): `src/services/AnnonceService.js`

### Booking and payment

- [Reservation steps](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/ReservationStep1.vue): `src/views/ReservationStep1.vue`
- [Reservation service](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/reservationService.ts): `src/services/reservationService.ts`
- [Cart and bookings](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/PanierView.vue): `src/views/PanierView.vue`
- [Cart and payment service](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/panierService.ts): `src/services/panierService.ts`
- [API client](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/api.ts): `src/services/api.ts`

### Accounts

- [Login](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/LoginView.vue): `src/views/LoginView.vue`
- [Registration](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/RegisterView.vue): `src/views/RegisterView.vue`
- [Customer profile](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/ProfileView.vue): `src/views/ProfileView.vue`
- [Authentication state](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/stores/auth.ts): `src/stores/auth.ts`

### Resort administration

- [Admin login](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/admin/AdminLoginView.vue): `src/views/admin/AdminLoginView.vue`
- [Resort dashboard](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/admin/DashboardResortsView.vue): `src/views/admin/DashboardResortsView.vue`
- [Create resort](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/admin/ResortCreateView.vue): `src/views/admin/ResortCreateView.vue`
- [Edit resort](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/views/admin/ResortEditView.vue): `src/views/admin/ResortEditView.vue`
- [Resort state](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/stores/adminResorts.ts): `src/stores/adminResorts.ts`
- [Resort API service](https://github.com/nielsgrrr/clubmedclientv2/blob/master/src/services/adminService.ts): `src/services/adminService.ts`

### Other components

- **Customer**
- **Backend API**
- **Stripe checkout**

## Connections

- Customer → Vue application: uses
- Vue application → Route guards: renders routes
- Route guards → Destinations: dispatches
- Route guards → Offer listings: dispatches
- Route guards → Offer detail: dispatches
- Route guards → Room types: dispatches
- Route guards → Reservation steps: dispatches
- Route guards → Cart and bookings: dispatches
- Route guards → Login: dispatches
- Route guards → Registration: dispatches
- Route guards → Customer profile: dispatches
- Route guards → Admin login: dispatches
- Route guards → Resort dashboard: dispatches
- Route guards → Create resort: dispatches
- Route guards → Edit resort: dispatches
- Route guards → Authentication state: checks access
- Club discovery → Location service: loads locations
- Club discovery → Club and offer API: loads clubs
- Reservation steps → Reservation service: creates reservations
- Cart and bookings → Cart and payment service: manages cart
- Cart and payment service → API client: requests data
- Reservation service → API client: requests data
- API client → Backend API: sends requests
- Cart and payment service → Stripe checkout: creates checkout session
- Login → Authentication state: sets session
- Registration → Authentication state: sets session
- Customer profile → Authentication state: uses session
- Resort dashboard → Resort state: manages resorts
- Create resort → Resort state: creates resort
- Edit resort → Resort state: updates resort
- Edit resort → Resort API service: uploads photos
- Resort state → Resort API service: accesses resort API
- Resort API service → Backend API: sends requests
- Club and offer API → Backend API: sends requests