How akkarawins/audtlist works
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: App.jsx Routes and access · ProfilePageArtist.jsx Artist dashboard · api.js REST API client · AuthContext.jsx Authentication state
Components 28
App and discovery
- Routes and access
src/App.jsx - Landing experience
src/pages/LandingPage.jsx - Product search
src/components/common/SearchBar.jsx - Help center
src/pages/HelpPage.jsx - Site navigation
src/components/common/Nav.jsx - Site footer
src/components/common/Footer.jsx
Marketplace and orders
- Shop browsing
src/shop/pages/ShopPage.jsx - Product details
src/shop/pages/ProductDetailPage.jsx - Cart
src/shop/components/cart/CartDrawer.jsx - Cart state
src/shop/context/CartContext.jsx - Checkout
src/shop/pages/CheckoutPage.jsx - Order submission
src/shop/components/checkout/OrderSubmissionProcessor.jsx - Order history and confirmation
src/shop/pages/OrderConfirmedPage.jsx
Artist tools
- Artist dashboard
src/shop/pages/ProfilePageArtist.jsx - Artist storefront
src/shop/pages/ArtistPage.jsx - Release and merch uploads
src/components/UploadSingleForm.jsx - Upload validation
src/utils/uploadValidation.js
Identity and state
- Authentication state
src/shop/context/AuthContext.jsx - REST API client
src/lib/api.js - Audtlist backend
- Fulfillment state
src/contexts/FulfillmentContext.jsx
Audio and live
- Persistent audio
src/contexts/AudioContext.jsx - Shop audio player
src/shop/context/AudioPlayerContext.jsx - Live stream
src/shop/pages/LivePage.jsx - Live chat
src/shop/components/LiveChat.jsx - Realtime socket
src/lib/socket.js
Other components
- Fan / buyer
- Artist
Connections 32
- Fan / buyer → Routes and access: opens
src/App.jsx - Artist → Routes and access: opens
src/App.jsx - Routes and access → Landing experience: routes to
src/App.jsx - Routes and access → Shop browsing: routes to
src/App.jsx - Routes and access → Artist storefront: routes to
src/App.jsx - Routes and access → Artist dashboard: routes to
src/App.jsx - Routes and access → Live stream: routes to
src/App.jsx - Routes and access → Authentication state: provides
src/App.jsx - Routes and access → Fulfillment state: provides
src/App.jsx - Shop browsing → Product details: selects
- Product search → REST API client: queries
src/components/common/SearchBar.jsx - Cart → Cart state: uses
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
src/shop/pages/ProfilePageArtist.jsx - Artist dashboard → Release and merch uploads: opens
src/shop/pages/ProfilePageArtist.jsx - Release and merch uploads → Upload validation: validates
src/components/UploadSingleForm.jsx - Artist dashboard → Fulfillment state: reads status
src/shop/pages/ProfilePageArtist.jsx - Authentication state → REST API client: calls
src/shop/context/AuthContext.jsx - REST API client → Audtlist backend: sends requests
src/lib/api.js - Authentication state → Realtime socket: disconnects
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
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