# seerat89/random-advice-generator architecture

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

- Interactive diagram: https://gitdiagram.com/seerat89/random-advice-generator
- Repository: https://github.com/seerat89/random-advice-generator

## Overview

This small React app retrieves one advice slip on initial mount and again when the user selects “New advice,” then displays the returned sentence. `src/App.js` owns both requests and the loading/advice state; `src/index.js` mounts that app. The Advice Slip API is the only runtime service documented and shown. The graph focuses on this workflow rather than build and test tooling.

Main entry points: [`src/App.js`](https://github.com/seerat89/random-advice-generator/blob/main/src/App.js) (Advice display), [`src/index.js`](https://github.com/seerat89/random-advice-generator/blob/main/src/index.js) (React mount)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Advice app"]
  node_entry["React mount<br/>[index.js]"]
  node_app["Advice display<br/>[App.js]"]
end

subgraph group_service["External service"]
  node_api["Advice Slip API"]
end

node_user(("Visitor"))

node_entry -->|"mounts"| node_app
node_user -->|"requests advice"| node_app
node_app -->|"fetches advice"| node_api
node_api -->|"returns slip"| node_app
node_app -->|"displays advice"| node_user

click node_entry "https://github.com/seerat89/random-advice-generator/blob/main/src/index.js"
click node_app "https://github.com/seerat89/random-advice-generator/blob/main/src/App.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_entry,node_app toneBlue
class node_api toneAmber
class node_user toneIndigo
```

## Components

### Advice app

- [React mount](https://github.com/seerat89/random-advice-generator/blob/main/src/index.js): `src/index.js`
- [Advice display](https://github.com/seerat89/random-advice-generator/blob/main/src/App.js): `src/App.js`

### External service

- **Advice Slip API**

### Other components

- **Visitor**

## Connections

- React mount → Advice display: mounts
- Visitor → Advice display: requests advice
- Advice display → Advice Slip API: fetches advice
- Advice Slip API → Advice display: returns slip
- Advice display → Visitor: displays advice