# hu4y/vse architecture

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

## Overview

VSE is a browser-based trading simulation for camp teams, with an admin console for operating market sessions. The main participant flow is team sign-in, viewing live market data, placing long or short trades, and monitoring portfolio value and rank; admins manage rounds, settings, news, and teams. The runtime is concentrated in src/App.jsx, so domain nodes share that implementation path rather than implying separate modules. README-described capabilities are included, but several internal links are documented behavior rather than verified calls in the partial source excerpts.

Main entry points: [`src/App.jsx`](https://github.com/hu4y/vse/blob/main/src/App.jsx) (Order execution), [`src/main.jsx`](https://github.com/hu4y/vse/blob/main/src/main.jsx) (React bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_bootstrap["React bootstrap<br/>[main.jsx]"]
  node_app["VSE application<br/>[App.jsx]"]
end

subgraph group_market["Market and trading"]
  node_firebase[("Firebase services")]
  node_live_market["Live market simulation<br/>[App.jsx]"]
  node_pricing["Price movement<br/>[App.jsx]"]
  node_trading["Order execution<br/>[App.jsx]"]
  node_trade_costs["Fees and borrowing<br/>[App.jsx]"]
  node_margin["Buying power and margin<br/>[App.jsx]"]
  node_rounds["Round settlement<br/>[App.jsx]"]
end

subgraph group_participant["Participant experience"]
  node_auth["Anonymous authentication"]
  node_team_login["Team sign-in<br/>[App.jsx]"]
  node_market_view["Market and charts<br/>[App.jsx]"]
  node_portfolio["Portfolio and ROI<br/>[App.jsx]"]
  node_leaderboard["Leaderboard analytics<br/>[App.jsx]"]
end

subgraph group_admin["Administration"]
  node_admin_console["Admin console<br/>[App.jsx]"]
  node_market_control["Market controls<br/>[App.jsx]"]
  node_news["News broadcast<br/>[App.jsx]"]
  node_team_monitor["Team monitor<br/>[App.jsx]"]
  node_market_settings["Market settings<br/>[App.jsx]"]
end

node_participant_actor(("Team participant"))
node_admin_actor(("Administrator"))

node_bootstrap -->|"renders"| node_app
node_participant_actor -->|"signs in"| node_team_login
node_admin_actor -->|"opens"| node_admin_console
node_app -.->|"authenticates"| node_auth
node_team_login -->|"sets session"| node_firebase
node_app -->|"provides"| node_live_market
node_live_market -->|"subscribes and writes"| node_firebase
node_pricing -->|"publishes prices"| node_firebase
node_participant_actor -->|"views"| node_market_view
node_market_view -->|"shows updates"| node_live_market
node_participant_actor -->|"places orders"| node_trading
node_trading -->|"calculates charges"| node_trade_costs
node_trading -->|"checks capacity"| node_margin
node_trading -->|"updates holdings"| node_firebase
node_trading -->|"records trades"| node_firebase
node_participant_actor -->|"monitors"| node_portfolio
node_portfolio -.->|"uses valuation"| node_margin
node_participant_actor -->|"checks standings"| node_leaderboard
node_leaderboard -.->|"reads team data"| node_firebase
node_admin_actor -->|"opens or closes"| node_market_control
node_market_control -.->|"updates status"| node_firebase
node_admin_actor -->|"advances round"| node_rounds
node_rounds -->|"settles session"| node_firebase
node_rounds -->|"applies interest"| node_trade_costs
node_admin_actor -->|"broadcasts"| node_news
node_news -->|"writes news"| node_firebase
node_admin_actor -->|"monitors teams"| node_team_monitor
node_team_monitor -.->|"reads activity"| node_firebase
node_admin_actor -->|"adjusts settings"| node_market_settings
node_market_settings -->|"saves changes"| node_firebase

click node_bootstrap "https://github.com/hu4y/vse/blob/main/src/main.jsx"
click node_app "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_live_market "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_pricing "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_trading "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_trade_costs "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_margin "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_rounds "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_team_login "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_market_view "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_portfolio "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_leaderboard "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_admin_console "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_market_control "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_news "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_team_monitor "https://github.com/hu4y/vse/blob/main/src/App.jsx"
click node_market_settings "https://github.com/hu4y/vse/blob/main/src/App.jsx"

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 toneBlue
class node_firebase,node_live_market,node_pricing,node_trading,node_trade_costs,node_margin,node_rounds toneAmber
class node_auth,node_team_login,node_market_view,node_portfolio,node_leaderboard toneMint
class node_admin_console,node_market_control,node_news,node_team_monitor,node_market_settings toneRose
class node_participant_actor,node_admin_actor toneIndigo
```

## Components

### Application entry

- [React bootstrap](https://github.com/hu4y/vse/blob/main/src/main.jsx): `src/main.jsx`
- [VSE application](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`

### Market and trading

- **Firebase services**
- [Live market simulation](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Price movement](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Order execution](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Fees and borrowing](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Buying power and margin](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Round settlement](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`

### Participant experience

- **Anonymous authentication**
- [Team sign-in](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Market and charts](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Portfolio and ROI](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Leaderboard analytics](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`

### Administration

- [Admin console](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Market controls](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [News broadcast](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Team monitor](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`
- [Market settings](https://github.com/hu4y/vse/blob/main/src/App.jsx): `src/App.jsx`

### Other components

- **Team participant**
- **Administrator**

## Connections

- React bootstrap → VSE application: renders (evidence: `src/main.jsx`)
- Team participant → Team sign-in: signs in (evidence: `README.md`)
- Administrator → Admin console: opens (evidence: `README.md`)
- VSE application → Anonymous authentication: authenticates (evidence: `README.md`)
- Team sign-in → Firebase services: sets session (evidence: `src/App.jsx`)
- VSE application → Live market simulation: provides (evidence: `README.md`)
- Live market simulation → Firebase services: subscribes and writes (evidence: `src/App.jsx`)
- Price movement → Firebase services: publishes prices (evidence: `src/App.jsx`)
- Team participant → Market and charts: views (evidence: `README.md`)
- Market and charts → Live market simulation: shows updates (evidence: `README.md`)
- Team participant → Order execution: places orders (evidence: `README.md`)
- Order execution → Fees and borrowing: calculates charges (evidence: `src/App.jsx`)
- Order execution → Buying power and margin: checks capacity (evidence: `src/App.jsx`)
- Order execution → Firebase services: updates holdings (evidence: `src/App.jsx`)
- Order execution → Firebase services: records trades (evidence: `src/App.jsx`)
- Team participant → Portfolio and ROI: monitors (evidence: `README.md`)
- Portfolio and ROI → Buying power and margin: uses valuation (evidence: `src/App.jsx`)
- Team participant → Leaderboard analytics: checks standings (evidence: `README.md`)
- Leaderboard analytics → Firebase services: reads team data
- Administrator → Market controls: opens or closes (evidence: `README.md`)
- Market controls → Firebase services: updates status
- Administrator → Round settlement: advances round (evidence: `README.md`)
- Round settlement → Firebase services: settles session (evidence: `src/App.jsx`)
- Round settlement → Fees and borrowing: applies interest (evidence: `README.md`)
- Administrator → News broadcast: broadcasts (evidence: `README.md`)
- News broadcast → Firebase services: writes news (evidence: `src/App.jsx`)
- Administrator → Team monitor: monitors teams (evidence: `README.md`)
- Team monitor → Firebase services: reads activity
- Administrator → Market settings: adjusts settings (evidence: `README.md`)
- Market settings → Firebase services: saves changes (evidence: `src/App.jsx`)