# akkarawins/audtlist architecture

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

- Interactive diagram: https://gitdiagram.com/akkarawins/audtlist
- Repository: https://github.com/akkarawins/audtlist

## Overview

Audtlist is a React marketplace for independent artists, covering music and merchandise sales, artist tools, and live streams. The user journey runs from browsing and previewing releases to cart and checkout; artists can register, manage profiles, and upload releases or merch. The graph also shows authentication, persistent audio, and live interaction as supporting layers. Routes and several integrations are documented or visible in excerpts; some shop and landing-page implementation details were not sampled, so those links are marked unverified or omitted.

Main entry points: [`src/App.jsx`](https://github.com/akkarawins/audtlist/blob/main/src/App.jsx) (Routes and access), [`src/shop/pages/ProfilePageArtist.jsx`](https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/ProfilePageArtist.jsx) (Artist dashboard), [`src/lib/api.js`](https://github.com/akkarawins/audtlist/blob/main/src/lib/api.js) (REST API client), [`src/shop/context/AuthContext.jsx`](https://github.com/akkarawins/audtlist/blob/main/src/shop/context/AuthContext.jsx) (Authentication state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and discovery"]
  node_app_routes["Routes and access<br/>[App.jsx]"]
  node_landing["Landing experience<br/>[LandingPage.jsx]"]
  node_search["Product search<br/>[SearchBar.jsx]"]
  node_help["Help center<br/>[HelpPage.jsx]"]
  node_common_nav["Site navigation<br/>[Nav.jsx]"]
  node_common_footer["Site footer<br/>[Footer.jsx]"]
end

subgraph group_commerce["Marketplace and orders"]
  node_shop_browse["Shop browsing<br/>[ShopPage.jsx]"]
  node_product_detail["Product details"]
  node_cart["Cart<br/>[CartDrawer.jsx]"]
  node_cart_state["Cart state<br/>[CartContext.jsx]"]
  node_checkout["Checkout<br/>[CheckoutPage.jsx]"]
  node_order_process["Order submission"]
  node_order_result["Order history and confirmation"]
end

subgraph group_artist["Artist tools"]
  node_artist_profile["Artist dashboard"]
  node_artist_storefront["Artist storefront<br/>[ArtistPage.jsx]"]
  node_upload_forms["Release and merch uploads"]
  node_upload_validation["Upload validation"]
end

subgraph group_identity["Identity and state"]
  node_auth["Authentication state<br/>[AuthContext.jsx]"]
  node_api["REST API client<br/>[api.js]"]
  node_backend["Audtlist backend"]
  node_fulfillment["Fulfillment state"]
end

subgraph group_media["Audio and live"]
  node_audio_global["Persistent audio<br/>[AudioContext.jsx]"]
  node_audio_shop["Shop audio player"]
  node_live["Live stream<br/>[LivePage.jsx]"]
  node_live_chat["Live chat<br/>[LiveChat.jsx]"]
  node_socket["Realtime socket<br/>[socket.js]"]
end

node_fan(("Fan / buyer"))
node_artist_actor(("Artist"))

node_fan -->|"opens"| node_app_routes
node_artist_actor -->|"opens"| node_app_routes
node_app_routes -->|"routes to"| node_landing
node_app_routes -->|"routes to"| node_shop_browse
node_app_routes -->|"routes to"| node_artist_storefront
node_app_routes -->|"routes to"| node_artist_profile
node_app_routes -->|"routes to"| node_live
node_app_routes -->|"provides"| node_auth
node_app_routes -->|"provides"| node_fulfillment
node_shop_browse -.->|"selects"| node_product_detail
node_search -->|"queries"| node_api
node_cart -->|"uses"| node_cart_state
node_checkout -.->|"submits through"| node_order_process
node_order_process -.->|"creates order"| node_backend
node_backend -.->|"returns order"| node_order_result
node_artist_profile -->|"loads profile"| node_api
node_artist_profile -->|"opens"| node_upload_forms
node_upload_forms -->|"validates"| node_upload_validation
node_artist_profile -->|"reads status"| node_fulfillment
node_auth -->|"calls"| node_api
node_api -.->|"sends requests"| node_backend
node_auth -->|"disconnects"| node_socket
node_fan -.->|"adds items"| node_cart
node_fan -.->|"purchases"| node_checkout
node_artist_actor -.->|"manages releases"| node_artist_profile
node_audio_global -->|"wraps app"| node_app_routes
node_live -.->|"shows chat"| node_live_chat
node_live_chat -.->|"exchanges messages"| node_socket
node_landing -->|"uses playback"| node_audio_global
node_product_detail -.->|"previews audio"| node_audio_shop
node_app_routes -.->|"includes navigation"| node_common_nav
node_app_routes -.->|"includes footer"| node_common_footer

click node_app_routes "https://github.com/akkarawins/audtlist/blob/main/src/App.jsx"
click node_landing "https://github.com/akkarawins/audtlist/blob/main/src/pages/LandingPage.jsx"
click node_search "https://github.com/akkarawins/audtlist/blob/main/src/components/common/SearchBar.jsx"
click node_help "https://github.com/akkarawins/audtlist/blob/main/src/pages/HelpPage.jsx"
click node_shop_browse "https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/ShopPage.jsx"
click node_product_detail "https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/ProductDetailPage.jsx"
click node_cart "https://github.com/akkarawins/audtlist/blob/main/src/shop/components/cart/CartDrawer.jsx"
click node_cart_state "https://github.com/akkarawins/audtlist/blob/main/src/shop/context/CartContext.jsx"
click node_checkout "https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/CheckoutPage.jsx"
click node_order_process "https://github.com/akkarawins/audtlist/blob/main/src/shop/components/checkout/OrderSubmissionProcessor.jsx"
click node_order_result "https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/OrderConfirmedPage.jsx"
click node_artist_profile "https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/ProfilePageArtist.jsx"
click node_artist_storefront "https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/ArtistPage.jsx"
click node_upload_forms "https://github.com/akkarawins/audtlist/blob/main/src/components/UploadSingleForm.jsx"
click node_upload_validation "https://github.com/akkarawins/audtlist/blob/main/src/utils/uploadValidation.js"
click node_auth "https://github.com/akkarawins/audtlist/blob/main/src/shop/context/AuthContext.jsx"
click node_api "https://github.com/akkarawins/audtlist/blob/main/src/lib/api.js"
click node_fulfillment "https://github.com/akkarawins/audtlist/blob/main/src/contexts/FulfillmentContext.jsx"
click node_audio_global "https://github.com/akkarawins/audtlist/blob/main/src/contexts/AudioContext.jsx"
click node_audio_shop "https://github.com/akkarawins/audtlist/blob/main/src/shop/context/AudioPlayerContext.jsx"
click node_live "https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/LivePage.jsx"
click node_live_chat "https://github.com/akkarawins/audtlist/blob/main/src/shop/components/LiveChat.jsx"
click node_socket "https://github.com/akkarawins/audtlist/blob/main/src/lib/socket.js"
click node_common_nav "https://github.com/akkarawins/audtlist/blob/main/src/components/common/Nav.jsx"
click node_common_footer "https://github.com/akkarawins/audtlist/blob/main/src/components/common/Footer.jsx"

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_routes,node_landing,node_search,node_help,node_common_nav,node_common_footer toneBlue
class node_shop_browse,node_product_detail,node_cart,node_cart_state,node_checkout,node_order_process,node_order_result toneAmber
class node_artist_profile,node_artist_storefront,node_upload_forms,node_upload_validation toneMint
class node_auth,node_api,node_backend,node_fulfillment toneRose
class node_audio_global,node_audio_shop,node_live,node_live_chat,node_socket,node_fan,node_artist_actor toneIndigo
```

## Components

### App and discovery

- [Routes and access](https://github.com/akkarawins/audtlist/blob/main/src/App.jsx): `src/App.jsx`
- [Landing experience](https://github.com/akkarawins/audtlist/blob/main/src/pages/LandingPage.jsx): `src/pages/LandingPage.jsx`
- [Product search](https://github.com/akkarawins/audtlist/blob/main/src/components/common/SearchBar.jsx): `src/components/common/SearchBar.jsx`
- [Help center](https://github.com/akkarawins/audtlist/blob/main/src/pages/HelpPage.jsx): `src/pages/HelpPage.jsx`
- [Site navigation](https://github.com/akkarawins/audtlist/blob/main/src/components/common/Nav.jsx): `src/components/common/Nav.jsx`
- [Site footer](https://github.com/akkarawins/audtlist/blob/main/src/components/common/Footer.jsx): `src/components/common/Footer.jsx`

### Marketplace and orders

- [Shop browsing](https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/ShopPage.jsx): `src/shop/pages/ShopPage.jsx`
- [Product details](https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/ProductDetailPage.jsx): `src/shop/pages/ProductDetailPage.jsx`
- [Cart](https://github.com/akkarawins/audtlist/blob/main/src/shop/components/cart/CartDrawer.jsx): `src/shop/components/cart/CartDrawer.jsx`
- [Cart state](https://github.com/akkarawins/audtlist/blob/main/src/shop/context/CartContext.jsx): `src/shop/context/CartContext.jsx`
- [Checkout](https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/CheckoutPage.jsx): `src/shop/pages/CheckoutPage.jsx`
- [Order submission](https://github.com/akkarawins/audtlist/blob/main/src/shop/components/checkout/OrderSubmissionProcessor.jsx): `src/shop/components/checkout/OrderSubmissionProcessor.jsx`
- [Order history and confirmation](https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/OrderConfirmedPage.jsx): `src/shop/pages/OrderConfirmedPage.jsx`

### Artist tools

- [Artist dashboard](https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/ProfilePageArtist.jsx): `src/shop/pages/ProfilePageArtist.jsx`
- [Artist storefront](https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/ArtistPage.jsx): `src/shop/pages/ArtistPage.jsx`
- [Release and merch uploads](https://github.com/akkarawins/audtlist/blob/main/src/components/UploadSingleForm.jsx): `src/components/UploadSingleForm.jsx`
- [Upload validation](https://github.com/akkarawins/audtlist/blob/main/src/utils/uploadValidation.js): `src/utils/uploadValidation.js`

### Identity and state

- [Authentication state](https://github.com/akkarawins/audtlist/blob/main/src/shop/context/AuthContext.jsx): `src/shop/context/AuthContext.jsx`
- [REST API client](https://github.com/akkarawins/audtlist/blob/main/src/lib/api.js): `src/lib/api.js`
- **Audtlist backend**
- [Fulfillment state](https://github.com/akkarawins/audtlist/blob/main/src/contexts/FulfillmentContext.jsx): `src/contexts/FulfillmentContext.jsx`

### Audio and live

- [Persistent audio](https://github.com/akkarawins/audtlist/blob/main/src/contexts/AudioContext.jsx): `src/contexts/AudioContext.jsx`
- [Shop audio player](https://github.com/akkarawins/audtlist/blob/main/src/shop/context/AudioPlayerContext.jsx): `src/shop/context/AudioPlayerContext.jsx`
- [Live stream](https://github.com/akkarawins/audtlist/blob/main/src/shop/pages/LivePage.jsx): `src/shop/pages/LivePage.jsx`
- [Live chat](https://github.com/akkarawins/audtlist/blob/main/src/shop/components/LiveChat.jsx): `src/shop/components/LiveChat.jsx`
- [Realtime socket](https://github.com/akkarawins/audtlist/blob/main/src/lib/socket.js): `src/lib/socket.js`

### Other components

- **Fan / buyer**
- **Artist**

## Connections

- Fan / buyer → Routes and access: opens (evidence: `src/App.jsx`)
- Artist → Routes and access: opens (evidence: `src/App.jsx`)
- Routes and access → Landing experience: routes to (evidence: `src/App.jsx`)
- Routes and access → Shop browsing: routes to (evidence: `src/App.jsx`)
- Routes and access → Artist storefront: routes to (evidence: `src/App.jsx`)
- Routes and access → Artist dashboard: routes to (evidence: `src/App.jsx`)
- Routes and access → Live stream: routes to (evidence: `src/App.jsx`)
- Routes and access → Authentication state: provides (evidence: `src/App.jsx`)
- Routes and access → Fulfillment state: provides (evidence: `src/App.jsx`)
- Shop browsing → Product details: selects
- Product search → REST API client: queries (evidence: `src/components/common/SearchBar.jsx`)
- Cart → Cart state: uses (evidence: `src/shop/components/cart/CartDrawer.jsx`)
- Checkout → Order submission: submits through
- Order submission → Audtlist backend: creates order
- Audtlist backend → Order history and confirmation: returns order
- Artist dashboard → REST API client: loads profile (evidence: `src/shop/pages/ProfilePageArtist.jsx`)
- Artist dashboard → Release and merch uploads: opens (evidence: `src/shop/pages/ProfilePageArtist.jsx`)
- Release and merch uploads → Upload validation: validates (evidence: `src/components/UploadSingleForm.jsx`)
- Artist dashboard → Fulfillment state: reads status (evidence: `src/shop/pages/ProfilePageArtist.jsx`)
- Authentication state → REST API client: calls (evidence: `src/shop/context/AuthContext.jsx`)
- REST API client → Audtlist backend: sends requests (evidence: `src/lib/api.js`)
- Authentication state → Realtime socket: disconnects (evidence: `src/shop/context/AuthContext.jsx`)
- Fan / buyer → Cart: adds items
- Fan / buyer → Checkout: purchases
- Artist → Artist dashboard: manages releases
- Persistent audio → Routes and access: wraps app (evidence: `src/main.jsx`)
- Live stream → Live chat: shows chat
- Live chat → Realtime socket: exchanges messages
- Landing experience → Persistent audio: uses playback
- Product details → Shop audio player: previews audio
- Routes and access → Site navigation: includes navigation
- Routes and access → Site footer: includes footer