# bjonne696/project-exam-2-holidaze architecture

> Architecture diagram of the GitHub repository bjonne696/project-exam-2-holidaze, 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/bjonne696/project-exam-2-holidaze
- Repository: https://github.com/bjonne696/project-exam-2-holidaze

## Overview

Holidaze is a React accommodation-booking frontend for travelers and venue managers. Travelers browse and search listings, inspect venue details and availability, book stays, and manage bookings from their profile; managers register or change roles and create, update, and manage listings. The app routes users through role-specific pages, while API hooks perform remote operations and Zustand holds local authentication state. README capabilities such as search and availability calendars are included, but their exact wiring is not shown in the sampled source.

Main entry points: [`src/components/layout/Layout.jsx`](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/layout/Layout.jsx) (Shared layout), [`src/hooks/useAuthHooks.jsx`](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/hooks/useAuthHooks.jsx) (Identity API hooks), [`src/hooks/useVenuesApi.jsx`](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/hooks/useVenuesApi.jsx) (Venue API hooks), [`src/pages/ManagerProfilePage.jsx`](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/ManagerProfilePage.jsx) (Manager dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["Route app<br/>[App.jsx]"]
  node_layout["Shared layout<br/>[Layout.jsx]"]
end

subgraph group_identity["Identity and profile"]
  node_profile["Customer profile<br/>[ProfilePage.jsx]"]
  node_login["Login<br/>[LoginPage.jsx]"]
  node_register["Registration<br/>[RegisterPage.jsx]"]
  node_authhooks["Identity API hooks<br/>[useAuthHooks.jsx]"]
  node_authstore["Auth state<br/>[authStore.jsx]"]
end

subgraph group_travel["Venue discovery and bookings"]
  node_home["Venue search<br/>[HomePage.jsx]"]
  node_venuepage["Venue details<br/>[VenuePage.jsx]"]
  node_filter["Search filters<br/>[VenueFilter.jsx]"]
  node_venuelist["Venue results<br/>[VenueList.jsx]"]
end

subgraph group_management["Venue management"]
  node_managerprofile["Manager dashboard"]
  node_createvenue["Create listing"]
  node_updatevenue["Edit listing"]
  node_venueitem["Venue card<br/>[VenueItem.jsx]"]
end

subgraph group_runtime["Data and API"]
  node_venuehooks["Venue API hooks<br/>[useVenuesApi.jsx]"]
  node_bookinghooks["Booking API hooks<br/>[useBookingsApi.jsx]"]
  node_venuesstore["Venue state<br/>[venuesStore.jsx]"]
  node_bookingsstore["Booking state<br/>[bookingsStore.jsx]"]
end

node_traveler(("Traveler"))
node_manager(("Venue manager"))
node_api{{"Holidaze API"}}

node_traveler -->|"opens app"| node_app
node_manager -->|"opens app"| node_app
node_app -->|"renders routes"| node_layout
node_layout -->|"routes to"| node_home
node_layout -->|"routes to"| node_venuepage
node_layout -->|"routes to"| node_profile
node_layout -->|"routes to"| node_login
node_layout -->|"routes to"| node_register
node_layout -->|"routes to"| node_managerprofile
node_layout -->|"routes to"| node_createvenue
node_layout -->|"routes to"| node_updatevenue
node_home -.->|"offers filters"| node_filter
node_home -.->|"shows results"| node_venuelist
node_login -->|"authenticates"| node_authhooks
node_register -->|"registers"| node_authhooks
node_profile -->|"updates profile"| node_authhooks
node_authhooks -->|"updates state"| node_authstore
node_profile -->|"manages bookings"| node_bookinghooks
node_venuepage -.->|"creates booking"| node_bookinghooks
node_managerprofile -->|"loads listings"| node_venuehooks
node_managerprofile -->|"changes role"| node_authhooks
node_managerprofile -->|"displays listings"| node_venueitem
node_createvenue -->|"creates listing"| node_venuehooks
node_updatevenue -->|"loads and updates"| node_venuehooks
node_venuepage -.->|"loads venue"| node_venuehooks
node_venuehooks -->|"requests venue data"| node_api
node_bookinghooks -->|"requests bookings"| node_api
node_authhooks -->|"requests identity"| node_api

click node_app "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/App.jsx"
click node_layout "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/layout/Layout.jsx"
click node_home "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/HomePage.jsx"
click node_venuepage "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/VenuePage.jsx"
click node_filter "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/VenueFilter.jsx"
click node_venuelist "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/VenueList.jsx"
click node_profile "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/ProfilePage.jsx"
click node_login "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/LoginPage.jsx"
click node_register "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/RegisterPage.jsx"
click node_managerprofile "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/ManagerProfilePage.jsx"
click node_createvenue "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/CreateVenueForm.jsx"
click node_updatevenue "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/UpdateVenueForm.jsx"
click node_venueitem "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/VenueItem.jsx"
click node_authhooks "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/hooks/useAuthHooks.jsx"
click node_authstore "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/stores/authStore.jsx"
click node_venuehooks "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/hooks/useVenuesApi.jsx"
click node_bookinghooks "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/hooks/useBookingsApi.jsx"
click node_venuesstore "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/stores/venuesStore.jsx"
click node_bookingsstore "https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/stores/bookingsStore.jsx"

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_layout toneBlue
class node_profile,node_login,node_register,node_authhooks,node_authstore toneAmber
class node_home,node_venuepage,node_filter,node_venuelist,node_api toneMint
class node_managerprofile,node_createvenue,node_updatevenue,node_venueitem toneRose
class node_venuehooks,node_bookinghooks,node_venuesstore,node_bookingsstore,node_traveler,node_manager toneIndigo
```

## Components

### App navigation

- [Route app](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/App.jsx): `src/App.jsx`
- [Shared layout](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/layout/Layout.jsx): `src/components/layout/Layout.jsx`

### Identity and profile

- [Customer profile](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/ProfilePage.jsx): `src/pages/ProfilePage.jsx`
- [Login](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/LoginPage.jsx): `src/pages/LoginPage.jsx`
- [Registration](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/RegisterPage.jsx): `src/pages/RegisterPage.jsx`
- [Identity API hooks](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/hooks/useAuthHooks.jsx): `src/hooks/useAuthHooks.jsx`
- [Auth state](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/stores/authStore.jsx): `src/stores/authStore.jsx`

### Venue discovery and bookings

- [Venue search](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/HomePage.jsx): `src/pages/HomePage.jsx`
- [Venue details](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/VenuePage.jsx): `src/pages/VenuePage.jsx`
- [Search filters](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/VenueFilter.jsx): `src/components/venues/VenueFilter.jsx`
- [Venue results](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/VenueList.jsx): `src/components/venues/VenueList.jsx`

### Venue management

- [Manager dashboard](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/pages/ManagerProfilePage.jsx): `src/pages/ManagerProfilePage.jsx`
- [Create listing](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/CreateVenueForm.jsx): `src/components/venues/CreateVenueForm.jsx`
- [Edit listing](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/UpdateVenueForm.jsx): `src/components/venues/UpdateVenueForm.jsx`
- [Venue card](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/components/venues/VenueItem.jsx): `src/components/venues/VenueItem.jsx`

### Data and API

- [Venue API hooks](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/hooks/useVenuesApi.jsx): `src/hooks/useVenuesApi.jsx`
- [Booking API hooks](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/hooks/useBookingsApi.jsx): `src/hooks/useBookingsApi.jsx`
- [Venue state](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/stores/venuesStore.jsx): `src/stores/venuesStore.jsx`
- [Booking state](https://github.com/bjonne696/project-exam-2-holidaze/blob/main/src/stores/bookingsStore.jsx): `src/stores/bookingsStore.jsx`

### Other components

- **Traveler**
- **Venue manager**
- **Holidaze API**

## Connections

- Traveler → Route app: opens app
- Venue manager → Route app: opens app
- Route app → Shared layout: renders routes
- Shared layout → Venue search: routes to
- Shared layout → Venue details: routes to
- Shared layout → Customer profile: routes to
- Shared layout → Login: routes to
- Shared layout → Registration: routes to
- Shared layout → Manager dashboard: routes to
- Shared layout → Create listing: routes to
- Shared layout → Edit listing: routes to
- Venue search → Search filters: offers filters
- Venue search → Venue results: shows results
- Login → Identity API hooks: authenticates
- Registration → Identity API hooks: registers
- Customer profile → Identity API hooks: updates profile
- Identity API hooks → Auth state: updates state
- Customer profile → Booking API hooks: manages bookings
- Venue details → Booking API hooks: creates booking
- Manager dashboard → Venue API hooks: loads listings
- Manager dashboard → Identity API hooks: changes role
- Manager dashboard → Venue card: displays listings
- Create listing → Venue API hooks: creates listing
- Edit listing → Venue API hooks: loads and updates
- Venue details → Venue API hooks: loads venue
- Venue API hooks → Holidaze API: requests venue data
- Booking API hooks → Holidaze API: requests bookings
- Identity API hooks → Holidaze API: requests identity