# jaybeyut/cabangbang_devconsui_movecodecamp2026_level1 architecture

> Architecture diagram of the GitHub repository jaybeyut/cabangbang_devconsui_movecodecamp2026_level1, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1
- Repository: https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1

## Overview

This workshop repository delivers an on-chain Sui portfolio: a visitor opens the React app, which reads portfolio data from a configured Sui object and renders a profile, skills, educational content, and verification links. The Move contract defines the on-chain portfolio data; deployment is described in the README, but its implementation path is not shown in the excerpts. A separate workshop utility converts address balance into a gas coin. The frontend fetch details and contract internals are only partially sampled, so those links rely on explicit README statements or are omitted.

Main entry points: [`portfolio_frontend/src/App.tsx`](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/App.tsx) (App shell and balance), [`portfolio_frontend/src/views/PortfolioView.tsx`](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/views/PortfolioView.tsx) (Portfolio view), [`sui-balance-to-coin-tool/scripts/balanceToCoin.js`](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/sui-balance-to-coin-tool/scripts/balanceToCoin.js) (Balance-to-coin converter), [`portfolio_frontend/src/main.tsx`](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/main.tsx) (React bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Portfolio frontend"]
  node_bootstrap["React bootstrap<br/>[main.tsx]"]
  node_app["App shell and balance<br/>[App.tsx]"]
  node_portfolio["Portfolio view<br/>[PortfolioView.tsx]"]
  node_ids["Network and object IDs<br/>[constants.ts]"]
end

subgraph group_chain["On-chain portfolio"]
  node_contract["Portfolio Move contract<br/>[portfolio.move]"]
  node_chain_object[("Portfolio object")]
end

subgraph group_helper["Gas coin utility"]
  node_keystore[("Sui CLI keystore")]
  node_converter["Balance-to-coin converter<br/>[balanceToCoin.js]"]
end

node_visitor(("Portfolio visitor"))
node_sui_rpc[("Sui fullnode")]
node_wallet(("Sui wallet"))

node_visitor -->|"opens app"| node_bootstrap
node_bootstrap -->|"renders"| node_app
node_app -->|"renders"| node_portfolio
node_app -->|"queries balance"| node_sui_rpc
node_portfolio -->|"imports object ID"| node_ids
node_portfolio -->|"fetches object data"| node_sui_rpc
node_sui_rpc -->|"serves object data"| node_chain_object
node_contract -->|"stores portfolio data"| node_chain_object
node_wallet -->|"provides signing key"| node_keystore
node_converter -->|"loads keys"| node_keystore
node_converter -->|"signs and executes"| node_sui_rpc
node_sui_rpc -->|"returns coin result"| node_wallet

click node_bootstrap "https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/main.tsx"
click node_app "https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/App.tsx"
click node_portfolio "https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/views/PortfolioView.tsx"
click node_ids "https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/constants.ts"
click node_contract "https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_contract/sources/portfolio.move"
click node_converter "https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/sui-balance-to-coin-tool/scripts/balanceToCoin.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_bootstrap,node_app,node_portfolio,node_ids,node_wallet toneBlue
class node_contract,node_chain_object,node_sui_rpc toneAmber
class node_keystore,node_converter toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio frontend

- [React bootstrap](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/main.tsx): `portfolio_frontend/src/main.tsx`
- [App shell and balance](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/App.tsx): `portfolio_frontend/src/App.tsx`
- [Portfolio view](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/views/PortfolioView.tsx): `portfolio_frontend/src/views/PortfolioView.tsx`
- [Network and object IDs](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_frontend/src/constants.ts): `portfolio_frontend/src/constants.ts`

### On-chain portfolio

- [Portfolio Move contract](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/portfolio_contract/sources/portfolio.move): `portfolio_contract/sources/portfolio.move`
- **Portfolio object**

### Gas coin utility

- **Sui CLI keystore**
- [Balance-to-coin converter](https://github.com/jaybeyut/cabangbang_devconsui_movecodecamp2026_level1/blob/main/sui-balance-to-coin-tool/scripts/balanceToCoin.js): `sui-balance-to-coin-tool/scripts/balanceToCoin.js`

### Other components

- **Portfolio visitor**
- **Sui fullnode**
- **Sui wallet**

## Connections

- Portfolio visitor → React bootstrap: opens app (evidence: `README.md`)
- React bootstrap → App shell and balance: renders (evidence: `portfolio_frontend/src/main.tsx`)
- App shell and balance → Portfolio view: renders (evidence: `portfolio_frontend/src/App.tsx`)
- App shell and balance → Sui fullnode: queries balance (evidence: `portfolio_frontend/src/App.tsx`)
- Portfolio view → Network and object IDs: imports object ID (evidence: `portfolio_frontend/src/views/PortfolioView.tsx`)
- Portfolio view → Sui fullnode: fetches object data (evidence: `README.md`)
- Sui fullnode → Portfolio object: serves object data (evidence: `README.md`)
- Portfolio Move contract → Portfolio object: stores portfolio data (evidence: `README.md`)
- Sui wallet → Sui CLI keystore: provides signing key
- Balance-to-coin converter → Sui CLI keystore: loads keys (evidence: `sui-balance-to-coin-tool/scripts/balanceToCoin.js`)
- Balance-to-coin converter → Sui fullnode: signs and executes (evidence: `sui-balance-to-coin-tool/scripts/balanceToCoin.js`)
- Sui fullnode → Sui wallet: returns coin result