MacroDash is a client-only macroeconomic dashboard built with React + TypeScript that visualizes World Bank Open Data. Explore long-run trends, compare countries, and export clean CSVs for analysis. No backend required.
- Country search, favorites, and last-viewed shortcuts
- KPI cards for GDP, GDP per capita, inflation, and unemployment
- Compare view with shareable URLs (2-6 countries)
- CSV export for charts and tables
- IndexedDB cache with 12-hour TTL and stale-while-revalidate
- Route-level error boundaries and basic unit tests
- Macro research and country benchmarking
- Class projects, policy briefs, and economic dashboards
- Data visualization demos using open data
- Countries list: https://api.worldbank.org/v2/country?format=json&per_page=400
- Indicator series: https://api.worldbank.org/v2/country/{CODE}/indicator/{INDICATOR}?format=json&per_page=20000
Indicators emphasized in the UI include GDP, GDP per capita, inflation (CPI), and unemployment. Coverage varies by country and series.
- React + TypeScript
- React Router v7 data router
- Recharts for charts
- idb-keyval for caching
- Tailwind CSS v4 + Vite
bun install
bun run devThe app runs at http://localhost:5173.
bun run dev
bun run build
bun run start
bun run typecheck
bun run testThis project runs in SPA mode and can be hosted on any static hosting provider. Run bun run build and deploy the output.
Data coverage varies by indicator and country. Missing values are shown as N/A and cached data is displayed while fresh data loads in the background.