# limsungpyo/ai-tech-playground architecture

> Architecture diagram of the GitHub repository limsungpyo/ai-tech-playground, 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/limsungpyo/ai-tech-playground
- Repository: https://github.com/limsungpyo/ai-tech-playground

## Overview

The README describes an interactive AI-learning product: users choose experiments, predict outcomes, run and inspect them, then advance through learning features. The checked-in implementation is only a starter shell: a React entry point renders a welcome page, and FastAPI exposes a health endpoint. README capabilities are shown as documented scope, not as verified implementations; no frontend-to-backend or database wiring is visible in the sampled source.

Main entry points: [`frontend/src/main.tsx`](https://github.com/limsungpyo/ai-tech-playground/blob/main/frontend/src/main.tsx) (React entry), [`frontend/src/App.tsx`](https://github.com/limsungpyo/ai-tech-playground/blob/main/frontend/src/App.tsx) (Welcome page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend shell"]
  node_react_entry["React entry<br/>[main.tsx]"]
  node_welcome_app["Welcome page<br/>[App.tsx]"]
end

subgraph group_backend["Backend shell"]
  node_fastapi["FastAPI app<br/>[main.py]"]
end

subgraph group_product["Documented product capabilities"]
  node_experiment["Experiment play"]
  node_why["WHY explanations"]
  node_prediction["Outcome prediction"]
  node_progression["Skill progression"]
  node_recommendations["Experiment recommendations"]
  node_sharing["Rankings and sharing"]
  node_radar["Technology radar"]
  node_admin["Admin console"]
end

node_learner(("Learner"))

node_react_entry -->|"renders"| node_welcome_app
node_learner -->|"chooses and runs"| node_experiment
node_experiment -->|"compares outcome"| node_prediction
node_experiment -->|"asks why"| node_why
node_experiment -->|"unlocks skills"| node_progression
node_learner -->|"gets suggestions"| node_recommendations
node_learner -->|"views and shares"| node_sharing
node_learner -->|"explores trends"| node_radar
node_learner -->|"administers"| node_admin

click node_react_entry "https://github.com/limsungpyo/ai-tech-playground/blob/main/frontend/src/main.tsx"
click node_welcome_app "https://github.com/limsungpyo/ai-tech-playground/blob/main/frontend/src/App.tsx"
click node_fastapi "https://github.com/limsungpyo/ai-tech-playground/blob/main/backend/main.py"

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_react_entry,node_welcome_app toneBlue
class node_fastapi toneAmber
class node_experiment,node_why,node_prediction,node_progression,node_recommendations,node_sharing,node_radar,node_admin toneMint
class node_learner toneIndigo
```

## Components

### Frontend shell

- [React entry](https://github.com/limsungpyo/ai-tech-playground/blob/main/frontend/src/main.tsx): `frontend/src/main.tsx`
- [Welcome page](https://github.com/limsungpyo/ai-tech-playground/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`

### Backend shell

- [FastAPI app](https://github.com/limsungpyo/ai-tech-playground/blob/main/backend/main.py): `backend/main.py`

### Documented product capabilities

- **Experiment play**
- **WHY explanations**
- **Outcome prediction**
- **Skill progression**
- **Experiment recommendations**
- **Rankings and sharing**
- **Technology radar**
- **Admin console**

### Other components

- **Learner**

## Connections

- React entry → Welcome page: renders (evidence: `frontend/src/main.tsx`)
- Learner → Experiment play: chooses and runs (evidence: `README.md`)
- Experiment play → Outcome prediction: compares outcome (evidence: `README.md`)
- Experiment play → WHY explanations: asks why (evidence: `README.md`)
- Experiment play → Skill progression: unlocks skills (evidence: `README.md`)
- Learner → Experiment recommendations: gets suggestions (evidence: `README.md`)
- Learner → Rankings and sharing: views and shares (evidence: `README.md`)
- Learner → Technology radar: explores trends (evidence: `README.md`)
- Learner → Admin console: administers (evidence: `README.md`)