# 2026-nccu-blockchain/sroi_frontend architecture

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

- Interactive diagram: https://gitdiagram.com/2026-nccu-blockchain/sroi_frontend
- Repository: https://github.com/2026-nccu-blockchain/sroi_frontend

## Overview

SROI is a Vue frontend for account access, form creation and response handling, group/project workspaces, profile and campus-ID workflows, and administrative review. The principal flow is browser navigation through the router to a feature page, which uses feature APIs and the shared HTTP client to exchange data with the backend. Authentication state supports guarded routes and authenticated requests. Several page and workspace implementations were not excerpted, so their internal calls are omitted or marked unverified rather than inferred.

Main entry points: [`src/app/router/index.ts`](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/app/router/index.ts) (Route dispatch), [`src/shared/api/http.ts`](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/shared/api/http.ts) (HTTP client), [`src/modules/forms/api/forms.api.ts`](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/forms/api/forms.api.ts) (Forms API), [`src/app/main.ts`](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/app/main.ts) (App bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_bootstrap["App bootstrap<br/>[main.ts]"]
  node_router["Route dispatch<br/>[index.ts]"]
  node_guards["Route guards<br/>[guards.ts]"]
  node_layouts["Application layouts"]
end

subgraph group_identity["Identity and profile"]
  node_authpages["Login and registration"]
  node_authstore["Authentication state<br/>[auth.store.ts]"]
  node_authapi["Authentication API<br/>[auth.api.ts]"]
  node_profile["Profile and ID requests"]
end

subgraph group_forms["Forms"]
  node_formdashboard["Forms dashboard"]
  node_formbuilder["Form builder"]
  node_formresponses["Response management"]
  node_publicform["Public form<br/>[PublicFormPage.vue]"]
  node_formsapi["Forms API<br/>[forms.api.ts]"]
end

subgraph group_workspace["Workspace and admin"]
  node_workspace["Groups and projects"]
  node_admin["Administrative review"]
end

subgraph group_shared["Shared API"]
  node_http["HTTP client<br/>[http.ts]"]
end

node_browser(("Browser user"))
node_backend["Backend API"]

node_browser -->|"opens app"| node_bootstrap
node_bootstrap -->|"installs router"| node_router
node_bootstrap -->|"initializes store"| node_authstore
node_bootstrap -->|"sets unauthorized handler"| node_http
node_router -->|"registers guards"| node_guards
node_router -->|"selects layout"| node_layouts
node_router -->|"routes to"| node_authpages
node_router -->|"routes to"| node_formdashboard
node_router -->|"routes to"| node_formbuilder
node_router -->|"routes to"| node_formresponses
node_router -->|"routes to"| node_publicform
node_router -->|"routes to"| node_profile
node_router -->|"routes to"| node_workspace
node_router -->|"routes to"| node_admin
node_guards -->|"checks identity"| node_authstore
node_authstore -->|"requests login and profile"| node_authapi
node_authapi -->|"sends requests"| node_http
node_formdashboard -->|"loads forms"| node_formsapi
node_formbuilder -->|"uses form operations"| node_formsapi
node_formresponses -.->|"uses form operations"| node_formsapi
node_publicform -.->|"uses form operations"| node_formsapi
node_formsapi -->|"sends requests"| node_http
node_workspace -.->|"uses API client"| node_http
node_admin -->|"sends admin requests"| node_http
node_http -->|"fetches API"| node_backend

click node_bootstrap "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/app/main.ts"
click node_router "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/app/router/index.ts"
click node_guards "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/app/router/guards.ts"
click node_layouts "https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/layouts"
click node_authpages "https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/modules/auth/pages"
click node_authstore "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/auth/store/auth.store.ts"
click node_authapi "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/auth/api/auth.api.ts"
click node_profile "https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/modules/profile"
click node_formdashboard "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/formdashboard/pages/FormDashboardPage.vue"
click node_formbuilder "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/forms/pages/FormBuilderPage.vue"
click node_formresponses "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/forms/pages/FormResponsesPage.vue"
click node_publicform "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/forms/pages/PublicFormPage.vue"
click node_formsapi "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/forms/api/forms.api.ts"
click node_workspace "https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/modules/workspace"
click node_admin "https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/modules/admin"
click node_http "https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/shared/api/http.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_bootstrap,node_router,node_guards,node_layouts,node_browser toneBlue
class node_authpages,node_authstore,node_authapi,node_profile toneAmber
class node_formdashboard,node_formbuilder,node_formresponses,node_publicform,node_formsapi,node_backend toneMint
class node_workspace,node_admin toneRose
class node_http toneIndigo
```

## Components

### Application shell

- [App bootstrap](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/app/main.ts): `src/app/main.ts`
- [Route dispatch](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/app/router/index.ts): `src/app/router/index.ts`
- [Route guards](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/app/router/guards.ts): `src/app/router/guards.ts`
- [Application layouts](https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/layouts): `src/layouts`

### Identity and profile

- [Login and registration](https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/modules/auth/pages): `src/modules/auth/pages`
- [Authentication state](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/auth/store/auth.store.ts): `src/modules/auth/store/auth.store.ts`
- [Authentication API](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/auth/api/auth.api.ts): `src/modules/auth/api/auth.api.ts`
- [Profile and ID requests](https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/modules/profile): `src/modules/profile`

### Forms

- [Forms dashboard](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/formdashboard/pages/FormDashboardPage.vue): `src/modules/formdashboard/pages/FormDashboardPage.vue`
- [Form builder](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/forms/pages/FormBuilderPage.vue): `src/modules/forms/pages/FormBuilderPage.vue`
- [Response management](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/forms/pages/FormResponsesPage.vue): `src/modules/forms/pages/FormResponsesPage.vue`
- [Public form](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/forms/pages/PublicFormPage.vue): `src/modules/forms/pages/PublicFormPage.vue`
- [Forms API](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/modules/forms/api/forms.api.ts): `src/modules/forms/api/forms.api.ts`

### Workspace and admin

- [Groups and projects](https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/modules/workspace): `src/modules/workspace`
- [Administrative review](https://github.com/2026-nccu-blockchain/sroi_frontend/tree/main/src/modules/admin): `src/modules/admin`

### Shared API

- [HTTP client](https://github.com/2026-nccu-blockchain/sroi_frontend/blob/main/src/shared/api/http.ts): `src/shared/api/http.ts`

### Other components

- **Browser user**
- **Backend API**

## Connections

- Browser user → App bootstrap: opens app (evidence: `src/app/main.ts`)
- App bootstrap → Route dispatch: installs router (evidence: `src/app/main.ts`)
- App bootstrap → Authentication state: initializes store (evidence: `src/app/main.ts`)
- App bootstrap → HTTP client: sets unauthorized handler (evidence: `src/app/main.ts`)
- Route dispatch → Route guards: registers guards (evidence: `src/app/router/index.ts`)
- Route dispatch → Application layouts: selects layout (evidence: `src/app/router/index.ts`)
- Route dispatch → Login and registration: routes to (evidence: `src/app/router/index.ts`)
- Route dispatch → Forms dashboard: routes to (evidence: `src/app/router/index.ts`)
- Route dispatch → Form builder: routes to (evidence: `src/app/router/index.ts`)
- Route dispatch → Response management: routes to (evidence: `src/app/router/index.ts`)
- Route dispatch → Public form: routes to (evidence: `src/app/router/index.ts`)
- Route dispatch → Profile and ID requests: routes to (evidence: `src/app/router/index.ts`)
- Route dispatch → Groups and projects: routes to (evidence: `src/app/router/index.ts`)
- Route dispatch → Administrative review: routes to (evidence: `src/app/router/index.ts`)
- Route guards → Authentication state: checks identity (evidence: `src/app/router/guards.ts`)
- Authentication state → Authentication API: requests login and profile (evidence: `src/modules/auth/store/auth.store.ts`)
- Authentication API → HTTP client: sends requests (evidence: `src/modules/auth/api/auth.api.ts`)
- Forms dashboard → Forms API: loads forms (evidence: `src/modules/formdashboard/pages/FormDashboardPage.vue`)
- Form builder → Forms API: uses form operations (evidence: `src/modules/forms/pages/FormBuilderPage.vue`)
- Response management → Forms API: uses form operations
- Public form → Forms API: uses form operations
- Forms API → HTTP client: sends requests (evidence: `src/modules/forms/api/forms.api.ts`)
- Groups and projects → HTTP client: uses API client
- Administrative review → HTTP client: sends admin requests (evidence: `src/modules/admin/api/admin.api.ts`)
- HTTP client → Backend API: fetches API (evidence: `src/shared/api/http.ts`)