Add web examples (#13797)

Author: dylanjeffers

package.json

@@ -33,6 +33,7 @@
     "web:stage": "npm run start:stage -w @audius/web",
     "web:e2e": "npm run test:e2e -w @audius/web",
     "web:test": "turbo run test --filter=@audius/web",
+    "web:example:trending": "cd packages/web/examples/trending && npm run dev",
     "DESKTOP====================================": "",
     "desktop:dev": "concurrently -k 'BROWSER=none npm run start:dev -w @audius/web' 'wait-on http://0.0.0.0:3000 && npm run electron:localhost -w @audius/web -- 3000'",
     "desktop:prod": "concurrently -k 'BROWSER=none npm run start:prod -w @audius/web' 'wait-on http://0.0.0.0:3002 && npm run electron:localhost -w @audius/web -- 3002'",
@@ -50,6 +51,8 @@
     "mobile:example:trending": "cd packages/mobile/examples/trending && npx expo start",
     "mobile:example:auth-sign-in": "cd packages/mobile/examples/auth-sign-in && npx expo start",
     "mobile:example:authenticated-writes": "cd packages/mobile/examples/authenticated-writes && npx expo start",
+    "mobile:example:like-repost": "cd packages/mobile/examples/like-repost && npx expo start",
+    "mobile:example:upload": "cd packages/mobile/examples/upload && npx expo start",
     "EMBED======================================": "",
     "embed:prod": "npm run start:prod -w embed",
     "embed:stage": "npm run start:stage -w embed",

packages/web/examples/README.md

@@ -0,0 +1,27 @@
+# Web Examples
+
+Runnable examples for building Audius-style web features (Vite + React). Use these when implementing **SDK setup**, **trending/read APIs**, or similar capabilities so that AIs and developers can find reference implementations quickly.
+
+## Available examples
+
+| Example | Description | How to run |
+|--------|-------------|------------|
+| [trending](./trending/) | **Vite + React**: SDK setup + trending tracks (mirrors mobile trending example). | From repo root: `cd packages/web/examples/trending && npm install && npm run dev` or `npm run web:example:trending`. Build SDK first: `npm run build -w @audius/sdk`. |
+
+## Quick start
+
+From the **apps repo root**:
+
+```bash
+npm install
+npm run build -w @audius/sdk
+cd packages/web/examples/trending
+npm install
+npm run dev
+```
+
+Open the URL shown (default `http://localhost:5174`).
+
+## Keywords (for search / AI)
+
+SDK setup, Vite, React, trending tracks, getTrendingTracks, Audius SDK, web example, React Query.

packages/web/examples/trending/README.md

@@ -0,0 +1,55 @@
+# Trending (Web)
+
+Minimal Vite + React app that renders **trending tracks** from Audius. Use this as a reference for:
+
+- **SDK setup** in a browser / Vite app (singleton, node polyfills)
+- **Fetching trending** via `sdk.tracks.getTrendingTracks()`
+- **Track artwork** with mirror fallback (try next CDN on image error)
+- **Play** via `sdk.tracks.getTrackStreamUrl()` + HTML5 `Audio`
+- **React Query** for caching and loading state
+
+Mirrors the [mobile trending example](../../mobile/examples/trending/): same SDK usage and hook shape, with a simple list UI.
+
+## How to run
+
+1. From the **apps repo root**, install and build the SDK if needed:
+
+   ```bash
+   npm install
+   npm run build -w @audius/sdk
+   ```
+
+2. Install the example's dependencies and start Vite:
+
+   ```bash
+   cd packages/web/examples/trending
+   npm install
+   npm run dev
+   ```
+
+   Or from repo root: `npm run web:example:trending` (run `npm install` in the example dir first).
+
+3. Open the URL shown (default `http://localhost:5174`).
+
+## Project layout
+
+| File | Purpose |
+|------|---------|
+| `index.html` | Entry HTML; script loads `src/main.tsx`. |
+| `src/main.tsx` | Mounts `App` into `#root`. |
+| `src/sdk.ts` | Singleton `getSDK()` — `sdk({ appName: 'AudiusWebExample' })`. |
+| `src/hooks/useTrendingTracks.ts` | React Query hook calling `getSDK().tracks.getTrendingTracks({ limit, offset, time })`. |
+| `src/App.tsx` | Renders trending list with artwork, play button, loading/error. Wraps app in `QueryClientProvider`. |
+| `src/components/TrackArtworkImage.tsx` | Track cover image with **mirror fallback**: on load error, tries `artwork.mirrors` by swapping host. |
+| `src/utils/artwork.ts` | `getArtworkUrl(artwork, size)`, `getNextMirrorUrl(url, mirrors)` for CDN fallback. |
+| `vite.config.ts` | React plugin + node polyfills (buffer, process) for SDK. |
+
+## Keywords (for search / AI)
+
+SDK setup, Vite, React, trending tracks, getTrendingTracks, Audius SDK, web example, node polyfills, singleton SDK, React Query.
+
+## Source of truth (implementation)
+
+- **SDK factory:** `packages/sdk/src/sdk/sdk.ts` — `sdk(config)` with `appName` (and optional `services`, `apiKey`, etc.).
+- **Tracks API:** `packages/sdk` — `getTrendingTracks(params)`.
+- **Mobile counterpart:** `packages/mobile/examples/trending/` — same pattern for Expo.

packages/web/examples/trending/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Trending on Audius – Web Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>