# chira-platforms-org/chira-web-app architecture

> Architecture diagram of the GitHub repository chira-platforms-org/chira-web-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-05-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/chira-platforms-org/chira-web-app
- Repository: https://github.com/chira-platforms-org/chira-web-app

## Overview

1. **Overall shape**
   - This repository is a **multi-page web application** backed by a **small service-oriented backend**.
   - The frontend lives mostly under `public/`, while backend logic is split across `services/*`.
   - The architecture is closer to a **portal + supporting services** than a single monolithic app.

2. **Frontend boundary**
   - `public/` contains many standalone HTML entry points: `home.html`, `login.html`, `client.html`, `client-portal.html`, `consultation.html`, `payment.html`, `request.html`, `welcome.html`, `contact.html`, `file-upload.html`, and others.
   - This suggests the UI is organized as **multiple pages / flows** rather than one SPA.
   - Shared assets are split into global and feature-specific folders such as `public/css`, `public/js`, `public/images`, plus feature bundles under `public/app`, `public/hub`, and `public/analysis-library`.

3. **Feature modules in the browser**
   - `public/app` contains a dedicated app page, CSS, JS, and sample JSON profiles like `sample_01_supply_chain_profile.json` and `sample_02_global_fuel_prices_profile.json`.
   - `public/analysis-library` looks like a separate analytical module or UI component set.
   - `public/hub` appears to be another distinct UI surface, likely a dashboard or portal hub.
   - These modules are useful to diagram as **separate frontend subdomains or feature areas**, even if they are served from the same origin.

4. **Backend service decomposition**
   - `services/auth-service`, `services/file-upload-service`, `services/payment-service`, `services/portal-service`, and `services/request-service` indicate **domain-focused microservices**.
   - Each service has its own `server.js`; several also have their own `package.json` and lockfile, which implies they can be deployed and run independently.
   - The separation suggests distinct responsibilities: authentication, uploads, payments, portal data, and request handling.

5. **API entrypoint / routing layer**
   - `services/gateway` is the clearest sign of an **API gateway** sitting in front of the domain services.
   - In the likely runtime flow, browser pages call the gateway, and the gateway routes requests to the appropriate downstream service.
   - `server.js` at the repository root may serve as the main app server or a convenience entrypoint for hosting static content plus APIs.

6. **Primary data flows**
   - A typical flow is: **browser page → gateway → domain service → response back to the page**.
   - File upload flows likely go through `file-upload-service`.
   - Authentication flows go through `auth-service`.
   - Payment-related actions go through `payment-service`.
   - Portal and request workflows likely map to `portal-service` and `request-service` respectively.

7. **Static assets vs. dynamic services**
   - The frontend is mostly static HTML/CSS/JS, while the services handle dynamic behavior and backend state.
   - This split is important for the diagram: the static site can be deployed separately or served by the root server, while services can scale independently.
   - `public/client-app.html`, `public/client-portal.html`, and similar pages likely act as launch points into the service-backed workflows.

8. **Deployment and environment clues**
   - `wrangler.toml` suggests there is at least some **Cloudflare Workers/Pages** deployment intent.
   - `render-config.md` suggests another deployment target or environment-specific guidance.
   - The presence of shell scripts like `final-upload.sh` and `upload-to-github.sh` implies manual or CI-assisted release steps.

9. **Operational / integration utilities**
   - `test-api-connection.js` is likely a small diagnostic script for verifying backend reachability.
   - These utilities are not core runtime components, but they matter for the architecture diagram as **supporting tooling** around the API layer.

10. **What to highlight in an architecture diagram**
   - Show one **browser/client layer** feeding multiple UI pages and feature modules.
   - Show an **API gateway** in the backend, then separate service boxes for auth, upload, payment, portal, and request handling.
   - Show static assets served from `public/` alongside the page entrypoints.
   - If you need a deployment boundary, note that the repo includes both Node server entrypoints and Cloudflare-oriented config, so runtime hosting may be split between static delivery and backend service hosting.

11. **Repository characterization**
   - This is not a single-purpose library; it is a **full product web stack** with multiple user journeys and backend capabilities.
   - The strongest architectural boundary is between the **frontend portal surfaces** and the **domain services behind the gateway**.

