# sxpeed/vayu-webapp architecture

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

- Interactive diagram: https://gitdiagram.com/sxpeed/vayu-webapp
- Repository: https://github.com/sxpeed/vayu-webapp

## Overview

Vayu Design is a mobile-first business-management PWA, with a public website and a provider control centre. Its main workflow is for a team member to sign in, manage business records and communications, and synchronize work with the API; customers can also enter through signup or a private viewing room. The graph preserves the documented artwork, catalog, finance, inquiry, messaging, and attendance capabilities, plus organization onboarding and administration. Backend links reflect the README and sampled routing/storage code; unsampled feature wiring is shown only where documented.

Main entry points: [`frontend/views`](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views) (Business Views), [`frontend/worker.ts`](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/worker.ts) (API Worker), [`frontend/App.tsx`](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/App.tsx) (App Shell), [`frontend/orgStorage.ts`](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/orgStorage.ts) (Organization Storage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_product["Business App"]
  node_app["App Shell<br/>[App.tsx]"]
  node_auth["Authentication<br/>[authService.ts]"]
  node_views["Business Views"]
  node_handlers["CRUD &amp; Messaging<br/>[useHandlers.ts]"]
  node_services["Business Services"]
  node_sync["Offline Sync<br/>[syncService.ts]"]
  node_api["API Worker<br/>[worker.ts]"]
  node_artwork["Artworks &amp; Collections"]
  node_catalog["Catalogs &amp; Rooms"]
  node_finance["Invoices &amp; Payments"]
  node_inquiries["Inquiries &amp; Contacts"]
  node_team["Messaging &amp; Attendance"]
end

subgraph group_platform["SaaS Platform"]
  node_admin["Control Centre"]
  node_platform_routes["Platform API Routes<br/>[routes.ts]"]
  node_center["Admin Operations<br/>[centerRoutes.ts]"]
end

subgraph group_storage["Persistence"]
  node_org_storage["Organization Storage<br/>[orgStorage.ts]"]
  node_org_db[("Organization Database<br/>[orgAppDb.ts]")]
  node_d1[("Platform Data")]
  node_kv[("Session Store")]
  node_r2[("File Store")]
  node_realtime["Realtime<br/>[realtime.ts]"]
end

subgraph group_public["Public Experience"]
  node_website["Public Website"]
  node_signup["Signup Flow<br/>[Signup.tsx]"]
  node_viewing["Private Viewing Room<br/>[RoomPage.tsx]"]
end

node_member(("Team Member"))

node_member -->|"uses"| node_app
node_app -->|"authenticates"| node_auth
node_app -->|"renders"| node_views
node_views -->|"invokes actions"| node_handlers
node_handlers -->|"updates records"| node_services
node_app -->|"loads data"| node_sync
node_services -->|"calls API"| node_api
node_sync -->|"synchronizes"| node_api
node_api -->|"uses organization resources"| node_org_storage
node_org_storage -->|"queries"| node_org_db
node_org_storage -->|"scopes keys"| node_kv
node_org_storage -->|"prefixes files"| node_r2
node_api -->|"uses platform data"| node_d1
node_api -->|"supports realtime"| node_realtime
node_views -->|"manages"| node_artwork
node_views -->|"creates"| node_catalog
node_views -->|"tracks"| node_finance
node_views -->|"handles"| node_inquiries
node_views -->|"supports"| node_team
node_website -->|"offers signup"| node_signup
node_signup -->|"submits application"| node_api
node_viewing -->|"loads room"| node_api
node_member -->|"administers platform"| node_admin
node_admin -->|"calls"| node_platform_routes
node_platform_routes -->|"dispatches admin routes"| node_center
node_platform_routes -->|"reads and writes"| node_d1

click node_app "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/App.tsx"
click node_auth "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/services/authService.ts"
click node_views "https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views"
click node_handlers "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/hooks/useHandlers.ts"
click node_services "https://github.com/sxpeed/vayu-webapp/tree/main/frontend/services"
click node_sync "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/services/syncService.ts"
click node_api "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/worker.ts"
click node_artwork "https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views"
click node_catalog "https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views"
click node_finance "https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views"
click node_inquiries "https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views"
click node_team "https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views"
click node_website "https://github.com/sxpeed/vayu-webapp/tree/main/frontend/site"
click node_signup "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/site/Signup.tsx"
click node_viewing "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/room/RoomPage.tsx"
click node_admin "https://github.com/sxpeed/vayu-webapp/tree/main/frontend/admin"
click node_platform_routes "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/platform/routes.ts"
click node_center "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/platform/centerRoutes.ts"
click node_org_storage "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/orgStorage.ts"
click node_org_db "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/orgAppDb.ts"
click node_realtime "https://github.com/sxpeed/vayu-webapp/blob/main/frontend/realtime.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_app,node_auth,node_views,node_handlers,node_services,node_sync,node_api,node_artwork,node_catalog,node_finance,node_inquiries,node_team toneBlue
class node_admin,node_platform_routes,node_center toneAmber
class node_org_storage,node_org_db,node_d1,node_kv,node_r2,node_realtime toneMint
class node_website,node_signup,node_viewing toneRose
class node_member toneIndigo
```

## Components

### Business App

- [App Shell](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/App.tsx): `frontend/App.tsx`
- [Authentication](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/services/authService.ts): `frontend/services/authService.ts`
- [Business Views](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views): `frontend/views`
- [CRUD & Messaging](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/hooks/useHandlers.ts): `frontend/hooks/useHandlers.ts`
- [Business Services](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/services): `frontend/services`
- [Offline Sync](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/services/syncService.ts): `frontend/services/syncService.ts`
- [API Worker](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/worker.ts): `frontend/worker.ts`
- [Artworks & Collections](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views): `frontend/views`
- [Catalogs & Rooms](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views): `frontend/views`
- [Invoices & Payments](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views): `frontend/views`
- [Inquiries & Contacts](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views): `frontend/views`
- [Messaging & Attendance](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/views): `frontend/views`

### SaaS Platform

- [Control Centre](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/admin): `frontend/admin`
- [Platform API Routes](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/platform/routes.ts): `frontend/platform/routes.ts`
- [Admin Operations](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/platform/centerRoutes.ts): `frontend/platform/centerRoutes.ts`

### Persistence

- [Organization Storage](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/orgStorage.ts): `frontend/orgStorage.ts`
- [Organization Database](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/orgAppDb.ts): `frontend/orgAppDb.ts`
- **Platform Data**
- **Session Store**
- **File Store**
- [Realtime](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/realtime.ts): `frontend/realtime.ts`

### Public Experience

- [Public Website](https://github.com/sxpeed/vayu-webapp/tree/main/frontend/site): `frontend/site`
- [Signup Flow](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/site/Signup.tsx): `frontend/site/Signup.tsx`
- [Private Viewing Room](https://github.com/sxpeed/vayu-webapp/blob/main/frontend/room/RoomPage.tsx): `frontend/room/RoomPage.tsx`

### Other components

- **Team Member**

## Connections

- Team Member → App Shell: uses
- App Shell → Authentication: authenticates
- App Shell → Business Views: renders
- Business Views → CRUD & Messaging: invokes actions
- CRUD & Messaging → Business Services: updates records
- App Shell → Offline Sync: loads data
- Business Services → API Worker: calls API
- Offline Sync → API Worker: synchronizes
- API Worker → Organization Storage: uses organization resources
- Organization Storage → Organization Database: queries
- Organization Storage → Session Store: scopes keys
- Organization Storage → File Store: prefixes files
- API Worker → Platform Data: uses platform data
- API Worker → Realtime: supports realtime
- Business Views → Artworks & Collections: manages
- Business Views → Catalogs & Rooms: creates
- Business Views → Invoices & Payments: tracks
- Business Views → Inquiries & Contacts: handles
- Business Views → Messaging & Attendance: supports
- Public Website → Signup Flow: offers signup
- Signup Flow → API Worker: submits application
- Private Viewing Room → API Worker: loads room
- Team Member → Control Centre: administers platform
- Control Centre → Platform API Routes: calls
- Platform API Routes → Admin Operations: dispatches admin routes
- Platform API Routes → Platform Data: reads and writes