# ngthachminhthanh/dapp architecture

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

- Interactive diagram: https://gitdiagram.com/ngthachminhthanh/dapp
- Repository: https://github.com/ngthachminhthanh/dapp

## Overview

This is a decentralized web app for wallet-based account access and token/NFT workflows. A user enters through the React app; protected pages expose profile, token creation/listing and NFT collection/listing features, while the backend provides JWT-protected user and token APIs backed by MongoDB. The README also advertises wallet/Web3 integration, CRUD and minting, though the sampled code does not establish their detailed runtime connections. Relationships to unsampled frontend hooks and NFT backend behavior are therefore omitted or marked unverified.

Main entry points: [`frontend/src/App.tsx`](https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/App.tsx) (React app), [`backend/src/routes/token.ts`](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/routes/token.ts) (Token routes), [`backend/src/controllers/user.ts`](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/controllers/user.ts) (User API), [`backend/src/routes/user.ts`](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/routes/user.ts) (User routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["React app<br/>[App.tsx]"]
  node_profileui["Profile<br/>[index.tsx]"]
  node_nftui["NFT features<br/>[index.tsx]"]
  node_collectionui["NFT collection<br/>[index.tsx]"]
  node_api["HTTP client<br/>[axiosClient.ts]"]
end

subgraph group_identity["Identity"]
  node_authstate["Auth context<br/>[AuthProvider.tsx]"]
  node_userapi["User API<br/>[user.ts]"]
  node_authmw["JWT middleware<br/>[auth.ts]"]
  node_userroute["User routes<br/>[user.ts]"]
  node_requesttypes["Request types<br/>[request.ts]"]
  node_router["API router<br/>[index.ts]"]
  node_server["Express server<br/>[server.ts]"]
end

subgraph group_tokens["Token services"]
  node_createui["Token creator<br/>[index.tsx]"]
  node_tokenui["Token listing<br/>[index.tsx]"]
  node_tokenapi["Token API<br/>[token.ts]"]
  node_tokenroute["Token routes<br/>[token.ts]"]
  node_upload["Image upload<br/>[upload.ts]"]
end

subgraph group_data["Persistence"]
  node_usermodel[("User model<br/>[user.ts]")]
  node_tokenmodel[("Token model<br/>[token.ts]")]
  node_dbconnect["DB connection<br/>[db.ts]"]
  node_mongo[("MongoDB")]
end

node_visitor(("User"))
node_wallet(("Wallet / Web3"))

node_visitor -->|"uses"| node_app
node_app -->|"reads auth"| node_authstate
node_app -->|"routes to"| node_profileui
node_app -->|"routes to"| node_createui
node_app -->|"routes to"| node_tokenui
node_app -->|"routes to"| node_nftui
node_app -->|"routes to"| node_collectionui
node_profileui -.->|"loads profile"| node_api
node_createui -.->|"submits token"| node_api
node_tokenui -.->|"loads tokens"| node_api
node_nftui -.->|"uses Web3"| node_wallet
node_visitor -.->|"connects"| node_wallet
node_server -->|"mounts routes"| node_router
node_server -->|"connects database"| node_dbconnect
node_router -->|"mounts"| node_userroute
node_router -->|"mounts"| node_tokenroute
node_userroute -->|"routes to"| node_userapi
node_userroute -->|"protects routes"| node_authmw
node_tokenroute -->|"routes to"| node_tokenapi
node_tokenroute -->|"protects routes"| node_authmw
node_tokenroute -->|"accepts image"| node_upload
node_userapi -->|"reads and writes"| node_usermodel
node_tokenapi -->|"reads and writes"| node_tokenmodel
node_dbconnect -.->|"connects"| node_mongo
node_authmw -->|"uses types"| node_requesttypes
node_userapi -->|"uses types"| node_requesttypes
node_tokenapi -->|"uses types"| node_requesttypes

click node_app "https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/App.tsx"
click node_authstate "https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/context/AuthProvider.tsx"
click node_profileui "https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/profile/index.tsx"
click node_createui "https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/create-token/index.tsx"
click node_tokenui "https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/token-list/index.tsx"
click node_nftui "https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/nft-list/index.tsx"
click node_collectionui "https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/nft-collection/index.tsx"
click node_api "https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/api/axiosClient.ts"
click node_userapi "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/controllers/user.ts"
click node_authmw "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/middleware/auth.ts"
click node_userroute "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/routes/user.ts"
click node_tokenapi "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/controllers/token.ts"
click node_tokenroute "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/routes/token.ts"
click node_upload "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/middleware/upload.ts"
click node_requesttypes "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/interfaces/request.ts"
click node_usermodel "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/models/user.ts"
click node_tokenmodel "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/models/token.ts"
click node_router "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/routes/index.ts"
click node_server "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/server.ts"
click node_dbconnect "https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/db.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_app,node_profileui,node_nftui,node_collectionui,node_api,node_visitor toneBlue
class node_authstate,node_userapi,node_authmw,node_userroute,node_requesttypes,node_router,node_server toneAmber
class node_createui,node_tokenui,node_tokenapi,node_tokenroute,node_upload toneMint
class node_usermodel,node_tokenmodel,node_dbconnect,node_mongo toneRose
class node_wallet toneIndigo
```

## Components

### Web client

- [React app](https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Profile](https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/profile/index.tsx): `frontend/src/pages/profile/index.tsx`
- [NFT features](https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/nft-list/index.tsx): `frontend/src/pages/nft-list/index.tsx`
- [NFT collection](https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/nft-collection/index.tsx): `frontend/src/pages/nft-collection/index.tsx`
- [HTTP client](https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/api/axiosClient.ts): `frontend/src/api/axiosClient.ts`

### Identity

- [Auth context](https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/context/AuthProvider.tsx): `frontend/src/context/AuthProvider.tsx`
- [User API](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/controllers/user.ts): `backend/src/controllers/user.ts`
- [JWT middleware](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/middleware/auth.ts): `backend/src/middleware/auth.ts`
- [User routes](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/routes/user.ts): `backend/src/routes/user.ts`
- [Request types](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/interfaces/request.ts): `backend/src/interfaces/request.ts`
- [API router](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/routes/index.ts): `backend/src/routes/index.ts`
- [Express server](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/server.ts): `backend/src/server.ts`

### Token services

- [Token creator](https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/create-token/index.tsx): `frontend/src/pages/create-token/index.tsx`
- [Token listing](https://github.com/ngthachminhthanh/dapp/blob/main/frontend/src/pages/token-list/index.tsx): `frontend/src/pages/token-list/index.tsx`
- [Token API](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/controllers/token.ts): `backend/src/controllers/token.ts`
- [Token routes](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/routes/token.ts): `backend/src/routes/token.ts`
- [Image upload](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/middleware/upload.ts): `backend/src/middleware/upload.ts`

### Persistence

- [User model](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/models/user.ts): `backend/src/models/user.ts`
- [Token model](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/models/token.ts): `backend/src/models/token.ts`
- [DB connection](https://github.com/ngthachminhthanh/dapp/blob/main/backend/src/db.ts): `backend/src/db.ts`
- **MongoDB**

### Other components

- **User**
- **Wallet / Web3**

## Connections

- User → React app: uses
- React app → Auth context: reads auth (evidence: `frontend/src/App.tsx`)
- React app → Profile: routes to (evidence: `frontend/src/App.tsx`)
- React app → Token creator: routes to (evidence: `frontend/src/App.tsx`)
- React app → Token listing: routes to (evidence: `frontend/src/App.tsx`)
- React app → NFT features: routes to (evidence: `frontend/src/App.tsx`)
- React app → NFT collection: routes to (evidence: `frontend/src/App.tsx`)
- Profile → HTTP client: loads profile
- Token creator → HTTP client: submits token
- Token listing → HTTP client: loads tokens
- NFT features → Wallet / Web3: uses Web3
- User → Wallet / Web3: connects (evidence: `README.md`)
- Express server → API router: mounts routes (evidence: `backend/src/server.ts`)
- Express server → DB connection: connects database (evidence: `backend/src/server.ts`)
- API router → User routes: mounts (evidence: `backend/src/routes/index.ts`)
- API router → Token routes: mounts (evidence: `backend/src/routes/index.ts`)
- User routes → User API: routes to (evidence: `backend/src/routes/user.ts`)
- User routes → JWT middleware: protects routes (evidence: `backend/src/routes/user.ts`)
- Token routes → Token API: routes to (evidence: `backend/src/routes/token.ts`)
- Token routes → JWT middleware: protects routes (evidence: `backend/src/routes/token.ts`)
- Token routes → Image upload: accepts image (evidence: `backend/src/routes/token.ts`)
- User API → User model: reads and writes (evidence: `backend/src/controllers/user.ts`)
- Token API → Token model: reads and writes (evidence: `backend/src/controllers/token.ts`)
- DB connection → MongoDB: connects
- JWT middleware → Request types: uses types (evidence: `backend/src/middleware/auth.ts`)
- User API → Request types: uses types (evidence: `backend/src/controllers/user.ts`)
- Token API → Request types: uses types (evidence: `backend/src/controllers/token.ts`)