# mudst-2026-pegasus/pegasus-tcg-web architecture

> Architecture diagram of the GitHub repository mudst-2026-pegasus/pegasus-tcg-web, 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/mudst-2026-pegasus/pegasus-tcg-web
- Repository: https://github.com/mudst-2026-pegasus/pegasus-tcg-web

## Overview

Pegasus TCG Web is a React frontend for a trading-card marketplace. The main journey runs from public discovery and product/listing detail through cart and checkout, with account, payment, and after-sales stages; sellers manage shops, inventory, auctions, and orders, while admins oversee catalog, users, finance, and operations. The app router dispatches into role-aware route groups, feature modules call a separate API through shared client/query infrastructure, and shared layouts and UI present results. The README documents these capabilities; unsampled feature internals are represented at supported directory paths, without inferring their call relationships.

Main entry points: [`src/lib/api/client.ts`](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/lib/api/client.ts) (API client), [`src/app/routes/public.routes.tsx`](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/public.routes.tsx) (Public routes), [`src/app/router.tsx`](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/router.tsx) (Route dispatcher), [`src/app/routes/seller.routes.tsx`](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/seller.routes.tsx) (Seller routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App routing"]
  node_app_entry["Browser entry<br/>[main.tsx]"]
  node_router["Route dispatcher<br/>[router.tsx]"]
  node_public_routes["Public routes<br/>[public.routes.tsx]"]
  node_auth_routes["Auth routes<br/>[auth.routes.tsx]"]
  node_seller_routes["Seller routes<br/>[seller.routes.tsx]"]
  node_admin_routes["Admin routes<br/>[admin.routes.tsx]"]
end

subgraph group_market["Marketplace"]
  node_home["Home discovery"]
  node_catalog["Catalog and listings"]
  node_auction["Auctions"]
end

subgraph group_buyer["Buyer services"]
  node_auth_feature["Sign-in and roles"]
  node_cart["Cart and checkout"]
  node_payment["Payment"]
  node_account["Account and orders"]
  node_finance["Returns and reviews"]
end

subgraph group_seller["Seller workspace"]
  node_seller_workspace["Seller operations"]
end

subgraph group_admin["Administration"]
  node_admin_workspace["Admin operations"]
end

subgraph group_platform["Shared platform"]
  node_api_client["API client<br/>[client.ts]"]
  node_layouts["Layouts and UI"]
  node_query_boundary["Query states<br/>[QueryBoundary.tsx]"]
  node_i18n["Localization<br/>[index.ts]"]
  node_session["Session bootstrap<br/>[session.ts]"]
end

node_visitor(("Shopper"))
node_seller_actor(("Seller"))
node_admin_actor(("Administrator"))
node_backend["Pegasus API"]

node_app_entry -->|"mounts"| node_router
node_app_entry -->|"bootstraps"| node_session
node_app_entry -.->|"provides app context"| node_layouts
node_router -->|"dispatches"| node_public_routes
node_router -->|"dispatches"| node_auth_routes
node_router -->|"dispatches"| node_seller_routes
node_router -->|"dispatches"| node_admin_routes
node_public_routes -->|"loads pages"| node_home
node_public_routes -->|"loads pages"| node_catalog
node_public_routes -->|"guards pages"| node_auth_feature
node_auth_routes -->|"loads pages"| node_auth_feature
node_seller_routes -->|"role guards"| node_auth_feature
node_seller_routes -->|"loads pages"| node_seller_workspace
node_admin_routes -->|"role guards"| node_auth_feature
node_admin_routes -->|"loads pages"| node_admin_workspace
node_visitor -.->|"browses"| node_public_routes
node_seller_actor -.->|"opens workspace"| node_seller_routes
node_admin_actor -.->|"opens console"| node_admin_routes
node_home -.->|"requests data"| node_api_client
node_catalog -.->|"requests data"| node_api_client
node_auction -.->|"requests data"| node_api_client
node_cart -.->|"requests data"| node_api_client
node_payment -.->|"requests data"| node_api_client
node_account -.->|"requests data"| node_api_client
node_finance -.->|"requests data"| node_api_client
node_seller_workspace -.->|"requests data"| node_api_client
node_admin_workspace -.->|"requests data"| node_api_client
node_api_client -->|"calls API"| node_backend
node_cart -.->|"continues checkout"| node_payment
node_payment -.->|"records purchase"| node_account
node_account -.->|"opens after-sales"| node_finance
node_seller_workspace -.->|"manages auctions"| node_auction
node_public_routes -.->|"uses layouts"| node_layouts
node_admin_routes -.->|"uses layouts"| node_layouts
node_seller_routes -.->|"uses layouts"| node_layouts
node_query_boundary -->|"renders states"| node_layouts
node_session -.->|"restores session"| node_backend

click node_app_entry "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/main.tsx"
click node_router "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/router.tsx"
click node_public_routes "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/public.routes.tsx"
click node_auth_routes "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/auth.routes.tsx"
click node_seller_routes "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/seller.routes.tsx"
click node_admin_routes "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/admin.routes.tsx"
click node_auth_feature "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/auth"
click node_home "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/home"
click node_catalog "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/catalog"
click node_auction "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/auction"
click node_cart "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/cart"
click node_payment "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/payment"
click node_account "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/account"
click node_finance "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/finance"
click node_seller_workspace "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/seller"
click node_admin_workspace "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/admin"
click node_api_client "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/lib/api/client.ts"
click node_layouts "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/components/layout"
click node_query_boundary "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/components/common/QueryBoundary.tsx"
click node_i18n "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/lib/i18n/index.ts"
click node_session "https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/lib/api/session.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_entry,node_router,node_public_routes,node_auth_routes,node_seller_routes,node_admin_routes toneBlue
class node_home,node_catalog,node_auction toneAmber
class node_auth_feature,node_cart,node_payment,node_account,node_finance,node_backend toneMint
class node_seller_workspace toneRose
class node_admin_workspace,node_visitor,node_seller_actor,node_admin_actor toneIndigo
class node_api_client,node_layouts,node_query_boundary,node_i18n,node_session toneTeal
```

## Components

### App routing

- [Browser entry](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/main.tsx): `src/main.tsx`
- [Route dispatcher](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/router.tsx): `src/app/router.tsx`
- [Public routes](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/public.routes.tsx): `src/app/routes/public.routes.tsx`
- [Auth routes](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/auth.routes.tsx): `src/app/routes/auth.routes.tsx`
- [Seller routes](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/seller.routes.tsx): `src/app/routes/seller.routes.tsx`
- [Admin routes](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/app/routes/admin.routes.tsx): `src/app/routes/admin.routes.tsx`

### Marketplace

- [Home discovery](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/home): `src/features/home`
- [Catalog and listings](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/catalog): `src/features/catalog`
- [Auctions](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/auction): `src/features/auction`

### Buyer services

- [Sign-in and roles](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/auth): `src/features/auth`
- [Cart and checkout](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/cart): `src/features/cart`
- [Payment](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/payment): `src/features/payment`
- [Account and orders](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/account): `src/features/account`
- [Returns and reviews](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/finance): `src/features/finance`

### Seller workspace

- [Seller operations](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/seller): `src/features/seller`

### Administration

- [Admin operations](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/features/admin): `src/features/admin`

### Shared platform

- [API client](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/lib/api/client.ts): `src/lib/api/client.ts`
- [Layouts and UI](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/tree/main/src/components/layout): `src/components/layout`
- [Query states](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/components/common/QueryBoundary.tsx): `src/components/common/QueryBoundary.tsx`
- [Localization](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/lib/i18n/index.ts): `src/lib/i18n/index.ts`
- [Session bootstrap](https://github.com/mudst-2026-pegasus/pegasus-tcg-web/blob/main/src/lib/api/session.ts): `src/lib/api/session.ts`

### Other components

- **Shopper**
- **Seller**
- **Administrator**
- **Pegasus API**

## Connections

- Browser entry → Route dispatcher: mounts (evidence: `src/main.tsx`)
- Browser entry → Session bootstrap: bootstraps (evidence: `src/main.tsx`)
- Browser entry → Layouts and UI: provides app context
- Route dispatcher → Public routes: dispatches (evidence: `src/app/router.tsx`)
- Route dispatcher → Auth routes: dispatches (evidence: `src/app/router.tsx`)
- Route dispatcher → Seller routes: dispatches (evidence: `src/app/router.tsx`)
- Route dispatcher → Admin routes: dispatches (evidence: `src/app/router.tsx`)
- Public routes → Home discovery: loads pages (evidence: `src/app/routes/public.routes.tsx`)
- Public routes → Catalog and listings: loads pages (evidence: `src/app/routes/public.routes.tsx`)
- Public routes → Sign-in and roles: guards pages (evidence: `src/app/routes/public.routes.tsx`)
- Auth routes → Sign-in and roles: loads pages (evidence: `src/app/routes/auth.routes.tsx`)
- Seller routes → Sign-in and roles: role guards (evidence: `src/app/routes/seller.routes.tsx`)
- Seller routes → Seller operations: loads pages (evidence: `src/app/routes/seller.routes.tsx`)
- Admin routes → Sign-in and roles: role guards (evidence: `src/app/routes/admin.routes.tsx`)
- Admin routes → Admin operations: loads pages (evidence: `src/app/routes/admin.routes.tsx`)
- Shopper → Public routes: browses
- Seller → Seller routes: opens workspace
- Administrator → Admin routes: opens console
- Home discovery → API client: requests data
- Catalog and listings → API client: requests data
- Auctions → API client: requests data
- Cart and checkout → API client: requests data
- Payment → API client: requests data
- Account and orders → API client: requests data
- Returns and reviews → API client: requests data
- Seller operations → API client: requests data
- Admin operations → API client: requests data
- API client → Pegasus API: calls API
- Cart and checkout → Payment: continues checkout
- Payment → Account and orders: records purchase
- Account and orders → Returns and reviews: opens after-sales
- Seller operations → Auctions: manages auctions
- Public routes → Layouts and UI: uses layouts (evidence: `src/app/routes/public.routes.tsx`)
- Admin routes → Layouts and UI: uses layouts
- Seller routes → Layouts and UI: uses layouts
- Query states → Layouts and UI: renders states (evidence: `src/components/common/QueryBoundary.tsx`)
- Session bootstrap → Pegasus API: restores session