Meshack132/sa-economic-dashboard

Full-stack dashboard visualising South African economic indicators — React + Recharts frontend, FastAPI backend, real World Bank data from BigQuery # 🇿🇦 South Africa Economic Dashboard A full-stack dashboard visualising South African economic indicators from the World Bank — **real data**, loaded into BigQuery by the sa-worldbank-pipeline Airflow DAG, served by a FastAPI backend, and visualised with React + Recharts. ## What it shows - **GDP** (current USD, 2000–2024) with year-on-year growth overlaid - **Unemployment & Inflation** (% of labour force / CPI annual) - **Life Expectancy** at birth (years) - **Population** (millions) - **KPI cards** — latest-year snapshot with YoY growth indicator - **Data table** — full yearly summary, most recent first ## Architecture ``` BigQuery (World Bank data loaded by sa-worldbank-pipeline) ↓ google-cloud-bigquery Python client FastAPI backend → /api/summary, /api/indicators, /api/indicator/{code} ↓ Nginx reverse proxy (/api/* → backend:8000) React + Recharts frontend → served on port 80 ``` ## Prerequisites 1. The sa-worldbank-pipeline must have run at least once, so BigQuery has data in `analytics.yearly_summary` 2. GCP service account key (`gcp-key.json`) from the same project — see that repo's README for setup 3. Docker / Podman + Compose ## Run it ```bash # Copy env file and fill in your project ID cp .env.example .env # Place your GCP service account key in the project root as gcp-key.json # Build and start docker compose up --build ``` Open **localhost** — the dashboard loads with live BigQuery data. The FastAPI Swagger docs are at **localhost. ## Development (without Docker) ```bash # Backend cd backend pip install -r requirements.txt BIGQUERY_PROJECT_ID=meshack-hx9g \ GOOGLE_APPLICATION_CREDENTIALS=../gcp-key.json \ uvicorn app.main:app --reload # Frontend (separate terminal) cd frontend npm install npm start # → localhost (proxies /api to localhost:8000) ``` ## License MIT