# chi2tseng/nq-replay-trainer architecture

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

- Interactive diagram: https://gitdiagram.com/chi2tseng/nq-replay-trainer
- Repository: https://github.com/chi2tseng/nq-replay-trainer

## Overview

NQ Replay Trainer is a static futures-market replay and practice app. The main workflow is to select a dataset and session, inspect or replay bars on a chart, place and manage simulated orders, then review trade analytics; browser storage retains practice state. The README also documents drawing tools, indicators, multiple timeframes, and CSV export. A separate quiz engine supports entry-practice questions. The app logic is concentrated in src/app.js; unsampled implementation details are represented only where README statements support them.

Main entry points: [`src/app.js`](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js) (Replay Controls), [`src/quiz.js`](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/quiz.js) (Quiz Engine), [`lib/lightweight-charts.standalone.production.js`](https://github.com/chi2tseng/nq-replay-trainer/blob/main/lib/lightweight-charts.standalone.production.js) (Price Chart), [`data/NQ_db_1m.json`](https://github.com/chi2tseng/nq-replay-trainer/blob/main/data/NQ_db_1m.json) (Market Datasets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_replay["Replay Practice"]
  node_market_data["Market Datasets<br/>[NQ_db_1m.json]"]
  node_replay_controls["Replay Controls<br/>[app.js]"]
  node_timeframes["Timeframe Aggregation<br/>[app.js]"]
  node_chart["Price Chart"]
  node_indicators["EMA Clouds<br/>[app.js]"]
  node_drawing_tools["Drawing Tools<br/>[app.js]"]
end

subgraph group_trading["Orders And Analysis"]
  node_order_entry["Manual Orders<br/>[app.js]"]
  node_fill_simulation["Fill Simulation<br/>[app.js]"]
  node_atm["ATM Management<br/>[app.js]"]
  node_trade_log["Trade Log<br/>[app.js]"]
  node_analytics["Trade Analytics<br/>[app.js]"]
  node_csv_export["CSV Export<br/>[app.js]"]
end

subgraph group_quiz["Quiz Practice"]
  node_quiz_engine["Quiz Engine<br/>[quiz.js]"]
  node_quiz_set["Quiz Questions"]
end

subgraph group_runtime["Browser Runtime"]
  node_local_storage[("Browser Storage")]
end

node_learner(("Learner"))
node_browser(("Web Browser"))

node_learner -->|"selects session"| node_replay_controls
node_market_data -->|"supplies bars"| node_replay_controls
node_replay_controls -->|"aggregates bars"| node_timeframes
node_replay_controls -->|"renders replay"| node_chart
node_timeframes -->|"provides sub-bars"| node_fill_simulation
node_replay_controls -->|"displays indicators"| node_indicators
node_learner -->|"places drawings"| node_drawing_tools
node_drawing_tools -->|"draws on chart"| node_chart
node_learner -->|"places orders"| node_order_entry
node_order_entry -->|"simulates fills"| node_fill_simulation
node_order_entry -->|"applies ATM"| node_atm
node_fill_simulation -.->|"records trades"| node_trade_log
node_trade_log -->|"summarizes trades"| node_analytics
node_analytics -->|"exports CSV"| node_csv_export
node_learner -->|"answers questions"| node_quiz_engine
node_quiz_set -->|"loads questions"| node_quiz_engine
node_quiz_engine -->|"creates chart"| node_chart
node_browser -->|"hosts app"| node_replay_controls
node_replay_controls -->|"persists state"| node_local_storage
node_trade_log -->|"persists trades"| node_local_storage

click node_market_data "https://github.com/chi2tseng/nq-replay-trainer/blob/main/data/NQ_db_1m.json"
click node_replay_controls "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_timeframes "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_chart "https://github.com/chi2tseng/nq-replay-trainer/blob/main/lib/lightweight-charts.standalone.production.js"
click node_indicators "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_drawing_tools "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_order_entry "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_fill_simulation "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_atm "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_trade_log "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_analytics "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_csv_export "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js"
click node_quiz_engine "https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/quiz.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_market_data,node_replay_controls,node_timeframes,node_chart,node_indicators,node_drawing_tools,node_browser toneBlue
class node_order_entry,node_fill_simulation,node_atm,node_trade_log,node_analytics,node_csv_export toneAmber
class node_quiz_engine,node_quiz_set toneMint
class node_local_storage toneRose
class node_learner toneIndigo
```

## Components

### Replay Practice

- [Market Datasets](https://github.com/chi2tseng/nq-replay-trainer/blob/main/data/NQ_db_1m.json): `data/NQ_db_1m.json`
- [Replay Controls](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`
- [Timeframe Aggregation](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`
- [Price Chart](https://github.com/chi2tseng/nq-replay-trainer/blob/main/lib/lightweight-charts.standalone.production.js): `lib/lightweight-charts.standalone.production.js`
- [EMA Clouds](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`
- [Drawing Tools](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`

### Orders And Analysis

- [Manual Orders](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`
- [Fill Simulation](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`
- [ATM Management](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`
- [Trade Log](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`
- [Trade Analytics](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`
- [CSV Export](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/app.js): `src/app.js`

### Quiz Practice

- [Quiz Engine](https://github.com/chi2tseng/nq-replay-trainer/blob/main/src/quiz.js): `src/quiz.js`
- **Quiz Questions**

### Browser Runtime

- **Browser Storage**

### Other components

- **Learner**
- **Web Browser**

## Connections

- Learner → Replay Controls: selects session
- Market Datasets → Replay Controls: supplies bars
- Replay Controls → Timeframe Aggregation: aggregates bars (evidence: `src/app.js`)
- Replay Controls → Price Chart: renders replay
- Timeframe Aggregation → Fill Simulation: provides sub-bars (evidence: `src/app.js`)
- Replay Controls → EMA Clouds: displays indicators (evidence: `src/app.js`)
- Learner → Drawing Tools: places drawings
- Drawing Tools → Price Chart: draws on chart (evidence: `src/app.js`)
- Learner → Manual Orders: places orders
- Manual Orders → Fill Simulation: simulates fills (evidence: `src/app.js`)
- Manual Orders → ATM Management: applies ATM (evidence: `src/app.js`)
- Fill Simulation → Trade Log: records trades (evidence: `src/app.js`)
- Trade Log → Trade Analytics: summarizes trades (evidence: `src/app.js`)
- Trade Analytics → CSV Export: exports CSV (evidence: `src/app.js`)
- Learner → Quiz Engine: answers questions (evidence: `src/quiz.js`)
- Quiz Questions → Quiz Engine: loads questions (evidence: `src/quiz.js`)
- Quiz Engine → Price Chart: creates chart (evidence: `src/quiz.js`)
- Web Browser → Replay Controls: hosts app
- Replay Controls → Browser Storage: persists state
- Trade Log → Browser Storage: persists trades