Main entry points: [`services/gateway/server.js`](https://github.com/chira-platforms-org/chira-web-app/blob/main/services/gateway/server.js) (API gateway), [`server.js`](https://github.com/chira-platforms-org/chira-web-app/blob/main/server.js) (Root server), [`wrangler.toml`](https://github.com/chira-platforms-org/chira-web-app/blob/main/wrangler.toml) (Deployment config), [`services/auth-service/server.js`](https://github.com/chira-platforms-org/chira-web-app/blob/main/services/auth-service/server.js) (Auth service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_public_pages["Public pages<br/>multi-page UI"]
  node_app_module["App module<br/>feature UI<br/>[index.html]"]
  node_hub_module["Hub<br/>feature UI<br/>[index.html]"]
  node_analysis_library["Analysis library<br/>feature UI<br/>[index.html]"]
  node_shared_assets["Shared assets<br/>static assets<br/>[style.css]"]
end

subgraph group_backend["Backend"]
  node_root_server["Root server<br/>static host<br/>[server.js]"]
  node_api_gateway["API gateway<br/>routing layer<br/>[server.js]"]
  node_auth_service["Auth service<br/>domain service<br/>[server.js]"]
  node_upload_service["Upload service<br/>domain service<br/>[server.js]"]
  node_payment_service["Payment service<br/>domain service<br/>[server.js]"]
  node_portal_service["Portal service<br/>domain service<br/>[server.js]"]
  node_request_service["Request service<br/>domain service<br/>[server.js]"]
end

subgraph group_ops["Ops"]
  node_deployment_config["Deployment config<br/>platform config<br/>[wrangler.toml]"]
  node_release_scripts["Release scripts<br/>ops tooling<br/>[final-upload.sh]"]
  node_api_probe["API probe<br/>diagnostic tool"]
end

node_root_server -->|"serves"| node_shared_assets
node_root_server -->|"serves"| node_public_pages
node_root_server -->|"routes"| node_api_gateway
node_public_pages -->|"calls"| node_api_gateway
node_app_module -->|"calls"| node_api_gateway
node_hub_module -->|"calls"| node_api_gateway
node_analysis_library -->|"calls"| node_api_gateway
node_api_gateway -->|"routes"| node_auth_service
node_api_gateway -->|"routes"| node_upload_service
node_api_gateway -->|"routes"| node_payment_service
node_api_gateway -->|"routes"| node_portal_service
node_api_gateway -->|"routes"| node_request_service
node_public_pages -->|"login flow"| node_auth_service
node_public_pages -->|"upload flow"| node_upload_service
node_public_pages -->|"payment flow"| node_payment_service
node_public_pages -->|"portal flow"| node_portal_service
node_public_pages -->|"request flow"| node_request_service
node_deployment_config -.->|"targets"| node_root_server
node_release_scripts -.->|"supports"| node_deployment_config
node_api_probe -.->|"checks"| node_api_gateway

click node_app_module "https://github.com/chira-platforms-org/chira-web-app/blob/main/public/app/index.html"
click node_hub_module "https://github.com/chira-platforms-org/chira-web-app/blob/main/public/hub/index.html"
click node_analysis_library "https://github.com/chira-platforms-org/chira-web-app/blob/main/public/analysis-library/index.html"
click node_shared_assets "https://github.com/chira-platforms-org/chira-web-app/blob/main/public/css/style.css"
click node_root_server "https://github.com/chira-platforms-org/chira-web-app/blob/main/server.js"
click node_api_gateway "https://github.com/chira-platforms-org/chira-web-app/blob/main/services/gateway/server.js"
click node_auth_service "https://github.com/chira-platforms-org/chira-web-app/blob/main/services/auth-service/server.js"
click node_upload_service "https://github.com/chira-platforms-org/chira-web-app/blob/main/services/file-upload-service/server.js"
click node_payment_service "https://github.com/chira-platforms-org/chira-web-app/blob/main/services/payment-service/server.js"
click node_portal_service "https://github.com/chira-platforms-org/chira-web-app/blob/main/services/portal-service/server.js"
click node_request_service "https://github.com/chira-platforms-org/chira-web-app/blob/main/services/request-service/server.js"
click node_deployment_config "https://github.com/chira-platforms-org/chira-web-app/blob/main/wrangler.toml"
click node_release_scripts "https://github.com/chira-platforms-org/chira-web-app/blob/main/final-upload.sh"
click node_api_probe "https://github.com/chira-platforms-org/chira-web-app/blob/main/test-api-connection.js"

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_public_pages,node_app_module,node_hub_module,node_analysis_library,node_shared_assets toneBlue
class node_root_server,node_api_gateway,node_auth_service,node_upload_service,node_payment_service,node_portal_service,node_request_service toneAmber
class node_deployment_config,node_release_scripts,node_api_probe toneMint
```

## Components

### Frontend

Static multi-page UI and feature-specific browser modules under public/

- **Public pages**: multi-page UI · Standalone HTML entry points for the main user journeys
- [App module](https://github.com/chira-platforms-org/chira-web-app/blob/main/public/app/index.html): feature UI · Dedicated app surface with its own CSS, JS, and sample profiles · `public/app/index.html`
- [Hub](https://github.com/chira-platforms-org/chira-web-app/blob/main/public/hub/index.html): feature UI · Separate portal/dashboard surface with its own scripts and styles · `public/hub/index.html`
- [Analysis library](https://github.com/chira-platforms-org/chira-web-app/blob/main/public/analysis-library/index.html): feature UI · Analytical UI module isolated from the main pages · `public/analysis-library/index.html`
- [Shared assets](https://github.com/chira-platforms-org/chira-web-app/blob/main/public/css/style.css): static assets · Common CSS, JavaScript, and images used across pages · `public/css/style.css`

### Backend

Root server, API gateway, and domain services

- [Root server](https://github.com/chira-platforms-org/chira-web-app/blob/main/server.js): static host · Main application server entrypoint for hosting and/or coordinating the app · `server.js`
- [API gateway](https://github.com/chira-platforms-org/chira-web-app/blob/main/services/gateway/server.js): routing layer · Central request router in front of the domain services · `services/gateway/server.js`
- [Auth service](https://github.com/chira-platforms-org/chira-web-app/blob/main/services/auth-service/server.js): domain service · Authentication and login-related backend logic · `services/auth-service/server.js`
- [Upload service](https://github.com/chira-platforms-org/chira-web-app/blob/main/services/file-upload-service/server.js): domain service · File upload backend for document and asset transfer · `services/file-upload-service/server.js`
- [Payment service](https://github.com/chira-platforms-org/chira-web-app/blob/main/services/payment-service/server.js): domain service · Payment processing backend · `services/payment-service/server.js`
- [Portal service](https://github.com/chira-platforms-org/chira-web-app/blob/main/services/portal-service/server.js): domain service · Backend for portal and client-facing data · `services/portal-service/server.js`
- [Request service](https://github.com/chira-platforms-org/chira-web-app/blob/main/services/request-service/server.js): domain service · Backend for request/workflow handling · `services/request-service/server.js`

### Ops

Deployment and support tooling

- [Deployment config](https://github.com/chira-platforms-org/chira-web-app/blob/main/wrangler.toml): platform config · Cloudflare-oriented deployment and runtime configuration · `wrangler.toml`
- [Release scripts](https://github.com/chira-platforms-org/chira-web-app/blob/main/final-upload.sh): ops tooling · Shell scripts used for upload/release workflows · `final-upload.sh`
- [API probe](https://github.com/chira-platforms-org/chira-web-app/blob/main/test-api-connection.js): diagnostic tool · Utility for checking backend connectivity · `test-api-connection.js`

## Connections

- Root server → Shared assets: serves · Hosts the shared static frontend assets
- Root server → Public pages: serves · Delivers the standalone HTML entry points
- Root server → API gateway: routes · Coordinates API traffic with backend routing
- Public pages → API gateway: calls · Browser pages invoke backend APIs through the gateway
- App module → API gateway: calls · Feature app uses backend APIs
- Hub → API gateway: calls · Hub UI depends on backend APIs
- Analysis library → API gateway: calls · Analysis features query backend services when needed
- API gateway → Auth service: routes · Authentication requests are forwarded here
- API gateway → Upload service: routes · Upload requests are forwarded here
- API gateway → Payment service: routes · Payment requests are forwarded here
- API gateway → Portal service: routes · Portal data requests are forwarded here
- API gateway → Request service: routes · Workflow and request operations are forwarded here
- Public pages → Auth service: login flow · Login page journeys map to the authentication service
- Public pages → Upload service: upload flow · File upload pages map to the upload service
- Public pages → Payment service: payment flow · Payment pages map to the payment service
- Public pages → Portal service: portal flow · Client and portal pages map to portal data
- Public pages → Request service: request flow · Request and consultation flows map to request handling
- Deployment config → Root server: targets · Deployment configuration reflects the runtime host setup
- Release scripts → Deployment config: supports · Release scripts assist deployment and publishing
- API probe → API gateway: checks · Diagnostic utility verifies API reachability