# primum01/project-protos architecture

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

- Interactive diagram: https://gitdiagram.com/primum01/project-protos
- Repository: https://github.com/primum01/project-protos

## Overview

TwinSpace appears to be a real-estate 3D-tour and listing website with an authenticated admin console for managing listings and related operations. The main visitor flow is route selection, published-listing retrieval, then listing or tour viewing, with a Matterport embed for the 3D experience. Admins authenticate, select a single active working session, and use the console’s management and reporting pages. The README is only the Vite template, and most page, API, and data-layer implementations were not sampled; uncertain connections are omitted.

Main entry points: [`src/app/router.tsx`](https://github.com/primum01/project-protos/blob/master/src/app/router.tsx) (Route dispatcher), [`src/pages/marketing`](https://github.com/primum01/project-protos/tree/master/src/pages/marketing) (Listing and tour views), [`src/app/App.tsx`](https://github.com/primum01/project-protos/blob/master/src/app/App.tsx) (React app), [`src/components/marketing/TourPreviewMockup.tsx`](https://github.com/primum01/project-protos/blob/master/src/components/marketing/TourPreviewMockup.tsx) (Matterport tour embed)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_visitor["Public experience"]
  node_visitor(("Site visitor"))
  node_app["React app<br/>[App.tsx]"]
  node_router["Route dispatcher<br/>[router.tsx]"]
  node_marketing["Marketing pages"]
  node_listingpages["Listing and tour views"]
  node_tourframe["Matterport tour embed"]
end

subgraph group_admin["Admin console"]
  node_authguard["Admin access guard<br/>[AuthGuard.tsx]"]
  node_authhook["Auth state hook<br/>[useAuth.ts]"]
  node_sessionselect["Session selection<br/>[SessionSelect.tsx]"]
  node_sessioncontext["Session coordination<br/>[SessionContext.tsx]"]
  node_admindata["Admin data context"]
  node_adminpages["Admin operations"]
end

subgraph group_data["Application data"]
  node_listinghook["Published listings<br/>[useListings.ts]"]
  node_listingstore["Listing access<br/>[listings.ts]"]
  node_sessionstore["Session access<br/>[sessions.ts]"]
end

subgraph group_integrations["External services"]
  node_contact["Contact endpoint<br/>[contact.ts]"]
  node_payment["Payment endpoint<br/>[create.ts]"]
  node_firestore[("Firestore")]
  node_firebaseauth["Firebase Auth"]
  node_matterport["Matterport"]
end

node_visitor -->|"opens site"| node_app
node_app -->|"renders routes"| node_router
node_router -->|"dispatches public routes"| node_marketing
node_router -->|"dispatches detail routes"| node_listingpages
node_listingpages -->|"loads listings"| node_listinghook
node_listinghook -->|"subscribes"| node_listingstore
node_listingstore -->|"reads listings"| node_firestore
node_listingpages -.->|"shows tour preview"| node_tourframe
node_tourframe -->|"embeds viewer"| node_matterport
node_router -->|"protects admin routes"| node_authguard
node_authguard -->|"checks admin"| node_authhook
node_authhook -->|"observes auth"| node_firebaseauth
node_router -->|"dispatches session route"| node_sessionselect
node_router -->|"provides admin data"| node_admindata
node_router -->|"dispatches admin routes"| node_adminpages
node_sessionselect -->|"selects session"| node_sessioncontext
node_sessioncontext -->|"manages sessions"| node_sessionstore
node_sessionstore -->|"reads and writes"| node_firestore

click node_app "https://github.com/primum01/project-protos/blob/master/src/app/App.tsx"
click node_router "https://github.com/primum01/project-protos/blob/master/src/app/router.tsx"
click node_marketing "https://github.com/primum01/project-protos/tree/master/src/pages/marketing"
click node_listinghook "https://github.com/primum01/project-protos/blob/master/src/hooks/useListings.ts"
click node_listingpages "https://github.com/primum01/project-protos/tree/master/src/pages/marketing"
click node_tourframe "https://github.com/primum01/project-protos/blob/master/src/components/marketing/TourPreviewMockup.tsx"
click node_contact "https://github.com/primum01/project-protos/blob/master/api/contact.ts"
click node_payment "https://github.com/primum01/project-protos/blob/master/api/payments/create.ts"
click node_authguard "https://github.com/primum01/project-protos/blob/master/src/components/admin/AuthGuard.tsx"
click node_authhook "https://github.com/primum01/project-protos/blob/master/src/hooks/useAuth.ts"
click node_sessionselect "https://github.com/primum01/project-protos/blob/master/src/pages/admin/SessionSelect.tsx"
click node_sessioncontext "https://github.com/primum01/project-protos/blob/master/src/contexts/SessionContext.tsx"
click node_admindata "https://github.com/primum01/project-protos/blob/master/src/contexts/AdminDataContext.tsx"
click node_adminpages "https://github.com/primum01/project-protos/tree/master/src/pages/admin"
click node_listingstore "https://github.com/primum01/project-protos/blob/master/src/lib/firebase/listings.ts"
click node_sessionstore "https://github.com/primum01/project-protos/blob/master/src/lib/firebase/sessions.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_visitor,node_app,node_router,node_marketing,node_listingpages,node_tourframe toneBlue
class node_authguard,node_authhook,node_sessionselect,node_sessioncontext,node_admindata,node_adminpages toneAmber
class node_listinghook,node_listingstore,node_sessionstore toneMint
class node_contact,node_payment,node_firestore,node_firebaseauth,node_matterport toneRose
```

## Components

### Public experience

- **Site visitor**
- [React app](https://github.com/primum01/project-protos/blob/master/src/app/App.tsx): `src/app/App.tsx`
- [Route dispatcher](https://github.com/primum01/project-protos/blob/master/src/app/router.tsx): `src/app/router.tsx`
- [Marketing pages](https://github.com/primum01/project-protos/tree/master/src/pages/marketing): `src/pages/marketing`
- [Listing and tour views](https://github.com/primum01/project-protos/tree/master/src/pages/marketing): `src/pages/marketing`
- [Matterport tour embed](https://github.com/primum01/project-protos/blob/master/src/components/marketing/TourPreviewMockup.tsx): `src/components/marketing/TourPreviewMockup.tsx`

### Admin console

- [Admin access guard](https://github.com/primum01/project-protos/blob/master/src/components/admin/AuthGuard.tsx): `src/components/admin/AuthGuard.tsx`
- [Auth state hook](https://github.com/primum01/project-protos/blob/master/src/hooks/useAuth.ts): `src/hooks/useAuth.ts`
- [Session selection](https://github.com/primum01/project-protos/blob/master/src/pages/admin/SessionSelect.tsx): `src/pages/admin/SessionSelect.tsx`
- [Session coordination](https://github.com/primum01/project-protos/blob/master/src/contexts/SessionContext.tsx): `src/contexts/SessionContext.tsx`
- [Admin data context](https://github.com/primum01/project-protos/blob/master/src/contexts/AdminDataContext.tsx): `src/contexts/AdminDataContext.tsx`
- [Admin operations](https://github.com/primum01/project-protos/tree/master/src/pages/admin): `src/pages/admin`

### Application data

- [Published listings](https://github.com/primum01/project-protos/blob/master/src/hooks/useListings.ts): `src/hooks/useListings.ts`
- [Listing access](https://github.com/primum01/project-protos/blob/master/src/lib/firebase/listings.ts): `src/lib/firebase/listings.ts`
- [Session access](https://github.com/primum01/project-protos/blob/master/src/lib/firebase/sessions.ts): `src/lib/firebase/sessions.ts`

### External services

- [Contact endpoint](https://github.com/primum01/project-protos/blob/master/api/contact.ts): `api/contact.ts`
- [Payment endpoint](https://github.com/primum01/project-protos/blob/master/api/payments/create.ts): `api/payments/create.ts`
- **Firestore**
- **Firebase Auth**
- **Matterport**

## Connections

- Site visitor → React app: opens site
- React app → Route dispatcher: renders routes
- Route dispatcher → Marketing pages: dispatches public routes
- Route dispatcher → Listing and tour views: dispatches detail routes
- Listing and tour views → Published listings: loads listings
- Published listings → Listing access: subscribes
- Listing access → Firestore: reads listings
- Listing and tour views → Matterport tour embed: shows tour preview
- Matterport tour embed → Matterport: embeds viewer
- Route dispatcher → Admin access guard: protects admin routes
- Admin access guard → Auth state hook: checks admin
- Auth state hook → Firebase Auth: observes auth
- Route dispatcher → Session selection: dispatches session route
- Route dispatcher → Admin data context: provides admin data
- Route dispatcher → Admin operations: dispatches admin routes
- Session selection → Session coordination: selects session
- Session coordination → Session access: manages sessions
- Session access → Firestore: reads and writes