# powerpapi/corona-app architecture

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

- Interactive diagram: https://gitdiagram.com/powerpapi/corona-app
- Repository: https://github.com/powerpapi/corona-app

## Overview

This is a React COVID-19 dashboard: it loads global statistics, lets users choose a country, and presents summary counts plus either global daily trends or country-level comparisons. The app component coordinates summary requests and passes results to the display components; the chart and country picker load their own supporting data. The README describes only the Create React App setup, so the product capabilities here are based on the sampled source, not additional documentation.

Main entry points: [`src/App.js`](https://github.com/powerpapi/corona-app/blob/master/src/App.js) (Dashboard app), [`src/api/index.js`](https://github.com/powerpapi/corona-app/blob/master/src/api/index.js) (COVID API client), [`src/components/CountryPicker/CountryPicker.jsx`](https://github.com/powerpapi/corona-app/blob/master/src/components/CountryPicker/CountryPicker.jsx) (Country picker), [`src/index.js`](https://github.com/powerpapi/corona-app/blob/master/src/index.js) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_entry["React entry<br/>[index.js]"]
  node_app["Dashboard app<br/>[App.js]"]
end

subgraph group_data["Data access"]
  node_api["COVID API client<br/>[index.js]"]
end

subgraph group_views["Dashboard views"]
  node_cards["Summary cards<br/>[Cards.jsx]"]
  node_picker["Country picker<br/>[CountryPicker.jsx]"]
  node_chart["Charts<br/>[Chart.jsx]"]
end

node_browser(("Browser"))
node_user(("User"))
node_covid_service["COVID data service"]

node_browser -->|"loads app"| node_entry
node_entry -->|"renders"| node_app
node_user -->|"selects country"| node_picker
node_picker -->|"loads countries"| node_api
node_picker -->|"calls callback"| node_app
node_app -->|"loads summary"| node_api
node_app -->|"passes summary"| node_cards
node_app -->|"renders"| node_picker
node_app -->|"passes data"| node_chart
node_chart -->|"loads daily data"| node_api
node_api -->|"requests data"| node_covid_service
node_covid_service -->|"returns data"| node_api

click node_entry "https://github.com/powerpapi/corona-app/blob/master/src/index.js"
click node_app "https://github.com/powerpapi/corona-app/blob/master/src/App.js"
click node_api "https://github.com/powerpapi/corona-app/blob/master/src/api/index.js"
click node_cards "https://github.com/powerpapi/corona-app/blob/master/src/components/Cards/Cards.jsx"
click node_picker "https://github.com/powerpapi/corona-app/blob/master/src/components/CountryPicker/CountryPicker.jsx"
click node_chart "https://github.com/powerpapi/corona-app/blob/master/src/components/Chart/Chart.jsx"

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_entry,node_app,node_browser,node_user toneBlue
class node_api toneAmber
class node_cards,node_picker,node_chart toneMint
class node_covid_service toneIndigo
```

## Components

### App runtime

- [React entry](https://github.com/powerpapi/corona-app/blob/master/src/index.js): `src/index.js`
- [Dashboard app](https://github.com/powerpapi/corona-app/blob/master/src/App.js): `src/App.js`

### Data access

- [COVID API client](https://github.com/powerpapi/corona-app/blob/master/src/api/index.js): `src/api/index.js`

### Dashboard views

- [Summary cards](https://github.com/powerpapi/corona-app/blob/master/src/components/Cards/Cards.jsx): `src/components/Cards/Cards.jsx`
- [Country picker](https://github.com/powerpapi/corona-app/blob/master/src/components/CountryPicker/CountryPicker.jsx): `src/components/CountryPicker/CountryPicker.jsx`
- [Charts](https://github.com/powerpapi/corona-app/blob/master/src/components/Chart/Chart.jsx): `src/components/Chart/Chart.jsx`

### Other components

- **Browser**
- **User**
- **COVID data service**

## Connections

- Browser → React entry: loads app
- React entry → Dashboard app: renders
- User → Country picker: selects country
- Country picker → COVID API client: loads countries
- Country picker → Dashboard app: calls callback
- Dashboard app → COVID API client: loads summary
- Dashboard app → Summary cards: passes summary
- Dashboard app → Country picker: renders
- Dashboard app → Charts: passes data
- Charts → COVID API client: loads daily data
- COVID API client → COVID data service: requests data
- COVID data service → COVID API client: returns data