# aruku-interactive/ifm-poc architecture

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

- Interactive diagram: https://gitdiagram.com/aruku-interactive/ifm-poc
- Repository: https://github.com/aruku-interactive/ifm-poc

## Overview

This starter dApp’s user workflow begins in the React app, which configures Algorand wallet/network access and presents wallet connection, payment, ASA creation, NFT minting, and Hello World contract demos. The NFT flow additionally uploads media through a backend to Pinata/IPFS before creating an on-chain asset. Source excerpts establish the frontend composition and several calls; README documents capabilities not otherwise detailed. The NFT server and network endpoints are shown as integrations, but their internal request behavior is not fully evidenced here.

Main entry points: [`QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx`](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx) (Feature dashboard), [`QuickStartTemplate/projects/QuickStartTemplate-frontend/src/utils/network/getAlgoClientConfigs.ts`](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/utils/network/getAlgoClientConfigs.ts) (Network configuration), [`QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx`](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx) (App shell), [`QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx`](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx) (Contract interaction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend experience"]
  node_entry["React bootstrap<br/>[main.tsx]"]
  node_app["App shell<br/>[App.tsx]"]
  node_home["Feature dashboard<br/>[Home.tsx]"]
end

subgraph group_wallet["Wallet and network"]
  node_wallet_ui["Wallet connection<br/>[ConnectWallet.tsx]"]
  node_account["Account display<br/>[Account.tsx]"]
  node_netconfig["Network configuration"]
  node_networktypes["Network config types<br/>[network.ts]"]
end

subgraph group_assets["Asset operations"]
  node_payment["ALGO/USDC payments<br/>[Transact.tsx]"]
  node_asa["ASA creation<br/>[Tokenmint.tsx]"]
  node_nft["NFT minting<br/>[NFTmint.tsx]"]
end

subgraph group_contracts["Contract demo"]
  node_contractdemo["Contract interaction<br/>[AppCalls.tsx]"]
  node_contractclient["Hello World client<br/>[HelloWorld.ts]"]
  node_contract["Hello World contract<br/>[contract.algo.ts]"]
  node_generatedclient["Generated app client"]
end

subgraph group_nftbackend["NFT metadata service"]
  node_nftserver["NFT upload server<br/>[server.js]"]
end

node_user(("dApp user"))
node_algorand{{"Algorand network"}}
node_pinata{{"Pinata/IPFS"}}

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_home
node_app -->|"loads settings"| node_netconfig
node_app -.->|"configures wallet access"| node_algorand
node_home -->|"presents"| node_wallet_ui
node_home -->|"opens"| node_payment
node_home -->|"opens"| node_asa
node_home -->|"opens"| node_nft
node_home -->|"opens"| node_contractdemo
node_wallet_ui -->|"renders"| node_account
node_account -->|"reads settings"| node_netconfig
node_netconfig -->|"uses types"| node_networktypes
node_payment -->|"loads endpoint config"| node_netconfig
node_payment -.->|"sends payment"| node_algorand
node_asa -->|"loads endpoint config"| node_netconfig
node_asa -.->|"creates asset"| node_algorand
node_nft -->|"uploads media"| node_nftserver
node_nftserver -.->|"stores metadata"| node_pinata
node_nft -.->|"creates asset"| node_algorand
node_contractdemo -->|"loads clients"| node_netconfig
node_contractdemo -->|"instantiates factory"| node_contractclient
node_contractclient -.->|"delegates app calls"| node_generatedclient
node_contractdemo -->|"deploys and calls"| node_algorand
node_generatedclient -.->|"targets contract"| node_contract

click node_entry "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/main.tsx"
click node_app "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx"
click node_home "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx"
click node_wallet_ui "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/ConnectWallet.tsx"
click node_account "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Account.tsx"
click node_netconfig "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/utils/network/getAlgoClientConfigs.ts"
click node_networktypes "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/interfaces/network.ts"
click node_payment "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Transact.tsx"
click node_asa "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Tokenmint.tsx"
click node_nft "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/NFTmint.tsx"
click node_nftserver "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-contracts/nft_mint_server/server.js"
click node_contractdemo "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx"
click node_contractclient "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/contracts/HelloWorld.ts"
click node_contract "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-contracts/smart_contracts/hello_world/contract.algo.ts"
click node_generatedclient "https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-contracts/smart_contracts/artifacts/hello_world/HelloWorldClient.ts"

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_entry,node_app,node_home,node_user toneBlue
class node_wallet_ui,node_account,node_netconfig,node_networktypes toneAmber
class node_payment,node_asa,node_nft toneMint
class node_contractdemo,node_contractclient,node_contract,node_generatedclient toneRose
class node_nftserver,node_algorand,node_pinata toneIndigo
```

## Components

### Frontend experience

- [React bootstrap](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/main.tsx): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/main.tsx`
- [App shell](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx`
- [Feature dashboard](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx`

### Wallet and network

- [Wallet connection](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/ConnectWallet.tsx): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/ConnectWallet.tsx`
- [Account display](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Account.tsx): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Account.tsx`
- [Network configuration](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/utils/network/getAlgoClientConfigs.ts): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/utils/network/getAlgoClientConfigs.ts`
- [Network config types](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/interfaces/network.ts): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/interfaces/network.ts`

### Asset operations

- [ALGO/USDC payments](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Transact.tsx): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Transact.tsx`
- [ASA creation](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Tokenmint.tsx): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Tokenmint.tsx`
- [NFT minting](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/NFTmint.tsx): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/NFTmint.tsx`

### Contract demo

- [Contract interaction](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx`
- [Hello World client](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-frontend/src/contracts/HelloWorld.ts): `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/contracts/HelloWorld.ts`
- [Hello World contract](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-contracts/smart_contracts/hello_world/contract.algo.ts): `QuickStartTemplate/projects/QuickStartTemplate-contracts/smart_contracts/hello_world/contract.algo.ts`
- [Generated app client](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-contracts/smart_contracts/artifacts/hello_world/HelloWorldClient.ts): `QuickStartTemplate/projects/QuickStartTemplate-contracts/smart_contracts/artifacts/hello_world/HelloWorldClient.ts`

### NFT metadata service

- [NFT upload server](https://github.com/aruku-interactive/ifm-poc/blob/main/QuickStartTemplate/projects/QuickStartTemplate-contracts/nft_mint_server/server.js): `QuickStartTemplate/projects/QuickStartTemplate-contracts/nft_mint_server/server.js`

### Other components

- **dApp user**
- **Algorand network**
- **Pinata/IPFS**

## Connections

- dApp user → React bootstrap: opens app (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/main.tsx`)
- React bootstrap → App shell: renders (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/main.tsx`)
- App shell → Feature dashboard: renders (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx`)
- App shell → Network configuration: loads settings (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/App.tsx`)
- App shell → Algorand network: configures wallet access
- Feature dashboard → Wallet connection: presents (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx`)
- Feature dashboard → ALGO/USDC payments: opens (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx`)
- Feature dashboard → ASA creation: opens (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx`)
- Feature dashboard → NFT minting: opens (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx`)
- Feature dashboard → Contract interaction: opens (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/Home.tsx`)
- Wallet connection → Account display: renders (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/ConnectWallet.tsx`)
- Account display → Network configuration: reads settings (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Account.tsx`)
- Network configuration → Network config types: uses types (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/utils/network/getAlgoClientConfigs.ts`)
- ALGO/USDC payments → Network configuration: loads endpoint config (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Transact.tsx`)
- ALGO/USDC payments → Algorand network: sends payment
- ASA creation → Network configuration: loads endpoint config (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/Tokenmint.tsx`)
- ASA creation → Algorand network: creates asset
- NFT minting → NFT upload server: uploads media (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/NFTmint.tsx`)
- NFT upload server → Pinata/IPFS: stores metadata
- NFT minting → Algorand network: creates asset
- Contract interaction → Network configuration: loads clients (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx`)
- Contract interaction → Hello World client: instantiates factory (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx`)
- Hello World client → Generated app client: delegates app calls
- Contract interaction → Algorand network: deploys and calls (evidence: `QuickStartTemplate/projects/QuickStartTemplate-frontend/src/components/AppCalls.tsx`)
- Generated app client → Hello World contract: targets contract