# vinicius-santos-luz/jungle-nft-marketplace architecture

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

- Interactive diagram: https://gitdiagram.com/vinicius-santos-luz/jungle-nft-marketplace
- Repository: https://github.com/vinicius-santos-luz/jungle-nft-marketplace

## Overview

KURIO is a React NFT marketplace demo backed by simulated APIs, not a production blockchain or payment system. The main journey runs from catalog search and filtering to NFT detail, cart, authenticated checkout, and order status. Separate account capabilities cover favorites, profile, and wallet management. The shared API client and MSW mock layer support these flows, including price, payment, and network simulations. Some route and mock implementations were not sampled; their inclusion and connections rely on README statements or the source index.

Main entry points: [`src/lib/api.ts`](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/lib/api.ts) (Marketplace API Client), [`src/routeTree.gen.ts`](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routeTree.gen.ts) (Route Registry), [`src/routes/index.tsx`](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/index.tsx) (NFT Catalog), [`src/lib/auth.tsx`](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/lib/auth.tsx) (Session Provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shopping["Marketplace Journey"]
  node_catalog["NFT Catalog<br/>[index.tsx]"]
  node_card["NFT Cards<br/>[NftCard.tsx]"]
  node_artwork["NFT Artwork<br/>[NftArtwork.tsx]"]
  node_detail["NFT Detail<br/>[nft.$id.tsx]"]
  node_cart["Shopping Cart<br/>[cart.tsx]"]
  node_checkout["Checkout<br/>[checkout.tsx]"]
  node_orders["Order Status<br/>[order.$id.tsx]"]
end

subgraph group_account["Collector Account"]
  node_authui["Login and Register<br/>[AuthModal.tsx]"]
  node_auth["Session Provider<br/>[auth.tsx]"]
  node_favorites["Favorites<br/>[favorites.tsx]"]
  node_profile["Collector Profile<br/>[profile.tsx]"]
  node_wallets["Wallet Management<br/>[wallets.tsx]"]
  node_sidebar["Collector Sidebar"]
end

subgraph group_runtime["Application Runtime"]
  node_app["React Bootstrap<br/>[main.tsx]"]
  node_routes["Route Registry<br/>[routeTree.gen.ts]"]
  node_shell["Marketplace Shell<br/>[Shell.tsx]"]
end

subgraph group_services["API and Simulation"]
  node_api["Marketplace API Client<br/>[api.ts]"]
  node_models["Domain Models<br/>[models.ts]"]
  node_mocks["Mock API and Events"]
end

node_visitor(("Shopper"))

node_visitor -->|"browses"| node_catalog
node_app -->|"loads routes"| node_routes
node_app -->|"provides session"| node_auth
node_app -->|"starts worker"| node_mocks
node_routes -->|"registers route"| node_catalog
node_routes -->|"registers route"| node_cart
node_routes -->|"registers route"| node_checkout
node_routes -->|"registers route"| node_detail
node_routes -->|"registers route"| node_orders
node_routes -->|"registers route"| node_favorites
node_routes -->|"registers route"| node_profile
node_routes -->|"registers route"| node_wallets
node_shell -->|"renders home"| node_catalog
node_catalog -->|"loads listings"| node_api
node_catalog -->|"renders results"| node_card
node_card -->|"renders artwork"| node_artwork
node_card -->|"updates favorites"| node_api
node_detail -->|"loads NFT"| node_api
node_detail -->|"renders artwork"| node_artwork
node_cart -->|"manages cart"| node_api
node_checkout -->|"quotes and orders"| node_api
node_checkout -->|"requires session"| node_auth
node_orders -->|"loads order"| node_api
node_authui -->|"signs in"| node_auth
node_auth -->|"manages session"| node_api
node_favorites -->|"manages favorites"| node_api
node_profile -->|"updates profile"| node_api
node_profile -->|"renders navigation"| node_sidebar
node_wallets -->|"manages wallets"| node_api
node_wallets -->|"renders navigation"| node_sidebar
node_api -->|"uses types"| node_models
node_api -->|"uses simulated APIs"| node_mocks
node_shell -->|"refreshes live state"| node_api

click node_app "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/main.tsx"
click node_routes "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routeTree.gen.ts"
click node_shell "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/Shell.tsx"
click node_catalog "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/index.tsx"
click node_card "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/NftCard.tsx"
click node_artwork "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/NftArtwork.tsx"
click node_detail "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/nft.%24id.tsx"
click node_cart "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/cart.tsx"
click node_checkout "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/checkout.tsx"
click node_orders "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/order.%24id.tsx"
click node_authui "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/AuthModal.tsx"
click node_auth "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/lib/auth.tsx"
click node_favorites "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/favorites.tsx"
click node_profile "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/profile.tsx"
click node_wallets "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/wallets.tsx"
click node_sidebar "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/CollectorSidebar.tsx"
click node_api "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/lib/api.ts"
click node_models "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/lib/models.ts"
click node_mocks "https://github.com/vinicius-santos-luz/jungle-nft-marketplace/tree/main/src/mocks"

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_catalog,node_card,node_artwork,node_detail,node_cart,node_checkout,node_orders toneBlue
class node_authui,node_auth,node_favorites,node_profile,node_wallets,node_sidebar toneAmber
class node_app,node_routes,node_shell toneMint
class node_api,node_models,node_mocks toneRose
class node_visitor toneIndigo
```

## Components

### Marketplace Journey

- [NFT Catalog](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/index.tsx): `src/routes/index.tsx`
- [NFT Cards](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/NftCard.tsx): `src/components/NftCard.tsx`
- [NFT Artwork](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/NftArtwork.tsx): `src/components/NftArtwork.tsx`
- [NFT Detail](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/nft.%24id.tsx): `src/routes/nft.$id.tsx`
- [Shopping Cart](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/cart.tsx): `src/routes/cart.tsx`
- [Checkout](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/checkout.tsx): `src/routes/checkout.tsx`
- [Order Status](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/order.%24id.tsx): `src/routes/order.$id.tsx`

### Collector Account

- [Login and Register](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/AuthModal.tsx): `src/components/AuthModal.tsx`
- [Session Provider](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/lib/auth.tsx): `src/lib/auth.tsx`
- [Favorites](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/favorites.tsx): `src/routes/favorites.tsx`
- [Collector Profile](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/profile.tsx): `src/routes/profile.tsx`
- [Wallet Management](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routes/wallets.tsx): `src/routes/wallets.tsx`
- [Collector Sidebar](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/CollectorSidebar.tsx): `src/components/CollectorSidebar.tsx`

### Application Runtime

- [React Bootstrap](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/main.tsx): `src/main.tsx`
- [Route Registry](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/routeTree.gen.ts): `src/routeTree.gen.ts`
- [Marketplace Shell](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/components/Shell.tsx): `src/components/Shell.tsx`

### API and Simulation

- [Marketplace API Client](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/lib/api.ts): `src/lib/api.ts`
- [Domain Models](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/blob/main/src/lib/models.ts): `src/lib/models.ts`
- [Mock API and Events](https://github.com/vinicius-santos-luz/jungle-nft-marketplace/tree/main/src/mocks): `src/mocks`

### Other components

- **Shopper**

## Connections

- Shopper → NFT Catalog: browses (evidence: `README.md`)
- React Bootstrap → Route Registry: loads routes (evidence: `src/main.tsx`)
- React Bootstrap → Session Provider: provides session (evidence: `src/main.tsx`)
- React Bootstrap → Mock API and Events: starts worker (evidence: `src/main.tsx`)
- Route Registry → NFT Catalog: registers route (evidence: `src/routeTree.gen.ts`)
- Route Registry → Shopping Cart: registers route (evidence: `src/routeTree.gen.ts`)
- Route Registry → Checkout: registers route (evidence: `src/routeTree.gen.ts`)
- Route Registry → NFT Detail: registers route (evidence: `src/routeTree.gen.ts`)
- Route Registry → Order Status: registers route (evidence: `src/routeTree.gen.ts`)
- Route Registry → Favorites: registers route (evidence: `src/routeTree.gen.ts`)
- Route Registry → Collector Profile: registers route (evidence: `src/routeTree.gen.ts`)
- Route Registry → Wallet Management: registers route (evidence: `src/routeTree.gen.ts`)
- Marketplace Shell → NFT Catalog: renders home (evidence: `src/components/Shell.tsx`)
- NFT Catalog → Marketplace API Client: loads listings (evidence: `src/routes/index.tsx`)
- NFT Catalog → NFT Cards: renders results (evidence: `src/routes/index.tsx`)
- NFT Cards → NFT Artwork: renders artwork (evidence: `src/components/NftCard.tsx`)
- NFT Cards → Marketplace API Client: updates favorites (evidence: `src/components/NftCard.tsx`)
- NFT Detail → Marketplace API Client: loads NFT (evidence: `src/routes/nft.$id.tsx`)
- NFT Detail → NFT Artwork: renders artwork (evidence: `src/routes/nft.$id.tsx`)
- Shopping Cart → Marketplace API Client: manages cart (evidence: `src/routes/cart.tsx`)
- Checkout → Marketplace API Client: quotes and orders (evidence: `src/routes/checkout.tsx`)
- Checkout → Session Provider: requires session (evidence: `src/routes/checkout.tsx`)
- Order Status → Marketplace API Client: loads order (evidence: `src/routes/order.$id.tsx`)
- Login and Register → Session Provider: signs in (evidence: `src/components/AuthModal.tsx`)
- Session Provider → Marketplace API Client: manages session (evidence: `src/lib/auth.tsx`)
- Favorites → Marketplace API Client: manages favorites (evidence: `src/routes/favorites.tsx`)
- Collector Profile → Marketplace API Client: updates profile (evidence: `src/routes/profile.tsx`)
- Collector Profile → Collector Sidebar: renders navigation (evidence: `src/routes/profile.tsx`)
- Wallet Management → Marketplace API Client: manages wallets (evidence: `src/routes/wallets.tsx`)
- Wallet Management → Collector Sidebar: renders navigation (evidence: `src/routes/wallets.tsx`)
- Marketplace API Client → Domain Models: uses types (evidence: `src/lib/api.ts`)
- Marketplace API Client → Mock API and Events: uses simulated APIs (evidence: `README.md`)
- Marketplace Shell → Marketplace API Client: refreshes live state (evidence: `src/components/Shell.tsx`)