# apirak001/zonezet architecture

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

## Overview

ZoneZet is an economic-indicator dashboard for exploring country GDP growth, inflation, and unemployment. Users navigate the dashboard and indicator pages, request year-specific data, search and compare countries, then process comparison cards into categorized records that can be filtered by year, deleted, or restored. The backend obtains and ranks World Bank data; the browser handles navigation, comparison, record state, and presentation. The README is empty, so capabilities come from source comments and sampled code; some client-to-dashboard wiring is not visible in the excerpts.

Main entry points: [`routes/indicatorRoutes.js`](https://github.com/apirak001/zonezet/blob/main/routes/indicatorRoutes.js) (Indicator endpoint), [`public/js/indicatorTable.js`](https://github.com/apirak001/zonezet/blob/main/public/js/indicatorTable.js) (Indicator table), [`public/js/recordManager.js`](https://github.com/apirak001/zonezet/blob/main/public/js/recordManager.js) (Record panels), [`public/js/navigationRouter.js`](https://github.com/apirak001/zonezet/blob/main/public/js/navigationRouter.js) (SPA navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_router["SPA navigation"]
  node_pages["Dashboard pages<br/>[index.html]"]
  node_indicatorpages["Indicator pages<br/>[gdp.html]"]
  node_indicatorui["Indicator table<br/>[indicatorTable.js]"]
  node_dashboardui["Dashboard cards"]
  node_uicomponents["UI helpers<br/>[uiComponents.js]"]
end

subgraph group_data["Indicator data"]
  node_api["Express API<br/>[server.js]"]
  node_topfive["Top-five endpoint<br/>[server.js]"]
  node_indicatorroute["Indicator endpoint<br/>[indicatorRoutes.js]"]
end

subgraph group_compare["Comparison workflow"]
  node_comparison["Comparison area<br/>[indicatorTable.js]"]
  node_swipemodal["Swipe modal<br/>[comparisonModal.js]"]
end

subgraph group_records["Records"]
  node_recordstate[("Record state<br/>[recordManager.js]")]
  node_recordui["Record panels<br/>[recordManager.js]"]
end

node_visitor(("Dashboard visitor"))
node_worldbank["World Bank API"]

node_visitor -->|"navigates"| node_router
node_router -->|"loads HTML"| node_pages
node_visitor -->|"searches and selects"| node_indicatorui
node_indicatorui -->|"requests data"| node_indicatorroute
node_indicatorroute -->|"fetches indicators"| node_worldbank
node_worldbank -->|"returns observations"| node_indicatorroute
node_indicatorroute -->|"returns filtered data"| node_indicatorui
node_visitor -->|"views dashboard"| node_dashboardui
node_dashboardui -.->|"requests rankings"| node_topfive
node_topfive -->|"fetches indicators"| node_worldbank
node_visitor -->|"adds countries"| node_comparison
node_comparison -->|"opens cards"| node_swipemodal
node_swipemodal -->|"processes selection"| node_recordstate
node_recordstate -->|"supplies records"| node_recordui
node_visitor -->|"filters or edits"| node_recordui
node_recordui -->|"updates in-memory state"| node_recordstate
node_indicatorroute -->|"mounted under /api"| node_api
node_api -.->|"serves pages"| node_indicatorpages
node_indicatorui -->|"uses UI helpers"| node_uicomponents
node_recordui -->|"uses dropdowns and alerts"| node_uicomponents

click node_router "https://github.com/apirak001/zonezet/blob/main/public/js/navigationRouter.js"
click node_pages "https://github.com/apirak001/zonezet/blob/main/public/index.html"
click node_indicatorpages "https://github.com/apirak001/zonezet/blob/main/public/gdp.html"
click node_api "https://github.com/apirak001/zonezet/blob/main/server.js"
click node_topfive "https://github.com/apirak001/zonezet/blob/main/server.js"
click node_indicatorroute "https://github.com/apirak001/zonezet/blob/main/routes/indicatorRoutes.js"
click node_indicatorui "https://github.com/apirak001/zonezet/blob/main/public/js/indicatorTable.js"
click node_dashboardui "https://github.com/apirak001/zonezet/blob/main/public/js/navigationRouter.js"
click node_comparison "https://github.com/apirak001/zonezet/blob/main/public/js/indicatorTable.js"
click node_swipemodal "https://github.com/apirak001/zonezet/blob/main/public/js/comparisonModal.js"
click node_recordstate "https://github.com/apirak001/zonezet/blob/main/public/js/recordManager.js"
click node_recordui "https://github.com/apirak001/zonezet/blob/main/public/js/recordManager.js"
click node_uicomponents "https://github.com/apirak001/zonezet/blob/main/public/js/uiComponents.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_router,node_pages,node_indicatorpages,node_indicatorui,node_dashboardui,node_uicomponents toneBlue
class node_api,node_topfive,node_indicatorroute toneAmber
class node_comparison,node_swipemodal,node_worldbank toneMint
class node_recordstate,node_recordui toneRose
class node_visitor toneIndigo
```

## Components

### Web experience

- [SPA navigation](https://github.com/apirak001/zonezet/blob/main/public/js/navigationRouter.js): `public/js/navigationRouter.js`
- [Dashboard pages](https://github.com/apirak001/zonezet/blob/main/public/index.html): `public/index.html`
- [Indicator pages](https://github.com/apirak001/zonezet/blob/main/public/gdp.html): `public/gdp.html`
- [Indicator table](https://github.com/apirak001/zonezet/blob/main/public/js/indicatorTable.js): `public/js/indicatorTable.js`
- [Dashboard cards](https://github.com/apirak001/zonezet/blob/main/public/js/navigationRouter.js): `public/js/navigationRouter.js`
- [UI helpers](https://github.com/apirak001/zonezet/blob/main/public/js/uiComponents.js): `public/js/uiComponents.js`

### Indicator data

- [Express API](https://github.com/apirak001/zonezet/blob/main/server.js): `server.js`
- [Top-five endpoint](https://github.com/apirak001/zonezet/blob/main/server.js): `server.js`
- [Indicator endpoint](https://github.com/apirak001/zonezet/blob/main/routes/indicatorRoutes.js): `routes/indicatorRoutes.js`

### Comparison workflow

- [Comparison area](https://github.com/apirak001/zonezet/blob/main/public/js/indicatorTable.js): `public/js/indicatorTable.js`
- [Swipe modal](https://github.com/apirak001/zonezet/blob/main/public/js/comparisonModal.js): `public/js/comparisonModal.js`

### Records

- [Record state](https://github.com/apirak001/zonezet/blob/main/public/js/recordManager.js): `public/js/recordManager.js`
- [Record panels](https://github.com/apirak001/zonezet/blob/main/public/js/recordManager.js): `public/js/recordManager.js`

### Other components

- **Dashboard visitor**
- **World Bank API**

## Connections

- Dashboard visitor → SPA navigation: navigates
- SPA navigation → Dashboard pages: loads HTML
- Dashboard visitor → Indicator table: searches and selects
- Indicator table → Indicator endpoint: requests data
- Indicator endpoint → World Bank API: fetches indicators
- World Bank API → Indicator endpoint: returns observations
- Indicator endpoint → Indicator table: returns filtered data
- Dashboard visitor → Dashboard cards: views dashboard
- Dashboard cards → Top-five endpoint: requests rankings
- Top-five endpoint → World Bank API: fetches indicators
- Dashboard visitor → Comparison area: adds countries
- Comparison area → Swipe modal: opens cards
- Swipe modal → Record state: processes selection
- Record state → Record panels: supplies records
- Dashboard visitor → Record panels: filters or edits
- Record panels → Record state: updates in-memory state
- Indicator endpoint → Express API: mounted under /api
- Express API → Indicator pages: serves pages
- Indicator table → UI helpers: uses UI helpers
- Record panels → UI helpers: uses dropdowns and alerts