How ngthachminhthanh/dapp works
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: App.tsx React app · token.ts Token routes · controllers/user.ts User API · routes/user.ts User routes
Components 23
Web client
- React app
frontend/src/App.tsx - Profile
frontend/src/pages/profile/index.tsx - NFT features
frontend/src/pages/nft-list/index.tsx - NFT collection
frontend/src/pages/nft-collection/index.tsx - HTTP client
frontend/src/api/axiosClient.ts
Identity
- Auth context
frontend/src/context/AuthProvider.tsx - User API
backend/src/controllers/user.ts - JWT middleware
backend/src/middleware/auth.ts - User routes
backend/src/routes/user.ts - Request types
backend/src/interfaces/request.ts - API router
backend/src/routes/index.ts - Express server
backend/src/server.ts
Token services
- Token creator
frontend/src/pages/create-token/index.tsx - Token listing
frontend/src/pages/token-list/index.tsx - Token API
backend/src/controllers/token.ts - Token routes
backend/src/routes/token.ts - Image upload
backend/src/middleware/upload.ts
Persistence
- User model
backend/src/models/user.ts - Token model
backend/src/models/token.ts - DB connection
backend/src/db.ts - MongoDB
Other components
- User
- Wallet / Web3
Connections 27
- User → React app: uses
- React app → Auth context: reads auth
frontend/src/App.tsx - React app → Profile: routes to
frontend/src/App.tsx - React app → Token creator: routes to
frontend/src/App.tsx - React app → Token listing: routes to
frontend/src/App.tsx - React app → NFT features: routes to
frontend/src/App.tsx - React app → NFT collection: routes to
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
README.md - Express server → API router: mounts routes
backend/src/server.ts - Express server → DB connection: connects database
backend/src/server.ts - API router → User routes: mounts
backend/src/routes/index.ts - API router → Token routes: mounts
backend/src/routes/index.ts - User routes → User API: routes to
backend/src/routes/user.ts - User routes → JWT middleware: protects routes
backend/src/routes/user.ts - Token routes → Token API: routes to
backend/src/routes/token.ts - Token routes → JWT middleware: protects routes
backend/src/routes/token.ts - Token routes → Image upload: accepts image
backend/src/routes/token.ts - User API → User model: reads and writes
backend/src/controllers/user.ts - Token API → Token model: reads and writes
backend/src/controllers/token.ts - DB connection → MongoDB: connects
- JWT middleware → Request types: uses types
backend/src/middleware/auth.ts - User API → Request types: uses types
backend/src/controllers/user.ts - Token API → Request types: uses types
backend/src/controllers/token.ts