# free-apis/free-apis.github.io architecture

> Architecture diagram of the GitHub repository free-apis/free-apis.github.io, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/free-apis/free-apis.github.io
- Repository: https://github.com/free-apis/free-apis.github.io

## Overview

Free APIs is a React site for discovering free APIs. Visitors can browse the full collection or select a category, then search, sort or shuffle results and follow a card to the API’s own site. The sampled pages show API retrieval and session caching, with shared list controls and cards; category browsing and informational pages are separate branches. The graph also includes the documented API metadata indicators. Some page implementations were not sampled, so their internal behavior is represented only where README or source references support it.

Main entry points: [`src/App.js`](https://github.com/free-apis/free-apis.github.io/blob/main/src/App.js) (Route dispatcher), [`src/pages/Template/index.js`](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Template/index.js) (Page template), [`src/pages/Category/index.js`](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Category/index.js) (Category results), [`src/pages/Browse/index.js`](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Browse/index.js) (Browse all)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App routing"]
  node_bootstrap["React bootstrap<br/>[index.js]"]
  node_app["Route dispatcher<br/>[App.js]"]
  node_report["Web vitals<br/>[reportWebVitals.js]"]
end

subgraph group_discovery["API discovery"]
  node_browse["Browse all<br/>[index.js]"]
  node_categories["Category index<br/>[index.js]"]
  node_category["Category results<br/>[index.js]"]
  node_list["API list<br/>[index.js]"]
  node_card["API card<br/>[index.js]"]
  node_options["List controls<br/>[index.js]"]
end

subgraph group_shared["Shared interface"]
  node_template["Page template<br/>[index.js]"]
  node_nav["Navigation<br/>[index.js]"]
  node_footer["Footer<br/>[index.js]"]
  node_scrolltop["Scroll reset<br/>[index.js]"]
  node_tracking["Tracking<br/>[index.js]"]
  node_scrollup["Scroll up<br/>[index.js]"]
end

subgraph group_site["Site information"]
  node_home["Home page<br/>[index.js]"]
  node_about["About page<br/>[index.js]"]
  node_help["Help page<br/>[index.js]"]
  node_notfound["Not found<br/>[index.js]"]
end

node_visitor(("Visitor"))
node_publicapi{{"Public APIs service"}}
node_session[("Session storage")]
node_destinations{{"API websites"}}

node_visitor -->|"opens site"| node_bootstrap
node_bootstrap -->|"renders"| node_app
node_bootstrap -->|"reports metrics"| node_report
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_browse
node_app -->|"routes to"| node_categories
node_app -->|"routes to"| node_category
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_help
node_app -->|"routes to"| node_notfound
node_app -->|"renders"| node_scrolltop
node_app -->|"invokes"| node_tracking
node_browse -->|"fetches entries"| node_publicapi
node_browse -->|"reads and writes"| node_session
node_category -->|"fetches entries"| node_publicapi
node_category -->|"reads and writes"| node_session
node_categories -->|"fetches categories"| node_publicapi
node_categories -->|"reads and writes"| node_session
node_categories -->|"links to"| node_category
node_browse -->|"renders results"| node_list
node_category -->|"renders results"| node_list
node_list -->|"renders"| node_card
node_list -->|"renders"| node_options
node_card -->|"links to"| node_destinations
node_browse -->|"renders within"| node_template
node_categories -->|"renders within"| node_template
node_category -->|"renders within"| node_template
node_home -->|"renders within"| node_template
node_about -->|"renders within"| node_template
node_help -->|"renders within"| node_template
node_notfound -->|"renders within"| node_template
node_template -->|"renders"| node_nav
node_template -->|"renders"| node_footer
node_browse -->|"renders"| node_scrollup
node_category -->|"renders"| node_scrollup
node_categories -->|"renders"| node_scrollup

click node_bootstrap "https://github.com/free-apis/free-apis.github.io/blob/main/src/index.js"
click node_app "https://github.com/free-apis/free-apis.github.io/blob/main/src/App.js"
click node_browse "https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Browse/index.js"
click node_categories "https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Categories/index.js"
click node_category "https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Category/index.js"
click node_list "https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ListDisplay/index.js"
click node_card "https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ListDisplay/Card/index.js"
click node_options "https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ListDisplay/OptionsRow/index.js"
click node_home "https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Home/index.js"
click node_about "https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/About/index.js"
click node_help "https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/HelpPage/index.js"
click node_notfound "https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/NotFound/index.js"
click node_template "https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Template/index.js"
click node_nav "https://github.com/free-apis/free-apis.github.io/blob/main/src/components/Nav/index.js"
click node_footer "https://github.com/free-apis/free-apis.github.io/blob/main/src/components/Footer/index.js"
click node_scrolltop "https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ScrollToTop/index.js"
click node_tracking "https://github.com/free-apis/free-apis.github.io/blob/main/src/components/Tracking/index.js"
click node_scrollup "https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ScrollUp/index.js"
click node_report "https://github.com/free-apis/free-apis.github.io/blob/main/src/reportWebVitals.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_bootstrap,node_app,node_report toneBlue
class node_browse,node_categories,node_category,node_list,node_card,node_options,node_session toneAmber
class node_template,node_nav,node_footer,node_scrolltop,node_tracking,node_scrollup,node_publicapi,node_destinations toneMint
class node_home,node_about,node_help,node_notfound toneRose
class node_visitor toneIndigo
```

## Components

### App routing

- [React bootstrap](https://github.com/free-apis/free-apis.github.io/blob/main/src/index.js): `src/index.js`
- [Route dispatcher](https://github.com/free-apis/free-apis.github.io/blob/main/src/App.js): `src/App.js`
- [Web vitals](https://github.com/free-apis/free-apis.github.io/blob/main/src/reportWebVitals.js): `src/reportWebVitals.js`

### API discovery

- [Browse all](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Browse/index.js): `src/pages/Browse/index.js`
- [Category index](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Categories/index.js): `src/pages/Categories/index.js`
- [Category results](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Category/index.js): `src/pages/Category/index.js`
- [API list](https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ListDisplay/index.js): `src/components/ListDisplay/index.js`
- [API card](https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ListDisplay/Card/index.js): `src/components/ListDisplay/Card/index.js`
- [List controls](https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ListDisplay/OptionsRow/index.js): `src/components/ListDisplay/OptionsRow/index.js`

### Shared interface

- [Page template](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Template/index.js): `src/pages/Template/index.js`
- [Navigation](https://github.com/free-apis/free-apis.github.io/blob/main/src/components/Nav/index.js): `src/components/Nav/index.js`
- [Footer](https://github.com/free-apis/free-apis.github.io/blob/main/src/components/Footer/index.js): `src/components/Footer/index.js`
- [Scroll reset](https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ScrollToTop/index.js): `src/components/ScrollToTop/index.js`
- [Tracking](https://github.com/free-apis/free-apis.github.io/blob/main/src/components/Tracking/index.js): `src/components/Tracking/index.js`
- [Scroll up](https://github.com/free-apis/free-apis.github.io/blob/main/src/components/ScrollUp/index.js): `src/components/ScrollUp/index.js`

### Site information

- [Home page](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/Home/index.js): `src/pages/Home/index.js`
- [About page](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/About/index.js): `src/pages/About/index.js`
- [Help page](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/HelpPage/index.js): `src/pages/HelpPage/index.js`
- [Not found](https://github.com/free-apis/free-apis.github.io/blob/main/src/pages/NotFound/index.js): `src/pages/NotFound/index.js`

### Other components

- **Visitor**
- **Public APIs service**
- **Session storage**
- **API websites**

## Connections

- Visitor → React bootstrap: opens site (evidence: `README.md`)
- React bootstrap → Route dispatcher: renders (evidence: `src/index.js`)
- React bootstrap → Web vitals: reports metrics (evidence: `src/index.js`)
- Route dispatcher → Home page: routes to (evidence: `src/App.js`)
- Route dispatcher → Browse all: routes to (evidence: `src/App.js`)
- Route dispatcher → Category index: routes to (evidence: `src/App.js`)
- Route dispatcher → Category results: routes to (evidence: `src/App.js`)
- Route dispatcher → About page: routes to (evidence: `src/App.js`)
- Route dispatcher → Help page: routes to (evidence: `src/App.js`)
- Route dispatcher → Not found: routes to (evidence: `src/App.js`)
- Route dispatcher → Scroll reset: renders (evidence: `src/App.js`)
- Route dispatcher → Tracking: invokes (evidence: `src/App.js`)
- Browse all → Public APIs service: fetches entries (evidence: `src/pages/Browse/index.js`)
- Browse all → Session storage: reads and writes (evidence: `src/pages/Browse/index.js`)
- Category results → Public APIs service: fetches entries (evidence: `src/pages/Category/index.js`)
- Category results → Session storage: reads and writes (evidence: `src/pages/Category/index.js`)
- Category index → Public APIs service: fetches categories (evidence: `src/pages/Categories/index.js`)
- Category index → Session storage: reads and writes (evidence: `src/pages/Categories/index.js`)
- Category index → Category results: links to (evidence: `src/pages/Categories/index.js`)
- Browse all → API list: renders results (evidence: `src/pages/Browse/index.js`)
- Category results → API list: renders results (evidence: `src/pages/Category/index.js`)
- API list → API card: renders (evidence: `src/components/ListDisplay/index.js`)
- API list → List controls: renders (evidence: `src/components/ListDisplay/index.js`)
- API card → API websites: links to (evidence: `src/components/ListDisplay/Card/index.js`)
- Browse all → Page template: renders within (evidence: `src/pages/Browse/index.js`)
- Category index → Page template: renders within (evidence: `src/pages/Categories/index.js`)
- Category results → Page template: renders within (evidence: `src/pages/Category/index.js`)
- Home page → Page template: renders within (evidence: `src/pages/Home/index.js`)
- About page → Page template: renders within (evidence: `src/pages/About/index.js`)
- Help page → Page template: renders within (evidence: `src/pages/HelpPage/index.js`)
- Not found → Page template: renders within (evidence: `src/pages/NotFound/index.js`)
- Page template → Navigation: renders (evidence: `src/pages/Template/index.js`)
- Page template → Footer: renders (evidence: `src/pages/Template/index.js`)
- Browse all → Scroll up: renders (evidence: `src/pages/Browse/index.js`)
- Category results → Scroll up: renders (evidence: `src/pages/Category/index.js`)
- Category index → Scroll up: renders (evidence: `src/pages/Categories/index.js`)