# annikaeld/holidaze architecture

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

- Interactive diagram: https://gitdiagram.com/annikaeld/holidaze
- Repository: https://github.com/annikaeld/holidaze

## Overview

Holidaze is a React accommodation-discovery and booking application. Travellers enter through the routed home/listing experience, search with destination, dates and guest count, refine results, and open venue details; a booking summary route and booking UI are present, while booking completion is documented as under development. Authentication pages use the Noroff auth API, with shared auth context exposed to the app and header. The README describes galleries, description formatting, filters and planned maps; some subsystem links are documented rather than verified in sampled code.

Main entry points: [`src/routes/AppRoutes.tsx`](https://github.com/annikaeld/holidaze/blob/main/src/routes/AppRoutes.tsx) (Route dispatch), [`src/features/venues/pages/VenueDetailsPage.tsx`](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/VenueDetailsPage.tsx) (Venue details), [`src/features/venues/pages/VenuesPage.tsx`](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/VenuesPage.tsx) (Venue listings), [`src/features/venues/services/venuesApi.ts`](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/services/venuesApi.ts) (Venue API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_app["Application<br/>[App.tsx]"]
  node_routes["Route dispatch<br/>[AppRoutes.tsx]"]
  node_layout["App layout<br/>[AppLayout.tsx]"]
  node_header["Account navigation<br/>[Header.tsx]"]
end

subgraph group_discovery["Venue discovery"]
  node_home["Home search<br/>[HomePage.tsx]"]
  node_listings["Venue listings<br/>[VenuesPage.tsx]"]
  node_search["Search form"]
  node_filters["Venue filters<br/>[VenueFilters.tsx]"]
  node_pagination["Pagination<br/>[Pagination.tsx]"]
  node_venue_api["Venue API<br/>[venuesApi.ts]"]
  node_venue_card["Venue card<br/>[VenueCard.tsx]"]
end

subgraph group_details["Venue details"]
  node_details_page["Venue details"]
  node_gallery["Image gallery<br/>[VenueGallery.tsx]"]
  node_description["Description view"]
  node_map["Location map<br/>[VenueMap.tsx]"]
end

subgraph group_booking["Booking"]
  node_booking_card["Booking card<br/>[BookingCard.tsx]"]
  node_booking_summary["Booking summary"]
end

subgraph group_identity["Identity"]
  node_auth_pages["Login and register<br/>[LoginPage.tsx]"]
  node_auth_api["Auth API<br/>[authApi.ts]"]
  node_auth_context["Auth context<br/>[AuthContext.tsx]"]
end

node_traveller(("Traveller"))
node_noroff_venues{{"Noroff venues API"}}
node_noroff_auth{{"Noroff auth API"}}

node_traveller -->|"navigates"| node_routes
node_app -->|"provides auth"| node_auth_context
node_app -->|"renders routes"| node_routes
node_routes -->|"wraps pages"| node_layout
node_routes -->|"routes to"| node_home
node_routes -->|"routes to"| node_listings
node_routes -->|"routes to"| node_details_page
node_routes -->|"routes to"| node_auth_pages
node_routes -->|"routes to"| node_booking_summary
node_home -->|"renders"| node_search
node_listings -->|"fetches results"| node_venue_api
node_listings -->|"renders"| node_search
node_listings -->|"renders"| node_filters
node_listings -->|"renders"| node_pagination
node_listings -->|"renders results"| node_venue_card
node_venue_api -->|"requests data"| node_noroff_venues
node_details_page -->|"loads venue"| node_venue_api
node_details_page -->|"renders"| node_gallery
node_details_page -->|"renders"| node_description
node_details_page -->|"renders"| node_booking_card
node_details_page -->|"renders"| node_map
node_booking_summary -->|"loads venue data"| node_venue_api
node_auth_pages -->|"submits credentials"| node_auth_api
node_auth_api -->|"authenticates"| node_noroff_auth
node_header -->|"reads session"| node_auth_context
node_booking_card -->|"reads user"| node_auth_context
node_details_page -.->|"shows map"| node_map
node_booking_card -.->|"continues booking"| node_booking_summary

click node_app "https://github.com/annikaeld/holidaze/blob/main/src/App.tsx"
click node_routes "https://github.com/annikaeld/holidaze/blob/main/src/routes/AppRoutes.tsx"
click node_layout "https://github.com/annikaeld/holidaze/blob/main/src/components/layout/AppLayout.tsx"
click node_home "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/HomePage.tsx"
click node_listings "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/VenuesPage.tsx"
click node_search "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueSearchForm.tsx"
click node_filters "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueFilters.tsx"
click node_pagination "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/Pagination.tsx"
click node_venue_api "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/services/venuesApi.ts"
click node_venue_card "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueCard.tsx"
click node_details_page "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/VenueDetailsPage.tsx"
click node_gallery "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueGallery.tsx"
click node_description "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueDescription.tsx"
click node_map "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueMap.tsx"
click node_booking_card "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/BookingCard.tsx"
click node_booking_summary "https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/BookingSummaryPage.tsx"
click node_auth_pages "https://github.com/annikaeld/holidaze/blob/main/src/features/auth/pages/LoginPage.tsx"
click node_auth_api "https://github.com/annikaeld/holidaze/blob/main/src/features/auth/services/authApi.ts"
click node_auth_context "https://github.com/annikaeld/holidaze/blob/main/src/features/auth/context/AuthContext.tsx"
click node_header "https://github.com/annikaeld/holidaze/blob/main/src/components/layout/Header.tsx"

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_routes,node_layout,node_header toneBlue
class node_home,node_listings,node_search,node_filters,node_pagination,node_venue_api,node_venue_card toneAmber
class node_details_page,node_gallery,node_description,node_map,node_noroff_venues,node_noroff_auth toneMint
class node_booking_card,node_booking_summary toneRose
class node_auth_pages,node_auth_api,node_auth_context,node_traveller toneIndigo
```

## Components

### App shell

- [Application](https://github.com/annikaeld/holidaze/blob/main/src/App.tsx): `src/App.tsx`
- [Route dispatch](https://github.com/annikaeld/holidaze/blob/main/src/routes/AppRoutes.tsx): `src/routes/AppRoutes.tsx`
- [App layout](https://github.com/annikaeld/holidaze/blob/main/src/components/layout/AppLayout.tsx): `src/components/layout/AppLayout.tsx`
- [Account navigation](https://github.com/annikaeld/holidaze/blob/main/src/components/layout/Header.tsx): `src/components/layout/Header.tsx`

### Venue discovery

- [Home search](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/HomePage.tsx): `src/features/venues/pages/HomePage.tsx`
- [Venue listings](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/VenuesPage.tsx): `src/features/venues/pages/VenuesPage.tsx`
- [Search form](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueSearchForm.tsx): `src/features/venues/components/VenueSearchForm.tsx`
- [Venue filters](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueFilters.tsx): `src/features/venues/components/VenueFilters.tsx`
- [Pagination](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/Pagination.tsx): `src/features/venues/components/Pagination.tsx`
- [Venue API](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/services/venuesApi.ts): `src/features/venues/services/venuesApi.ts`
- [Venue card](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueCard.tsx): `src/features/venues/components/VenueCard.tsx`

### Venue details

- [Venue details](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/VenueDetailsPage.tsx): `src/features/venues/pages/VenueDetailsPage.tsx`
- [Image gallery](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueGallery.tsx): `src/features/venues/components/VenueGallery.tsx`
- [Description view](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueDescription.tsx): `src/features/venues/components/VenueDescription.tsx`
- [Location map](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/VenueMap.tsx): `src/features/venues/components/VenueMap.tsx`

### Booking

- [Booking card](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/components/BookingCard.tsx): `src/features/venues/components/BookingCard.tsx`
- [Booking summary](https://github.com/annikaeld/holidaze/blob/main/src/features/venues/pages/BookingSummaryPage.tsx): `src/features/venues/pages/BookingSummaryPage.tsx`

### Identity

- [Login and register](https://github.com/annikaeld/holidaze/blob/main/src/features/auth/pages/LoginPage.tsx): `src/features/auth/pages/LoginPage.tsx`
- [Auth API](https://github.com/annikaeld/holidaze/blob/main/src/features/auth/services/authApi.ts): `src/features/auth/services/authApi.ts`
- [Auth context](https://github.com/annikaeld/holidaze/blob/main/src/features/auth/context/AuthContext.tsx): `src/features/auth/context/AuthContext.tsx`

### Other components

- **Traveller**
- **Noroff venues API**
- **Noroff auth API**

## Connections

- Traveller → Route dispatch: navigates (evidence: `src/routes/AppRoutes.tsx`)
- Application → Auth context: provides auth (evidence: `src/App.tsx`)
- Application → Route dispatch: renders routes (evidence: `src/App.tsx`)
- Route dispatch → App layout: wraps pages (evidence: `src/routes/AppRoutes.tsx`)
- Route dispatch → Home search: routes to (evidence: `src/routes/AppRoutes.tsx`)
- Route dispatch → Venue listings: routes to (evidence: `src/routes/AppRoutes.tsx`)
- Route dispatch → Venue details: routes to (evidence: `src/routes/AppRoutes.tsx`)
- Route dispatch → Login and register: routes to (evidence: `src/routes/AppRoutes.tsx`)
- Route dispatch → Booking summary: routes to (evidence: `src/routes/AppRoutes.tsx`)
- Home search → Search form: renders (evidence: `src/features/venues/pages/HomePage.tsx`)
- Venue listings → Venue API: fetches results (evidence: `src/features/venues/pages/VenuesPage.tsx`)
- Venue listings → Search form: renders (evidence: `src/features/venues/pages/VenuesPage.tsx`)
- Venue listings → Venue filters: renders (evidence: `src/features/venues/pages/VenuesPage.tsx`)
- Venue listings → Pagination: renders (evidence: `src/features/venues/pages/VenuesPage.tsx`)
- Venue listings → Venue card: renders results (evidence: `src/features/venues/pages/VenuesPage.tsx`)
- Venue API → Noroff venues API: requests data (evidence: `src/features/venues/services/venuesApi.ts`)
- Venue details → Venue API: loads venue (evidence: `src/features/venues/pages/VenueDetailsPage.tsx`)
- Venue details → Image gallery: renders (evidence: `src/features/venues/pages/VenueDetailsPage.tsx`)
- Venue details → Description view: renders (evidence: `src/features/venues/pages/VenueDetailsPage.tsx`)
- Venue details → Booking card: renders (evidence: `src/features/venues/pages/VenueDetailsPage.tsx`)
- Venue details → Location map: renders (evidence: `src/features/venues/pages/VenueDetailsPage.tsx`)
- Booking summary → Venue API: loads venue data (evidence: `src/features/venues/pages/BookingSummaryPage.tsx`)
- Login and register → Auth API: submits credentials (evidence: `src/features/auth/pages/LoginPage.tsx`)
- Auth API → Noroff auth API: authenticates (evidence: `src/features/auth/services/authApi.ts`)
- Account navigation → Auth context: reads session (evidence: `src/components/layout/Header.tsx`)
- Booking card → Auth context: reads user (evidence: `src/features/venues/components/BookingCard.tsx`)
- Venue details → Location map: shows map (evidence: `README.md`)
- Booking card → Booking summary: continues booking