# azbayou/web_belajarsql architecture

> Architecture diagram of the GitHub repository azbayou/web_belajarsql, 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/azbayou/web_belajarsql
- Repository: https://github.com/azbayou/web_belajarsql

## Overview

Web_BelajarSQL is a browser-based SQL learning app. A learner selects a difficulty and question, inspects the question’s tables and expected result, writes SQL, then runs it or submits it for comparison with the reference query. The app initializes DuckDB in the browser and uses Gemini for optional tutoring; tutor responses are rendered as Markdown. The sampled source places these responsibilities in one React component. The README gives no further capability details, and omitted source lines limit certainty about finer-grained wiring.

Main entry points: [`src/App.js`](https://github.com/azbayou/web_belajarsql/blob/main/src/App.js) (Learning App), [`src/index.js`](https://github.com/azbayou/web_belajarsql/blob/main/src/index.js) (React Entry), [`src/question.json`](https://github.com/azbayou/web_belajarsql/blob/main/src/question.json) (Question Data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["SQL Learning"]
  node_app["Learning App<br/>[App.js]"]
  node_questions["Question Data<br/>[question.json]"]
end

subgraph group_runtime["Browser Runtime"]
  node_duckdb[("DuckDB Engine")]
  node_markdown["Markdown Renderer"]
  node_entry["React Entry<br/>[index.js]"]
end

subgraph group_integrations["External Services"]
  node_gemini["Gemini API"]
end

node_learner(("Learner"))

node_learner -->|"uses"| node_app
node_entry -->|"renders"| node_app
node_app -->|"reads questions"| node_questions
node_app -->|"initializes and queries"| node_duckdb
node_app -.->|"requests tutoring"| node_gemini
node_app -->|"renders response"| node_markdown

click node_app "https://github.com/azbayou/web_belajarsql/blob/main/src/App.js"
click node_questions "https://github.com/azbayou/web_belajarsql/blob/main/src/question.json"
click node_entry "https://github.com/azbayou/web_belajarsql/blob/main/src/index.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_app,node_questions toneBlue
class node_duckdb,node_markdown,node_entry toneAmber
class node_gemini toneMint
class node_learner toneIndigo
```

## Components

### SQL Learning

- [Learning App](https://github.com/azbayou/web_belajarsql/blob/main/src/App.js): `src/App.js`
- [Question Data](https://github.com/azbayou/web_belajarsql/blob/main/src/question.json): `src/question.json`

### Browser Runtime

- **DuckDB Engine**
- **Markdown Renderer**
- [React Entry](https://github.com/azbayou/web_belajarsql/blob/main/src/index.js): `src/index.js`

### External Services

- **Gemini API**

### Other components

- **Learner**

## Connections

- Learner → Learning App: uses
- React Entry → Learning App: renders
- Learning App → Question Data: reads questions
- Learning App → DuckDB Engine: initializes and queries
- Learning App → Gemini API: requests tutoring
- Learning App → Markdown Renderer: renders response