How vinicius-santos-luz/jungle-nft-marketplace works
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: api.ts Marketplace API Client · routeTree.gen.ts Route Registry · index.tsx NFT Catalog · auth.tsx Session Provider
Components 20
Marketplace Journey
- NFT Catalog
src/routes/index.tsx - NFT Cards
src/components/NftCard.tsx - NFT Artwork
src/components/NftArtwork.tsx - NFT Detail
src/routes/nft.$id.tsx - Shopping Cart
src/routes/cart.tsx - Checkout
src/routes/checkout.tsx - Order Status
src/routes/order.$id.tsx
Collector Account
- Login and Register
src/components/AuthModal.tsx - Session Provider
src/lib/auth.tsx - Favorites
src/routes/favorites.tsx - Collector Profile
src/routes/profile.tsx - Wallet Management
src/routes/wallets.tsx - Collector Sidebar
src/components/CollectorSidebar.tsx
Application Runtime
- React Bootstrap
src/main.tsx - Route Registry
src/routeTree.gen.ts - Marketplace Shell
src/components/Shell.tsx
API and Simulation
- Marketplace API Client
src/lib/api.ts - Domain Models
src/lib/models.ts - Mock API and Events
src/mocks
Other components
- Shopper
Connections 33
- Shopper → NFT Catalog: browses
README.md - React Bootstrap → Route Registry: loads routes
src/main.tsx - React Bootstrap → Session Provider: provides session
src/main.tsx - React Bootstrap → Mock API and Events: starts worker
src/main.tsx - Route Registry → NFT Catalog: registers route
src/routeTree.gen.ts - Route Registry → Shopping Cart: registers route
src/routeTree.gen.ts - Route Registry → Checkout: registers route
src/routeTree.gen.ts - Route Registry → NFT Detail: registers route
src/routeTree.gen.ts - Route Registry → Order Status: registers route
src/routeTree.gen.ts - Route Registry → Favorites: registers route
src/routeTree.gen.ts - Route Registry → Collector Profile: registers route
src/routeTree.gen.ts - Route Registry → Wallet Management: registers route
src/routeTree.gen.ts - Marketplace Shell → NFT Catalog: renders home
src/components/Shell.tsx - NFT Catalog → Marketplace API Client: loads listings
src/routes/index.tsx - NFT Catalog → NFT Cards: renders results
src/routes/index.tsx - NFT Cards → NFT Artwork: renders artwork
src/components/NftCard.tsx - NFT Cards → Marketplace API Client: updates favorites
src/components/NftCard.tsx - NFT Detail → Marketplace API Client: loads NFT
src/routes/nft.$id.tsx - NFT Detail → NFT Artwork: renders artwork
src/routes/nft.$id.tsx - Shopping Cart → Marketplace API Client: manages cart
src/routes/cart.tsx - Checkout → Marketplace API Client: quotes and orders
src/routes/checkout.tsx - Checkout → Session Provider: requires session
src/routes/checkout.tsx - Order Status → Marketplace API Client: loads order
src/routes/order.$id.tsx - Login and Register → Session Provider: signs in
src/components/AuthModal.tsx - Session Provider → Marketplace API Client: manages session
src/lib/auth.tsx - Favorites → Marketplace API Client: manages favorites
src/routes/favorites.tsx - Collector Profile → Marketplace API Client: updates profile
src/routes/profile.tsx - Collector Profile → Collector Sidebar: renders navigation
src/routes/profile.tsx - Wallet Management → Marketplace API Client: manages wallets
src/routes/wallets.tsx - Wallet Management → Collector Sidebar: renders navigation
src/routes/wallets.tsx - Marketplace API Client → Domain Models: uses types
src/lib/api.ts - Marketplace API Client → Mock API and Events: uses simulated APIs
README.md - Marketplace Shell → Marketplace API Client: refreshes live state
src/components/Shell.tsx