How apirak001/zonezet works
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: indicatorRoutes.js Indicator endpoint · indicatorTable.js Indicator table · recordManager.js Record panels · navigationRouter.js SPA navigation
Components 15
Web experience
- SPA navigation
public/js/navigationRouter.js - Dashboard pages
public/index.html - Indicator pages
public/gdp.html - Indicator table
public/js/indicatorTable.js - Dashboard cards
public/js/navigationRouter.js - UI helpers
public/js/uiComponents.js
Indicator data
- Express API
server.js - Top-five endpoint
server.js - Indicator endpoint
routes/indicatorRoutes.js
Comparison workflow
- Comparison area
public/js/indicatorTable.js - Swipe modal
public/js/comparisonModal.js
Records
- Record state
public/js/recordManager.js - Record panels
public/js/recordManager.js
Other components
- Dashboard visitor
- World Bank API
Connections 20
- 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