# mannyking0406/roomvo architecture

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

## Overview

This Nuxt application is a Roomvo product-visualization demo: users choose a surface category, select a demo room or upload their own image, then navigate to a category-specific room view. Sampled category pages fetch rooms and product metadata into Pinia; the sampled metadata handlers retrieve and parse Roomvo HTML. Detail-page and several API implementations were not sampled, so their downstream behavior is not inferred.

Main entry points: [`pages/index.vue`](https://github.com/mannyking0406/roomvo/blob/main/pages/index.vue) (Category selector), [`pages/multi/index.vue`](https://github.com/mannyking0406/roomvo/blob/main/pages/multi/index.vue) (Multi-surface), [`pages/floor/index.vue`](https://github.com/mannyking0406/roomvo/blob/main/pages/floor/index.vue) (Flooring), [`pages/wall/index.vue`](https://github.com/mannyking0406/roomvo/blob/main/pages/wall/index.vue) (Wall paint)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Demo entry"]
  node_home["Category selector<br/>[index.vue]"]
end

subgraph group_experience["Room selection"]
  node_rooms["Room catalog pages"]
  node_multi["Multi-surface<br/>[index.vue]"]
  node_floor["Flooring<br/>[index.vue]"]
  node_wall["Wall paint<br/>[index.vue]"]
  node_ext["Tiles and wallpaper<br/>[index.vue]"]
  node_roomview["Room visualization routes"]
  node_upload["Image upload control<br/>[UploadButton.vue]"]
end

subgraph group_state["Application state"]
  node_store[("Demo state<br/>[store.ts]")]
end

subgraph group_backend["API integration"]
  node_roomsapi["Room catalog API"]
  node_uploadapi["Room upload API<br/>[upload.ts]"]
  node_multiapi["Multi metadata API<br/>[index.ts]"]
  node_floorapi["Floor metadata API<br/>[index.ts]"]
  node_wallapi["Wall metadata API<br/>[index.ts]"]
  node_extapi["Tile metadata API<br/>[index.ts]"]
end

node_user(("Visitor"))
node_roomvo{{"Roomvo service"}}

node_user -->|"chooses category"| node_home
node_home -->|"navigates to"| node_multi
node_home -->|"navigates to"| node_floor
node_home -->|"navigates to"| node_wall
node_home -->|"navigates to"| node_ext
node_multi -->|"fetches rooms"| node_roomsapi
node_floor -->|"fetches rooms"| node_roomsapi
node_wall -->|"fetches rooms"| node_roomsapi
node_ext -->|"fetches rooms"| node_roomsapi
node_multi -->|"fetches metadata"| node_multiapi
node_floor -->|"fetches metadata"| node_floorapi
node_wall -->|"fetches metadata"| node_wallapi
node_ext -->|"fetches metadata"| node_extapi
node_multi -->|"stores rooms and metadata"| node_store
node_floor -->|"stores rooms and metadata"| node_store
node_wall -->|"stores rooms and metadata"| node_store
node_ext -->|"stores rooms and metadata"| node_store
node_multi -->|"opens selected room"| node_roomview
node_floor -->|"opens selected room"| node_roomview
node_wall -->|"opens selected room"| node_roomview
node_ext -->|"opens selected room"| node_roomview
node_user -->|"selects image"| node_upload
node_upload -->|"posts image"| node_uploadapi
node_uploadapi -->|"returns room ID"| node_roomview
node_multiapi -->|"fetches page HTML"| node_roomvo
node_floorapi -->|"fetches page HTML"| node_roomvo
node_wallapi -->|"fetches page HTML"| node_roomvo
node_extapi -->|"fetches page HTML"| node_roomvo

click node_home "https://github.com/mannyking0406/roomvo/blob/main/pages/index.vue"
click node_rooms "https://github.com/mannyking0406/roomvo/tree/main/pages"
click node_multi "https://github.com/mannyking0406/roomvo/blob/main/pages/multi/index.vue"
click node_floor "https://github.com/mannyking0406/roomvo/blob/main/pages/floor/index.vue"
click node_wall "https://github.com/mannyking0406/roomvo/blob/main/pages/wall/index.vue"
click node_ext "https://github.com/mannyking0406/roomvo/blob/main/pages/ext/index.vue"
click node_roomview "https://github.com/mannyking0406/roomvo/tree/main/pages"
click node_upload "https://github.com/mannyking0406/roomvo/blob/main/components/UploadButton.vue"
click node_store "https://github.com/mannyking0406/roomvo/blob/main/stores/store.ts"
click node_roomsapi "https://github.com/mannyking0406/roomvo/tree/main/server/api/rooms"
click node_uploadapi "https://github.com/mannyking0406/roomvo/blob/main/server/api/rooms/upload.ts"
click node_multiapi "https://github.com/mannyking0406/roomvo/blob/main/server/api/multi/index.ts"
click node_floorapi "https://github.com/mannyking0406/roomvo/blob/main/server/api/floors/index.ts"
click node_wallapi "https://github.com/mannyking0406/roomvo/blob/main/server/api/walls/index.ts"
click node_extapi "https://github.com/mannyking0406/roomvo/blob/main/server/api/ext/index.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_home toneBlue
class node_rooms,node_multi,node_floor,node_wall,node_ext,node_roomview,node_upload toneAmber
class node_store toneMint
class node_roomsapi,node_uploadapi,node_multiapi,node_floorapi,node_wallapi,node_extapi toneRose
class node_user,node_roomvo toneIndigo
```

## Components

### Demo entry

- [Category selector](https://github.com/mannyking0406/roomvo/blob/main/pages/index.vue): `pages/index.vue`

### Room selection

- [Room catalog pages](https://github.com/mannyking0406/roomvo/tree/main/pages): `pages`
- [Multi-surface](https://github.com/mannyking0406/roomvo/blob/main/pages/multi/index.vue): `pages/multi/index.vue`
- [Flooring](https://github.com/mannyking0406/roomvo/blob/main/pages/floor/index.vue): `pages/floor/index.vue`
- [Wall paint](https://github.com/mannyking0406/roomvo/blob/main/pages/wall/index.vue): `pages/wall/index.vue`
- [Tiles and wallpaper](https://github.com/mannyking0406/roomvo/blob/main/pages/ext/index.vue): `pages/ext/index.vue`
- [Room visualization routes](https://github.com/mannyking0406/roomvo/tree/main/pages): `pages`
- [Image upload control](https://github.com/mannyking0406/roomvo/blob/main/components/UploadButton.vue): `components/UploadButton.vue`

### Application state

- [Demo state](https://github.com/mannyking0406/roomvo/blob/main/stores/store.ts): `stores/store.ts`

### API integration

- [Room catalog API](https://github.com/mannyking0406/roomvo/tree/main/server/api/rooms): `server/api/rooms`
- [Room upload API](https://github.com/mannyking0406/roomvo/blob/main/server/api/rooms/upload.ts): `server/api/rooms/upload.ts`
- [Multi metadata API](https://github.com/mannyking0406/roomvo/blob/main/server/api/multi/index.ts): `server/api/multi/index.ts`
- [Floor metadata API](https://github.com/mannyking0406/roomvo/blob/main/server/api/floors/index.ts): `server/api/floors/index.ts`
- [Wall metadata API](https://github.com/mannyking0406/roomvo/blob/main/server/api/walls/index.ts): `server/api/walls/index.ts`
- [Tile metadata API](https://github.com/mannyking0406/roomvo/blob/main/server/api/ext/index.ts): `server/api/ext/index.ts`

### Other components

- **Visitor**
- **Roomvo service**

## Connections

- Visitor → Category selector: chooses category
- Category selector → Multi-surface: navigates to
- Category selector → Flooring: navigates to
- Category selector → Wall paint: navigates to
- Category selector → Tiles and wallpaper: navigates to
- Multi-surface → Room catalog API: fetches rooms
- Flooring → Room catalog API: fetches rooms
- Wall paint → Room catalog API: fetches rooms
- Tiles and wallpaper → Room catalog API: fetches rooms
- Multi-surface → Multi metadata API: fetches metadata
- Flooring → Floor metadata API: fetches metadata
- Wall paint → Wall metadata API: fetches metadata
- Tiles and wallpaper → Tile metadata API: fetches metadata
- Multi-surface → Demo state: stores rooms and metadata
- Flooring → Demo state: stores rooms and metadata
- Wall paint → Demo state: stores rooms and metadata
- Tiles and wallpaper → Demo state: stores rooms and metadata
- Multi-surface → Room visualization routes: opens selected room
- Flooring → Room visualization routes: opens selected room
- Wall paint → Room visualization routes: opens selected room
- Tiles and wallpaper → Room visualization routes: opens selected room
- Visitor → Image upload control: selects image
- Image upload control → Room upload API: posts image
- Room upload API → Room visualization routes: returns room ID
- Multi metadata API → Roomvo service: fetches page HTML
- Floor metadata API → Roomvo service: fetches page HTML
- Wall metadata API → Roomvo service: fetches page HTML
- Tile metadata API → Roomvo service: fetches page HTML