# bjonne696/ferieplassen architecture

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

## Overview

Ferieplassen is a Norwegian vacation-rental marketplace frontend. Visitors browse distinct listing collections, inspect cabins, and submit booking requests; signed-in owners create listings, manage requests and subscriptions, and use profile features. Admins manage platform data and discount codes. The graph captures documented payment and contact integrations as well as sampled service behavior. Some page-to-feature wiring and unsampled subsystem internals are inferred only from the README’s architectural overview; uncertain implementation links are omitted.

Main entry points: [`src/App.jsx`](https://github.com/bjonne696/ferieplassen/blob/main/src/App.jsx) (Routes), [`src/hooks/useNewCabinForm.js`](https://github.com/bjonne696/ferieplassen/blob/main/src/hooks/useNewCabinForm.js) (Listing form flow), [`src/services/listingService.js`](https://github.com/bjonne696/ferieplassen/blob/main/src/services/listingService.js) (Listing queries), [`src/services/subscriptionService.js`](https://github.com/bjonne696/ferieplassen/blob/main/src/services/subscriptionService.js) (Subscriptions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Application routing"]
  node_app["Routes<br/>[App.jsx]"]
end

subgraph group_discovery["Cabin discovery"]
  node_home["Home listings<br/>[HomePage.jsx]"]
  node_rentals["Rental listings<br/>[TilLeiePage.jsx]"]
  node_newest["Newest listings<br/>[NyeHytterPage.jsx]"]
  node_popular["Popular listings<br/>[PopularPage.jsx]"]
  node_listingservice["Listing queries<br/>[listingService.js]"]
  node_cabin["Cabin details<br/>[ShowCabinPage.jsx]"]
end

subgraph group_booking["Bookings and reviews"]
  node_bookingmodal["Booking form"]
  node_bookinghook["Booking workflow"]
  node_ownerrequests["Owner requests<br/>[OwnerRequests.jsx]"]
  node_review["Submit review<br/>[AddReviewForm.jsx]"]
end

subgraph group_owners["Owner and admin"]
  node_newlisting["Create listing<br/>[NyHyttePage.jsx]"]
  node_listingform["Listing form flow<br/>[useNewCabinForm.js]"]
  node_listingcreation["Listing creation"]
  node_newcabin["Cabin operations<br/>[newCabinService.js]"]
  node_subscription["Subscriptions"]
  node_profile["Owner profile<br/>[MinProfilPage.jsx]"]
  node_admin["Admin tools<br/>[AdminPage.jsx]"]
  node_discounts["Discount codes"]
end

subgraph group_services["Platform services"]
  node_auth["Auth provider<br/>[AuthProvider.jsx]"]
  node_supabase[("Supabase")]
  node_callback["Payment callback"]
  node_contact["Contact form<br/>[ContactForm.jsx]"]
end

node_visitor(("Visitor or user"))
node_paymentprovider{{"Vipps"}}

node_visitor -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_rentals
node_app -->|"routes"| node_newest
node_app -->|"routes"| node_popular
node_app -->|"routes"| node_cabin
node_app -->|"routes"| node_newlisting
node_app -->|"routes"| node_profile
node_app -->|"routes"| node_admin
node_app -->|"routes"| node_callback
node_app -->|"reads identity"| node_auth
node_home -->|"loads listings"| node_listingservice
node_rentals -->|"loads listings"| node_listingservice
node_newest -->|"loads listings"| node_listingservice
node_popular -->|"loads listings"| node_listingservice
node_listingservice -->|"reads cabins, reviews, bookings"| node_supabase
node_bookingmodal -->|"handles requests"| node_bookinghook
node_bookinghook -->|"reads and writes requests"| node_supabase
node_bookinghook -.->|"notifies owner"| node_supabase
node_review -->|"writes review"| node_supabase
node_listingform -->|"reads user"| node_auth
node_newlisting -->|"uses form flow"| node_listingform
node_listingform -->|"creates listing"| node_listingcreation
node_listingform -->|"uploads and inserts"| node_newcabin
node_listingform -->|"creates subscription"| node_subscription
node_listingcreation -->|"stores listing"| node_supabase
node_newcabin -->|"stores cabin and images"| node_supabase
node_subscription -->|"validates discounts"| node_supabase
node_subscription -->|"creates agreement"| node_paymentprovider
node_profile -->|"manages subscription"| node_subscription
node_admin -->|"manages codes"| node_discounts
node_discounts -->|"reads and writes codes"| node_supabase
node_callback -->|"checks subscription"| node_supabase
node_callback -.->|"activates demo"| node_paymentprovider
node_contact -.->|"sends contact request"| node_supabase

click node_app "https://github.com/bjonne696/ferieplassen/blob/main/src/App.jsx"
click node_auth "https://github.com/bjonne696/ferieplassen/blob/main/src/contexts/AuthProvider.jsx"
click node_home "https://github.com/bjonne696/ferieplassen/blob/main/src/pages/HomePage.jsx"
click node_rentals "https://github.com/bjonne696/ferieplassen/blob/main/src/pages/TilLeiePage.jsx"
click node_newest "https://github.com/bjonne696/ferieplassen/blob/main/src/pages/NyeHytterPage.jsx"
click node_popular "https://github.com/bjonne696/ferieplassen/blob/main/src/pages/PopularPage.jsx"
click node_listingservice "https://github.com/bjonne696/ferieplassen/blob/main/src/services/listingService.js"
click node_cabin "https://github.com/bjonne696/ferieplassen/blob/main/src/pages/ShowCabinPage.jsx"
click node_bookingmodal "https://github.com/bjonne696/ferieplassen/blob/main/src/components/cabins/BookingRequestModal.jsx"
click node_bookinghook "https://github.com/bjonne696/ferieplassen/blob/main/src/hooks/useBookingRequest.js"
click node_ownerrequests "https://github.com/bjonne696/ferieplassen/blob/main/src/components/bookings/OwnerRequests.jsx"
click node_review "https://github.com/bjonne696/ferieplassen/blob/main/src/components/reviews/AddReviewForm.jsx"
click node_newlisting "https://github.com/bjonne696/ferieplassen/blob/main/src/pages/NyHyttePage.jsx"
click node_listingform "https://github.com/bjonne696/ferieplassen/blob/main/src/hooks/useNewCabinForm.js"
click node_listingcreation "https://github.com/bjonne696/ferieplassen/blob/main/src/services/createCabinListing.js"
click node_newcabin "https://github.com/bjonne696/ferieplassen/blob/main/src/services/newCabinService.js"
click node_subscription "https://github.com/bjonne696/ferieplassen/blob/main/src/services/subscriptionService.js"
click node_profile "https://github.com/bjonne696/ferieplassen/blob/main/src/pages/MinProfilPage.jsx"
click node_admin "https://github.com/bjonne696/ferieplassen/blob/main/src/pages/AdminPage.jsx"
click node_discounts "https://github.com/bjonne696/ferieplassen/blob/main/src/components/admin/DiscountCodeManager.jsx"
click node_callback "https://github.com/bjonne696/ferieplassen/blob/main/src/hooks/useVippsCallback.js"
click node_contact "https://github.com/bjonne696/ferieplassen/blob/main/src/components/contact/ContactForm.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_visitor toneBlue
class node_home,node_rentals,node_newest,node_popular,node_listingservice,node_cabin toneAmber
class node_bookingmodal,node_bookinghook,node_ownerrequests,node_review toneMint
class node_newlisting,node_listingform,node_listingcreation,node_newcabin,node_subscription,node_profile,node_admin,node_discounts toneRose
class node_auth,node_supabase,node_callback,node_contact,node_paymentprovider toneIndigo
```

## Components

### Application routing

- [Routes](https://github.com/bjonne696/ferieplassen/blob/main/src/App.jsx): `src/App.jsx`

### Cabin discovery

- [Home listings](https://github.com/bjonne696/ferieplassen/blob/main/src/pages/HomePage.jsx): `src/pages/HomePage.jsx`
- [Rental listings](https://github.com/bjonne696/ferieplassen/blob/main/src/pages/TilLeiePage.jsx): `src/pages/TilLeiePage.jsx`
- [Newest listings](https://github.com/bjonne696/ferieplassen/blob/main/src/pages/NyeHytterPage.jsx): `src/pages/NyeHytterPage.jsx`
- [Popular listings](https://github.com/bjonne696/ferieplassen/blob/main/src/pages/PopularPage.jsx): `src/pages/PopularPage.jsx`
- [Listing queries](https://github.com/bjonne696/ferieplassen/blob/main/src/services/listingService.js): `src/services/listingService.js`
- [Cabin details](https://github.com/bjonne696/ferieplassen/blob/main/src/pages/ShowCabinPage.jsx): `src/pages/ShowCabinPage.jsx`

### Bookings and reviews

- [Booking form](https://github.com/bjonne696/ferieplassen/blob/main/src/components/cabins/BookingRequestModal.jsx): `src/components/cabins/BookingRequestModal.jsx`
- [Booking workflow](https://github.com/bjonne696/ferieplassen/blob/main/src/hooks/useBookingRequest.js): `src/hooks/useBookingRequest.js`
- [Owner requests](https://github.com/bjonne696/ferieplassen/blob/main/src/components/bookings/OwnerRequests.jsx): `src/components/bookings/OwnerRequests.jsx`
- [Submit review](https://github.com/bjonne696/ferieplassen/blob/main/src/components/reviews/AddReviewForm.jsx): `src/components/reviews/AddReviewForm.jsx`

### Owner and admin

- [Create listing](https://github.com/bjonne696/ferieplassen/blob/main/src/pages/NyHyttePage.jsx): `src/pages/NyHyttePage.jsx`
- [Listing form flow](https://github.com/bjonne696/ferieplassen/blob/main/src/hooks/useNewCabinForm.js): `src/hooks/useNewCabinForm.js`
- [Listing creation](https://github.com/bjonne696/ferieplassen/blob/main/src/services/createCabinListing.js): `src/services/createCabinListing.js`
- [Cabin operations](https://github.com/bjonne696/ferieplassen/blob/main/src/services/newCabinService.js): `src/services/newCabinService.js`
- [Subscriptions](https://github.com/bjonne696/ferieplassen/blob/main/src/services/subscriptionService.js): `src/services/subscriptionService.js`
- [Owner profile](https://github.com/bjonne696/ferieplassen/blob/main/src/pages/MinProfilPage.jsx): `src/pages/MinProfilPage.jsx`
- [Admin tools](https://github.com/bjonne696/ferieplassen/blob/main/src/pages/AdminPage.jsx): `src/pages/AdminPage.jsx`
- [Discount codes](https://github.com/bjonne696/ferieplassen/blob/main/src/components/admin/DiscountCodeManager.jsx): `src/components/admin/DiscountCodeManager.jsx`

### Platform services

- [Auth provider](https://github.com/bjonne696/ferieplassen/blob/main/src/contexts/AuthProvider.jsx): `src/contexts/AuthProvider.jsx`
- **Supabase**
- [Payment callback](https://github.com/bjonne696/ferieplassen/blob/main/src/hooks/useVippsCallback.js): `src/hooks/useVippsCallback.js`
- [Contact form](https://github.com/bjonne696/ferieplassen/blob/main/src/components/contact/ContactForm.jsx): `src/components/contact/ContactForm.jsx`

### Other components

- **Visitor or user**
- **Vipps**

## Connections

- Visitor or user → Routes: opens
- Routes → Home listings: routes
- Routes → Rental listings: routes
- Routes → Newest listings: routes
- Routes → Popular listings: routes
- Routes → Cabin details: routes
- Routes → Create listing: routes
- Routes → Owner profile: routes
- Routes → Admin tools: routes
- Routes → Payment callback: routes
- Routes → Auth provider: reads identity
- Home listings → Listing queries: loads listings
- Rental listings → Listing queries: loads listings
- Newest listings → Listing queries: loads listings
- Popular listings → Listing queries: loads listings
- Listing queries → Supabase: reads cabins, reviews, bookings
- Booking form → Booking workflow: handles requests
- Booking workflow → Supabase: reads and writes requests
- Booking workflow → Supabase: notifies owner
- Submit review → Supabase: writes review
- Listing form flow → Auth provider: reads user
- Create listing → Listing form flow: uses form flow
- Listing form flow → Listing creation: creates listing
- Listing form flow → Cabin operations: uploads and inserts
- Listing form flow → Subscriptions: creates subscription
- Listing creation → Supabase: stores listing
- Cabin operations → Supabase: stores cabin and images
- Subscriptions → Supabase: validates discounts
- Subscriptions → Vipps: creates agreement
- Owner profile → Subscriptions: manages subscription
- Admin tools → Discount codes: manages codes
- Discount codes → Supabase: reads and writes codes
- Payment callback → Supabase: checks subscription
- Payment callback → Vipps: activates demo
- Contact form → Supabase: sends contact request